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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 77 results

  1. const atlasData = { // some data... } this.load.atlas("one", "one.png", atlasData); this.load.atlas("two", "two.png", atlasData); gets this error: File.js:557 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. at Function.File.createObjectURL (File.js:557) at ImageFile.onProcess (ImageFile.js:142) at LoaderPlugin.nextFile (LoaderPlugin.js:827) at ImageFile.onLoad (File.js:328) deleting either line works perfectly fine
  2. Hi guys, I just started coding using Phaser and so far, i'm really loving it. So, i'm creating my new game which has a main menu in it and I don't really know where to begin. I know there are lots of packages out there but I would really like to know the basics first before I dive into using tools that are basically "magic" to me. I have tried reading through the code of EZGUI to understand how I would get my desired output, but I haven't reached that level yet so it's quite challenging. I have the spritesheet ready which I will be using for the game window (actually any window) that I got from the free Kenny assets: And what I want is for this to look a little like this, the problem is I don't know where to start. And I would like for the panels to be dynamic depending on the size of the content. I understand that creating the windows, panels, etc.. from any image editor and just be static, but scaling them in-game would affect their quality. Any suggestions will do. I'm still new to Phaser and I would not mind trying out any advice you could give. Thanks!
  3. Hi all! How can I get the image size of an image in an atlas? getImageSize wants just a string... but tu reach the image it have to know both atlas key and image key.
  4. Fenopiù

    Loading atlas

    Happy new year everyone!!!!!! I'm starting this new Phaser year with a big question. Is there a way to do at least one of those three things: Have multiple keys for just one atlasJSONarray.json { "frames1": [ { "filename": "frame_x", "frame": {"x":0,"y":0,"w":246,"h":642}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":246,"h":642}, "sourceSize": {"w":246,"h":642} }, ... ], "frames2": [ { "filename": "frame_y", "frame": {"x":0,"y":0,"w":642,"h":246}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":642,"h":246}, "sourceSize": {"w":642,"h":246} }, ... ], "meta": { "app": "", "version": "1.0", "image": "frames.png", "format": "RGBA8888", "size": {"w":1904,"h":1926}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:7501c1db9128f0a301bfd7fdbb041683:f12b9111dd99102df2878485c54440cc:8dfa5172c304a3afa731250a934e2d8d$" } } //Load things in "frames1" with key 'spriteframe1' game.load.atlasJSONArray('spriteframe1' , 'images/frames.png' , 'images/frames.json'); //Load things in "frames2" with key 'spriteframe2' game.load.atlasJSONArray('spriteframe2' , 'images/frames.png' , 'images/frames.json'); Loading multiple atlases in just one atlasJSONarray.json { "frames": [ { "filename": "frame_x", "frame": {"x":0,"y":0,"w":246,"h":642}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":246,"h":642}, "sourceSize": {"w":246,"h":642} }, { "filename": "frame_y", "frame": {"x":0,"y":0,"w":642,"h":246}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":642,"h":246}, "sourceSize": {"w":642,"h":246} }, ... ], "meta": { "app": "", "version": "1.0", "images": ["frames1.png", "frames2.png"], "format": "RGBA8888", "size": {"w":1904,"h":1926}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:7501c1db9128f0a301bfd7fdbb041683:f12b9111dd99102df2878485c54440cc:8dfa5172c304a3afa731250a934e2d8d$" } } Have the same key for two different atlases who have data for the same sprite/sequence/animation/any //Load all the frames in both files for my animation game.load.atlasJSONArray('spriteframes' , 'images/frames1.png' , 'images/frames1.json'); game.load.atlasJSONArray('spriteframes' , 'images/frames2.png' , 'images/frames2.json'); Is it possibile at least one of this three things? If yes, how? Thanks for the answers guys!
  5. MouseCaneta

    Problem loading atlas

    I'm trying to load an atlas created with TexturePacker using: PIXI.loader .add("game", "assets/sprites/game.json") .add("ui", "assets/sprites/ui.json") .on("progress", loadProgress) .load(setup); But for some reason pixi seems to be indexing the loaded assets by incremental numeric id instead of using the labels contained in the respective json files. Because of this I'm getting index collision when loading more than one atlas. Anyone know why? Another question, how hard it is to write a custom loader. I'm trying to import animations from ToonBoom which uses a specific xml format. I want to load it automatically as with the TexturePacker atlas.
  6. Pryme8


    Ok, so things are starting to come together with a system I have been working on. I have most of the things figured out, Im just putting together tools to make editing the assest/levels easier. I have the prototype/alpha of the tileAtlas Sheet editor almost done, the only thing to add is speed settings for the animations and to export the SHEET object for later use in a PROJECT file. The editor lets you select a tile, and choose the animation type which the frame progressions are explained here: This is all very early in the development but all the dots are being connected and soon this will be a full fledged 2.5D Scene editor extension for bjs. Here is the Sheet editor prototype: Arrows scroll the sheet around Select a Tile and an animation type to see the preview. This is all in preparation for the final editor, where you will be able to edit your assets and levels all under one roof visually then export as a single TILEMASTER file that will later be load the project into a DOM with a single function. The tileAtlas shader features 4 layers per plane, of course Animations, Paralax effects, and Mode7 like transforms. I will be adding more features later (like plans for LightMapping and pixel perfect shadows) Here is a really shotty demo showing the animations and layers working: Here is a bad demo of the Paralax effect: I have been trudging away at this and have a ton of features that I have already figured out I just have to deploy now. Plans are to eventually include my fishsticks library as well to handle the 2D physics. Ill keep posting updates on this as they come available! Questions, Comments, Concerns, Criticism is appreciated.
  7. Hello to everyone, I am new to Phaser. These days I am studying the tutorials and I suddenly came across the many problems related to sprite of different dimensions. So I am learning to use Texture Atlas. I have create an animation with the related json file. All work just fine (visually). Playing with the json file I am able to adjust the sprite width (green box) but not the body size (red box). The ARCADE Physics has only ONE box size? Is there a way to automatically adjust the body size following the sprite size? Or I must move on onto more complicated physics. Thanks to enyone who can help me.
  8. So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(,, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey =; this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey =; this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing
  9. Hi folks. How do I get my character to walk and attack at the same time with 2 separate character atlas files? For instance, when you're walking, you press a key & while holding the walking keys, you can swing your sword WHILE walking at the same time through 2 separate but similar animation atlases. Thanks! ~M
  10. CapricornGaikov

    Pixijs free sprites atlas packer

    Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from:
  11. Is it possible to show the loading progress of a png sptire atlas and its json file? Something like we used to do in flash with totalBytes and loadedBytes?
  12. Outfire

    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.
  13. 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
  14. Mathieu Anthoine

    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 !
  15. 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.
  16. PhaserEditor2D

    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?
  17. NumbOfAthma

    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!
  18. 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'); } } }
  19. Drewrg

    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.
  20. 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?
  21. ohenley

    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
  22. 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
  23. 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?
  24. 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.
  25. 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!