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

Found 76 results

  1. 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!
  2. 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.
  3. 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!
  4. 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.
  5. TileMaster

    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.
  6. 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
  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. 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
  9. 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:
  10. 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?
  11. 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.
  12. 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
  13. 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 !
  14. 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!
  15. 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'); } } }
  16. 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.
  17. 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
  18. 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
  19. 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?
  20. 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.
  21. 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!
  22. 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);
  23. 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.
  24. 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!
  25. 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