Pixi.js: Wann werden die Breite und Höhe eines Sprites gültig?

Erstellt am 30. März 2013 · 3Kommentare · Quelle: pixijs/pixi.js

Wenn ich eine Textur in ein Sprite lade und dann nach der Breite des Sprites frage, erhalte ich den Wert 1. Erst nachdem ich die Animationsschleife ein paar Mal durchlaufen habe, wird die Breite gültig. Gibt es eine zuverlässige Möglichkeit, die Abmessungen einer geladenen Textur zu überprüfen?

  var stage = new PIXI.Stage(0x66FF99);
  var renderer = new PIXI.CanvasRenderer(800, 600);
  document.body.appendChild(renderer.view);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  stage.addChild(stone);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  renderer.render(stage);
  console.log(stone.width + ', ' + stone.height);

Alle diese console.log() s log "1, 1", obwohl es 128, 128 sein sollte. Wenn ich das console.log() in die Animationsschleife einfüge, wird 128, 128 ausgegeben.

Quelle

samueller

Hilfreichster Kommentar

Ah ja! Dies liegt daran, dass das Bild für die Textur nicht geladen wurde, sodass es keine Ahnung hat, wie breit und hoch es ist :/
Es verhält sich in diesem Sinne ziemlich genau wie ein normales HTML-Bild.

Ich habe dies gelöst, indem ich den AssetLoader verwendet habe, um meine Bilder vorab zu laden. Auf diese Weise sind Breite und Höhe immer richtig eingestellt, wenn ich meine Texturen wie folgt erstelle:

var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();

function onAssetsLoaded()
{
      var texture = PIXI.Texture.fromImage("stone.png");
      var sprite  = new PIXI.Sprite(texture); 
      // this will log the correct width and height as the image was preloaded into the pixi.js cache
      console.log(stone.width + ', ' + stone.height);
}

Eine andere Möglichkeit wäre, Ihrer Textur einen Eventlistener hinzuzufügen. Wenn das Bild geladen wurde, löst es ein 'Update'-Ereignis aus.

var texture = PIXI.Texture.fromImage("stone.png");
var sprite  = new PIXI.Sprite(texture); 

if(texture.baseTexture.hasLoaded)
{
      // this will log the correct width and height as the image has already loaded
      console.log(stone.width + ', ' + stone.height);
}
else
{
      texture.addEventListener("update", onTextureUpdate)
}

function onTextureUpdate()
{
      // this will log the correct width and height as the image has loaded
      console.log(stone.width + ', ' + stone.height);
}

Ich hoffe, das hilft :)

GoodBoyDigital am 30. März 2013

👍4

Alle 3 Kommentare

var assetsToLoad = [ "stone.png"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoad);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();

function onAssetsLoaded()
{
      var texture = PIXI.Texture.fromImage("stone.png");
      var sprite  = new PIXI.Sprite(texture); 
      // this will log the correct width and height as the image was preloaded into the pixi.js cache
      console.log(stone.width + ', ' + stone.height);
}

Eine andere Möglichkeit wäre, Ihrer Textur einen Eventlistener hinzuzufügen. Wenn das Bild geladen wurde, löst es ein 'Update'-Ereignis aus.

var texture = PIXI.Texture.fromImage("stone.png");
var sprite  = new PIXI.Sprite(texture); 

if(texture.baseTexture.hasLoaded)
{
      // this will log the correct width and height as the image has already loaded
      console.log(stone.width + ', ' + stone.height);
}
else
{
      texture.addEventListener("update", onTextureUpdate)
}

function onTextureUpdate()
{
      // this will log the correct width and height as the image has loaded
      console.log(stone.width + ', ' + stone.height);
}

Ich hoffe, das hilft :)

GoodBoyDigital am 30. März 2013

👍4

Es ist auch möglich, so etwas zu tun: https://github.com/GoodBoyDigital/pixi.js/issues/29
Ändern Sie die Funktion setTexture, um zu überprüfen, ob Breite und Höhe eingestellt wurden

turbosqel am 30. März 2013

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen in letzter Zeit keine Aktivität stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.

lock[bot] am 27. Feb. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Pixi.js: Wann werden die Breite und Höhe eines Sprites gültig?

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen