Phaser框架中虚拟控件类的问题
Problems with a class for virtual controls in the Phaser framework
在我的游戏中,我需要一些可以在移动设备上工作的按钮(你可以在游戏中按下和/或按住的按钮)。我看到了这个例子(注意,这里使用的Phaser版本是旧的,但它仍然有效),并且能够暂时拥有一些工作按钮。以下是该示例的源代码。
然而,这个例子中创建这些虚拟游戏板按钮的代码有一件事让我很困扰:按钮的代码不是DRY(不要重复自己)。你可以在这里一次又一次地看到这些按钮是如何以同样的方式创建的:
// create our virtual game controller buttons
buttonjump = game.add.button(660, 340, 'buttonjump', null, this, 0, 1, 0, 1); //game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame
buttonjump.anchor.setTo(0.5, 0.5);
buttonjump.fixedToCamera = true; //our buttons should stay on the same place
buttonjump.events.onInputOver.add(function(){jump=true;});
buttonjump.events.onInputOut.add(function(){jump=false;});
buttonjump.events.onInputDown.add(function(){jump=true;});
buttonjump.events.onInputUp.add(function(){jump=false;});
buttonfire = game.add.button(750, 340, 'buttonfire', null, this, 0, 1, 0, 1);
buttonfire.anchor.setTo(0.5, 0.5);
buttonfire.fixedToCamera = true;
buttonfire.events.onInputOver.add(function(){fire=true;});
buttonfire.events.onInputOut.add(function(){fire=false;});
buttonfire.events.onInputDown.add(function(){fire=true;});
buttonfire.events.onInputUp.add(function(){fire=false;});
buttonleft = game.add.button(40, 312, 'buttonhorizontal', null, this, 0, 1, 0, 1);
buttonleft.anchor.setTo(0.5, 0.5);
buttonleft.fixedToCamera = true;
buttonleft.events.onInputOver.add(function(){left=true;});
buttonleft.events.onInputOut.add(function(){left=false;});
buttonleft.events.onInputDown.add(function(){left=true;});
buttonleft.events.onInputUp.add(function(){left=false;});
buttonbottomleft = game.add.button(48, 352, 'buttondiagonal', null, this, 6, 4, 6, 4);
buttonbottomleft.anchor.setTo(0.5, 0.5);
buttonbottomleft.fixedToCamera = true;
buttonbottomleft.events.onInputOver.add(function(){left=true;duck=true;});
buttonbottomleft.events.onInputOut.add(function(){left=false;duck=false;});
buttonbottomleft.events.onInputDown.add(function(){left=true;duck=true;});
buttonbottomleft.events.onInputUp.add(function(){left=false;duck=false;});
buttonright = game.add.button(136, 312, 'buttonhorizontal', null, this, 0, 1, 0, 1);
buttonright.anchor.setTo(0.5, 0.5);
buttonright.fixedToCamera = true;
buttonright.events.onInputOver.add(function(){right=true;});
buttonright.events.onInputOut.add(function(){right=false;});
buttonright.events.onInputDown.add(function(){right=true;});
buttonright.events.onInputUp.add(function(){right=false;});
buttonbottomright = game.add.button(128, 352, 'buttondiagonal', null, this, 7, 5, 7, 5);
buttonbottomright.anchor.setTo(0.5, 0.5);
buttonbottomright.fixedToCamera = true;
buttonbottomright.events.onInputOver.add(function(){right=true;duck=true;});
buttonbottomright.events.onInputOut.add(function(){right=false;duck=false;});
buttonbottomright.events.onInputDown.add(function(){right=true;duck=true;});
buttonbottomright.events.onInputUp.add(function(){right=false;duck=false;});
buttondown = game.add.button(88, 360, 'buttonvertical', null, this, 0, 1, 0, 1);
buttondown.anchor.setTo(0.5, 0.5);
buttondown.fixedToCamera = true;
buttondown.events.onInputOver.add(function(){duck=true;});
buttondown.events.onInputOut.add(function(){duck=false;});
buttondown.events.onInputDown.add(function(){duck=true;});
buttondown.events.onInputUp.add(function(){duck=false;});
因为它们是以一种非DRY的方式创建的,而且我觉得效率很低,所以我决定我的按钮应该有一个游戏板按钮类,它们都继承自这个类。不幸的是,我在尝试使这个按钮类工作时遇到了很多问题。
我在这里有一个例子,它模拟了我在游戏中要做的事情。
(这是我的例子的源代码)
// Global constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;
var ORIGIN = 0;
var TEXT_X_POS = 50;
var TEXT_Y_POS = 100;
var TEXT_STYLE = { fontSize: "16px" };
var RIGHT_BUTTON_X_POS = 600;
var RIGHT_BUTTON_Y_POS = 400;
var LEFT_BUTTON_X_POS = 100;
var LEFT_BUTTON_Y_POS = 400;
var PHASER_DUDE_Y_POS = 300;
var PHASER_DUDE_GRAVITY = 300;
var PHASER_DUDE_RIGHT_VELOCITY = 100;
var PHASER_DUDE_LEFT_VELOCITY = -100;
var STOPPED = 0;
// Global variables
var background;
var rightButton;
var movingRight;
var rightButtonDown;
var leftButton;
var movingLeft;
var leftButtonDown;
var phaserDude;
var rightKey;
var leftKey;
// New instance of Phaser.Game
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", {preload: preload, create: create, update: update});
// Mobile button class
var MobileButton = function (button, movingInADirection, isTheButtonDown, pressedMethod) {
button.events.onInputOver.add(function () {
if (isTheButtonDown === true) {
movingInADirection = true;
}
});
button.events.onInputDown.add(function () {
isTheButtonDown = true;
movingInADirection = true;
});
button.events.onInputUp.add(function () {
movingInADirection = false;
});
};
function preload () {
game.load.image("background", "sprites/sky.png");
game.load.image("left arrow", "sprites/left_arrow.png");
game.load.image("right arrow", "sprites/right_arrow.png");
game.load.image("phaser dude", "sprites/phaser_dude.png");
}
function create () {
background = game.add.image(ORIGIN, ORIGIN, "background");
game.add.text(TEXT_X_POS, TEXT_Y_POS, "Use the arrow keys or the arrow buttons below to move", TEXT_STYLE);
rightButton = game.add.button(RIGHT_BUTTON_X_POS, RIGHT_BUTTON_Y_POS, "right arrow", moveRight);
leftButtonDown = game.add.button(LEFT_BUTTON_X_POS, LEFT_BUTTON_Y_POS, "left arrow", moveLeft);
phaserDude = game.add.sprite(game.world.centerX, PHASER_DUDE_Y_POS, "phaser dude");
game.physics.arcade.enable(phaserDude);
phaserDude.body.collideWorldBounds = true;
phaserDude.body.gravity.y = PHASER_DUDE_GRAVITY;
rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
}
function update () {
stopMoving();
if (leftKey.isDown || movingLeft === true) {
moveLeft();
}
if (rightKey.isDown || movingRight === true) {
moveRight();
}
}
function moveRight () {
phaserDude.body.velocity.x = PHASER_DUDE_RIGHT_VELOCITY;
}
function moveLeft () {
phaserDude.body.velocity.x = PHASER_DUDE_LEFT_VELOCITY;
}
function stopMoving () {
phaserDude.body.velocity.x = STOPPED;
}
正如你所看到的,箭头键可以很好地移动精灵,但移动按钮不能很好地工作;他们只移动精灵一帧,然后它又停止移动。我不知道为什么钥匙能用,但移动按钮却不行。问题似乎是类中的代码没有按照我认为应该运行的方式运行(即,似乎所有与onInputOver
、onInputDown
和onInputUp
事件有关的代码都没有正确运行,并且类只关注按下按钮时要运行的方法)。有人能弄清楚我的按钮类出了什么问题吗?
您的问题是每次按下按钮时,Phaser.Button的onInputDown只会触发一次。
你需要做的是在按钮上设置一个isDown属性,如下所示:
button.events.onInputDown.add(function () {
button.isDown = true;
});
button.events.onInputUp.add(function () {
button.isDown = false;
});
在您的更新方法中检查该属性:
function update () {
stopMoving();
if (leftKey.isDown || leftButton.isDown) {
moveLeft();
}
相关文章:
- 创建服务器控件.创建问题
- 从谷歌地图自定义控件打开离子模态时遇到问题
- Javascript在每个有问题的控件上输出一条错误消息
- 尝试锁定自定义控件,但在页面中有多个控件时出现问题
- Silverlight 5 xaml 视图中的 Web 浏览器控件使用某些 JavaScript 时出现问题
- winforms Web浏览器控件中的JavaScript访问问题
- Phaser框架中虚拟控件类的问题
- Asp.Net树视图控件折叠后未选中子复选框.如何处理这个问题
- 在一个页面上使用多个jQuery UI控件实例有问题.手风琴控件的多种用途
- c#控件的Jquery附加问题
- 错误的定时问题,Telerik RadEditor控件's客户端事件和jquery's on page
- sedragon自定义控件,带有onClick事件处理程序:IE中的问题
- 使用WebBrowser控件以编程方式登录网站时出现问题
- 内网存在IE8 ActiveX控件问题
- 基于asp.net复选框的启用和禁用按钮控件的问题
- 在Javascript中获取asp控件的ClientID的问题
- 用户控件c#中隐藏字段的问题
- Windows商店js应用程序导航控件导致数据绑定问题
- 动态数字表单控件问题
- 构建多选用户控件时出现问题