Компьютерные игры-платформеры

Компьютерные игры-платформеры

Данки Конг, Братья Марио, Ежик Соник и Хитросплетение ― все эти широко известные, популярные игры представляют собой платформеры. Одно время на долю платформеров приходилось до трети всех продаж видеоигр. Сегодня их доля рынка существенно уже, но успешных платформеров все еще много.

Однако вознаграждение это дается не легко ― даже наоборот. Для создания игр, особенно видеоигр, требуется нетривиальное знание программирования, хорошее владение графикой и анимацией и недюжинные математические способности в сочетании с искусством и творчеством. И это только начало. Успешные разработчики тратят массу времени на полировку своих игр, оттачивая геймплей и графику, не говоря уже о многих аспектах игры, которые не имеют ничего общего с геймплеем, — таких как табло, инструкции, анимации в промежутках между жизнями и уровнями и последовательности эндгейма.

Цель этого цикла статей ― показать, как создать видеоигру на HTML5, чтобы читатель смог продолжать самостоятельно.

About this series

Видеоролик «Об этом цикле статей» ― вот расшифровка стенограммы.

Игра: Snail Bait

В этом цикле статей я покажу, как создать видеоигру-платформер, главным образом с помощью API Canvas HTML5. Это игра Snail Bait (средство от улиток), которая показана на рисунке 1. В нее можно поиграть в онлайне (см. ссылку в разделе Ресурсы). Убедитесь, что ваш браузер поддерживает аппаратное ускорение Canvas (оно совсем недавно реализовано в большинстве браузеров, в том числе в Chrome, начиная с версии 18); в противном случае Snail Bait будет работать крайне медленно. (См. боковик Производительность HTML5 Canvas.)

Рисунок 1. Игра Snail Bait в браузере Chrome

Технологии HTML5, используемые в Snail Bait

• Canvas (2D API)
• Управление синхронизацией в анимациях на основе сценариев
• Звук
• CSS3 (переходы и обращение к устройствам)

Snail Bait представляет собой классический платформер. Персонаж, которого я буду называть просто бегун, бежит и скачет между плавучих платформ, которые движутся горизонтально. Конечная цель бегуна ― добраться до пульсирующей платформы с золотой кнопкой в конце уровня. Бегун, пульсирующая платформа и золотая кнопка показаны на рисунке 1.

Игрок управляет бегуном с клавиатуры: клавиша d перемещает его влево, клавиша k ― право, клавиши j и f заставляют подпрыгнуть, а клавиша p приостанавливает игру.

В начале игры вам даются три жизни. Слева над холстом игры отображаются значки с изображением бегуна, указывающие количество оставшихся жизней, как видно на рисунке 1. На своем пути бегун должен увертываться от монстров — пчел, летучих мышей и улитки — пытаясь при этом схватить ценные предметы - монеты, рубины и сапфиры. Если бегун сталкивается с монстрами, он лопается, и вы теряете жизнь, возвращаясь в начало уровня. Когда бегун подбирает предметы, ваш счет увеличивается, и вы получаете вознаграждение в виде приятной мелодии.

WASD?

Для управления видеоиграми часто используют клавиши w, a, s и d. Это соглашение появилось главным образом потому, что оно позволяет правшам использовать мышь и клавиатуру одновременно. К тому же правая рука остается свободной для нажатия пробела или клавиш-модификаторов, таких как CTRL и ALT. Snail Bait не использует WASD, потому что не принимает сигналы от мыши и клавиш-модификаторов. Но код игры легко изменить так, чтобы использовать любую комбинацию клавиш.

Монстры в основном просто висят и ждут, пока бегун натолкнется на них. Однако улитка периодически бросается ядрами (серебряное ядро вблизи центра на рисунке 1). Эти ядра, как и монстры, взрывают бегуна, когда настигают его.

Игра заканчивается одним из двух способов: либо вы теряете все три жизни, либо достигаете пульсирующей платформы (с бонусными очками за нажатие на золотую кнопку). В любом случае игра заканчивается титрами, показанными на рисунке 2.

Рисунок 2. Сообщение об авторах игры

Чего не видно на рисунке 1, так это того, что всё — за исключением бегуна, чьим движением вы управляете, — постоянно движется. Это движение делает Snail Bait не просто платформером, а сайд-скроллером. Однако не только это движение в игре привело меня к спрайтам и их манипуляторам.

В начало

Спрайты: действующие лица

Replica Island

