Search the Community

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 this.game.load.atlasJSONHash('key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls this.game.load.image('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); this.game.load.texture('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?

Hey, I am trying to use a texture atlas that comes with xml and not json. its actually one from kenny nl's free assets, which seems to come with xml only. i cant find a phaser example which loads an xml, and if i convert the xml to a json using an online converter, the json is formatted wrong ( " Atlas JSON Hash given, missing 'frames' Object" ) thanks

Hi all, I would like to share here a simple python app I'm coding: PicPacker. It's -or will be someday- somehow similar to TexturePacker. It takes same sized images, processes them and yield, as you all has supposed, a single image containing all the others. Also if you specify it you can generate a json to index all images. If you like be my guess and try it, at least for testing purposes ☺️

I am trying to get Terrain Splatmap support into the toolkit. So a terrain built with up to 12 separate textures with the 12 matching normal maps (if using bumping). Now including the up to 4 actual splatmaps or alphamaps used to 'SPLAT' the textures onto the terrain thats a total of 28 additional textures (besides any lightmap of reflection textures) needed to create a max detailed terrain. Thats way too many textures for WebGL. My browser only supports a max use of 16 textures at once even if in a textureArray. IPHONES only support 8 textures at once... GLSL MAX_TEXTURE_IMAGE_UNITS. So I created a Texture Atlas system in Babylon Toolkit (I also use this for my Texture Atlas Baking Tools) to pack textures into a texture atlas and return an array of UV coordinates rectangle structs for each tile or cell in the texture atlas. Example atlasRect Array, atlasInfo Array And The textureAtlas image: "atlasRect1": [ 0.0, 0.0, 0.5, 0.25 ], "atlasRect2": [ 0.0, 0.5, 0.5, 0.25 ], "atlasRect3": [ 0.25, 0.0, 0.5, 0.25 ], "atlasRect4": [ 0.25, 0.5, 0.5, 0.25 ], "atlasRect5": [ 0.5, 0.0, 0.5, 0.25 ], "atlasRect6": [ 0.75, 0.0, 0.5, 0.25 ], "atlasRect7": [ 0.5, 0.5, 0.5, 0.25 ], The matching atlasInfo array contains the texture tile or cell information (uScale, vScale, uOffset, vOffset): "atlasInfo1": [ 80.0, 80.0, 0.0, 0.0 ], "atlasInfo2": [ 100.0, 100.0, 0.0, 0.0 ], "atlasInfo3": [ 80.0, 80.0, 0.0, 0.0 ], "atlasInfo4": [ 80.0, 80.0, 0.0, 0.0 ], "atlasInfo5": [ 100.0, 100.0, 0.0, 0.0 ], "atlasInfo6": [ 80.0, 80.0, 0.0, 0.0 ], "atlasInfo7": [ 80.0, 80.0, 0.0, 0.0 ], The texture atlas image I create, Note the first tile or cell is the bottom left: I dont know all the ins and outs of what to multiply by what to get the desired effect. Now I need to get the tile or cell from texture atlas and use atlasInfo.xy (uScale and vScale): Here are my main two functions I added to shader: vec4 textureAtlas2D(sampler2D atlas, vec4 rect, vec2 uv, vec2 offset) { vec2 atlasUV = vec2((uv.x * rect.w) + rect.x, (uv.y * rect.z) + rect.y); return texture2D(atlas, atlasUV + offset); } vec4 textureFract2D(sampler2D atlas, vec4 rect, vec2 scale, vec2 uv, vec2 offset) { vec2 fractUV = fract(uv * scale); return textureAtlas2D(atlas, rect, fractUV, offset); } textureAtlas2D uses the rectangle that holds the UV Coords from above to just get the 'Desired Cell'. This works great... EXCEPT IS DOES NOT SCALE ... The ONLY code I could find after months of goggle search of GLSL Texture Atlas Tiling (or Scaling) was to use the GLSL fract() function to REPEAT into the texture atlas giving you scale. So I created textureFract2D as a wrapper to incorporate 'uvScale'. Example snippet from my splatmap shader call texture atlas functions: #ifdef DIFFUSE // Splatmaps #ifdef splatmapDef vec4 splatColor = vec4(0.0, 0.0, 0.0, 0.0); vec4 baseColor1 = vec4(0.0, 0.0, 0.0, 0.0); vec4 baseColor2 = vec4(0.0, 0.0, 0.0, 0.0); vec4 baseColor3 = vec4(0.0, 0.0, 0.0, 0.0); vec4 baseColor4 = vec4(0.0, 0.0, 0.0, 0.0); // Base splat colors (No Texture Tiling) if (splatmapRects > 0.0) { baseColor1 = textureAtlas2D(splatmap, splatmapRect1, vTerrainUV, uvOffset); } if (splatmapRects > 1.0) { baseColor2 = textureAtlas2D(splatmap, splatmapRect2, vTerrainUV, uvOffset); } if (splatmapRects > 2.0) { baseColor3 = textureAtlas2D(splatmap, splatmapRect3, vTerrainUV, uvOffset); } if (splatmapRects > 3.0) { baseColor4 = textureAtlas2D(splatmap, splatmapRect4, vTerrainUV, uvOffset); } // Texture atlas colors (Use Texture Tiling) if (atlasInfos > 0.0 && atlasRects > 0.0) { splatColor = textureFract2D(diffuseSampler, atlasRect1, atlasInfo1.xy, vTerrainUV, uvOffset) * baseColor1.r; if (atlasInfos > 1.0 && atlasRects > 1.0) { splatColor += textureFract2D(diffuseSampler, atlasRect2, atlasInfo2.xy, vTerrainUV, uvOffset) * baseColor1.g; } if (atlasInfos > 2.0 && atlasRects > 2.0) { splatColor += textureFract2D(diffuseSampler, atlasRect3, atlasInfo3.xy, vTerrainUV, uvOffset) * baseColor1.b; } // Second splat colors if (atlasInfos > 3.0 && atlasRects > 3.0) { splatColor += textureFract2D(diffuseSampler, atlasRect4, atlasInfo4.xy, vTerrainUV, uvOffset) * baseColor2.r; } if (atlasInfos > 4.0 && atlasRects > 4.0) { splatColor += textureFract2D(diffuseSampler, atlasRect5, atlasInfo5.xy, vTerrainUV, uvOffset) * baseColor2.g; } if (atlasInfos > 5.0 && atlasRects > 5.0) { splatColor += textureFract2D(diffuseSampler, atlasRect6, atlasInfo6.xy, vTerrainUV, uvOffset) * baseColor2.b; } // Third splat colors if (atlasInfos > 6.0 && atlasRects > 6.0) { splatColor += textureFract2D(diffuseSampler, atlasRect7, atlasInfo7.xy, vTerrainUV, uvOffset) * baseColor3.r; } if (atlasInfos > 7.0 && atlasRects > 7.0) { splatColor += textureFract2D(diffuseSampler, atlasRect8, atlasInfo8.xy, vTerrainUV, uvOffset) * baseColor3.g; } if (atlasInfos > 8.0 && atlasRects > 8.0) { splatColor += textureFract2D(diffuseSampler, atlasRect9, atlasInfo9.xy, vTerrainUV, uvOffset) * baseColor3.b; } // Final splat colors if (atlasInfos > 9.0 && atlasRects > 9.0) { splatColor += textureFract2D(diffuseSampler, atlasRect10, atlasInfo10.xy, vTerrainUV, uvOffset) * baseColor4.r; } if (atlasInfos > 10.0 && atlasRects > 10.0) { splatColor += textureFract2D(diffuseSampler, atlasRect11, atlasInfo11.xy, vTerrainUV, uvOffset) * baseColor4.g; } if (atlasInfos > 11.0 && atlasRects > 11.0) { splatColor += textureFract2D(diffuseSampler, atlasRect12, atlasInfo12.xy, vTerrainUV, uvOffset) * baseColor4.b; } } baseColor = splatColor; #else baseColor = texture2D(diffuseSampler, vDiffuseUV + uvOffset); #endif #ifdef ALPHATEST if (baseColor.a < 0.4)å discard; #endif #ifdef ALPHAFROMDIFFUSE alpha *= baseColor.a; #endif baseColor.rgb *= vDiffuseInfos.y; #ifdef splatmapDef #ifdef BUMP //normalW = perturbNormals(viewDirectionW, baseColor1, baseColor2, baseColor3, baseColor4, uvOffset, atlas1UV, atlas2UV, atlas3UV, atlas4UV, atlas5UV, atlas6UV, atlas7UV, atlas8UV, atlas9UV, atlas10UV, atlas11UV, atlas12UV); #endif #ifdef TWOSIDEDLIGHTING normalW = gl_FrontFacing ? normalW : -normalW; #endif #endif #endif My problem is I dont know how to grab the cell info using the UV coords and apply the scaling needed. If I use the textureFract2D GLSL fract to do the scaling I get edge seams (I will post screen shots in the next post). @Deltakosh pointed me the particleSystem direction because I guess it does something like using SPRITESHEET and what they ar calling a 'cellIndex' to get to the tile or cell. Now there is a bunch of code that deals with sprite sheet width and some calculations to get a rowOffset and columnOffset. Well I dont have that kind of info, but like I explained above, I have the ACTUAL UV COORDS for each tile or cell in the texture atlas. But I am STILLL GAME DEV NEWBIE, I dont know what I need to do to use those UV coords and info.xy (uScale, vScale) to get the desired effect. This is the gist of what the particle system does for texture atlas or sprite sheet support: //vec2 offset = options.zw; // Dunno what this is - ??? //attribute float cellIndex; // Dunno what this is - ??? //uniform vec3 particlesInfos; // x (number of rows) y(number of columns) z(rowSize) //#ifdef ANIMATESHEET //float rowOffset = floor(cellIndex / particlesInfos.z); //float columnOffset = cellIndex - rowOffset * particlesInfos.z; //vec2 uvScale = particlesInfos.xy; //vec2 uvOffset = vec2(offset.x , 1.0 - offset.y); //vUV = (uvOffset + vec2(columnOffset, rowOffset)) * uvScale; //#else //vUV = offset; //#endif I have no idea how to take this and adapt this to using the actual UV coords WITH SCALE. PLEASE, ANYBODY, I AM BEGGING (AGAIN)... HELP ME RE-WRITE textureFract2D to get the desired effect Here is my shader programs so far: splatmap.vertex.fx splatmap.fragment.fx UPDATE You can download the Test Terrain export project and edit the shader in the src/shader folder directly and just hit refresh on your browser to see effect Look at next post for example screen shots ... THANKS FOR READING THIS FAR Pinging @Deltakosh and @Sebavan and @Pryme8 and @adam and last but not least my man 'Wingy' at @Wingnut ... Any thought Guys ??? Yo @NasimiAsl ... The Shader Guru ... Maybe you can have another crack at it, but this time use the Test Terrain project from above and change the splatmap shader and hit refresh... Even better than play ground, you get the whole export project... easy access

Yo @NasimiAsl ... You still around ??? I need your expertise bro... I still can get Texture Atlas at the shader level... Whenever I try use GLSL fract() to tile into the texture is leaves edge seems... You tried to help once with some custom 4 tapping code... but never really worked ... especially from far away ... Anyways... I am ready to release the 3.1 beta but I CANNOT with the terrain builder like it it... Terrains will play a big part in your "Unity-Like" development using the BabylonJS Toolkit... So please bro... if you got time... I need you to help me fix that shader part... I can send you the whole project so you have the code to work with. I actually have a small list of things I need to get working... but I can at least release the toolkit if I can just fix the texture atlas problem for my terrain builder

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: http://forwardingsolutions.club/ 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

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?

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"); } } }); });

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?

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

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?

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.. https://rpg-hero-uncut-errornull.c9users.io/v0_02/

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

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,

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.

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) {piesbieg.animations.play('walkp'); }// if(cursors.right.isUp) {piesbieg.animations.stop('walkp',true); } if(cursors.left.isDown) {piesbieg.animations.play('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

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?

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?

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

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(this.game, 18, 34, 'mysheet');tab1.frameName = 'button1';grp.add(tab1); //group is Phaser.group 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