Brenwell

Members
  • Content Count

    12
  • Joined

  • Last visited

About Brenwell

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. If you are still having trouble you should look at the dev branch. They have merged my pull request which fixes the issue and adds an example to the docs
  2. Ok, so I posted an issue on Github and I am pleased to see that my researching was not for nothing. The current state of the prepare function will not work with an AnimatedSprite with multiple BaseTextures. https://github.com/pixijs/pixi.js/issues/3829
  3. just in case my link is to an old version here is the latest https://jsfiddle.net/brenwell/pbts8c0y/10/
  4. I am pretty sure my jsfiddle is correct app.renderer.plugins.prepare.upload(sprite,function(){ console.log('uploaded animated sprite') enableButton() }) ... function enableButton(){ var button = document.getElementById('button') button.disabled = false button.innerHTML = 'Ready, play animation' button.addEventListener('click',function(){ if(!app || !app.stage) return console.log('click') app.stage.addChild(sprite) sprite.gotoAndPlay(0) }) }
  5. I have done some further research and I have found at least one of the possible issues. PIXI.extras.AnimatedSprite extends PIXI.Sprite, which assumes the concept that it has one BaseTexture. Creating an AnimatedSprite from frames from multiple sources still results in an AnimatedSprite with one BaseTexture, it appears to choose the last frames texture as the BaseTexture. Then when you run the prepare plugin it uses a function called `findBaseTextures` which uploads the baseTexture of an item to the GPU. In the case of an AnimatedSprite it uploads only the one texture, meaning one is the GPU and the others are not and when you play you AnimatedSprite it has to load any other things into the GPU at that time. Hence the laggy playback. I might place all this info in the PIXI issue tracker, see If I can get some help.
  6. If you are talking in regard to my demo, I am waiting because the sprite is only added to the stage and played when the user clicks the canvas. You can wait as long as you like for the for the prepare to work.
  7. Hey @ivan.popelyshev, It would be much appreciated if would take a look at my jsFiddle and tell me how to use the prepare plugin correctly. Thanks https://jsfiddle.net/brenwell/pbts8c0y/
  8. Adding this to your code worked for me. As has been pointed out this is not the proper solution. But it works. AssetsManager.prototype.preloadCommon = function(callBack) { preloader.show(); this.commonLoader ... //Added this on complete handler .on("complete",function(loader, resource){ console.log(resource) renderer.bindTexture(new PIXI.Texture.fromImage("b_k_0_image")) renderer.bindTexture(new PIXI.Texture.fromImage("b_k_1_image")) }) ... .load(function() { callBack(); preloader.remove(); });
  9. I will check it out. I also made a quick demo https://jsfiddle.net/brenwell/pbts8c0y/ Toggle the constant `workAround` to see the difference
  10. I suspect that the prepare plugin is not registering the location of the WebGL texture and therefore uploads it again on the initial play. If I get a free moment I will make a jsfiddle.
  11. So I smoothed out my movie clip animation with the following. The prepare plugin was the right solution but never worked. WebGL needs the entire texture(s) uploaded not the frames. The way textures are uploaded to the GPU is via renderer.bindTexture(texture). When the PIXI loader receives a sprite atlas url e.g. my_sprites.json it automatically downloads the image file and names it as mysprites.json_image in the loaders resources. So you need to grab that, make a texture and upload it to the 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() })