Jump to content


  • Content Count

  • Joined

  • Last visited

1 Follower

About html5gamedev

  • Rank

Recent Profile Visitors

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

  1. Thanks for a swift reply! Unfortunately the issue remains. I updated the live example with the suggested code.
  2. I am creating new AnimatedSprites on pointerdown event (and deleting them on next pointerdown event) over the course if application lifetime. At some point around 20 clicks, the app crashes with an error: Rats! webGl crashed. At that point no error is displayed in console. Crash happens on a mobile device, and would probably also happen on desktop, if someone perform plenty of clicks. Code that is repeatedly used is below. I also include live example at http://forwardingsolutions.club/. Can someone please point out what am I doing wrong? From other answers I deduced t
  3. I am trying to replace a texture atlas of the animated sprite with another one, and play it. On every click I first fetch the texture atlas image from server. Than I make periodic checks if there is any animation still running. Once there is no animation running, I replace animatedSprite.textures with the new on and upload that texture atlas to the gpu. After it is uploaded, I set canRunNext to true, signaling, that everything is uploaded and ready to go. The issue is that app.renderer.plugins.prepare.upload uploads every second texture, for reasons unknown to me. Now this could be
  4. I am trying to replace a texture atlas of the animated sprite with another one, and play it. I play it once all animations are stopped (variable isAnimation is false). To play it at the time of click, I need to pre upload it to gpu. I am using the following code prepare new texture atlas on each click. It seems that prepare.upload does not work everytime! In fact, it only uploads texture every second time. I've put timers into the code, and I can observer that when the prepare.upload uploads to gpu, time difference (variable diff) is 200ms, but when it does not, time difference is
  5. Yeah, I am passing resources["out2"].texture.baseTexture to it, so that's okay. I guess I have bad naming convention. I am trying to fetch the new texture atlas from the server. I've managed to do it if I preload everything, but there are too many texture atlases to preload all of them. So i created this function to fetch them 1 by 1 when it is necessary: var nextSprite; function fetch(){ var newLoader = new PIXI.loaders.Loader() .add('nextSprite', 'pathToSpriteSheet') .load(function (loader, resources){ nextSprite = new PIXI
  6. I use this code to setup a texture atlas animation: PIXI.loader .add('out2', 'assets/out2.png') .load(function (loader, resources){ onRotationsLoaded(loader, resources) }); function onRotationsLoaded(loader, resources) { first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture)); app.renderer.plugins.prepare.upload(first, function(){ console.log("loaded first"); // ready to go }); } function setupFrames(name) { var frames = []; array is an array that stores correct position f
  7. ah, I am such a noob. there was some test code somewhere else in the project. you can safely delete this thread.
  8. I am creating animation frames from image the hard way -I am using PIXI.Texture and passing baseTexture and Rectangle (I don't use json directly, because of reusability of json instructions). See code below. I am getting an error: baseTexture.once is not a function. I don't know what is causing this error, but the animation is working as expected. Is this error something I shouldn't worry? function loadAssets() { PIXI.loader .add('first', 'assets/first.png') .load(function (loader, resources){ onLoaded(loader, resources) }); } function onLoa
  9. I have a couple of texture atlases. The order of textures that create animation is the same in all of them. In other words, my first frame of animation is always (0,0,100,100), my second frame is in all atlases (100,0,100,100) and so on. The only thing that changes is meta's image: "image1.png". It changes to "image3.png" and so on. Frames in all texture atlases are named the same { "meta": { "image": "image1.png", "size": {"w"1000,"h":2000}, "scale": "1" }, "frames": { "image_0000.png": { "frame": {"x":0,"y":0,"w":100,
  10. Thank you so much. I've spent a week puzzling with this issue (and I would probably spent another one) just to find out that I can't code it the way I want with pixi (and possibly any other tool). The box example is just a placeholder to represent my issue. Are you aware of any tricks I can use with plain css and JS, that could mimic a smooth texture atlas animation, when big images are in use? I've already used css's step() method (can't run it smooth), I've tried setting up timer and changed background-position of the image (also can't run it smoothly) and I've used plain canvas("canv
  11. Ooh, I see! So if you want to load multiple texture atlases this big, the bottle neck is actually RAM of mobile devices. Thanks, you are very informative. regarding upload time of atlases... I am totally fine with 4-5 second upload time, as long as the loading and preparing happens when another animation is running (and the atlas can play immediately when requested), so the user won't even notice. What bugs me (this issue shows in the updated version http://forwardingsolutions.club/updated/px3.html) is that little freeze of the currently running animation when the next atlas is loaded int
  12. Thanks. You know, this is exactly what I want to achieve. Load new texture atlases and run them without any freeze or delay. As far as texture atlas size goes, I found this page https://webglstats.com/webgl2/parameter/MAX_TEXTURE_SIZE, which states that 4096 by 4096 is universally supported (not sure what they mean by VRAM though..). What do you recommend that I do? there is gotta be some way to load textures atlases and run them..
  13. Thanks for stopping by. I have a huge number of textures(and they won't be used at the same time). The idea was to upload one by one dynamically, since I cannot leave user staring at the loading screen for 10min I used your suggestion and it works. Kinda. This is what I used in load next: app.renderer.plugins.prepare.upload(next, () => { canRunNext = true; $("body").css("background-color","green"); }); The new problem is that when the animation finishes uploading to the gpu, there is a freeze. I change color
  14. I am trying to load texture atlas dynamically. The load happens when the user clicks on canvas. At the same time an animation fires. The next time the user clicks on canvas, previously loaded animation runs. Perhaps it is best to demonstrate the problem. I uploaded the files on a test server. You can see the delay here: http://forwardingsolutions.club/test1/px3.html. I hardcoded the first animation load, meaning that you will see a delay on second canvas click. Run this code on a low end mobile device, and you will se a huge delay. I am getting a 4s delay on a motorola G and 0.5s on
  15. I am trying to load a texture atlas into the app when the user clicks on the canvas. 2 things happen on canvas click: 1. the animation already loaded plays, and 2. I fetch a new texture atlas from server. Newly fetched texture atlas plays on the next canvas click, and a new texture atlas is fetched. Think of it as endless loop. On every click, previously loaded animation is played, and the next one is fetched and repeat. It is absolutely essential that there is no freeze between animating. What approach do you recommend I take? My tests showed that there is some issues with dyn
  • Create New...