Визуальные эффекты в играх определяют их общий вид и игровой процесс. Игроков привлекает высокое качество изображения, которое генерирует больше трафика и достижений. Это ключ к созданию игр, которые в последствии будут пользоваться успехом, и обеспечению хорошего настроения игроков.
В этой статье я хочу представить вам несколько идей о том, как реализовать различные визуальные эффекты в играх, разработанных на HTML5, основанных на <canvas>. Эти примеры будут основаны на эффектах, которые мы сделали в нашей игре, Skytte. Я объясню основные идеи, поддерживающие их, и расскажу об эффектах, используемых в нашей работе.
Что вы узнаете?
Прежде, чем мы начнем, я хочу рассказать о том, что вы узнаете из этой статьи:
- Базовая конструкция игры
Мы посмотрим на модели, которые обычно используются для создания игр и игровых эффектов, такие как: игровые петли, спрайты, коллизии и системы частиц.
- Базовая реализация визуальных эффектов
Мы также изучим теорию и примеры кода, поддерживающие эти шаблоны.
Общие закономерности
Давайте начнем с некоторых общих закономерностей и элементов, используемых в разработке игр.
Спрайты
Это просто 2-D изображения, которые представляют объекты в игре. Спрайты могут быть использованы, как для статических объектов, так и для анимированных, где каждый спрайт представляет собой кадр из последовательной анимации. Они также могут быть использованы для изготовления элементов пользовательского интерфейса.
Обычно игры содержат от десятков до сотен спрайтов. Чтобы уменьшить использование памяти и мощность процессора, необходимой для обработки этих изображений, многие игры используют спрайт листы.
Спрайт листы
Их используют для группирования набора отдельных спрайтов в одном изображении. Это уменьшает количество файлов в игре, что приводит к снижению использования памяти и мощности процессора. Спрайт листы содержат множество одиночных спрайтов, сложенных рядом друг с другом в строки и столбцы, и как спрайты, которые в них входят, их можно использовать как статически, так и для для анимации.
Игровые петли
Важно понимать, что игровые объекты на самом деле не двигаются на экране. Иллюзия движения достигается путем отображения моментального снимка игрового мира на экране, и продвижением игрового времени в небольшом количестве (обычно 1/60 секунды), и в повторном отображении. Это в буквальном смысле эффект стоп-движения, который используется как в 2-D ,так и в 3-D играх. Игровая петля представляет собой механизм, который реализует это стоп-движение. Это основной компонент, необходимый для запуска игры. Он работает непрерывно в течение долгого времени, выполняя различные задания. На каждой итерации он обрабатывает пользовательский ввод, перемещает объекты, проверяет коллизии, и отображает игру (желательно в таком порядке). Он также контролирует время игры, используемое между кадрами.
Высоких конверсий!
