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.
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 :)
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
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.
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:
Outra forma seria adicionar um ouvinte de eventos à sua textura. Quando a imagem é carregada, ela envia um evento de 'atualização'.
Espero que ajude :)