Ich versuche ein einfaches Spielmenü zu erstellen, das einige anklickbare Sprites enthält, die als Schaltflächen verwendet werden, um im Menü zu navigieren.Keine Sprite-Interaktion möglich
(Ich verwende den neuesten pixi.js (v4.3.5))
Struktur meiner App:
- loader.module (nutzt die pixi.loaders .Loader)
- events.module (Basisereignis sub/pub Modul)
- base.view
- menu.view (erweitert base.vi ew)
- game.main
Wie alles funktioniert jetzt?
Alle Ressourcen und ui-Elemente müssen explizit definiert werden, bevor die Ansicht initialisiert wird.
so müssen in der menu.view die folgenden Attribute definiert werden.
this.resources = [
{ name: 'start', src: 'img/start.png'},
{ name: 'start2', src: 'img/start2.png'}
];
this.ui = [{
name: 'start', /// resource name
type: 'img',
pos: { x: 0, y: 0 }
}];
Jetzt brauche ich nur view.init() nennen sie alle geladen zu bekommen und gezogen. Auf der visuellen Seite funktioniert alles einwandfrei, jedoch reagiert das Start-Sprite (das interactive und buttonMode auf true gesetzt hat) nicht auf Mausereignisse.
Die folgende Methode ist verantwortlich für das Abrufen der erforderlichen Ressource und das Zurückgeben eines neuen Sprites. Es ermöglicht auch die eigentliche Interaktionsfunktionalität als Teil dieses Prozesses. Aber die Testfunktion wird nie aus irgendeinem Grund ausgelöst.
__getSpriteObject(element){
let sprite = new PIXI.Sprite(this.loader.loader.resources[ element.name ].texture);
sprite.x = element.pos.x;
sprite.y = element.pos.y;
sprite.interactive = true;
sprite.buttonMode = true;
console.log(sprite)
sprite.on('pointerdown', function(){
console.log("what")
})
return sprite;
}
Wenn die oben genannten Informationen nicht ausreichend ist, ist auch hier eine Arbeits example.