Phaser JS - Button kann den Frame-Namen nicht aus dem Bild auswählen Sprite

Question

Als Teil meiner Übung mit Phaser versuche ich ein einfaches Clicker-Spiel zu erstellen. Ich kann die Schaltfläche jedoch nicht aufrufen, um das gewünschte Bild anzuzeigen.

Hier ist mein Haupt 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); 
} 

Und hier ist mein preloader.js (wo im Idealfall alle Bilder geladen sind):

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'); 
    } 

es nicht funktioniert wie erwartet. Das Spiel fügt einfach die btnUp und btnDn als Bilder in der Szene hinzu und tut nichts für die Schaltfläche.

Ich habe auch versucht, die folgenden:

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'); 

Aber keiner von ihnen arbeiten - die Schaltfläche zeigt noch eine Schaltfläche mit einem „x“.

Die Proben online befassen sich hauptsächlich mit Atlasblättern von dem, was ich nachschlagen kann. Während ich schließlich dazu übergehen werde, ein Atlas-Blatt für Knöpfe zu verwenden, scheint es albern, dass ich nicht einfach mit einem PNG arbeiten kann.

Irgendwelche Vorschläge?

Answer 1

Pro the documentation, wenn Sie keinen Frame- oder Frame-Namen übergeben, müssen Sie stattdessen loadTexture verwenden.

Wenn Sie sich das Beispiel Action On Click ansehen, sehen Sie, wie Sie Aktionen für jeden der Schaltflächenstatus hinzufügen.

In Ihrem Fall Sie wollen diese Zeile ändern:

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); 

Um so etwas wie das folgende:

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. 

Vollarbeitsbeispiel:

var mainState = { 
 
    preload: function() { 
 
    \t // 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); 
 

 
\t \t \t this.clickButton.anchor.setTo(0.5); 
 
    }, 
 
    update: function() { 
 
    }, 
 
    buttonClick: function() { 
 
     alert('clicked'); 
 
    \t \t }, 
 
    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>

Auch gespeichert als a JSFiddle.