Создание 2D игр на Phaser: пошаговое руководство

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение в Phaser и установка среды разработки

Phaser — это популярный фреймворк для создания 2D игр на JavaScript. Он предоставляет мощные инструменты для работы с графикой, анимацией и взаимодействием. Начнем с установки среды разработки, чтобы вы могли быстро приступить к созданию своей первой игры.

Кинга Идем в IT: пошаговый план для смены профессии

Установка Node.js и npm

Для работы с Phaser потребуется Node.js и npm (Node Package Manager). Node.js позволяет запускать JavaScript на сервере, а npm управляет пакетами, необходимыми для разработки. Скачайте и установите их с официального сайта Node.js. Убедитесь, что установка прошла успешно, выполнив команды:

Bash

Скопировать код

node -v
npm -v

Установка Phaser

Создайте новую папку для вашего проекта и откройте терминал в этой папке. Введите команду для инициализации нового проекта:

Bash

Скопировать код

npm init -y

Теперь установите Phaser, который будет основой вашего игрового проекта:

Bash

Скопировать код

npm install phaser

Настройка Webpack

Для удобства разработки используем Webpack, который позволяет собирать все модули и зависимости в один файл. Установите его и необходимые плагины:

Bash

Скопировать код

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

Создайте файл webpack.config.js и добавьте в него следующую конфигурацию. Этот файл определяет, как Webpack будет собирать ваш проект:

Скопировать код

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Создайте папку src и добавьте файлы index.js и index.html. Эти файлы будут основой вашего проекта:

HTML

Скопировать код

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phaser Game</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Скопировать код

// src/index.js
import Phaser from 'phaser';

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

const game = new Phaser.Game(config);

function preload() {
  // Загрузка ресурсов
}

function create() {
  // Создание объектов
}

function update() {
  // Обновление сцены
}

Запустите сервер разработки, чтобы увидеть результат:

Bash

Скопировать код

npx webpack serve

Создание первого проекта и настройка сцены

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

Настройка сцены

Добавим фон и основной игровой объект. В файле index.js обновите функцию preload для загрузки изображений. Это позволит вам использовать графику в вашей игре:

Скопировать код

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('star', 'assets/star.png');
}

Создайте папку assets и добавьте туда изображения sky.png и star.png. Эти изображения будут использоваться в вашей игре.

В функции create добавьте код для создания фона и звезды. Это создаст визуальные элементы на экране:

Скопировать код

function create() {
  this.add.image(400, 300, 'sky');
  const star = this.physics.add.image(400, 300, 'star');
  star.setCollideWorldBounds(true);
}

Добавление физики

Phaser поддерживает физические движки, такие как Arcade Physics. Добавим физику к звезде, чтобы она могла взаимодействовать с другими объектами:

Скопировать код

function create() {
  this.add.image(400, 300, 'sky');
  const star = this.physics.add.image(400, 300, 'star');
  star.setCollideWorldBounds(true);
  star.setBounce(0.8);
}

Работа с графикой и анимацией

Теперь добавим анимацию и взаимодействие с графикой. Это сделает вашу игру более живой и интересной.

Анимация

Добавим анимацию вращения звезды. В функции update добавьте код для вращения. Это создаст эффект вращения звезды:

Скопировать код

function update() {
  const star = this.physics.add.image(400, 300, 'star');
  star.rotation += 0.01;
}

Работа с текстурами

Phaser позволяет работать с текстурами и спрайтами. Добавим спрайт персонажа. В preload загрузите спрайт, который будет использоваться для анимации персонажа:

Скопировать код

this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });

Создайте анимацию в create. Это определит, как будет анимироваться персонаж:

Скопировать код

this.anims.create({
  key: 'left',
  frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
  frameRate: 10,
  repeat: -1
});

Добавьте персонажа и примените анимацию. Это создаст персонажа на экране и запустит анимацию:

Скопировать код

const player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
player.anims.play('left', true);

Добавление взаимодействия и управления

Теперь добавим управление персонажем с помощью клавиатуры. Это позволит игроку взаимодействовать с игрой.

Управление клавиатурой

Создайте объект для управления клавишами в create. Это позволит обрабатывать нажатия клавиш:

Скопировать код

this.cursors = this.input.keyboard.createCursorKeys();

Обновите функцию update для обработки нажатий клавиш. Это позволит персонажу двигаться в зависимости от нажатых клавиш:

Скопировать код

function update() {
  if (this.cursors.left.isDown) {
    player.setVelocityX(-160);
    player.anims.play('left', true);
  } else if (this.cursors.right.isDown) {
    player.setVelocityX(160);
    player.anims.play('right', true);
  } else {
    player.setVelocityX(0);
    player.anims.play('turn');
  }

  if (this.cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
  }
}

Добавление взаимодействия с объектами

Добавим платформы и взаимодействие с ними. В preload загрузите текстуру платформы:

Скопировать код

this.load.image('ground', 'assets/platform.png');

Создайте платформы в create. Это создаст объекты, с которыми персонаж сможет взаимодействовать:

Скопировать код

const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

Добавьте взаимодействие между игроком и платформами. Это позволит персонажу стоять на платформах и взаимодействовать с ними:

Скопировать код

this.physics.add.collider(player, platforms);

Финальные штрихи и публикация игры

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

Добавление звуков

Загрузите и добавьте звук в preload. Это позволит вам использовать звуковые эффекты в игре:

Скопировать код

this.load.audio('jump', 'assets/jump.mp3');

Проиграйте звук при прыжке. Это добавит звуковой эффект, когда персонаж прыгает:

Скопировать код

function update() {
  if (this.cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
    this.sound.play('jump');
  }
}

Оптимизация и сборка

Оптимизируйте игру, удалив ненужные файлы и комментарии. Соберите проект для публикации, чтобы он был готов к развертыванию:

Bash

Скопировать код

npx webpack --mode production

Публикация

Загрузите собранные файлы на ваш сервер или используйте платформы для хостинга игр, такие как itch.io или GitHub Pages. Это позволит вам поделиться своей игрой с другими.

Теперь у вас есть базовое понимание создания 2D игр на Phaser. Продолжайте экспериментировать и улучшать свои навыки! 🚀

Создание 2D игр на Phaser: пошаговое руководство

Пройдите тест, узнайте какой профессии подходите

Введение в Phaser и установка среды разработки

Установка Node.js и npm

Установка Phaser

Настройка Webpack

Создание первого проекта и настройка сцены

Настройка сцены

Добавление физики

Работа с графикой и анимацией

Анимация

Работа с текстурами

Добавление взаимодействия и управления

Управление клавиатурой

Добавление взаимодействия с объектами

Финальные штрихи и публикация игры

Добавление звуков

Оптимизация и сборка

Публикация

Читайте также