在Phaser.js中为游戏实现免费的触摸操纵杆

本文概述

要求
实现
例子

【在Phaser.js中为游戏实现免费的触摸操纵杆】游戏杆是控制游戏角色的最喜欢的方法, 因为它比按钮更精确, 更易于使用。就像现实生活中的操纵杆一样, 大多数手机游戏都有自己的触摸屏操纵杆实现。用于Phaser.js的操纵杆插件并不多, 并且大多数都是付费的, 即Phaser虚拟操纵杆插件。
但是不用担心, 如果你不想自己实现操纵杆, 那么这里有一个免费的解决方案, 你将在本文中学习如何实现它。
要求我们将依赖于phaser-vjoy-plugin, 此插件是Phaser.io的虚拟Joystick插件。并非所有人的手指长度相同, 屏幕尺寸也不相同。用户拥有大量的不同设备和配置, 并且处理所有这些可能性会使我们抓狂, 这就是VJoy存在的原因。
你可以使用bower获取该插件的副本：

bower install phaser-vjoy-plugin

或在Github中下载存储库的.zip文件, 或仅在此处复制存储库中的vjoy.js文件内容。这个插件是由非正式企鹅的人开发的。
注意：此插件在移动设备上的运行效果非常好, 但台式机浏览器并非如此, 因此只能将其用于移动游戏。
实现 VJoy的实现非常容易且非常简单, 因此你只需遵循以下四个步骤, 就可以开始了。
1.加载所需的文件
在继续之前, 请继续在文档中添加所需的文件。使用脚本标签加载Phaser和VJoy插件：

< !-- Add phaser from the cdn or a local source --> < script src="http://img.readke.com/220524/05531461J-0.jpg"> < /script> < !-- Add the VJoy plugin --> < script src="http://www.srcmini.com/vjoy.js"> < /script>

让我们继续进行配置！
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 screengame.vjoy.inputEnable(0, 0, 400, 600); }});

现在已经注册了插件(在这种情况下, 在屏幕的左半部分), 我们需要加载操纵杆的资源(图像)。
3.预加载游戏杆资产
该插件将需要自动使用标识符[vjoy_base, vjoy_body和vjoy_cap]来加载组成操纵杆的图像, 因此, 你必须查找它们以将其作为相位器加载到Phaser的预加载功能中。请记住, 操纵杆的部件(图像)位于此处的VJoy github存储库的assets目录中。

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 imagesgame.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 valuevar 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文档显示了一个示例, 该示例根据操纵杆的方向在画布中移动图像：

< !DOCTYPE html> < html> < head lang="en"> < meta charset="UTF-8"> < title> Free Touch Joystick for Phaser.js< /title> < style> #phaser-joystick {margin: 0 auto; width: 800px; }< /style> < /head> < body> < !-- Add a canvas --> < div id="phaser-joystick"> < /div> < script src="http://img.readke.com/220524/05531461J-0.jpg"> < /script> < script src="http://www.srcmini.com/vjoy.js"> < /script> < script> /* 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 colorgame.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 rightif (cursors.left) {sprite.x--; } else if (cursors.right) {sprite.x++; }// If up or downif (cursors.up) {sprite.y--; } else if (cursors.down) {sprite.y++; }}}; // Initialize gamevar game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-joystick', GameConfig); }.call(this, Phaser)); < /script> < /body> < /html>

如果使用操纵杆的所有资源和Our Code World的徽标执行上一个示例, 结果应为：