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 66 results

  1. One atlas many json for spine

    I want to use one atlas for many spine animations in my game. I found the way how to do it with loader. I am loaded atlas with game loader (name other.atlas) and got in game.loader.resources.other. Then i am trying to load json file of my animation from console. otherLoader = new PIXI.loaders.Loader() spineLoaderOptions = { metadata: { spineAtlas: 'game.loader.resources.other' } }; otherLoader.add('someJson', 'static/img/content/fullHD/machine/elements/testJ.json', spineLoaderOptions) .load() But it will not work. Loader still wants to load atlas with name of my json. GET http://localhost:3004/static/img/content/fullHD/machine/elements/testJ.atlas 404 (Not Found) I think it is because of atlas parser . I need varibale "pages" in my metadataAtlas, but there is no pages. How atlas data looks like in console. I am doing something wrong and i dont know what.
  2. I have issue with loading images from atlas! Game I developing works great , but on older devices after loading , images are not shown! This happens on Samsung Galaxy Tab 2 in every browser (chrome , opera ,firefox). So if somebody have solution , please help
  3. GAF Player for PixiJS available !

    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 !
  4. Just in case someone needs it (cause I did). This configuration change the template to export json file compatible with Phaser game.load.atlas function Download from my repo: Just download the .sbx file and double click it.
  5. The problem of the sprite key

    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?
  6. Particle Storm Atlas

    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!
  7. 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'); } } }
  8. Phaser js distort sprit esheet

    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.
  9. 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?
  10. Many atlas for one sprite

    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
  11. 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
  12. 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?
  13. 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.
  14. 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!
  15. Texture Atlas Creator

    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
  16. 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);
  17. Sprite dimensions with atlas animation

    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.
  18. pixi, atlas and spine destroy

    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!
  19. 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
  20. Need help on Phaser atlas

    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.
  21. Phaser + SPINE

    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.
  22. Remove cache from atlasJSONHash

    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.
  23. 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.
  24. 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$" } }
  25. Try the new Phaser Editor

    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.