Pixi.js: Quand la largeur et la hauteur d'un Sprite deviennent-elles valides ?

Créé le 30 mars 2013 · 3Commentaires · Source: pixijs/pixi.js

Lorsque je charge une texture dans un sprite, puis que je demande la largeur du sprite, j'obtiens une valeur de 1. Ce n'est qu'après avoir parcouru la boucle d'animation plusieurs fois que la largeur devient valide. Existe-t-il un moyen fiable de vérifier les dimensions d'une texture chargée ?

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

Tous ces console.log() s log "1, 1" même s'il devrait être 128, 128. Si je mets ce console.log() dans la boucle d'animation, il commence à sortir 128, 128.

Source

samueller

Commentaire le plus utile

Ah oui! C'est parce que l'image de la texture n'a pas été chargée, elle n'a donc aucune idée de sa largeur et de sa hauteur :/
Il se comporte à peu près exactement comme une image HTML normale dans ce sens.

La façon dont j'ai résolu ce problème est d'utiliser l'assetLoader pour précharger mes images. De cette façon, la largeur et la hauteur sont toujours correctement définies lorsque je crée mes textures comme ceci :

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

Une autre façon serait d'ajouter un écouteur d'événement à votre texture. Lorsque l'image est chargée, elle envoie un événement « update ».

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

J'espère que cela pourra aider :)

GoodBoyDigital le 30 mars 2013

👍4

Tous les 3 commentaires

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

Une autre façon serait d'ajouter un écouteur d'événement à votre texture. Lorsque l'image est chargée, elle envoie un événement « update ».

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

J'espère que cela pourra aider :)

GoodBoyDigital le 30 mars 2013

👍4

Il est également possible de faire une telle chose : https://github.com/GoodBoyDigital/pixi.js/issues/29
modifier la fonction setTexture pour vérifier si la largeur et la hauteur ont été définies

turbosqel le 30 mars 2013

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.