Визуальные эффекты в играх определяют их общий внешний вид и геймплей. Игроки привлекаются к высоким визуальным качествам, которые генерируют больше трафика и досягаемости. Это ключ для создания успешных игр и предоставления игрокам большого удовольствия.
В этой статье я хочу представить несколько идей о том, как реализовать различные визуальные эффекты в играх HTML5 на основе canvas. Эти примеры будут основаны на эффектах, которые мы сделали в нашей игре, Skytte. Я объясню основные идеи, поддерживающие их, и предоставит эффекты, используемые в нашей работе.

 

Визуальные эффекты в играх определяют их общий внешний вид и геймплей. Игроки привлекаются к высоким визуальным качествам, которые генерируют больше трафика и досягаемости. Это ключ для создания успешных игр и предоставления игрокам большого удовольствия.
В этой статье я хочу представить несколько идей о том, как реализовать различные визуальные эффекты в играх HTML5 на основе canvas. Эти примеры будут основаны на эффектах, которые мы сделали в нашей игре, Skytte. Я объясню основные идеи, поддерживающие их, и предоставит эффекты, используемые в нашей работе.

Что вы узнаете

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

Общие шаблоны

Начнем с некоторых общих шаблонов и элементов, используемых в разработке игр.
СПРИТЕС ЛИНК
Это просто двухмерные изображения, которые представляют собой объект в игре. Спрайты могут использоваться для статических объектов, но также анимированных объектов, когда каждый спрайт представляет собой кадр последовательной анимации. Они также могут использоваться для создания элементов пользовательского интерфейса.
Обычно игры содержат десятки и сотни спрайтов. Чтобы уменьшить использование памяти и вычислительную мощность, необходимую для обработки этих изображений, во многих играх используются спрайт-листы.
СПЕЦИАЛЬНЫЕ ЛИСТЫ
Они используются для группировки набора одиночных спрайтов на одном изображении. Это уменьшает количество файлов в игре, что приводит к уменьшению объема памяти и мощности обработки. Листы спрайтов содержат много одиночных спрайтов, расположенных рядом друг с другом в строках и столбцах, и подобно тому, как спрайты, которые они содержат, могут использоваться статически или для анимации.

GAME LOOPS LINK
Важно понимать, что игровые объекты действительно не движутся на экране. Иллюзия движения достигается путем создания моментального снимка игрового мира на экране, ускорения игрового времени на небольшое количество (обычно 1/60-е секунды), а затем визуализации вещей снова. Это буквально эффект остановки движения и используется как в двухмерных, так и в трехмерных играх. Игровой цикл — это механизм, который реализует это стоп-движение. Это основной компонент, необходимый для запуска игры. Он работает непрерывно со временем, выполняя различные задачи. На каждой итерации он обрабатывает ввод пользователя, перемещает объекты, проверяет наличие коллизий и отображает игру (желательно в этом порядке). Он также контролирует время игры, которое прошло между кадрами.
Ниже представлен очень простой игровой цикл в JavaScript:

var lastUpdate;

function tick() {
  var now = window.Date.now();

  if (lastUpdate) {
    var elapsed = (now-lastUpdate) / 1000;
    lastUpdate = now;

    // Update all game objects here.
    update(elapsed);
    // ...and render them somehow.
    render();
  } else {
    // Skip first frame, so elapsed is not 0.
    lastUpdate = now;
  }

  // This makes the `tick` function run 60 frames per second (or slower, depends on monitor's refresh rate).
  window.requestAnimationFrame(tick);
};

Обратите внимание, что приведенный выше пример очень упрощен. Он использует переменное дельта-время (истекшая переменная), и рекомендуется обновить этот код, чтобы использовать фиксированное время дельта. См. Эту статью для получения более подробной информации.
ОБНАРУЖЕНИЕ СВЯЗИ
Обнаружение столкновений относится к обнаружению пересечений между объектами. Это важно для многих игр, потому что оно используется, чтобы определить, попадает ли игрок в стену или пуля попадает в противника, и так далее. Когда обнаружено столкновение, его можно использовать для логики игры; Например, когда пуля попадает в игрока, показатель здоровья уменьшается на 10 пунктов.
Существует множество алгоритмов обнаружения столкновений, и поскольку это тяжелая работа, важно выбрать лучший метод с умом. Чтобы узнать больше об обнаружении столкновений, алгоритмах и способах их реализации, вот статья из MDN.
ЧАСТИЦЫ И СИСТЕМЫ СИСТЕМЫ ЧАСТИЦ
Частицы — это в основном спрайты, используемые системой частиц. В разработке игр система частиц представляет собой компонент, состоящий из излучателя частиц и частиц, назначенных этому эмиттеру. Он используется для моделирования различных эффектов, таких как огонь, взрывы, дым и эффекты дождя. Частицы испускаются со временем, и каждый эмиттер имеет свои собственные параметры для определения различных переменных, используемых для имитируемого эффекта, таких как скорость, цвет, время жизни или продолжительность частицы, гравитация, трение и скорость ветра.
EULER INTEGRATION LINK
Интеграл Эйлера является методом численного интегрирования уравнений движения. Позиция каждого объекта рассчитывается на основе его скорости, массы и силы и должна быть пересчитана для каждого тика в игровом цикле. Метод Эйлера является самым простым и полезным для игр, таких как шутер-прокрутка, но есть и другие методы, такие как интеграция с Verlet и интеграция с RK4, которые лучше подходят для других задач. Ниже я покажу простую реализацию идеи.
Вам нужна базовая структура для хранения позиции объекта, скорости и других данных, связанных с движением. Мы предлагаем две идентичные структуры, но каждая из которых имеет различное значение в мировом пространстве: точка и вектор. Обычно игровые движки используют какой-то векторный класс, но различие между точками и векторами очень важно и значительно улучшает читаемость кода (например, вы вычисляете расстояние не между двумя векторами, а две точки, что более естественно).
POINT LINK
Просто он представляет собой элемент в двумерном пространстве с координатами x и y, которые определяют, где точка находится в этом пространстве.

 

function point2(x, y) {
  return {'x': x || 0, 'y': y || 0};
}

ВЕКТОРНАЯ СВЯЗЬ
Вектор — это геометрический объект, имеющий длину (или величину) и направление. В двумерных играх векторы используются в основном для описания сил (например, силы тяжести, сопротивления воздуха и ветра) и скоростей, а также запрещения движений или отражения света от объекта. Векторы имеют много применений.

function vector2(x, y) {
  return {'x': x || 0, 'y': y || 0};
}

 

Вышеупомянутые функции создают новые двумерные векторы и точки. Внутри мы не используем новый оператор в этом случае в JavaScript, чтобы получить большую производительность. Также обратите внимание, что существуют некоторые сторонние библиотеки, которые можно использовать для управления векторами (glMatrix — хороший кандидат для этого).
Ниже следует некоторые очень общие функции, используемые на двумерных структурах, определенных выше. Сначала, вычисляя расстояние между двумя точками:

 

point2.distance = function(a, b) {
  // The x and y variables hold a vector pointing from point b to point a.
  var x = a.x - b.x;
  var y = a.y - b.y;
  // Now, distance between the points is just length (magnitude) of this vector, calculated like this:
  return Math.sqrt(x*x + y*y);
};

Величина (длина) вектора может быть вычислена непосредственно из последней строки вышеуказанной функции следующим образом:

vector2.length = function(vector) {
  return Math.sqrt(vector.x*vector.x + vector.y*vector.y);
};