Идея поведения спрайтов — которая служит примером модели проектирования "Стратегия" — исходит от Replica Island, популярного платформера с открытым исходным кодом для Android. Большинство графики Snail Bait взято из Replica Island (используется с разрешения). См. в разделе Ресурсы ссылку на статью Википедии о модели проектирования "Стратегия" и на главную страницу проекта Replica Island.

Это независимое движение ― один из многих манипуляторов спрайтов. У спрайтов могут быть и другие манипуляторы, не связанные с движением; например, помимо подпрыгивания, рубины и сапфиры искрятся.

Каждый спрайт имеет свой набор манипуляторов. Манипулятор — это просто объект с методом execute(). В каждом кадре анимации игра вызывает метод execute() каждого манипулятора. В этом методе манипуляторы определенным образом управляют соответствующими спрайтами в зависимости от условий игры. Например, при нажатии клавиши k для перемещения бегуна вправо манипулятор бегуна горизонтальное перемещение последовательно перемещает бегуна вправо в каждом кадре анимации до тех пор, пока вы не измените направление. Другой манипулятор ― бег на месте ― периодически изменяет изображение бегуна, имитируя бег на месте. В совокупности эти два манипулятора производят впечатление бега влево или вправо.

В таблице 1 перечислены спрайты игры и соответствующие манипуляторы (поведение).

Таблица 1. Спрайты и манипуляторы Snail Bait

Спрайт	Поведение
Платформы	Перемещаются горизонтально (все спрайты, за исключением бегуна и ядер улитки, движутся синхронно с платформами)
Бегун	Бег на месте Горизонтальное перемещение Прыжок Падение Столкновение с монстрами/вредными предметами и взрыв Столкновение с полезными предметами и получение очков
Пчелы и летучие мыши (монстры)	Парят Машут крыльями
Кнопки	Снуют Лопаются Взрывают монстров или завершают уровень.
Монеты, рубины и сапфиры	Сверкают Подпрыгивают Снуют
Улитки	Снуют Бросают ядра
Ядра улиток	Движутся вправо и влево (быстрее, чем платформы) Сталкиваются с бегуном и исчезают

Мы подробно рассмотрим спрайты и манипуляторы в последующих статьях этого цикла. Пока же, чтобы дать вам общее представление, в листинге 1 показано, как игра создает спрайт бегуна.

Листинг 1. Создание спрайтов

