Search the Community

Showing results for tags '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 64 results

  1. Hi there, Here is the first version of GAF Player for PixiJs. If you know Flump or Dragon Bones, take a look at GAF, it's so much more powerful !!! At the moment, GAF Player for PixiJS is available for Haxe-Pixi but I will deliver a pure js lib soon . Enjoy PS: I'm really interested in bug reports !
  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. Hey guys, I was wondering if Particle Storm can handle an atlas: I'm trying to port this: var emitter =, this.moon.y - ~~(this.moon.y * 0.5), 25); emitter.makeParticles("prefabs", ['present_0.png', 'present_1.png', 'present_2.png', 'present_3.png', 'present_4.png', 'present_5.png', 'present_6.png', 'present_7.png', 'present_8.png', 'present_9.png']); emitter.gravity = 200; emitter.start(true, 3500, null, 15); and from what I've seen until now there is only this setup in Particle Storm: var data = { lifespan: { min: 2000, max: 3000 }, image: ['flare_diamond', 'flare_point', 'flare_vertical'] }; Any ideas? Thank you!
  4. Hello, I am trying to make a platformer and have loaded my sprite with atlas, it works perfectly until I add collision. to keep the example simple I am using collideWorldBounds and the problem is that the sprite is colliding in the center and not the bottom where the little feet are. here are some screenshots and code snippets. var game = new Phaser.Game(300, 200, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render}); function preload() {'player', 'assets/player/player_full.png', 'assets/player/player_full.json'); game.load.image('bg', 'assets/bg.jpg'); game.load.image('ground', 'assets/world/ground.png'); } var player; var facing = 'right'; function create() { // START game.physics.startSystem(Phaser.Physics.ARCADE); // ADD SPRITES game.add.image(0, 0, 'bg'); game.stage.backgroundColor = "#4488AA"; // PLAYER player = game.add.sprite(10, 176, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); player.animations.add('idle_right', ['idle_1_right.png', 'idle_1_right.png', 'idle_2_right.png', 'idle_3_right.png'], 4, true); player.animations.add('running_right', ['running_1_right.png', 'running_2_right.png', 'running_3_right.png', 'running_4_right.png', 'running_5_right.png', 'running_6_right.png'], 9.5, true); player.animations.add('idle_left', ['idle_1_left.png', 'idle_1_left.png', 'idle_2_left.png', 'idle_3_left.png'], 4, true); player.animations.add('running_left', ['running_1_left.png', 'running_2_left.png', 'running_3_left.png', 'running_4_left.png', 'running_5_left.png', 'running_6_left.png'], 9.5, true); player.animations.add('jump_right', ['jump_1_right.png', 'jump_2_right.png', 'jump_3_right.png', 'jump_3_right.png', 'jump_4_right.png', 'jump_5_right.png', 'jump_6_right.png'], 11, true); player.animations.add('jump_left', ['jump_1_left.png', 'jump_2_left.png', 'jump_3_left.png', 'jump_3_left.png', 'jump_4_left.png', 'jump_5_left.png', 'jump_6_left.png'], 11, true);'idle'); // WORLD game.physics.arcade.gravity.y = 250; game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; } function update() { player.body.velocity.x = 0; if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { facing = 'right'; player.body.velocity.x = 90;'running_right'); }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { facing = 'left'; player.body.velocity.x = -90;'running_left'); }else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { if (facing == 'right') {'jump_right'); }else{'jump_left'); } }else{ if (facing == 'right') {'idle_right'); }else{'idle_left'); } } }
  5. Hi everybody, I got an issue with PhaserJS rope. I need to animate rope with spritesheet. The objective is to make curved / bent spritesheet animation. I tried almost everything but it won't render correctly. All I got is single frame being rendered, although I can see animation frames, and loop count in console log. I need to curve / bend sprite sheet animation,it is not necessarily need to be done by rope, any solution would be great. Will be grateful for any suggestion, thank you in advance.
  6. Take the following code: preload: function() { this.load.tilemap(this.level_key, 'assets/levels/test_01.json', null, Phaser.Tilemap.TILED_JSON); this.load.atlasJSONHash(this.atlas_key, 'assets/images/tiles.png', 'assets/images/tiles.json'); }, // [...] // These called from `create`: createMap: function() { // Add tilemap =; // Attach tiles this.tileset =, this.atlas_key); // Create layers // [...] this.charactersLayer ='Characters'); }, createPlayer: function() { // Find player tile var player_frame =, this.texture_packer_keys.player); var player_index = player_frame.index + 1; // atlas 0-based, but tilemap tileset is 1-based var player_tile =, 0, false, 'Characters'); // Create and center player sprite this.player =, player_tile.worldY, this.atlas_key, this.texture_packer_keys.player); // Remove placeholder tile, player_tile.y, 'Characters'); // [...] },Is there a simpler (built-in) way of retrieving a tile from a tilemap using its atlas frame name?I've scoured the `` Tilemap object, and can't find any reference to the original atlas names, since it seems that `` just carries over indexes? Additional question: would I avoid this issue by using an Object layer for my player placeholder?
  7. Hi to all, I have many animations for a ninja sprite (eg idle, run, punch etc). Using Texture Packer, the atlas creation generates 2 *.png and 2 *.json. Using the best placement possible Texture Packer splits some animations between two textures (eg. the run animation has frames in both PNGs). How do I reassemble those frames in Phaser for my eg run anim? Is it possible? Here is what I would like to do... but this does not work:'ninja', 'assets/ninja-1.png', 'assets/ninja-1.json');'ninja', 'assets/ninja-2.png', 'assets/ninja-2.json'); = game.add.sprite(x, y, 'ninja');'run', Phaser.Animation.generateFrameNames('run', 0, 14, '', 2), 30, true); // frame 0,1,2,5,14 are referenced in ninja-1.json and found in ninja-1.png. frame 3,4,6,7,8,9,10,11,12,13 are referenced in ninja-2.json and found in ninja-2.png Note: All this works in Texture Packer; it knows, for an animation, where to get the frames from both PNGs. Note2: It also raises the question of how to bind many atlases to a single sprite even if no frames, for a given animation, are split between textures. Thank you, ohenley
  8. hi i wanna check image(basetexture) loaded that load by altas... pixi call like under code var atlas_url = "data/packed/map_object.atlas"; PIXI.loader.add(map_name, atlas_url).load(onAssetsLoaded); // use callback var scope = this; function onAssetsLoaded(loader, res) { .... } i can't check basetexture loaded. how can i check loaded done..? thx
  9. Hi, guys. I know that for an image I can retrieve it's width issuing the command game.cache.getImage(key).width; But suppose that instead of a single image you have an atlas named 'atlas' and its key is 'atlas' and that it contains an image named 'logo.png'. How could I get the width of image named 'logo.png' from cache object?
  10. Hi all, I'm just wondering if there's a way to create a sprite sheet, or ideally an atlas using Phaser.Graphics? As far as I understand it, Phaser.Graphics is vector based and it would need to be rendered out to a texture. I tried using generateTexture() (which returns a PIXI.RenderTexture), with the game.cache.addSpriteSheet function in 'create' and it doesn't seem to work or give any error in the console. I guess I could use the BitmapData class to draw on and use the canvas but I was hoping to use Phaser.Graphics for the API and so when generating textures it is scalable etc. Maybe there's a better way of doing this? Thanks for any help.
  11. Hello, I have got procedurally generated terrain. Terrain is divided into chunks. There is texture atlas image which contains all block textures. UVs of certain block are set to appropriate positions in texture. But it renders also edges of neighbour block texture: Atlas texture: Any help appreciated!
  12. Sorry if this is the wrong board. I needed to create Texture Atlases for my sprites in game, and a quick google search led me to TexturePacker. However, that is not a free solution and I don't like spending money on task I can write my own code for Before creating my own Texture atlas creator however, I stumbled upon This tool seemed to bascially do what I wanted with the added cost of being free, but it did not output to a format readable by Phaser. So I wrote a DLL to allow it to do so! Pretty easy to use. Just download spritesheetpacker and put SpriteSheetPacker.JsonExporters.txt in the same directory as the executable, and change the extension from .txt to .dll. I should mention the .json file is in the hash format. The JSONExporter.txt isn't neccessary, it's just source if anybody cares. SpriteSheetPacker.JsonExporters.txt JSONExporter.txt
  13. Hello guys, I just started playing around with phaser and i`m stuck now with this error message and I couldn't find the solution on the web so far. It happens when it reaches the animation.add line. Nothing seems to be wrong with my json or png files... I am using a JSON Hash and not JSON Array, so this should work.. Error: Phaser.Cache.getImage: Key "p1walk01" not found in Cache. My Code: preload: function () { //'player', 'BODY_male.png', 50, 65, 36); //this.load.spritesheet('player', 'asset/BODY_male.png', 50, 51, 36, 10, 14); this.load.image('background', 'asset/beach.jpg'); this.load.image('ball', 'asset/Volleyball.png'); this.load.image('net', 'asset/vnet.png'); this.load.atlasJSONHash('player1', 'asset/sprites.png', 'asset/sprites.json'); }, create: function () { /* // Add logo to the center of the stage this.logo = this.add.sprite(, // (centerX, centerY) is the center coordination, 'logo'); // Set the anchor to the center of the sprite this.logo.anchor.setTo(0.5, 0.5); */ // = '#0072bc';, 0, 1200, 800);; = 200; this.background = this.add.tileSprite(0, 0, 1200, 800, 'background'); this.background.fixedToCamera = true; this.player = + - 10 , 'player1', 'p1walk01'); this.ball =, 400, 'ball');[this.ball,this.player], Phaser.Physics.ARCADE); // //'playerwalk', 1, 2,undefined,2); // //this.player.scale.setTo(1, 1); this.player.animations.add('playerwalk', Phaser.Animation.generateFrameNames('p1walk', 0, 2, '', 2), 5, true);
  14. Hi I have a bunch on atlas animations bound to a single sprite but the animations and frames vary in size(width and height). Is it possible to update the sprite dimensions in the update to get the details from teh JSON file and update the body accordingly? I would like to make this a generic function for all animations so that I dont have to set it myself. Any help would be great.
  15. Hi everybody, I would like to know how to unload a texture atlas (created with TexturePacker) and a spine file (created with Spine). I have loaded them directly using something like PIXI.loader .add(filename) .load(callback); But I cannot see any destroy method like the texture's destroy method. I have noticed that the loader has a "_image" resource associated with the json file and also some texture (and also something else) associated with the spine file. Should I write a destroy method by myself or is there a "standard" way to do this? I need to clear these resource types in order to free the GL memory. Thanks!
  16. Hello everyone! I'm almost finished my project, during project building i used sprites and spritesheets as separated images. Now i think that was not a good idea So now i want to pack my sprites and spritesheets to texture atlas. I found such cool program as texture packer and did all the things to pack my images. Now i have follow severities: 1) After loading textures from texture atlas previous keys, wich i used for sprites will be not valid and as i understand it impossible to rebind it to textures from atlas (i hope this is wrong ). So may be here exists some easier way then rewrite all the lines which contained previous sprite keys. 2) I used spritesheets for animation in my project and the second problem is i don't know how to make spritesheet using image inside atlas. Is it possible? Or should i slice all my spritesheets on frames and add it 1by 1? 3) Is it worth the efforts? Best regards and the for advance
  17. I'm still new to Phaser, need some help on loading atlas. I used Texture Packer to output the "multi-pack" Phaser jsonhash atlas which give me 5 json files and 5 png files, for one long 200*300 animation. It seems I can not load them into the same "key" using game.load.atlas(). What's the solution to this? thanks.
  18. Hi, I'm a beginner with phaser, and I like using spine for my animations. The problem is that I can't find a good tutorial or anything interesting where I can easly understand and configure it. 1st question : Can I load Skeleton Animations of spine into Phaser ? If yes, is there anyone who can explain it clearly to me ? 2nd : I clone phaser lib into Cloud9 ( but I don't know how to generate the javascript .min.. (I saw that there was a pixi lib for loading spine animations but I don't know how to use it...) 3nd : However, if there is no solutions for the skeleton animation, I tried exporting usual spritesheet with Spine, BUT... Spine export a .atlas file for the positions of the frames, NOT json or xml, the problem is that Phaser don't support it... Is there a solution ? I have a spritesheet with many animations, the json would be very usefull so I don't have to type every positions of sprites in phaser... Thank you guys ! Keysim.
  19. I have a game on mobile which gets slower and slower as you progress which I have identified down to the cache not being emptied. I have successfully loaded in a number of pngs and json files by using the following in a loop through, "image.png", "data.json");Then I am successful in removing the sprite from the scene using the following:item.destroy();However when I try to then remove the png and json atlas json files from the cache, it errors, any ideas? I am using the;Any help would be greatly appreciated I have successfully removed sounds and images, but not atlas.
  20. Here's my loader code which worked on the old version of pixi.js (1.6.1) But now there's a new loader implemented, and I don't understand how it works. How can I make my loadercode work for the latest pixi.js? Basically you send a file called "assets/gfx/something.sprdef" to the loader which had forexample this line in it: 42,42 then it'd take the same name as above, but replace .sprdef with .png, then split the png into 42 wide and 42 high textures which then could be used in pixi. Then I could easily use it with: player = PIXI.Sprite.fromFrame("assets/gfx/something.png0"); But it'd also support making many different for example if you wrote in the .sprdef: 000,000,008,008,016,016,Font1 it'd start from position x:0, y:0 and grab sprites at 8 pixels wide and 8 pixels high. 16 in x-direction and 16 in y-direction. Then name it Font1. Ofcourse the naming part is not implemented as you can see in the code.
  21. How to determine the coordinates of the textures in the Atlas, to easily make an animation of 10 and more images ? My code: {"frames": [ { "filename": "gems.swf/0000", "frame": {"x":19, "y":12, "w":129, "h":129}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":0, "y":0, "w":129, "h":129}, "sourceSize": {"w":129, "h":129} }, { "filename": "gems.swf/0019", "frame": {"x":0, "y":1355, "w":447, "h":412}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":-14, "y":-2, "w":447, "h":412}, "sourceSize": {"w":447, "h":412} }], "meta": { "version": "1.0", "image": "textures.png", "format": "RGBA8888", "size": {"w":1072,"h":1756}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:c510ff2f709e8d175b059cd1cbe64773$" } }
  22. Hello, I am the author of Phaser Chains ( and now I want to present to you my last work: *Phaser Editor*. (it is a desktop editor) (This editor was announced in (by the Phaser authors) with the title "A complete Phaser editor with powerful features". ) General JavaScript editors are good for Phaser because the Phaser simplicity but I see the need of something more dedicated: - Project and file creation wizards. - Coding assistance (type inference, auto-completion of the API, doc hovers, preview). - Integrated and quick help. - Integrated web server for easy testing. - Assets manager (following the official Phaser Asset Pack format). - Assets packers (image and audio atlas). - Keep it simple enough that you can develop your big game but also test any other code snippet or example of the many Phaser tutorials in the internet. - Transparency: there is not any other layer, wrapper or plug-in on top of Phaser: I do not want to hide Phaser, I want you to learn it. - Tooling: with the time I would like to integrate common developing tasks into the editor, for example, right now it is implemented an Optimize PNG images, but I want more. - The name is Phaser Editor but my goal is a Phaser IDE ;-) How am I doing it? I am building Phaser Editor on top of one of the leaders platforms of the programming industry: the Eclipse platform, specially, the Eclipse Web Tools. If you know the Eclipse ecosystem you will feel very comfortable in Phaser Editor, if you don't know Eclipse yet, I think this is the moment for you to go with it ;-) Eclipse is very popular in the Java world, but it is also popular to develop with other programming language (javascript, python, php, C, etc...) because it can be extended and customized for a specific technology. The Eclipse workbench is full of features and a plenty of third plug-ins going from color themes and Git integration to cordova based tools for mobile development, and all of them can be installed (or integrated in a future) in Phaser Editor. The Eclipse Web Tools, specially the JavaScript Development Tools (, are a very good piece of software, the most I like is the type inference engine, that in the case of Phaser Editor it is customized to give a much better experience with the Phaser API. So take a look to a demo video. Download and try it yourself: To run it first you should install the Java runtime (JRE 8 64bits), then execute the PhaserEditor.exe file. In a future a I will give the option to bundle the JRE together with the product and make it available also for the others operating systems supported by Eclipse (linux, osx). Check the list of features What's next? This is only a preview, but in dependence of your very valuable feedback I will release it sooner or later. Right now I am working on complete some features introduced in Phaser 2.4.3 and writing the user guide. Suscribe to our mailing list and we notify you when the final product (or a major update) is ready (I am not going to explode your inbox) Thanks, Arian Update 2015/10/29: Phaser Editor RC release, read post.
  23. Hi there, I am currently using Phaser for a University assignment and absolutely love it! Despite this I am having an issue trying to get a sprite atlas to work. I have created a sprite sheet and corresponding atlas using shoebox and I am loading it into the game like so: game.load.atlasXML('bee', 'assets/images/bee/beeAtlas.png', 'assets/images/bee/beeAtlas.xml');I think everything is working fine at this point. Then within my Bee object I am doing the following: this.sprite = game.add.sprite(50, 50, 'bee');this.sprite.animations.add('fly', Phaser.Animation.generateFrameNames('fly', 1, 11, '', 2), 30, true);'fly');For some reason this isn't working and I am getting the error: TypeError: 'null' is not an object (evaluating 'this.currentFrame.uuid')Has anyone got any idea why this might be? I should note that I been able to get animation working fine without an atlas, but I would like to use an atlas now so I can switch easily. I have attached the sprite sheet and atlas as well for you to take a look. Thanks in advance! beeAtlas.xml
  24. Hello everyone, I have a texture atlas which is created by TextuePacker and there are different sizes images in it. Also i exported it with json hash file from it and load my phaser project as game.load.atlas(.., .., ...); The question is, how can i read all frame names and its properties from json file in a for loop? I've tried this, var frameData = game.cache.getFrameData('texture');for (var i = 0; i <; i++) { var name = frameData.getFrameByName(i).name; //or// var name = frameData.getFrame(i).name; // or many things console.log(name); }but nothing. Thank you all.
  25. Hello, I'm having some trouble animating a sprite atlas. I apologize if this is something I'm doing wrong in TexturePacker but I can't seem to get it to animate right in Phaser. I loaded the atlas using game.load.atlasJSONHash() and it IS flipping through all the frames. The problem, however, is that the textures seem to re-center on the sprite based on the width of the particular frame. The running animation for my sprite worked perfectly because the width and height of each frame stayed the same, but when my sprite extends his sword out from his body and expands his size, his texture is re-centered. This causes his whole body to appear to shift over slightly. It almost seems as if I need to adjust the anchor point for the sprite at each frame. I hope that explanation makes sense. Here are some pictures of my spritesheets. It is worth noting that the slash animation works as intended if I don't perform the trimming and I leave all the frames the same size. TRIMMED: NOT TRIMMED: Any help would be greatly appreciated. Really enjoying Phaser thus far!