PIXI.js AnimatedSprite滯後於第一次播放

我需要一些幫助，瞭解從spritesheet（s）創建PIXI.extras.AnimatedSprite的最佳做法。我目前正在爲TexturePacker創建的一個動畫加載3箇中等大小的Spritesheet，我收集所有的幀並播放。然而，第一次播放動畫非常不流暢，並且幾乎立即跳到最後，從此開始播放非常流暢。我讀了一下，我可以看到2個可能的原因。 1）延遲可能是由於紋理上傳到GPU所花費的時間。有一個名爲prepare renderer.plugins.prepare.upload的PIXI插件，它應該使我能夠在播放之前上傳它們，並且可能會平滑化初始循環。 2）從多個紋理/圖像構建AnimatedSprite並不理想，可能是原因。PIXI.js AnimatedSprite滯後於第一次播放

問題1：我應該使用PIXI Prepare插件嗎？如果有，我該如何使用它？它的文檔非常有限。

問題2：跨越多個紋理的幀是一個壞主意，可能是原因&爲什麼？

一個總結例子我在做什麼：

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

來源

2017-03-09 Brenwell

我有完全相同的問題，我開始在pixi.js論壇上的主題（你可以看到我的代碼）http://www.html5gamedevs.com/topic/28032-make-movieclip-from-several-atlases並沒有時滯/但我仍然沒有回答這個問題，並準備插件似乎不工作。 –

所以，如果你找到解決方案，請把它張貼在這裏 –

很高興看到它不只是我，我還沒有找到一個好的解決方案，但我一直很忙，當/如果我做我會分享在這兩個地方。 – Brenwell

問題1

所以我已經找到了解決辦法，可能不是解決辦法，但它很適合我。準備插件是正確的解決方案，但從來沒有工作。 WebGL需要上傳整個紋理而不是幀。紋理上傳到GPU的方式是通過renderer.bindTexture(texture)。當PIXI加載器接收到一個精靈圖集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解決方案使我的動畫在我的情況非常順利的話，我看不出有任何性能問題。

來源

2017-03-13 11:15:59 Brenwell

實際的錯誤已被診斷出來，應該很快就會被修復我想像 – Brenwell

https://github.com/pixijs/pixi.js/issues/3829 – Brenwell

https://github.com/pixijs/pixi.js/commit/94b1975dff90dc4ffb12b7f66fecbe9f8dedc776在開發中 – Brenwell

PIXI.js AnimatedSprite滯後於第一次播放

回答

相關問題