Pixi.js: Kapan lebar dan tinggi Sprite menjadi valid?

Dibuat pada 30 Mar 2013 · 3Komentar · Sumber: pixijs/pixi.js

Ketika saya memuat tekstur ke dalam sprite, dan kemudian meminta lebar sprite, saya mendapatkan nilai 1. Hanya setelah melalui loop animasi beberapa kali lebarnya menjadi valid. Apakah ada cara yang dapat diandalkan untuk memeriksa dimensi tekstur yang dimuat?

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

Semua console.log() s log "1, 1" meskipun seharusnya 128, 128. Jika saya memasukkan console.log() dalam loop animasi, ia mulai menghasilkan 128, 128.

Sumber

samueller

Komentar yang paling membantu

Ah iya! Ini karena gambar untuk teksturnya belum dimuat sehingga tidak tahu berapa lebar dan tingginya :/
Ini cukup berperilaku persis seperti gambar HTML biasa dalam pengertian itu.

Cara saya menyelesaikan ini adalah dengan menggunakan assetLoader untuk memuat gambar saya terlebih dahulu. Dengan begitu lebar dan tinggi selalu diatur dengan benar ketika saya membuat tekstur saya seperti ini:

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

Cara lain adalah dengan menambahkan eventlistener ke tekstur Anda. Ketika gambar telah dimuat, itu mengirimkan acara 'pembaruan'.

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

Semoga membantu :)

GoodBoyDigital pada 30 Mar 2013

👍4

Semua 3 komentar

Ah iya! Ini karena gambar untuk teksturnya belum dimuat sehingga tidak tahu berapa lebar dan tingginya :/
Ini cukup berperilaku persis seperti gambar HTML biasa dalam pengertian itu.

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

Cara lain adalah dengan menambahkan eventlistener ke tekstur Anda. Ketika gambar telah dimuat, itu mengirimkan acara 'pembaruan'.

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

Semoga membantu :)

GoodBoyDigital pada 30 Mar 2013

👍4

Ini juga memungkinkan untuk melakukan hal seperti itu: https://github.com/GoodBoyDigital/pixi.js/issues/29
ubah fungsi setTexture untuk memverifikasi apakah lebar & tinggi telah disetel