1

在我的游戏中，我需要一些可以在移动设备上使用的按钮（您可以在游戏中按下和/或按住的按钮）。我看到了这个例子（注意这里使用的 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;
}

如您所见，箭头键可以很好地移动精灵，但移动按钮效果不佳；他们只移动精灵一帧，然后它再次停止移动。我不确定为什么按键可以工作，但移动按钮却不能。问题似乎是类中的代码没有按照我认为应该运行的方式运行（即，似乎所有关于 , 和 events 的代码onInputOver都onInputDown没有onInputUp正确运行，而类只是注意按下按钮时运行的方法）。谁能弄清楚我的按钮类有什么问题？

4

1 回答 1

1

您的问题是 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();
    }
于 2014-09-16T20:40:58.997 回答