Реализация бесплатного сенсорного джойстика для вашей игры в Phaser.js

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

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

Требования

Мы будем зависеть от Фазер-vjoy-плагин, Этот плагин является виртуальным плагином Joystick для Phaser.io. Не у всех людей одинаковая длина пальцев и экран одинакового размера. У пользователей очень большой пул различных устройств и конфигураций, и работа со всеми этими возможностями может свести нас с ума, поэтому VJoy существует.

Вы можете получить копию плагина, используя bower:

bower install phaser-vjoy-plugin

Или скачать .zip файл из хранилище в Github или просто копируя содержимое файла vjoy.js в репозитории здесь. Этот плагин был разработан ребятами из Неформальные пингвины.

Замечания: этот плагин отлично работает на мобильных устройствах, но это не относится к настольному браузеру, поэтому используйте его только для мобильных игр.

Реализация

Внедрение VJoy довольно просто и очень просто, так что вам нужно всего лишь выполнить эти 4 шага, и вы готовы к работе.

1. Загрузите необходимые файлы

Прежде чем продолжить, перейдите к добавлению необходимых файлов в ваш документ. Используйте тег script для загрузки Phaser и плагина VJoy:


И давайте продолжим с настройкой!

2. Зарегистрируйте плагин в Phaser.js

Чтобы использовать плагин VJoy, нам нужно сообщить Phaser, что мы используем его как плагин. Чтобы зарегистрировать плагин, используйте game.plugins.add метод и в качестве первого параметра экземпляр Vjoy (Phaser.Plugin.VJoy) и сохраните возвращаемое значение в переменной (в этом случае game.vjoy для большей доступности).

Кроме того, вам нужно указать область холста, где должен быть включен джойстик, используя game.vjoy.inputEnable метод. Этот метод ожидает 4 параметра, которые эквивалентны координатам соответственно (x1, y1, x2, y2) где должен находиться прямоугольник, содержащий джойстик.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-joystick', {
create: function create() {
// Register the VJoy plugin
game.vjoy = game.plugins.add(Phaser.Plugin.VJoy);
// Select an area of the canvas where the joystick should be available
// It draws a rectangle using Phaser.Rectangle
// It takes as Arguments 4 coordinates (x1, y1, x2, y2)
// With a canvas of 800x600, the following code will allow the joystick
// to move in the left area of the screen
game.vjoy.inputEnable(0, 0, 400, 600);
}
});

Теперь, когда плагин зарегистрирован (в данном случае в половине левой части экрана), нам нужно загрузить ресурсы джойстика (изображения).

3. Предварительная загрузка ресурсов джойстика

Плагин будет требовать автоматически с использованием идентификаторов [vjoy_base,vjoy_body and vjoy_cap] чтобы загрузить изображения, составляющие джойстик, вы должны искать их для загрузки в функцию предварительной загрузки Phaser в качестве актива. Помните, что части (изображения) джойстика находятся в каталоге ресурсов GitHub хранилище VJoy здесь.

var game = new Phaser.Game(800, 600, Phaser.AUTO, "phaser-joystick", {
preload: function preload() {
// Load the followings assets [vjoy_base,vjoy_body, vjoy_cap] with images
// Note that you can customize them as you wish as long as they keep the
// width of the default images
game.load.image('vjoy_base', 'assets/base.png');
game.load.image('vjoy_body', 'assets/body.png');
game.load.image('vjoy_cap', 'assets/cap.png');
}
});

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

Phaser.Cache.getImage: Ключ «vjoy_base» не найден в кэше.

Phaser.Cache.getImage: Ключ «vjoy_body» не найден в кэше.

Phaser.Cache.getImage: Ключ «vjoy_cap» не найден в кэше.

4. Обработайте действия в функции обновления

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

var game = new Phaser.Game(800, 600, Phaser.AUTO, "phaser-joystick", {
update: function update() {
// Retrieve the cursors value
var cursors = game.vjoy.cursors;
if (cursors.left) {
// Do something if dragging to left
} else if (cursors.right) {
// Do something if dragging to right
}
if (cursors.up) {
// Do something if dragging up
} else if (cursors.down) {
//Do something if dragging down
}
}
});

Это зависит от вас, какие действия должны быть выполнены в соответствии с направлением джойстика. Обратите внимание, что вы даже можете изменять операторы if, чтобы разрешить перпендикулярные перемещения.

пример

В следующем HTML-документе показан пример перемещения изображения на холсте в соответствии с направлением джойстика:


Free Touch Joystick for Phaser.js
#phaser-joystick {
margin: 0 auto;
width: 800px;
}

/* To make your code more maintable, add the JS code in JS files */
(function (Phaser) {'use strict';
var sprite;
var GameConfig = {
preload: function preload() {
/**
* Load the images
*/
game.load.image('logo', 'assets/ourcodeworld-logo.png');
game.load.image('vjoy_base', 'assets/base.png');
game.load.image('vjoy_body', 'assets/body.png');
game.load.image('vjoy_cap', 'assets/cap.png');
},
create: function create() {
// Set a gray as background color
game.stage.backgroundColor = '#f7f7f7';
sprite = game.add.sprite(300, 300, 'logo');
game.vjoy = game.plugins.add(Phaser.Plugin.VJoy);
game.vjoy.inputEnable(0, 0, 400, 600);
game.vjoy.speed = {
x:500,
y:500
};
},
update: function update() {
/**
* Important to get the cursors on the update function
*/
var cursors = game.vjoy.cursors;
// If to left or right
if (cursors.left) {
sprite.x--;
} else if (cursors.right) {
sprite.x++;
}
// If up or down
if (cursors.up) {
sprite.y--;
} else if (cursors.down) {
sprite.y++;
}
}
};
// Initialize game
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-joystick', GameConfig);
}.call(this, Phaser));

Если вы выполните предыдущий пример со всеми ресурсами джойстика и логотипом нашего мира кода, вы должны получить в результате что-то вроде:

Джойстик Бесплатный Phaser.js

Ссылка на основную публикацию
Adblock
detector