Разработка браузерных игр с использованием Phaser3, React, Typescript

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

Прежде всего, следует понимать, что разработка игр достаточно трудоемкий процесс. Как правило, он включает в себя как знание особенностей фронтенда, так и бекенда и всех сопутствующих серверных технологий, особенно, если речь идет о мультиплеерах. Кроме того, часто необходимо задумываться над производительностью, используемыми ресурсами, архитектурой и алгоритмами. Потребуется подкачать знание математики, геометрии, физики. Навыки художника, пусть и в минимальном объеме, тоже будут очень кстати. А если игра имеет коммерческую цель - то и маркетинг, анализ рынка пригодятся. В итоге, разработка игр позволяет прокачать свои навыки настолько, что любое собеседование или работа в коммерческой компании над различными веб - сервисами покажется легкой прогулкой. Тем более, что с игрой в портфолио вы будете выделяться среди других кандидатов на вакансии. Быть разработчиком игр - весело и круто.

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

Typescript
React
Webpack
HTML/CSS
Phaser3

Разумеется, помимо технических навыков следует вспомнить базовые понятия:

Математики
Физики
Компьютерной графики

Школьного уровня понимания этих предметов вполне достаточно. В качестве художественных материалов можно взять готовые ресурсы, спрайты, модели из других игр в свободном доступе, например warcraft 2.

Потому что на данный момент это самый часто используемый и активно развивающийся open-source фреймворк для разработки браузерных игр и интерактивных приложений на JavaScript/TypeScript

phaser.io

Phaser - A fast, fun and free open source HTML5 game framework

labs.phaser.io

Phaser 3.60 Examples

На официальных ресурсах Phaser можно найти бесчисленное количество примеров кода, игр и best-практик. Также среди достоинств: регулярные обновления и новые фичи, огромное комьюнити разработчиков, открытая и полная документация, доступны книги от создателя фреймворка Richard Davey @photonstorm.

github.com

GitHub - tfkfan/phaser3-game-demo: Phaser3+React+Typescript+Websocket game demo

Выше представлена ссылка на демо проекта. Теперь по порядку.

Требования: NodeJS >= v20, NPM >= v10

Для начала, выгружаем проект. Устанавливаем зависимости и запускаем:

npm install npm start

Демо содержит 2 связанные, но изначально не особо ладящие друг с другом, технологии - React и Phaser. Для того, чтобы они работали вместе без проблем, в Index.html объявлено 2 разных контейнера, каждый из них привязывает свой фреймворк соответственно:

Заметьте, что контейнер React с id ="root" находится первым, на нем будет строиться все UI проекта, блок с z-index отличным от нуля(для отрисовки UI поверх игровых сцен), нестатический и позиционированный, что добавляет удобства в верстке. В блоке id="game-root" используется только canvas, поэтому можно пожертвовать его позиционированием, прилепляем его к вернему левому краю абсолютным позиционированием.

Любая Phaser игра начинается с конфигурации фреймворка.

phaser-game.ts :

