Технологии 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 не просто платформером, а сайд-скроллером. Однако не только это движение в игре привело меня к спрайтам и их манипуляторам.

В начало

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

Производительность Canvas HTML5

Не так давно в большинстве браузеров появилось аппаратное ускорение CSS-переходов, но для Canvas это еще не сделано. Canvas всегда работал относительно быстро, особенно по сравнению с другими графическими системами, такими как Scalable Vector Graphics (SVG), но без аппаратного ускорения Canvas далеко до того, что имеет поддерживает такое ускорение.

Теперь все современные браузеры аппаратно ускоряют элементы Canvas. Это делает даже iOS 5, что означает, что видеоигры с гладкой анимацией на основе Canvas теперь возможны не только на ПК, но и на мобильных устройствах Apple.

За исключением фона, все в Snail Bait представляет собой спрайты. Спрайт — это объект, который можно нарисовать на холсте игры. Спрайты просты в реализации, хотя и не являются частью API Canvas. Вот спрайты игры:

• платформы (неодушевленные объекты);
• бегун (персонаж);
• пчелы и летучие мыши (монстры);
• кнопки (полезные предметы);
• рубины и сапфиры (полезные предметы);
• монеты (полезные предметы);
• улитка (монстр);
• ядра улитки (вредные предметы).

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

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.

В начало