var runInPlace = { // Просто объект с методом execute execute: function (sprite, time, fps) { // Обновление атрибутов спрайта на основе времени и частоты кадров }}; var runner = new Sprite('runner', // имя                   runnerPainter, // построитель                   [ runInPlace,... ]); // манипуляторы

 

Объект runInPlace определяется и передается конструктору спрайта бегуна вместе с другими манипуляторами. Пока тот бежит, игра в каждом кадре анимации вызывает метод execute() объекта runInPlace.

В начало

Свободно доступные ресурсы

Большинству разработчиков игр требуется некоторая помощь с графикой, звуковыми эффектами и музыкой. К счастью, множество ресурсов свободно доступно по различным лицензионным соглашениям.

В Snail Bait используются:

• звуковые эффекты из freesound.org;
• саундтрек из soundclick.com;
• спрайт бегуна из panelmonkey.org (сайт взломан);
• вся остальная графика из Replica Island.

На протяжении этого цикла статей я буду давать практические рекомендации по разработке игр и начну с пятерки, специфической для HTML5:

• приостановка игры, когда окно теряет фокус;
• обратный отсчет времени, когда окно восстанавливает фокус;
• использование переходов CSS3;
• обнаружение и реагирование на медленное исполнение игры;
• включение социальных функций.

Я рассмотрю эту пятерку рекомендаций подробно в последующих статьях цикла; пока же вкратце пробежимся по каждому из них.

В начало

Статистика кода Snail Bait

Число строк кода:

• HTML: 276;
• CSS: 410;
• JavaScript: 3898.

Игра Snail Bait реализована на базе HTML, CSS и JavaScript; как видно из врезки Статистика кода Snail Bait, большая часть кода ― это JavaScript. Остальные статьи этого цикла посвящены главным образом JavaScript ― с отдельными вылазками в сторону HTML и CSS3.

На рисунке 8 показаны элементы HTML и соответствующие CSS для самой игры, без HTML и CSS других элементов, таких как сообщения и заключительные титры.

Рисунок 8. Код HTML и CSS игры (без объявлений и надписей)

Код CSS в основном ничем не примечателен, за исключением нескольких интересных атрибутов, которые я подчеркнул на рисунке 8. Во-первых, я установил значение 0 auto атрибута margin элемента wrapper, что означает, что оболочка и все, что внутри нее, центрируется в окне по горизонтали. Во-вторых, положение элементов lives и sound-and-music имеет значение absolute. Если оставить значение по умолчанию relative, то эти элементы DIV развернутся до ширины холста и заслонят своих соседей (счет и инструкции соответственно). Наконец, классы CSS keys и explanation имеют атрибут inline, чтобы соответствующие элементы размещались в той же строке.

В листинге 2 показан код CSS, соответствующий рисунку 8.

Листинг 2. game.CSS (фрагмент)

#arena { text-align: center; padding: 5px; width: 805px; height: 445px;} #copyright { margin-top: -35px; float: right; margin-right: 12px; padding: 2px; color: blue; text-shadow: 1px 1px 1px rgba(255,255,255,0.7); font-size: 0.8em;}.explanation { color: #ff0; text-shadow: 1px 1px 1px rgba(0,0,0,1.0); display: inline; margin-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 2px;} #game-canvas { border: 2px inset rgba(0,0,80,0.62); -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;} #instructions { height: 30px; margin-right: 8px; padding-top: 6px; padding-left: 25px; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; color: #ff0; font-size: 1.05em; opacity: 1.0;}.keys { color: blue; text-shadow: 1px 1px 1px rgba(255,255,0,1.0); background: rgba(0,0,0,0.1); border: thin solid rgba(0,0,0,0.20); border-radius: 5px; margin-left: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; display: inline;} #sound-and-music { position: absolute; top: 495px; margin-left: 10px; color: #ff0; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); background: rgba(0,0,0,0.1); border-radius: 5px; border: thin solid rgba(0,0,0,0.20); padding-top: 2px; padding-bottom: 2px; z-index: 1;} #wrapper { margin: 0 auto; margin-top: 20px; padding: 5px; width: 817px; height: 520px;}

 

Как видно из листинга 3, который содержит код HTML, соответствующий рисунку 8, HTML-код игры ― это набор элементов DIV и холстов с несколькими изображениями и парой флажков.

Листинг 3. game.html (фрагмент)

<!DOCTYPE html><html> <!-- Head........................................................--> <head> <title>Snail Bait</title> </head> <!-- Body........................................................--> <body> <!-- Wrapper..................................................--> <div id='wrapper'>    <!-- Header.................................................-->     <div id='header'>       <div id='lives'>          <img id='life-icon-left' src='images/runner-small.png'/>          <img id='life-icon-middle' src='images/runner-small.png'/>          <img id='life-icon-right' src='images/runner-small.png'/>       </div>        <div id='score'>0</div>           <div id='fps'></div>    </div>     <!-- Arena..................................................-->     <div id='arena'>       <!-- The game canvas.....................................-->        <canvas id='game-canvas' height='400'>           Your browser does not support HTML5 Canvas.        </canvas>        <!-- Sound and music.....................................-->        <div id='sound-and-music'>          <div class='checkbox-div'>             Sound <input id='sound-checkbox'                             type='checkbox' checked/>          </div>           <div class='checkbox-div'>             Music <input id='music-checkbox'                                   type='checkbox' checked/>          </div>       </div>        <!-- Instructions........................................-->        <div id='instructions'>          <div class='keys'>             d / k              <div class='explanation'>                move left/right             </div>          </div>           <div class='keys'>             f / j              <div class='explanation'>                jump             </div>          </div>           <div class='keys'>             p              <div class='explanation'>                pause              </div>          </div>       </div>        <!-- Copyright...........................................-->        <div id='copyright'> В©2012 David Geary</div>    </div> </div> <!-- JavaScript................................................--> <script src='js/stopwatch.js'></script> <script src='js/animationTimer.js'></script> <script src='js/sprites.js'></script> <script src='js/requestNextAnimationFrame.js'></script> <script src='js/behaviors/bounce.js'></script> <script src='js/behaviors/cycle.js'></script> <script src='js/behaviors/pulse.js'></script> <script src='game.js'></script> </body></html>

 

Элемент canvas ― это место, где происходит все действие. Холст содержит 2D-контекст с мощным API для реализации 2D-игр и прочих вещей. Текст внутри элемента canvas представляет собой страховочный текст, который браузер отображает только в том случае, если он не поддерживает Canvas HTML5.

Одно заключительное замечание о коде HTML и CSS игры: обратите внимание, что ширина и высота холста указывается атрибутами элемента canvas width и height. Эти атрибуты относятся как к размеру элемента canvas, так и к размеру поверхности рисунка, содержащейся в этом элементе.

С другой стороны, размер элемента canvas можно установить, только используя CSS для задания его ширины и высоты. Поле рисунка сохраняет свою ширину и высоту по умолчанию в 300 и 150 пикселей соответственно. Это означает, что соответствия между размером элемента canvas и размером поля его рисунка, скорее всего, не будет, и браузер изменит масштаб поля рисунка под размер элемента. Чаще всего это нежелательно, поэтому лучше задать размер элемента canvas с помощью CSS.

В начало

В начало

В следующей статье

Следующую статью этого цикла я начну с обзора 2D-API контекста холста, а затем расскажу об анимации и приведении предметов в движение при помощи прокрутки фона. Вы увидите, как реализовать параллакс, чтобы платформа казалась ближе, чем фон, и как сделать так, чтобы спрайты двигались с постоянной скоростью независимо от частоты кадров анимации. До скорой встречи.

 

В начало

Загрузка

Описание	Имя	Размер	Метод загрузки
Код фона и персонажа Snail Bait	j-html5-game1.zip	718 КБ	HTTP

Информация о методах загрузки

 

Ресурсы

• Оригинал статьи: HTML5 2D game development: Introducing Snail Bait.
• Core HTML5 Canvas: (David Geary, Prentice Hall, 2012): широкий обзор API Canvas и разработки игр в книге Дэвида Гири. Посетите также сопутствующий Web-сайт и блог.
• Snail Bait: играйте в Snail Bait в онлайне на любом браузере с поддержкой HTML5 (лучше всего подойдет Chrome версии 18 и выше).
• Умопомрачительные приложения с применением Canvas HTML5: выступление Дэвида Гири на конференции Strange Loop-2011.
• Разработка 2D в HTML5: выступление Дэвида Гири на конференции норвежских разработчиков NDC-2011.
• Платформеры: читайте о платформерах в Википедии.
• Сайд-скроллеры: читайте о сайд-скроллерах в Википедии.
• Стратегия: статья в Википедии о данной модели проектирования.
• Криминальное чтиво: читайте в Википедии о кинофильме, который являет собой один из лучших примеров нелинейного повествования.
• Основы HTML5: познакомьтесь с основами HTML5 на этом "пути к знаниям" developerWorks.

Об авторе

 

Дэвид Гири (David Geary), автор книги Core HTML5 Canvas, является также сооснователем группы пользователей HTML5 Денвера и автором восьми книг по Java-программированию, в том числе бестселлеров по Swing и JavaServer Faces. Дэвид часто выступает на конференциях, в том числе JavaOne, Devoxx, Strange Loop, NDC и OSCON, и трижды заслужил титул "рок-звезды JavaOne". Для developerWorks он написал циклы статей JSF 2 fu и GWT fu. За новостями Дэвида можно следить в Twitter: @davidgeary.

 

Компьютерные игры-платформеры

Данки Конг, Братья Марио, Ежик Соник и Хитросплетение ― все эти широко известные, популярные игры представляют собой платформеры. Одно время на долю платформеров приходилось до трети всех продаж видеоигр. Сегодня их доля рынка существенно уже, но успешных платформеров все еще много.

Однако вознаграждение это дается не легко ― даже наоборот. Для создания игр, особенно видеоигр, требуется нетривиальное знание программирования, хорошее владение графикой и анимацией и недюжинные математические способности в сочетании с искусством и творчеством. И это только начало. Успешные разработчики тратят массу времени на полировку своих игр, оттачивая геймплей и графику, не говоря уже о многих аспектах игры, которые не имеют ничего общего с геймплеем, — таких как табло, инструкции, анимации в промежутках между жизнями и уровнями и последовательности эндгейма.

Цель этого цикла статей ― показать, как создать видеоигру на HTML5, чтобы читатель смог продолжать самостоятельно.

About this series

Видеоролик «Об этом цикле статей» ― вот расшифровка стенограммы.

Игра: Snail Bait

В этом цикле статей я покажу, как создать видеоигру-платформер, главным образом с помощью API Canvas HTML5. Это игра Snail Bait (средство от улиток), которая показана на рисунке 1. В нее можно поиграть в онлайне (см. ссылку в разделе Ресурсы). Убедитесь, что ваш браузер поддерживает аппаратное ускорение Canvas (оно совсем недавно реализовано в большинстве браузеров, в том числе в Chrome, начиная с версии 18); в противном случае Snail Bait будет работать крайне медленно. (См. боковик Производительность HTML5 Canvas.)

Рисунок 1. Игра Snail Bait в браузере Chrome