const config = { type: Phaser.WEBGL, // Тип приложения - WEBGL/CANVAS parent: 'game-root', canvas: document.getElementById('game-canvas') as HTMLCanvasElement, width: window.innerWidth , height: window.innerHeight, pixelArt: true, scene: [BootstrapScene, GameScene], physics: { // подключение физического движка default: 'arcade', arcade: { debug: false } } }

Все параметры, впринципе, должны быть интуитивно понятны, но самый главный из них это набор сцен:

scene: [BootstrapScene, GameScene]

Сцены - основной объект для отрисовки игрового содержимого, через нее проходят все ресурсы, события и процессы в игре. Первая из них используется в качестве предзагрузчика. Все загруженные в первой сцене ресурсы будут доступны в других. Ресурсы могут быть разные, это и спрайт-листы, и атласы анимаций, и звуковые файлы, Tilemap-файлы, шейдеры и пр.

Любая сцена имеет 4 важных функции, изменяя которые, можно управлять игровой логикой:

preload - загружает ресурсы, и это все.
init - запускается следом. Позволяет получить данные при переходе из предыдущей сцены, инициализирует игровую логику.
create - позволяет создать объекты и привязать их к сцене. Большинство игровых объектов достаточно просто объявить в этом методе. Под капотом они сами обновляются в игровом цикле.
update - игровой цикл. Здесь можно добавить дополнительную логику, когда базового функционала метода create уже не хватает.

В конструкторе передается строковый ключ этой сцены.

export default class BootstrapScene extends Phaser.Scene { constructor() { super('bootstrap') } init() { store.dispatch(setLoading(true)) } preload() { this.load.on(Phaser.Loader.Events.PROGRESS, (value: number) => { CONTROLS.setProgress(100 * value); }); this.load.tilemapTiledJSON('worldmap', './assets/maps/new/map01merged.json'); this.load.image('tiles', './assets/maps/new/tiles.png'); this.load.atlas('mage', './assets/playersheets/mage.png', './assets/playersheets/mage.json'); this.load.image('fireball', './assets/skillsheets/fire_002.png'); this.load.spritesheet('buff', './assets/skillsheets/cast_001.png', {frameWidth: 192, frameHeight: 192}); this.load.image('face', './assets/images/face.png'); this.load.spritesheet('fireballBlast', './assets/skillsheets/s001.png', {frameWidth: 192, frameHeight: 192}); this.load.audio('intro', ['./assets/music/phaser-quest-intro.ogg']); this.load.glsl('fireball_shader', './assets/shaders/fireball_shader.frag'); } create() { CONTROLS.setProgress(100); store.dispatch(setLoading(false)) this.sound.add('intro').play({ seek: 2.550 }); this.add.shader('fireball_shader', window.innerWidth/2, window.innerHeight/2, window.innerWidth ,window.innerHeight); } }

Сцена данного предзагрузчика также имеет функционал, позволяющий показать прогресс загрузки всех прописанных ресурсов, выводя данные с помощью глобального объекта контроля React компонентов CONTROLS, но об этом позднее. Также прописываем инструкцию проигрывания музыки на старте:

this.sound.add('intro').play({ seek: 2.550 });

Входная предзагрузочная сцена. На заднем плане - шейдер<br />

Главная сцена, на которой будет строиться весь геймплей - GameScene.

Рассмотрим метод create

create() { CONTROLS.setVersion(`Phaser v${Phaser.VERSION}`) this.input.keyboard.on(Phaser.Input.Keyboard.Events.ANY_KEY_DOWN, (evt: { key: string; }) => { this.player.setSkillIndex(this.skillIndexMap[evt.key]) const direction = this.keymap[evt.key] if (direction) this.player.walk(direction, true) }); this.input.keyboard.on(Phaser.Input.Keyboard.Events.ANY_KEY_UP, (evt: { key: string; }) => { const direction = this.keymap[evt.key] if (direction) this.player.walk(direction, false) }); this.input.on(Phaser.Input.Events.POINTER_DOWN, (evt: { worldX: number; worldY: number; }) => this.player.attack(new Vector2(evt.worldX, evt.worldY))); this.createAnimations() this.displayMap() this.createPlayer() this.cameras.main.startFollow(this.player) // examples // Animation/Sprite this.anims.create({ key: 'explosion', frames: this.anims.generateFrameNumbers('fireballBlast', {start: 0, end: 19, first: 0}), frameRate: 20, repeat: -1 }) this.add.sprite(2500, 1100, "").play('explosion') // Arcade Physics / collision const items = this.add.group([this.createItem()]) this.physics.add.collider(this.player, items, (object1: Phaser.Tilemaps.Tile | Phaser.GameObjects.GameObject, object2: Phaser.Tilemaps.Tile | Phaser.GameObjects.GameObject) => { object2.destroy(true) setTimeout(() => { items.add(this.createItem(), true) }, 3000) }) }

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

Спрайт - это миниатюрный игровой "контейнер" текстур и анимаций с различными параметрами: координаты позиции на игровом поле, скорости, ускорения движения и др. Например:

export default class Face extends Phaser.Physics.Arcade.Sprite { constructor(scene: Scene, x: number, y: number) { // Сцена, координаты, ключ текстуры super(scene, x, y, 'face'); // Привязка к физике this.scene.physics.add.existing(this) // Привязка к сцене this.scene.add.existing(this) } }

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

Создадим анимацию взрыва из 20 нарезанных сверху-вниз, слева-направо кадров текстуры fireballBlast:

this.anims.create({ key: 'explosion', frames: this.anims.generateFrameNumbers('fireballBlast', {start: 0, end: 19, first: 0}), frameRate: 20, repeat: -1 })

Ширина и высота кадра, а также ключ текстуры берется из загрузки на предыдущей сцене:

this.load.spritesheet('fireballBlast', './assets/skillsheets/s001.png', {frameWidth: 192, frameHeight: 192});

Далее создадим спрайт в точке (2500, 1100) и запустим анимацию "explosion" при помощи функции play

this.add.sprite(2500, 1100, "").play('explosion')

Для создания персонажа используем функцию this.createPlayer()

createPlayer(): Mage { return this.player = new Mage(this, 2100, 1000, store.getState().application.nickname) }

Где персонаж является объектом класса Mage

export default class Mage extends Player { private skillFactory: SkillFactory = new SkillFactory(); // Factory объект создания умений private skills = ["Fireball", "Buff"] // Всего 2 умения private currentSkillIndex = 0 // Индекс текущего умения constructor(scene: Scene, x: number, y: number, name:string) { super(scene, x, y, "mage", name); //Сцена, позиция игрока, ключ текстуры, имя } // Измений текущее умение public setSkillIndex(index: number) { if (index === undefined || index < 0 || index > 1) return CONTROLS.setSkill(index) this.currentSkillIndex = index } // Кастовать умение по цели override attack(target: Vector2) { this.skillFactory.create(this.scene, this.x, this.y, target, this.skills[this.currentSkillIndex]) super.attack(target) } }

В свою очередь он наследуется от класса Player с логикой анимирования движущегося и атакующего персонажа в 8 направлениях(взависимости от нажатой клавиши)

//Phaser.Physics.Arcade.Sprite - класс спрайта, используемый в физическом движке и имеющий расширенный функционал export default abstract class Player extends Phaser.Physics.Arcade.Sprite { private animationKey: string; private attackAnimationKey: string; public isMoving: boolean; public isAttack: boolean; public name: string; public target: Vector2; private nameHolder: Phaser.GameObjects.Text; private directionState: Map<Direction, boolean> = new Map([ [Direction.RIGHT, false], [Direction.UP, false], [Direction.DOWN, false], [Direction.LEFT, false] ]); private directionVerticalVelocity: Map<Direction, number> = new Map([ [Direction.UP, -GameConfig.playerAbsVelocity], [Direction.DOWN, GameConfig.playerAbsVelocity] ]) private directionHorizontalVelocity: Map<Direction, number> = new Map([ [Direction.RIGHT, GameConfig.playerAbsVelocity], [Direction.LEFT, -GameConfig.playerAbsVelocity] ]) protected constructor(scene: Scene, x: number, y: number, textureKey: string, name: string) { super(scene, x, y, textureKey); this.name = name; this.init(); } private init() { this.isMoving = false; this.isAttack = false; this.animationKey = Direction.UP; this.scene.physics.add.existing(this) this.scene.add.existing(this); this.nameHolder = this.scene.add.text(0, 0, this.name, { font: '14px pixel', stroke: "#ffffff", strokeThickness: 2 }).setOrigin(0.5); } attack(target: Vector2) { this.isAttack = true this.target = target this.attackAnimationKey = `${this.animationKey}attack` this.play(this.attackAnimationKey); this.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => { this.isAttack = false; this.handleMovingAnimation() }, this); } walk(direction: Direction, state: boolean) { if (this.directionState.get(direction) === state) return; this.directionState.set(direction, state) const vec = [0, 0] const activeState = Array.from(this.directionState.entries()) .filter(value => value[1]) .map(value => { if (this.directionVerticalVelocity.has(value[0])) { vec[1] = this.directionVerticalVelocity.get(value[0]) } else if (this.directionHorizontalVelocity.has(value[0])) vec[0] = this.directionHorizontalVelocity.get(value[0]) return value[0] }) this.isMoving = activeState.length > 0 if (activeState.length === 1) this.animationKey = activeState[0] else if (activeState.length === 2) this.animationKey = activeState[1] + activeState[0] this.setVelocity(vec[0], vec[1]) this.handleMovingAnimation() } private handleMovingAnimation() { if (this.isAttack) return; if (this.isMoving) this.play(this.animationKey); else { this.play(this.animationKey); this.stop() } } override preUpdate(time, delta): void { super.preUpdate(time, delta); this.nameHolder.setPosition(this.x, this.y - 30); } }

Для создания анимаций движения персонажа во всех направлениях и умений по спрайтам:

createAnimations() { GameConfig.playerAnims.map((key) => ({ key, frames: this.anims.generateFrameNames("mage", { prefix: key, start: 0, end: 4 }), frameRate: 8, repeat: !key.includes("attack") && !key.includes("death") ? -1 : 0 })).concat([ { key: 'fireballBlast', frames: this.anims.generateFrameNumbers('fireballBlast', {start: 0, end: 19, first: 0}), frameRate: 20, repeat: 0 }, { key: 'buff', frames: this.anims.generateFrameNumbers('buff', {start: 0, end: 19, first: 0}), frameRate: 20, repeat: 0 } ]).forEach((config) => this.anims.create(config)); }

В том числе, используя атлас анимаций мага mage.json, указывающий координаты и размеры конкретного кадра:

"frames": { "up0": { "frame": { "x": 0, "y": 0, "w": 75, "h": 61 } }, "up1": { "frame": { "x": 0, "y": 61, "w": 75, "h": 61 } }, "up2": { "frame": { "x": 0, "y": 122, "w": 75, "h": 61 } }, "up3": { "frame": { "x": 0, "y": 183, "w": 75, "h": 61 } }, "up4": { "frame": { "x": 0, "y": 244, "w": 75, "h": 61 } }, ....

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

this.input.keyboard.on(Phaser.Input.Keyboard.Events.ANY_KEY_DOWN, (evt: { key: string; }) => { this.player.setSkillIndex(this.skillIndexMap[evt.key]) const direction = this.keymap[evt.key] if (direction) this.player.walk(direction, true) });

Аналогично с мышью, добавляем обработку клика:

this.input.on(Phaser.Input.Events.POINTER_DOWN, (evt: { worldX: number; worldY: number; }) => this.player.attack(new Vector2(evt.worldX, evt.worldY)));

Умение, или выстрел - важная составляющая игры. Это абстрактный класс, который сам по себе также является спрайтом и содержит функции отрисовки анимации. Количество текстур не имеет значения. Метод play так или иначе запустит нужную анимацию.

export abstract class Skill extends Phaser.Physics.Arcade.Sprite { protected target: Vector2; protected initialPosition: Vector2; private finallyAnimated = false; protected constructor(scene: Phaser.Scene, x: number, y: number, image: string, target: Vector2) { super(scene, x, y, image, 0); this.scene.add.existing(this); this.scene.physics.add.existing(this) this.target = target; this.initialPosition = new Vector2(x, y) this.init() } protected preUpdate(time: number, delta: number) { super.preUpdate(time, delta); if (!this.finallyAnimated && new Vector2(this.x, this.y).distance(this.target) < GameConfig.skillCollisionDistance) { this.finallyAnimated = true this.setVelocity(0, 0) this.animateFinally().then(sprite => this.destroy(true)) .catch(e => this.destroy(true)) } } protected abstract playFinalAnimation(): void animateFinally(): Promise<Skill> { return new Promise((resolve, reject) => { try { this.on(Phaser.Animations.Events.ANIMATION_COMPLETE, (animation: Phaser.Animations.Animation) => { try { resolve(this) } catch (e) { reject(e) } }, this); this.playFinalAnimation() } catch (e) { reject(e) } }) } init(): void { const vel = new Vector2(this.target.x - this.initialPosition.x, this.target.y - this.initialPosition.y).normalize() this.setPosition(this.initialPosition.x, this.initialPosition.y) this.setVelocity(vel.x * GameConfig.skillAbsVelocity, vel.y * GameConfig.skillAbsVelocity) } }

Огненный шар

export class Fireball extends Skill { constructor(scene: Phaser.Scene, x: number, y: number, target: Vector2) { super(scene, x, y, "fireball", target); } override init() { super.init(); this.setScale(0.02, 0.02); } override playFinalAnimation() { this.play("fireballBlast"); this.setScale(1, 1) } }

Баф

export class Buff extends Skill { constructor(scene: Phaser.Scene, x: number, y: number, target: Vector2) { super(scene, x, y, "buff", target); } override playFinalAnimation() { this.play("buff"); } override init(): void { this.setPosition(this.initialPosition.x, this.initialPosition.y) } }

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

Создадим предмет - лицо, как группу предметов, для его последующего респауна по истечению 3х секунд после столкновения персонажа с ним.

createItem(): Face { return new Face(this, 2500, 1100) }

// Arcade Physics / collision const items = this.add.group([this.createItem()]) this.physics.add.collider(this.player, items, (object1: Phaser.Tilemaps.Tile | Phaser.GameObjects.GameObject, object2: Phaser.Tilemaps.Tile | Phaser.GameObjects.GameObject) => { object2.destroy(true) // Уничтожение объекта со сцены при столкновении setTimeout(() => { items.add(this.createItem(), true) // пересоздание }, 3000) })

Игровая карта представляет собой набор файлов: map01merged.json, tiles.png, tiles.tsx ( не путать с typescript tsx файлом).

В качестве редактора уровней использовался - Tiled, предназначеный для построения любых, в том числе изометрических уровней, карт, на основе тайлов и тайлсетов.

www.google.com

Tiled

Богатая поддержка Tiled в Phaser позволяет гибко оперировать с самими тайлами карты - клетками. Их можно заменять, удалять, применять эффекты и обработку коллизий игровых объектов с ними.

Рендеринг карты очень простой

displayMap() { this.map = this.add.tilemap('worldmap'); const tileset = this.map.addTilesetImage('tiles', 'tiles'); for (let i = 0; i < this.map.layers.length; i++) this.map.createLayer(0, tileset, 0, 0).setVisible(true); }

Как я уже сказал, взаимодействие игрока происходит через устройства ввода и пользовательский интерфейс, который представляет из себя обычные React компоненты.

Чтобы отобразить отладочную информацию в левом верхнем углу экрана необходимо:

Объявить компонент с отладочной информацией

Связать хуки компонента с глобальным объектом CONTROLS, зарегистрировав их

CONTROLS.registerGameDebugControls({ setVersion, setFps, setSkill })

Объявить необходимый регистратор в файле controls.ts

export type ValueSetter<T> = (T) => void; // Create your own react controls interface interface GameDebugControls { setVersion: ValueSetter<string> setFps: ValueSetter<number> setSkill: ValueSetter<number> } interface GameLoaderControls { setProgress: ValueSetter<number> } // Add your own react controls interface GameControlsMap { debug?: GameDebugControls loader?: GameLoaderControls } class GameControls { private controls: GameControlsMap = {} // Create your own register controls method public registerGameDebugControls(controls: GameDebugControls) { this.controls.debug = controls } public registerGameLoaderControls(controls: GameLoaderControls) { this.controls.loader = controls } // Create your own valueSetter method public setFps(fps: number) { if (checkExists(this.controls.debug)) this.controls.debug.setFps(fps) } public setSkill(skill: number) { if (checkExists(this.controls.debug)) this.controls.debug.setSkill(skill) } public setVersion(version: string) { if (checkExists(this.controls.debug)) this.controls.debug.setVersion(version) } public setProgress(progress: number) { if (checkExists(this.controls.loader)) this.controls.loader.setProgress(progress) } } export const CONTROLS: GameControls = new GameControls()

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

CONTROLS.setVersion(`Phaser v${Phaser.VERSION}`) CONTROLS.setFps(Math.trunc(this.sys.game.loop.actualFps));

Точно таким же компонентом является и форма входа в игру:

export const Login = () => { const dispatch = useAppDispatch() const onStart = (evt) => { evt.preventDefault() const data = new FormData(evt.target) if(!data.get("name")) { alert("Name is required") return; } CONTROLS.setProgress(50) dispatch(setLoading(true)) dispatch(setNickname(data.get("name").toString())) setTimeout(() => { dispatch(setLoading(false)) dispatch(setCurrentPage(Page.GAME)) launchGame() }, 3000) }; return ( <div className="center-extended"> <div className="fade-in"> <Card className="game-form"> <Form onSubmit={onStart} initialValues={{name: "name"}}> <Input type="text" placeholder="Input your name" name='name'/> <Button type="submit" color="success">Start game!</Button> </Form> </Card> </div> </div> ); }; export default Login;

Для отключения событий клика по блоку React компонентов достаточно поправить свойство "pointer-events":

document.getElementById("root").style.pointerEvents="none"

Значение этого css-свойства можно изменить в конкретных местах там, где обработка клика необходима (кнопки, формы и т.д.)

В данном демо также имеется поддержка работы с вебсокетами. Для работы с ними есть файл network.ts

class Network { private socket: any; private events: Map<number, [any, OnMessageHandler]> = new Map<number, [any, OnMessageHandler]>() constructor() { if (!window.WebSocket) { // @ts-ignore window.WebSocket = window.MozWebSocket; } if (window.WebSocket) { this.socket = new WebSocket("ws://localhost:8085/websocket"); } else { alert("Your browser does not support Web Socket."); } this.socket.addEventListener('open', (event) => { console.log("Connection established"); }); this.socket.addEventListener('error', (event) => { console.log(event.message); }); this.socket.addEventListener('close', (event) => { console.log("Web Socket closed"); }); this.socket.addEventListener('message', (evt) => { const eventData = JSON.parse(evt.data); if (this.events.has(eventData.type)) { const arr = this.events.get(eventData.type) arr[1].call(arr[0], eventData.data); } }); } public on(type: number, handler: OnMessageHandler, thisArg:any) { this.events.set(type, [thisArg, handler]); } public send(type: number, data: any = null) { if (this.socket.readyState !== WebSocket.OPEN) { console.log("Socket is not ready"); return; } this.socket.send(this.createEvent(type, data)); } private createEvent = (eventType: number, payload: any = null) => { const obj: any = { type: eventType, data: null }; if (payload) { obj.data = payload } return JSON.stringify(obj); } } export const network = new Network();

Для отправки сообщения на сервер достаточно вызвать метод send из любого места приложения:

network.send(TYPE, JSON_OBJECT)

Для обработки входящего сообщения достаточно объявить где-нибудь обработчик вида:

network.on(TYPE, (data)=> {}, this)

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