Phaser JS - 按钮无法从图像精灵设置帧名称

Question

作为 Phaser 练习的一部分，我正在尝试创建一个基本的唱首歌游戏。但是，我无法获得显示我想要的图像的按钮。

这是我的主要内容gameplay.js:

class Gameplay extends Phaser.State {

init()
{
  var btnUp = this.game.add.sprite(0, 0, 'btn_beerUp');
  var btnDn = this.game.add.sprite(0, 0, 'btn_beerDn');
  this.clickButton = this.game.add.button(this.game.world.centerX - 100, this.game.world.centerY + 230, 'game', this.pauseGame, this, btnUp.key, btnUp.key, btnDn.key);
  this.clickButton.anchor.set(0.5, 0.5);
}

这是我的preloader.js（理想情况下，所有图像都已加载）：

class Preload extends Phaser.State {
  create() {
      this.game.load.image('btn_beerDn', 'res/img/btn_beerClickerDn.png');
      this.game.load.image('btn_beerUp', 'res/img/btn_beerClickerUp.png');
  }

它没有按预期工作。游戏只是将 btnUp 和 btnDn 作为图像添加到场景中，而不对按钮执行任何操作。

我也试过以下方法：

this.clickButton = this.game.add.button(blah-blah, 'btn_beerUp', 'btn_beerUp', 'btn_beerDn');

this.clickButton = this.game.add.button(blah-blah, 'res/img/btn_beerClickerUp.png', 'res/img/btn_beerClickerUp.png', 'res/img/btn_beerClickerDn.png');

但是其中 none 个有效 - 按钮仍然显示带有 "x" 的按钮。

网上的样本主要是处理图集sheet我能查到的。虽然我最终会逐步使用图集 sheet 作为按钮，但我不能简单地使用 png 工作似乎很愚蠢。

有什么建议吗？

Answer 1

根据 the documentation，如果您不打算传递框架或框架名称，则必须改用 loadTexture。

如果您查看 Action On Click 示例，您将了解如何为每个按钮状态添加操作。

在您的情况下，您需要更改此行：

this.clickButton = this.game.add.button(this.game.world.centerX - 100, this.game.world.centerY + 230, 'game'
    , this.pauseGame, this, btnUp.key, btnUp.key, btnDn.key);

类似于以下内容：

this.clickButton = this.game.add.button(this.game.world.centerX - 100, this.game.world.centerY + 230, 'game'
    , this.pauseGame, this);
this.clickButton.onInputOut.add(this.out, this);
// TODO add your other input events.

out: function () {
    this.clickButton.loadTexture(btnUp.key);
}
// TODO add functions for your other input events.

完整的工作示例：

var mainState = {
    preload: function() {
     // Load the three sprites that they can choose between.
      this.load.crossOrigin = 'anonymous';
      this.load.image('ball', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-blue.png');
      this.load.image('ball2', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-green.png');
      this.load.image('ball3', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-red.png');
    },

    create: function() {
      // This won't work, since the passed items aren't valid frameNames.
      //this.clickButton = this.game.add.button(this.game.world.centerX, this.game.world.centerY, 'ball', this.buttonClick, this, 'ball2', 'ball', 'ball3', 'ball');
      // This follows what the documentation states, if you're not using a spritesheet.
      this.clickButton = this.game.add.button(this.game.world.centerX, this.game.world.centerY, 'ball', this.buttonClick, this);
      
      this.clickButton.onInputOver.add(this.buttonOver, this);
      this.clickButton.onInputOut.add(this.buttonOut, this);
      this.clickButton.onInputDown.add(this.buttonDown, this);
      this.clickButton.onInputUp.add(this.buttonUp, this);

   this.clickButton.anchor.setTo(0.5);
    },
    update: function() {
    },
    buttonClick: function() {
      alert('clicked');
   },
    buttonOver: function() {
      this.clickButton.loadTexture('ball2');
    },
    buttonOut: function() {
      this.clickButton.loadTexture('ball');
    },
    buttonDown: function() {
      this.clickButton.loadTexture('ball3');
    },
    buttonUp: function() {
      this.clickButton.loadTexture('ball');
    }
};

var game = new Phaser.Game(200, 200);

game.state.add('main', mainState);

game.state.start('main');

<script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.7.10"></script>

另存为a JSFiddle。

Phaser JS - 按钮无法从图像精灵设置帧名称

Phaser JS - Button cannot set frame name from image sprite

javascript

phaser-framework