Pixi.js: Quando a largura e a altura de um Sprite se tornam válidas?

Criado em 30 mar. 2013 · 3Comentários · Fonte: pixijs/pixi.js

Quando carrego uma textura em um sprite e pergunto pela largura do sprite, obtenho o valor 1. Somente depois de passar pelo loop de animação algumas vezes a largura se torna válida. Existe uma maneira confiável de verificar as dimensões de uma textura carregada?

  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 aqueles console.log() s log "1, 1", embora deva ser 128, 128. Se eu colocar esse console.log() no loop de animação, ele começa a produzir 128, 128.

Fonte

samueller

Comentários muito úteis

Ah sim! Isso ocorre porque a imagem para a textura não foi carregada, então ele não tem ideia de sua largura e altura: /
Nesse sentido, ele se comporta exatamente como uma imagem HTML normal.

A maneira como tenho resolvido isso é usando o assetLoader para pré-carregar minhas imagens. Dessa forma, a largura e a altura são sempre definidas corretamente quando eu crio minhas texturas assim:

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

Outra forma seria adicionar um ouvinte de eventos à sua textura. Quando a imagem é carregada, ela envia um evento de 'atualização'.

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 ajude :)

GoodBoyDigital em 30 mar. 2013

👍4

Todos 3 comentários

Ah sim! Isso ocorre porque a imagem para a textura não foi carregada, então ele não tem ideia de sua largura e altura: /
Nesse sentido, ele se comporta exatamente como uma imagem HTML normal.

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

Outra forma seria adicionar um ouvinte de eventos à sua textura. Quando a imagem é carregada, ela envia um evento de 'atualização'.

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 ajude :)

GoodBoyDigital em 30 mar. 2013

👍4

Também é possível fazer isso: https://github.com/GoodBoyDigital/pixi.js/issues/29
mude a função setTexture para verificar se largura e altura foram definidas

turbosqel em 30 mar. 2013

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.