Визуальные эффекты в games определить их внешний вид и чувствовать себя, и геймплей.Игроки привлекает высоким качеством изображения, которое генерировать больше трафика и достижения.Это ключ к созданию успешных игр и предоставление массу удовольствия для игроков .
В этой статье я хочу представить несколько идеи о том, как реализовать различные визуальные effects в <canvas>, базирующиеся HTML5 игр.Эти примеры будут основаны на эффектах, которые мы сделали в нашей игре, Skytte 1 .Я объясню основные идеи их поддержки и предоставить эффекты, используемые в нашей работе .
Что вы узнаете Link
Прежде, чем мы собираемся, я хочу изложить то, что я надеюсь, you’ узнаете из этой статьи:
- Основная Игра design
We’ буду смотреть на модели, которые обычно используются, чтобы сделать игры и игровые эффекты, такие как: игра петель, спрайты, столкновений и системы частиц . - Основные реализация визуального effects
Мы также будем изучать теорию и примеры кода, поддерживающие эти модели .
Общие Шаблоны Link
| Let__60 начнем с некоторых общих закономерностей и элементов используется в разработке игр .
Спрайты Link
Это просто 2-D изображения, которые представляют объект в игре.Спрайтов может быть использован для статических объектов, но и анимированных объектов, когда каждый Sprite представляет собой кадр последовательного анимации.Они также могут быть использованы для изготовления элементов пользовательского интерфейса .
Обычно игры содержат от десятков и сотен спрайтов.Чтобы уменьшить использование памяти и вычислительной мощности, необходимой для обработки этих изображений, многие игры используют спрайт sheets .
Sprite листы Link
Они используются для группирования набора отдельных спрайтов в одном изображении.Это уменьшает количество файлов в игре, что приводит к снижению использования памяти и вычислительной мощности.Sprite листов содержат множество одиночных спрайтов сложены рядом друг с другом в строках и столбцах, и как они содержат спрайтов можно использовать статически или для анимации .
Вот статьи из кодекса Web 3 , чтобы помочь вам лучше понять преимущества использования спрайтов листы .
Игры Петли Link
It’ Важно понимать, что игра объектов don’ т действительно двигаться на экране.Иллюзия движения достигается путем оказания снимок игрового мира, чтобы на экране, продвижение игрового времени небольшое количество (обычно 1/60 секунды), и затем делает вещи снова.Это в буквальном смысле эффект стоп-движения и используется в обоих 2-D и 3-D игр.Игра цикл является механизм, который реализует этот стоп-motion.Это основной компонент, необходимые для запуска игры.Он работает непрерывно в течение долгого времени, выполняя различные задания.На каждой итерации он обрабатывает пользовательский ввод, перемещает объекты, проверяет столкновения, и оказывает игру (желательно в таком порядке).Он также контролирует время игры, которая, прошедшее между рамы .
Ниже очень простой цикл игра в 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);
};
Обратите внимание, что в приведенном выше примере очень прост.Он использует переменную времени дельта (The elapsed переменная) и it’ ы рекомендуется обновить этот код, чтобы использовать фиксированное время дельта.См Эта статья для получения дополнительной details __26 | 4 .
Обнаружение коллизий Link
Обнаружение столкновений относится к нахождению пересечений между объектами.Это важно для многих игр, потому что это используется для обнаружения, если игрок попадает в стенку или пуля врага, и так далее.При обнаружении коллизии он может быть использован для игровой логики;например, когда пуля попадает в игрока, счет здоровья снижается на 10 пунктов .
Есть много алгоритмов обнаружения столкновений, и потому, что это работа тяжелая производительности, важно, чтобы выбрать лучший метод мудро.Чтобы узнать больше о столкновении обнаружения, алгоритмов и как они могут быть реализованы, вот статьи из MDN __40 | 5 .
Частиц и частиц системы Link
Частицы в основном спрайты, используемые в системе частиц.В разработке игры, система частиц является компонентом, который состоит из излучателя частиц и частиц, назначенногочто излучатель.Он используется для имитации различных эффектов, как огонь, взрывы, дым, и дождь эффекты.Частицы испускаются в течение долгого времени, и каждый излучатель имеет свои собственные параметры, чтобы определить различные переменные, используемые для имитации эффекта, например, скорость, цвет, particle’ S жизни или продолжительности, тяжести, трения и скорости ветра .
Эйлера интеграции Link
Интеграция Эйлера является метод численного интегрирования уравнений движения.Каждый object’ S позиция рассчитывается на основе его скорости, массы и силы, и должен быть пересчитан для каждого клеща в игровом цикле.Метод Эйлера является самым основным и полезно для игр, таких как боковые прокрутки стрелков, но есть и другие методы, такие как интеграция Верле и интеграции RK4, которые лучше для других задач.Ниже я покажу простую реализацию идеи .
Вы нужны базовые структуры провести object’ S положение, скорость и другие данные, связанные с движения.Мы предлагаем два одинаковых структур, но каждый с различным значением в world’ S пространства: точки и вектора.Обычно игровые движки использовать какой-то вектор класс, но различие между точками и векторами очень важно и значительно повышает читаемость кода (например, вы не рассчитать расстояние между двумя векторами, но два пункта, что более естественно) .
Точка Link
Просто, она представляет собой элемент в два dimmensional пространстве с | x__15 и y координаты, которые определяют, где точка находится в этом пространстве .
function point2(x, y) {
return {'x': x || 0, 'y': y || 0};
}Векторный Link
Вектор является геометрический объект, который имеет длину (или величины) и направление.В 2-D игры векторы используются в основном для описания силы (например, силы тяжести, сопротивления воздуха и ветер) и скорости, а также запрещающие движения или, как свет отражается от объекта.Векторы имеют множество применений .
function vector2(x, y) {
return {'x': x || 0, 'y': y || 0};
} Вышеуказанные функции создают новые двумерные векторы и точки.Внутренне мы don’ т использовать new оператор в этом случае в JavaScript для получения много работы.Также обратите внимание, что есть некоторые библиотеки сторонних доступные, что Вы могли использовать, чтобы манипулировать векторов ( glMatrix __28 | | 6__3 является хорошим кандидатом для этого) .
Что следует некоторые очень общие функции, используемые на двумерных структур, определенных выше.Во-первых, вычисления расстояния между двумя точками:
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);
};
7 Нормализация векторов также очень удобно.Функция ниже изменяет вектор, так что становится единичный вектор;то есть, его длина составляет 1, но его направление поддерживается .
vector2.normalize = function(vector) {
var length = vector2.length(vector);
if (length > 0) {
return vector2(vector.x / length, vector.y / length);
} else {
// zero-length vectors cannot be normalized, as they do not have direction.
return vector2();
}
};
9 Еще один полезный случай иметь единичный вектор, направление которого указывает из одного места в другое:
// Note that this function is different from `vector2.direction`.
// Please don't confuse them.
point2.direction = function(from, to) {
var x = to.x - from.x;
var y = to.y - from.y;
var length = Math.sqrt(x*x + y*y);
if (length > 0) {
return vector2(x / length, y / length);
} else {
// `from` and `to` are identical
return vector2();
}
};
Точка product это операция на двух векторов (обычно единичных векторов), который возвращает скалярное число, представляющее отношение между углами тех векторов .
vector2.dot = function(a, b) {
return a.x*b.x + a.y*b.y;
};
Скалярное произведение является длина вектора a проецируется на вектор b.Возвращаемое значение 1 означает, что оба вектора указывают в одном направлении.Значение -1 означает, что вектор a точки в противоположном направлении вектора b.Значение 0 означает, что вектор a перпендикулярно вектору b .
Here’ S пример класса сущности, таким образом, другие объекты могут наследовать от него.Только основные свойства, связанные с движением описаны .
function Entity() {
...
// Center of mass usually.
this.position = point2();
// Linear velocity.
// There is also something like angular velocity, not described here.
this.velocity = vector2();
// Acceleration could also be named `force`, like in the Box2D engine.
this.acceleration = vector2();
this.mass = 1;
...
}
Вы можете использовать пиксели или метров в качестве единицы в вашей игре.Мы рекомендуем вам использовать метров, а it’ легче сбалансировать вещи во время развития.Скорость, то, должно быть метров в секунду, и ускорение должно быть метров в секунду в квадрате .
При использовании сторонних физический движок, вы просто сохранить ссылку на физическом теле (или набор органов) в вашем классе сущностей.Затем, физический движок сохраняет указанные свойства, как положения и скорости, внутри каждого органа для вас .
Интеграция Основные Эйлера выглядит так:
acceleration = force / mass
velocity += acceleration
position += velocity
Код выше, должны быть выполнены в каждом кадре для каждого объекта в игре.Вот базовая реализация выше в JavaScript:
Entity.prototype.update = function(elapsed) {
// Acceleration is usually 0 and is set from the outside.
// Velocity is an amount of movement (meters or pixels) per second.
this.velocity.x += this.acceleration.x * elapsed;
this.velocity.y += this.acceleration.y * elapsed;
this.position.x += this.velocity.x * elapsed;
this.position.y += this.velocity.y * elapsed;
...
this.acceleration.x = this.acceleration.y = 0;
}
elapsedэто количество времени в секундах, прошедшее с последнего кадра (с момента последнего вызова этого метода).Для игр, работающих на скорости 60 кадров в секунду, elapsed значение, как правило, 1/60 секунды, что является 0,016 (6) с .
Статья на время дельта упоминалось ранее также охватывает это problem 11 .
Для перемещения объектов, вы можете изменить их ускорение или скорость.Две функции, показанные ниже, должны быть использованы для этой цели:
Entity.prototype.applyForce = function(force, scale) {
if (typeof scale === 'undefined') {
scale = 1;
}
this.acceleration.x += force.x * scale / this.mass;
this.acceleration.y += force.y * scale / this.mass;
};
Entity.prototype.applyImpulse = function(impulse, scale) {
if (typeof scale === 'undefined') {
scale = 1;
}
this.velocity.x += impulse.x * scale / this.mass;
this.velocity.y += impulse.y * scale / this.mass;
};
Для перемещения объекта на право вы могли бы сделать это:
// 10 meters per second in the right direction (x=10, y=0).
var right = vector2(10, 0);
if (keys.left.isDown)
// The -1 inverts a vector, i.e. the vector will point in the opposite direction,
// but maintain magnitude (length).
spaceShip.applyImpulse ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров