Pixi.js: ¿Cuándo se vuelven válidos el ancho y el alto de un Sprite?

Creado en 30 mar. 2013  ·  3Comentarios  ·  Fuente: pixijs/pixi.js

Cuando cargo una textura en un objeto y luego pregunto por el ancho del objeto, obtengo un valor de 1. Solo después de pasar por el ciclo de animación un par de veces, el ancho se vuelve válido. ¿Existe una forma confiable de verificar las dimensiones de una textura cargada?

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

Todos esos console.log() s registran "1, 1" aunque debería ser 128, 128. Si pongo ese console.log() en el bucle de animación, comienza a generar 128, 128.

Comentario más útil

¡Ah, sí! Esto se debe a que la imagen de la textura no se ha cargado, por lo que no tiene idea de cuál es su ancho y alto: /
En ese sentido, se comporta exactamente como una imagen HTML normal.

La forma en que he estado resolviendo esto es usando assetLoader para precargar mis imágenes. De esa manera, el ancho y la altura siempre se establecen correctamente cuando creo mis texturas como esta:

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

Otra forma sería agregar un detector de eventos a su textura. Cuando la imagen se ha cargado, envía un evento de 'actualización'.

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

Espero que ayude :)

Todos 3 comentarios

¡Ah, sí! Esto se debe a que la imagen de la textura no se ha cargado, por lo que no tiene idea de cuál es su ancho y alto: /
En ese sentido, se comporta exactamente como una imagen HTML normal.

La forma en que he estado resolviendo esto es usando assetLoader para precargar mis imágenes. De esa manera, el ancho y la altura siempre se establecen correctamente cuando creo mis texturas como esta:

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

Otra forma sería agregar un detector de eventos a su textura. Cuando la imagen se ha cargado, envía un evento de 'actualización'.

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

Espero que ayude :)

También es posible hacer tal cosa: https://github.com/GoodBoyDigital/pixi.js/issues/29
cambie la función setTexture para verificar si el ancho y el alto se establecieron

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones