Pixi.js: スプライトの幅と高さはいつ有効になりますか?

作成日 2013年03月30日  ·  3コメント  ·  ソース: pixijs/pixi.js

テクスチャをスプライトにロードしてから、スプライトの幅を要求すると、値は1になります。アニメーションループを数回実行した後でのみ、幅が有効になります。 ロードされたテクスチャの寸法を確認する信頼できる方法はありますか?

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

これらのconsole.log()のログはすべて、128、128である必要がありますが、「1、1」です。そのconsole.log()をアニメーションループに入れると、128、128の出力が開始されます。

最も参考になるコメント

そうそう! これは、テクスチャの画像が読み込まれていないため、幅と高さがわからないためです:/
その意味では、通常のHTML画像とほとんど同じように動作します。

私がこれを解決している方法は、assetLoaderを使用して画像をプリロードすることです。 そうすれば、次のようなテクスチャを作成するときに、幅と高さが常に正しく設定されます。

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

もう1つの方法は、イベントリスナーをテクスチャに追加することです。 画像が読み込まれると、「更新」イベントがディスパッチされます。

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

お役に立てば幸いです:)

全てのコメント3件

そうそう! これは、テクスチャの画像が読み込まれていないため、幅と高さがわからないためです:/
その意味では、通常のHTML画像とほとんど同じように動作します。

私がこれを解決している方法は、assetLoaderを使用して画像をプリロードすることです。 そうすれば、次のようなテクスチャを作成するときに、幅と高さが常に正しく設定されます。

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

もう1つの方法は、イベントリスナーをテクスチャに追加することです。 画像が読み込まれると、「更新」イベントがディスパッチされます。

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

お役に立てば幸いです:)

そのようなことを行うことも可能です: https
setTexture関数を変更して、幅と高さが設定されているかどうかを確認します

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。

このページは役に立ちましたか?
0 / 5 - 0 評価