Search the Community

Showing results for tags 'texture atlas'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 16 results

  1. 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 hard to visualize so I created a dummy example. After each animation, I run a random next one. you MUST run this on a slow mobile device to see my issue. Well, just don't run it on latest iphones and androids and you should see the issue. The textures in use are just placeholders to convey message. Link: Now, the first and second texture are uploaded as expected. if you click on square, the animation is triggered right away. But watch out, the 3. one is not, then the 4. is uploaded, then the 5. again, is not and so on. On every second click, my animation is not uploaded to gpu. I am not getting why is this happening. How would you fix this issue? All the code is available at the website I posted. The meat are these two functions: setupSpritesAnimation() setupNextSpritesAnimation() setupNextSpritesAnimation has a case statement (I trimmed that off to save some space), but inside the case I am basically just fetching a new image from server, and waiting for animation to be over. Once it is over, I create frames for each animation frame and upload them to the gpu. function setupNextSpritesAnimation(){ var newLoader = new PIXI.loaders.Loader() .add('nextSprite', 'pathToSprote.png') .load(function (loader, resources){ start = +new Date(); var interval = setInterval(function(){ if (!isAnimating){ clearInterval(interval); if (!firstRun){ nextSprite.textures = setupFrames(resources["nextSprite"].texture.baseTexture); app.renderer.plugins.prepare.upload(nextSprite, function(){ console.log("updoaded now"); canRunNext = true; isAnimating = false; newLoader.reset(); //console.log("kill"); end = +new Date(); var diff = end - start; console.log(diff); }); } } },50); }); } I hope you can help me out with this stubborn issue. This question is a follow up question on with the live example included. The previous question got no response, probably because of lack of live example.Best regards, Mitt
  2. Hi, Often I come with the "problem" that I start a game using separated images and later I pack them in a texture atlas. I say a problem because when you create the sprites from separated image files yo do something like this: // load the single image filesgame.load.image("bird", "assets/bird.png");game.load.image("dog", "assets/dog.png");...// create the sprites using the images keysgame.add.sprite(10, 10, "bird");game.add.sprite(20, 20, "dog");Ok, but when I decide to migrate the game to use texture atlas I come with the problem that my "create" code gets broken, why? because I should use add an extra (frame) parameter: // load the texture atlasgame.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json");...// create the sprites using the atlas key and the frame namegame.add.sprite(10, 10, "atlas1", "bird");game.add.sprite(20, 20, "atlas1", "dog");As you can see, I had to change all places where I create the sprites and that's a bit tedious and even error prone. Do you know if there is any way in Phaser to avoid this? A solution I see is to introduce a concept like a "key namespace", something like:// in case of images the last parameter is the namespace (default can be "global")game.load.image("bird", "assets/bird.png", "animals");game.load.image("dog", "assets/dog.png", "animals");// to create an sprite with the birdgame.add.sprite(10, 10, "animals.bird");// in case of texture atlas all frame names are registered under the "animals" namespacegame.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json", "animals");// so to create an sprite with the bird is the same as in images:game.add.sprite(10, 10, "animals.bird"); Or maybe just we can introduce a new "globalKeys" parameter to load the atlas: var globalKeys = true;game.load.atlas("atlas1", "assets/atlas1.png", "assets/atlas1.json", globalKeys);...// somewhere in Phaser.Loader is registered that "bird" is linked to the "atlas1" frame "bird"game.add.sprite(10, 10, "bird");Am I missing something?
  3. 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: 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"); } } }); });
  4. So I've been looking into the new updates to Phaser CE (2.7.0+) and what has caught my eye the most is the updates to the way Phaser handles textures. It now seems to have the ability to handle texture compression formats for WebGL which is exciting! Previous to this, all the games I had worked in were just loading PNG RGBA data into the graphics card and having come from other engines that support texture compression for GPU RAM optimizations, it was definitely a feature I missed. I've branched on an old project I had in order to test this new compression system but I'm not sure how it would work with atlases. I was already using Texture Packer before to generate Texture Atlases for the game but they were just PNG atlases. I came across this Advanced Rendering Tutorial where it explains how to set up your Texture Packer project. I've gone ahead and done that but the examples only show the ability to load an image with those compression settings. Here is a doc reference to the load image function. Currently, I am using'key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' });'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); How would I go about loading my atlases with the accompanying JSON information using the new compression system?
  5. 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?
  6. 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);; 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
  7. The Phaser Editor has an Texture Atlas editor, but it seems I can only create a new atlas file and put individual frames in it. I have an existing texture atlas json file and existing texture atlas image. Is there a way to import this into a texture atlas generator file?
  8. Hello! I just started out with Phaser last week and total noob, though I do have experience with html and javascript. I've studied through a number of the 2D platform tutorials and they are great! To further my learning I trying to redo a couple stages of Zelda 2, and got the basics of walking animation done. That spritesheet contains images that are each 18x32 pixels. I am moving on to adding the crouching and attacking animations but have found these sprites are of different size than the walking animations. Crouching is 18x27 pixels, and the individual crouch-attach sprites are 34x26 .. because link is extending his sword. I'm not sure how to adjust for collision detection here with these differing sprite sizes. I don't believe that a phaser spritesheet can have 'frames' of different sizes. is there where I should be looking into the P2 physics and away from Arcade? Can someone please direct me to maybe an existing tutorial I've missed that will reveal how to work this in? Thank you! Here's what I have so far..
  9. I am running into all sorts of trouble when animating sprites with frames of different dimensions. I mean like if frame 1 of a walk animation is 30x35 and frame 2 is 38x38, for example, i have a problem keeping the sprite level with the floor. it will either fall through the floor, or be up in the air. I have tried to set the anchor y point to 1 so that it stays level with the ground, this would be ideal if it worked I have tried using setSize to try and keep the sprite object's dimensions fixed throughout the animation, not as ideal of a solution but it didnt work anyways. In my game, which is a platformer type game, I have enemies that check the floor in front of them, and if there is no block, (i.e they are on the edge of a platform) they turn around to avoid falling off. but the animation causes the enemy to hover over ground level. not only does it look ugly but it causes them to go back and forth over and over I also want the player to be able to duck, shrinking the size of his hitbox to avoid head-level projectiles, but as i said, he just falls through the world. thanks
  10. Hi, just noticed my game has suddenly dropped fps quite dramatically (only on Chrome). I found when I reduce my texture atlas from 4096 x 4096 to 4096 x 2048 my frame rate is back up to 60. I'm a bit confused by this. My framerate only drops when I transition to a new screen which draws a few new sprites, but these sprites are still from the same texture atlas, so there is no additional memory used. The rapid drop of frame rate that continues to fall seems to be a symptom of texture thrashing, but my understanding of texture trashing is that it's caused by running out of texture memory and continually swapping textures on the gpu to draw the image. But in my case I'm not adding additional textures to trigger the frame rate decrease... I'm using the CANVAS renderer. Anyone have ideas? Cheers,
  11. Hi, I use the Spine 2D to create an animation objects. There is a background layer where placed several containers with tiles of earth, water, decor and animated background. I need to combine all textures in a texture atlas to optimize drawcalls and atlas size. Can I change the original texture atlas of Spine animation to another and use one atlas for all textures of background? If so, what type of texture atlas use (spine or native), How to connect an atlas from the loader in to the spine animation (if atlas native)? How to get textures from Spine atlas to create sprites (if atlas is spine)? Thanks.
  12. Hi there i have problems with animations, im using texture packer and exporting to JSON hash, then when im adding animations everything seems to work fine but as soon as i add second animation everything stops working, game is running but animations are not playing, additionally starting frame for my sprite is changing to completely other one. Im using phaser 2,2,2. Here is a minimal code which produce problem. var game = new Phaser.Game(1024, 768, Phaser.AUTO, '',{ preload: preload, create: create, update: update } );var cursors;var piesbieg; function preload() { this.load.image('Sky', 'rzeczy/Sky.png'); game.load.atlasJSONHash('piesrun', 'rzeczy/piesdrobne/dogplis.png', 'rzeczy/piesdrobne/dogplis.json'); } function create() {game.add.sprite(0, 0, 'Sky');piesbieg = game.add.sprite(500, 430, 'piesrun','pp4.png'); piesbieg.animations.add('walkp',['pp1.png','pp2.png','pp3.png','pp4.png','pp5.png','pp6.png','pp7.png','pp8.png','pp9.png','pp10.png','pp11.png','pp12.png'],30,true,false);piesbieg.animations.add('lewobieg',['pl1.png','pl2.png','pl3.png','pl4.png','pl5.png','pl6.png','pl7.png','pl8.png','pl9.png','pl10.png','pl11.png','pl12.png'],30, true, false);cursors = game.input.keyboard.createCursorKeys(); } function update() { if(cursors.right.isDown) {'walkp'); }// if(cursors.right.isUp) {piesbieg.animations.stop('walkp',true); } if(cursors.left.isDown) {'lewobieg'); } if(cursors.left.isUp) {piesbieg.animations.stop('lewobieg',true); } if(cursors.up.isDown) {//piesbieg.animations.stop('lewobieg',true); console.log('jestudalosie'); } }Any help ? Thanks in advance
  13. Hi! So here's something that has been bothering me for a while... Can we somehow "unload" textures/texture atlases/assets? I'm working on a game that has multiple levels. At the start of each level, I preload all of the assets the level requires using the AssetLoader. So at the start of the first level I have something like: loader = new PIXI.AssetLoader(["level1_assets.json"]);loader.onComplete = startLevelloader.load();While at the start of the second level I have something like: loader = new PIXI.AssetLoader(["level2_assets.json"]);loader.onComplete = startLevelloader.load();The point is, once the first level is over, I will never again need the texture atlas used to store its assets (resp. "level1_assets.json"). So there's no need for it to linger in my precious GPU memory anymore! Can I somehow dispose of it?
  14. I'm trying to convert my spritesheet animations into 1 bigger texture atlas. I want to avoid calling load Texture every click (swinging weapon). The problem is I can't find the way to provide frameData for my animation. I load 3 images to texture atlas and then I have 3 frames after export. How I can tell that there are 4 frames in 1 texture atlas sprite? I used to write like this: this.loadTexture(toolName + side, 0);Any ideas?
  15. So I have a number of texture atlases that describe different textures for what are basically the same object (they are basically textures that describe walls, each texture atlas describes a number of orientations/views for a particular material i.e. a wall texture atlas, a wood texture atlas, a decoration texture atlas etc etc). Each frame within the atlas represents an orientation/view (side-on, front-on etc etc) so they have the same frame names. Infact, apart from `meta.image` the atlases files are the same. To load these in I naturally want to async them to get them loading as fast as possible. To add some complexity to this inquiry I've wrapped `PIXI.JsonLoader` into a promise, but the theory would be the same using callbacks. The issue is that by the time the `loaded` event callback is fired for the quickest response you've already initiated several other requests. These additional requests will nuke the `frameID`s within `PIXI.TextureCache` which is used by both `PIXI.Texture.fromFrame` and `PIXI.Sprites.fromFrame`. So, in my case, if I attempt to load stone, wood and metal textures (in that order) and create textures for each frame during the 'loaded' callback then all textures will be metal textures because `PIXI.TextureCache( frameID )' will return a frame that is linked to the filename of the metal textures. The answer is to either rename frameID at my end (not a big ask really, just inconvenient and error prone if you allow users of your game to produce resource or texture packs) or queue requests so that all textures are created before processing the next atlas. The first option here is annoying whereas the 2nd is inefficient. To my mind the TextureCache should be smarter to associate frameID's with filenames to try and better namespace the cache. I guess my only question here is: is there another way of loading multiple texture atlases that I missing? or I can pursue the the route of 'fixing' texture cache namespacing and submitting a PR
  16. Hi, I am using an existing sprite sheet (generated by TexturePacker originally for a starling based project). Actual sprite canvas is bigger and contains some transparent area. However, while creating the sprite sheet in TP, "Trim" option was selected and result is a subtexture entry like below: <SubTexture name="button1" x="63" y="1171" width="60" height="110" frameX="-12" frameY="-20" frameWidth="160" frameHeight="160"/>In Phaser, I am using following code to add this button : var tab1 = new Phaser.Button(, 18, 34, 'mysheet');tab1.frameName = 'button1';grp.add(tab1); //group is created in my game scene.My button is being added fine at the desired location. However, when I do mouseover I find that hitArea of button is off by exactly frameX and frameY value of atlas XML. So some area of button is not getting hand cursor at all while some "transparent" area near button is showing it. I tried changing value in XML for this button to 0 for both frameX and frameY and button was added at correct location. However, I feel thats not right solution, given that same assets are being used for starling project and I don't want to make manual changes. There must be something which I am missing in this process. Any clue, what I am missing? Thanks in advance