Создание видеоигры может показаться многим программистам необычным занятием. Хотя это выглядит так, многие бесплатные игровые инструменты стали доступны, и сделать видеоигру не так уж и сложно. Благодаря бесплатным программным средствам для разработки игр, игра, на создание которой раньше уходило год, теперь может быть создана за месяцы или дни. Есть несколько бесплатных игровых инструментов, таких как Construct 3, Game Maker Studio - 2, Unity, Godot Engine, Unreal Engine 4 и Phaser 3. В этой статье я собираюсь объяснить, как можно запрограммировать базовую игру, немного зная о ней. HTML 5 и Javascript.

Phaser

Phaser - это игровая среда HTML5, цель которой - помочь разработчикам очень быстро создавать мощные кросс-браузерные игры на HTML5. Он был создан специально, чтобы использовать преимущества современных браузеров, как настольных, так и мобильных. Единственное требование к браузеру - поддержка тега canvas.

Чтобы создать видеоигру, нам нужно использовать определенные ресурсы, о которых я вскоре расскажу. Кроме того, есть некоторые термины, связанные с игровым программным обеспечением, и я тоже объясню эти вещи.

Создание игр с использованием Phaser похоже на выбор некоторых объектов (ресурсов) и удержание их на месте, как мы можем видеть в начале видеоигры. Затем есть другие объекты (ресурсы), которые позволяют нам создавать анимацию, взаимодействующую с другими объектами.

  1. Изображения - это изображения, которые мы размещаем на игровом экране.
  2. Звуки - аудиоклипы используются для усиления эмоций игровых персонажей или в качестве фоновой музыки.
  3. Спрайты - это тоже изображения, но каждый спрайт представляет собой набор изображений, представляющих разные формы одного и того же изображения, для создания эффекта анимации.
  4. Физика: это физический движок (программное обеспечение), используемый в играх. Есть физические движки, такие как Impack и Matter, используемые другим игровым программным обеспечением, а Phaser использует Arcade.
  5. Группа статической физики - это набор предопределенных объектов, которые представляют объекты реального мира. Статическое тело просто имеет положение и размер. Его не касается гравитация, вы не можете задать ему скорость, и когда что-то сталкивается с ним, оно никогда не движется.
  6. Группа динамической физики - это набор предопределенных объектов, которые представляют объекты реального мира с анимацией. Динамическое тело может двигаться в разных направлениях, а также реагировать на взаимодействие с другими объектами в игре.
  7. Аркада: Аркада - это физический движок, используемый в Phaser. В Arcade Physics есть два типа физических тел: динамические и статические. Динамическое тело - это тело, которое может двигаться с помощью таких сил, как скорость или ускорение. Он может отскакивать и сталкиваться с другими объектами, и на это столкновение влияет масса тела и других элементов.

Имея эту информацию в руках, теперь мы готовы создать простую видеоигру. Давайте посмотрим на четыре этапа создания игры.

  1. Установите игровой движок Phaser

Загрузите игровой движок Phaser 3.23.0 (последняя версия на момент написания статьи), выполнив следующую команду:

npm install [email protected]

2. HTML-файл:

Нам нужно создать HTML-файл с основными атрибутами. Затем мы должны создать тег скрипта в области ‹head›, как указано ниже:

‹script src =” // cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js ”› ‹/script›

3. Javascript: В тегах ‹script› ‹/script› чуть выше закрывающего тега ‹/body› нам нужно написать код javascript, который запускает игру. Код состоит из нескольких частей, как указано ниже:

  1. Определите конфигурацию:
  2. Создайте необходимые переменные
  3. Создайте экземпляр игры Phaser
  4. Определите три основные функции, как описано ниже:

Preload () - здесь мы сохраним код, который предварительно загружает игровые объекты.

Create () - Здесь мы пишем код, который создает и загружает объекты

Update () - это место, где размещается код, который запускается и постоянно обновляет вид игры.

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

