gpt4 book ai didi

javascript - Phaser JS - 按钮无法从图像 Sprite 设置帧名称

转载 作者:行者123 更新时间:2023-12-01 03:37:23 25 4
gpt4 key购买 nike

作为我使用 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');
}

它没有按预期工作。游戏只是将 btnUpbtnDn 添加为场景中的图像,并且对按钮不执行任何操作。

我还尝试了以下方法:

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”的按钮。

网上的样本主要涉及我能查到的 map 集。虽然我最终会逐步使用图集表作为按钮,但我不能简单地使用 png 工作,这似乎很愚蠢。

有什么建议吗?

最佳答案

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 .

关于javascript - Phaser JS - 按钮无法从图像 Sprite 设置帧名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44157832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com