[英]Phaser JS - Button cannot set frame name from image sprite
作为我使用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');
但是它们都不起作用-该按钮仍显示带有“ x”的按钮。
从我所能查找的内容来看,在线样本大部分都处理了地图集。 虽然我最终将继续使用图集表作为按钮,但是,我不能简单地使用png工作似乎很愚蠢。
有什么建议么?
根据文档 ,如果您不打算传递框架或框架名称,则必须使用loadTexture
。
如果查看“单击时动作”示例,您将看到如何为每个按钮状态添加动作。
在您的情况下,您需要更改此行:
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>
也保存为JSFiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.