Теперь, имея в виду вышеизложенное, просмотрите полный список исходного кода игры ниже, чтобы получить представление о написании игры. Дальнейшее объяснение дается после листинга исходного кода.

Перед тем, как начать использовать этот код, загрузите необходимые ресурсы по приведенной ниже ссылке и храните их в папке «assets» в корневой папке.

  1. Небо - посетите ссылку https://opengameart.org/content/background-3 - это загружаемый zip-файл, содержащий несколько фонов. Вы можете использовать любой из них или storyboard6.png, который можно найти при распаковке zip-файла.
  2. Ground и 3. Dude - эти два актива можно загрузить по ссылке загрузить этот zip с URL-адреса https://phaser.io/tutorials/making-your-first-phaser-3-game/part1 » .

Вы можете загрузить ряд бесплатных ресурсов с «opengameart.org» или любого другого такого сайта, который вы можете найти, когда зайдете в Google.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo Video Game</title>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player;
var platforms;
var cursors;
var gameOver = false;
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('sky', 'assets/storyboard6.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
function create ()
{
this.add.image(400, 300, 'sky');
platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
//  Our player animations, turning, walking left and walking right.
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3    }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
//  Input Events
cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(player, platforms);
}
function update ()
{
if (gameOver)
{
return;
}
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
</script>
</body>
</html>

Теперь позвольте мне дать некоторые пояснения к приведенному выше коду. Сначала мы определили переменную config и добавили к ней некоторую конфигурационную информацию.

В информации о конфигурации свойство «тип» может иметь значение Phaser.CANVAS, Phaser.WEBGL или Phaser.AUTO. Это контекст рендеринга, который вы хотите использовать в своей игре. Рекомендуемое значение - Phaser.AUTO, которое автоматически пытается использовать WebGL, но, если браузер или устройство не поддерживает его, он вернется к Canvas. Элемент холста, который создает Phaser, будет просто добавлен к документу в момент вызова скрипта, но вы также можете указать родительский контейнер в конфигурации игры, если захотите.

Свойства ширины и высоты устанавливают размер элемента холста, который создаст Phaser. В данном случае 800 x 600 пикселей. Ваш игровой мир может иметь любой размер, но это разрешение, в котором будет отображаться игра. Затем мы определили «физику», которую мы используем в этой игре, с двумя свойствами, а именно гравитацией и отладкой. Затем мы предоставили информацию «сцены», в которой говорится, что в сцене есть три функции, и мы определили только одну сцену для этой игры. По мере роста игры нам нужно добавлять все больше и больше сцен, а также указывать, как игра переходит от одной сцены к другой.

Затем мы создали объект класса Phaser.Game. После этого мы определили три функции preload (), create () и update (), как упомянуто выше. Внутри create () есть еще три функции, которые определяют клавиши «влево», «вправо» и «поворот» для чувака. И есть еще одна переменная «курсоры», которая фиксирует движения клавиш со стрелками на клавиатуре.

Наконец, функция update () устанавливает движение чувака в зависимости от используемой клавиши со стрелкой.

Ресурсы: для этой игры я использовал следующие три ресурса. Вы можете загрузить их по указанному URL-адресу и хранить в папке с активами в корневой папке.

  1. Небо - https://opengameart.org/content/background-3 - это загружаемый zip-файл, содержащий несколько фонов. Вы можете использовать любой из них или storyboard6.png.
  2. Ground и 3. Dude - эти два актива можно загрузить по ссылке загрузить этот zip с URL-адреса https://phaser.io/tutorials/making-your-first-phaser-3-game/part1 » .
  3. Веб-сервер

Вам нужен веб-сервер, на котором можно загружать и запускать игру. Если вы используете VSCode, то у него есть встроенный веб-сервер, который выполнит эту работу.

Если вы успешно завершите этот крошечный проект, вы увидите следующий экран, когда откроется игра.

Заключение

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

Удачного кодирования :)

Радж