テクスチャをスプライトにロードしてから、スプライトの幅を要求すると、値は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);
}
お役に立てば幸いです:)
そのようなことを行うことも可能です: https :
setTexture関数を変更して、幅と高さが設定されているかどうかを確認します
このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。
最も参考になるコメント
そうそう! これは、テクスチャの画像が読み込まれていないため、幅と高さがわからないためです:/
その意味では、通常のHTML画像とほとんど同じように動作します。
私がこれを解決している方法は、assetLoaderを使用して画像をプリロードすることです。 そうすれば、次のようなテクスチャを作成するときに、幅と高さが常に正しく設定されます。
もう1つの方法は、イベントリスナーをテクスチャに追加することです。 画像が読み込まれると、「更新」イベントがディスパッチされます。
お役に立てば幸いです:)