PIXI.js最初の再生でAnimatedSpriteが遅れる

Question

スプライトシートからPIXI.extras.AnimatedSpriteを作成するのがベストプラクティスであることを理解するためには助けが必要です。私は現在、TexturePackerで作成された3つの中規模のスプライトシートを1つのアニメーション用に読み込み、すべてのフレームを収集してから再生します。しかし、初めてアニメーションを再生すると、非常に滑らかで、ほとんどの場合すぐに最後までジャンプし、その後は本当にスムーズに再生されます。私は少し読んで、私は2つの可能な原因を見ることができます。 1）ラグは、テクスチャをGPUにアップロードするのにかかる時間によって引き起こされる可能性があります。準備renderer.plugins.prepare.uploadと呼ばれるPIXIプラグインがあります。このプラグインは、再生前にアップロードして初期ループをスムーズにすることができます。 2）複数のテクスチャ/イメージからAnimatedSpriteを構築することは理想的ではなく、その原因になる可能性があります。

質問1：PIXI Prepareプラグインを使用する必要がありますか？もしそうなら、実際にどうすれば使用できますか？そのためのドキュメントは非常に限られています。

質問2：複数のテクスチャにまたがるフレームが悪い考えであるのですが、それが原因である可能性があります&なぜですか？

Aは私がやっているものの例要約：

function loadSpriteSheet(callback){ 
    let loader = new PIXI.loaders.Loader() 
    loader.add('http://mysite.fake/sprite1.json') 
    loader.add('http://mysite.fake/sprite2.json') 
    loader.add('http://mysite.fake/sprite3.json') 
    loader.once('complete', callback) 
    loader.load() 
} 

loadSpriteSheet(function(resource){ 
    // helper function to get all the frames from multiple textures 
    let frameArray = getFrameFromResource(resource) 
    let animSprite = new PIXI.extras.AnimatedSprite(frameArray) 
    stage.addChild(animSprite) 
    animSprite.play() 
}) 

Answer 1

質問1

をだから私は解決策、おそらくない解決策を発見したが、それは私のためによく働きます。準備プラグインは正しい解決策でしたが、うまく機能しませんでした。 WebGLは、フレームではなく、全体のテクスチャをアップロードする必要があります。テクスチャがGPUにアップロードされる方法は、renderer.bindTexture(texture)です。 PIXIローダーがsprite atlas urlを受け取ると、 my_sprites.jsonイメージファイルを自動的にダウンロードし、ローダーリソースにmysprites.json_imageという名前を付けます。ですから、それをつかみ、テクスチャを作成してGPUにアップロードする必要があります。だからここに更新されたコードです：私は本当に発見したことはありません

let loader = new PIXI.loaders.Loader() 
loader.add('http://mysite.fake/sprite1.json') 
loader.add('http://mysite.fake/sprite2.json') 
loader.add('http://mysite.fake/sprite3.json') 
loader.once('complete', callback) 
loader.load() 


function uploadToGPU(resourceName){ 
    resourceName = resourceName + '_image' 
    let texture = new PIXI.Texture.fromImage(resourceName) 
    this.renderer.bindTexture(texture) 
} 

loadSpriteSheet(function(resource){ 
    uploadToGPU('http://mysite.fake/sprite1.json') 
    uploadToGPU('http://mysite.fake/sprite2.json') 
    uploadToGPU('http://mysite.fake/sprite3.json') 

    // helper function to get all the frames from multiple textures 
    let frameArray = getFrameFromResource(resource) 
    let animSprite = new PIXI.extras.AnimatedSprite(frameArray) 
    this.stage.addChild(animSprite) 
    animSprite.play() 
}) 

質問2

と答えたが1を質問への解決策は、私の場合はので、私のアニメーションが完全に滑らかにした、私はパフォーマンスの問題を見ません。