html5gamedev

Members
  • Content count

    12
  • Joined

  • Last visited

  1. ah, I am such a noob. there was some test code somewhere else in the project. you can safely delete this thread.
  2. 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 onLoaded(loader, resources) { console.log(resources.rot1.texture.baseTexture);// all rotations loaded var first = new PIXI.extras.AnimatedSprite(createFrames(resources["first"].texture.baseTexture)); .... } function createFrames(name) { var frames = []; for (var i = 0; i < 39; i++) { var rect = new PIXI.Rectangle(arr[i].frame.x, arr[i].frame.y, arr[i].frame.w, arr[i].frame.h); // stored in an array generated from json frames.push(new PIXI.Texture(name, rect)); } return frames; }
  3. 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,"h":100}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100}, "sourceSize": {"w":100,"h":100} }, "image_0001.png":{...} } } It is kinda wasteful to load 10 different json files, because the positions and frame names are always the same for all of the animations. How can I load images instead of json files? PIXI.loader .add(['assets/file1.json']); // don't wanna load 10 json files function createFrames(name, imageToUse) { var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; frames.push(PIXI.Texture.fromFrame(name + val + '.png')); // use imageToUse to tell PIXI from which image should it create frames. } return frames; }
  4. 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("canvas") (Thats the worse of all 3 methods). I think I am gonna try to recreate the issue with canvas("webGL") next.
  5. 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 into the gpu. Maybe it freezes for just about 100ms, but it is very noticeable. If you can point me in the right direction regarding this issue, I will me most thankful.
  6. 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..
  7. 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 of body to signify this event. You can see it here: http://forwardingsolutions.club/updated/px3.html Now this rectangle animation is jaggy itself, but you can definitively see it even on desktop machines. A small freeze when the body turns green. How can I fix this?
  8. 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 an iphone 5. What can I do solve this annoying issue? you can inspect the code on a website, but I will also paste it here: $(function(){ var current; var next; var canRunNext = false; var isAnimating = false; var firstRun = true; var container = document.getElementById("canvas-container"); var app = new PIXI.Application(550,584,{transparent:true}); var canvas = container.appendChild(app.view); setupCanvas(); loadRotationsAndCurrent(); var infiniteLoader = PIXI.loader; function setupCanvas(){ $(canvas).attr("id","canvas"); if (window.screen.width < 600){ $(canvas).css("width","100%"); $(canvas).css("height","100%"); $("#canvas-container").css("width","100%"); }else{ $("#canvas-container").css("width","50%"); } } function loadRotationsAndCurrent(){ PIXI.loader .add(['jimages/1s.png.json']) // load all rotations .load(onRotationsLoaded); } function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); next.visible=false; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); next.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(next); // app.renderer.bindTexture(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/2s.png.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("2_000")); canRunNext=true; console.log("next loaded"); }); } } function setupFrames(name){ var frames = []; for (var i = 0; i < 30; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame(name + val + '.png')); } return frames; } function onRotationsLoaded(){ // all rotations loaded current = new PIXI.extras.AnimatedSprite(setupFrames("1_000")); current.x = app.renderer.width / 2; current.y = app.renderer.height / 2; current.anchor.set(0.5); current.loop=false; current.animationSpeed = 0.5; current.visible = true; isAnimating = false; current.onComplete = function() { console.log('onComplete'); isAnimating=false; }; app.stage.addChild(current); } var run = true; $("#canvas").on("click touch touchstart",function(){ if (firstRun && !isAnimating){ loadNext(); isAnimating=true; current.gotoAndPlay(0); console.log("first run"); firstRun=false; }else{ if (canRunNext && !isAnimating){ isAnimating=true; next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); });
  9. 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 dynamically loaded texture atlases - animation freezes, if texture atlas is being loaded at the same time. The issue really shows on mobile devices. I've got a hunch that there might be a problem that both PIXI.loader and object.gotoAndPlay() use the main thread, and they block each other, but I really don't know that much about Pixi. I've posted a similar question earlier today: , but I think I didn't correctly identify the reason for my bad performance. So this question is more in general terms. What is the best way to run texture atlas animation and load another texture atlas at the same time, so that the animation can run without any delay when wanted?
  10. I am running a current animation on click. At the time of click, I start loading the next animation. On next click event, I fire the next animation, and hide current one with the code below. It is essential that the animation fires without delay. $("#canvas").on("click touch touchstart",function(){ if (firstRun){ current.gotoAndPlay(0); //current is an animated sprite loadNext(); console.log("first run"); firstRun=false; }else{ if (canRunNext){ next.visible=true; current.visible=false; next.gotoAndPlay(0); console.log("can run next"); }else{ console.log("cannot run next"); } } }); I noticed, that pixi doesn't prepare invisible object. There is a freeze between next.visible = true and next.gotoAndPlay(); How can I "prepare" the animation, so that it gets loaded and ready to go, immediately after goToAndPlay() is issued, but is invisible before that? this is the loadNext function. I stripped away some other functions that I think don't matter. I will gladly add them if needed. var firstRun = true; var infiniteLoader = PIXI.loader; function loadNext(){ if (firstRun){ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); next.visible=true; next.animationSpeed = 0.5; next.loop= false; next.x = app.renderer.width / 2; next.y = app.renderer.height / 2; next.anchor.set(0.5); app.stage.addChild(next); canRunNext=true; console.log("next loaded"); }); }else{ infiniteLoader.add('jimages/3.json'); infiniteLoader.load(function(loader, resources) { next = new PIXI.extras.AnimatedSprite(setupFrames("3_")); canRunNext=true; console.log("next loaded"); }); } }
  11. function setupFrames(startName,endName){ var frames = []; for (var i = 0; i < 21; i++) { var val = i < 10 ? '0' + i : i; frames.push(PIXI.Texture.fromFrame(startName + val + '.png')); } for (var i = 21; i < 40; i++) { var val = i; frames.push(PIXI.Texture.fromFrame(endName + val + '.png')); } return frames; } //used with var anim = new PIXI.extras.AnimatedSprite(setupFrames("rot1","rot2")); anim.animationSpeed = 0.5; stage.addChild(anim); anim.play(); I am trying to create an animation from 2 texture atlases. The problem I am facing is a glitch-a freeze in the middle, when I switch from startName to endName texture. I want to switch between texture atlases, because my textures are quite big, and if I wanted to place all in 1 atlas, it's size would be 20000x20000 px, which is not supported even by desktop machines. Are there any tricks I can use to eliminate that glitch? Thanks, Tim