srcmini本文概述
游戏杆是控制游戏角色的最喜欢的方法, 因为它比按钮更精确, 更易于使用。就像现实生活中的操纵杆一样, 大多数手机游戏都有自己的触摸屏操纵杆实现。用于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="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<!-- Add the VJoy plugin -->
<script src="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 screen
game.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 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文档显示了一个示例, 该示例根据操纵杆的方向在画布中移动图像：
<!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="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<script src="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 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));
</script>
</body>
</html>如果使用操纵杆的所有资源和Our Code World的徽标执行上一个示例, 结果应为：
编码愉快！
评论前必须登录！
注册