Search the Community
Showing results for tags 'Atlas'.
-
Hello All, I'm new to Phaser and the world of HTML game development so I'm trying to learn the ins and outs of Phaser 3. Past several days I've been trying to get some sprite animations working via an atlas but not having much luck. The feet would not stay aligned to the floor. I'm assuming it has to do with the physics body since I can get it to work as intended via a sprite sheet or with an atlas without the physics involved. I've tried messing with the body.setSize() and the setOrigin() to the sprite itself but luck. I've attached the quick demo of the problem. The attachments go into the "assets" folder and the index.html code is below. Apologies ahead of time if I'm not going about posting the example in the proper way...let me know if I am. In the demo I've got three versions of the sprite: The first (dude1) is created via sprite sheet and works as expected. The second (dude2) is created with an atlas with no physics and plays the animation as expected The third (dude3) is created with the same atlas as the second but I've added the physics to it. As it animates it seems to jitter vertically and will go through the floor. The atlas png/JSON was created using TexturePacker and I've added a pivot point right at the left feet of the sprite. Any help would be very much appreciated. -Ray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <style> body { background-color: grey; } </style> </head> <body> <script type="text/javascript"> const config = { type: Phaser.AUTO, parent: "phaser-example", width: 600, height: 400, pixelArt: true, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); function preload() { this.load.image('ground', 'assets/platform.png'); this.load.spritesheet("dude1", "assets/king_spriteSheet.png", { frameWidth: 78, frameHeight: 58} ); this.load.atlas("dude2", "assets/king_atlas.png", "assets/king_atlas.json"); } function create() { let floor = this.physics.add.staticGroup(); floor.create(0, 400, 'ground').setScale(3).refreshBody(); this.anims.create({ key: "dude1_idle", frames: [ { key: "dude1", frame: 0, duration: 1000 }, { key: "dude1", frame: 1, }, { key: "dude1", frame: 2, }, { key: "dude1", frame: 3, }, { key: "dude1", frame: 4, }, { key: "dude1", frame: 5, }, { key: "dude1", frame: 6, } ], frameRate: 10, repeat: -1 }); this.anims.create({ key: "dude2_idle", // frames: this.anims.generateFrameNumbers('dude2', { start: 1, end: 8 }), frames: [ { key: "dude2", frame: "Idle (78x58)_01", duration: 1000 }, { key: "dude2", frame: "Idle (78x58)_02" }, { key: "dude2", frame: "Idle (78x58)_03" }, { key: "dude2", frame: "Idle (78x58)_04" }, { key: "dude2", frame: "Idle (78x58)_05" }, { key: "dude2", frame: "Idle (78x58)_06" }, { key: "dude2", frame: "Idle (78x58)_07" }, { key: "dude2", frame: "Idle (78x58)_08" }, { key: "dude2", frame: "Idle (78x58)_09" }, { key: "dude2", frame: "Idle (78x58)_10" }, { key: "dude2", frame: "Idle (78x58)_11" } ], frameRate: 10, repeat: -1 }) this.dude1 = this.physics.add.sprite(100, 250, "dude1"); this.dude1.anims.play("dude1_idle"); this.dude1.body.setSize(50, 30) this.physics.add.collider(this.dude1, floor); this.dude2 = this.add.sprite(150, 352, "dude2"); this.dude2.anims.play("dude2_idle"); this.dude3 = this.physics.add.sprite(200, 250, "dude2", "Idle (78x58)_01"); this.dude3.anims.play("dude2_idle"); this.physics.add.collider(this.dude3, floor); this.cameras.main.setBackgroundColor("#AAAAAA"); this.cameras.main.setZoom(2); this.cameras.main.setScroll(-100,80) } function update() { console.log( // `D1-F: ${this.dude1.frame.height} D1-B: ${this.dude1.body.height}`, // `D2-F: ${this.dude2.frame.height}`, `D3-F: ${this.dude3.frame.height} D3-B: ${this.dude3.body.height}` ) } </script> </body> </html> king_atlas.json
-
I created a tool alongside Gammafp which could be useful for Phaser 3 users. Gammafp thought of how useful a free Atlas Packer would be for Phaser users. The tool can create atlas.json files from imported spritesheets and sprites. It was very recently developed so you could expect to run into some issues, please let us know! How to use: - You can import sprites or spritesheets depending of your resources. - You can add more sprites or spritesheets too if you missed any file or wish to combine animations. - Once the pictures are correctly displayed, you can click the save button. - This will download a .zip file containing both the sprite files and .JSON file set up. - Done! LINK FOR THE ONLINE TOOL Important: There's an animator section but it's far from complete, this section will be further developed depending on the reception and feedback of this tool! Gammafp programmed the tool and I made the art for most icons!
-
Hello guys. I wander if there is a way to load a spritesheet via load.atlas() using .pvr extension? In this tutorial they show an example with load.image() function preload () { game.load.image('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); // The old way is also still supported: game.load.image('factory', 'assets/textures/factory.png'); } Can I do the same with load.atlas()? Sth like function preload () { game.load.atlas('factory', { pvrtc: 'assets/factory.pvr', truecolor: 'assets/factory.png' }, 'assets/factory.json'); } If I can't then how can I load a compressed spritesheet? I am using phaser 2.10.5 but can switch to the latest Phaser 2 version. Thanks in advance. P.S. I know there is plugin for such purposes but I wanna try without this one.
-
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
-
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!
-
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.
-
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": "http://www.codeandweb.com/texturepacker", "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": "http://www.codeandweb.com/texturepacker", "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!
-
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.
-
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: https://github.com/Pryme8/TileMaster 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: https://pryme8.github.io/TileMaster/editor/index2.html 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: https://pryme8.github.io/TileMaster/dev/demo.html Here is a bad demo of the Paralax effect: https://pryme8.github.io/TileMaster/ 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.
-
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.
-
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(game.world.centerX, game.world.centerY, '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 = game.add.group(); this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing -
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
-
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: https://github.com/Gaikov/GameTools/tree/master/SpritePackerConsole
-
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?
-
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.
-
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
-
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 !!! https://gafmedia.com/ At the moment, GAF Player for PixiJS is available for Haxe-Pixi but I will deliver a pure js lib soon . https://github.com/mathieuanthoine/PixiGAFPlayer Enjoy PS: I'm really interested in bug reports !
-
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: https://github.com/netcell/PhaserShoeBoxConfig Just download the .sbx file and double click it.
-
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?
-
Hey guys, I was wondering if Particle Storm can handle an atlas: I'm trying to port this: var emitter = this.game.add.emitter(this.centerX, 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!
-
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() { this.game.load.atlas('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); player.animations.play('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; player.animations.play('running_right'); }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { facing = 'left'; player.body.velocity.x = -90; player.animations.play('running_left'); }else if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { if (facing == 'right') { player.animations.play('jump_right'); }else{ player.animations.play('jump_left'); } }else{ if (facing == 'right') { player.animations.play('idle_right'); }else{ player.animations.play('idle_left'); } } } -
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.
-
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 this.map = this.game.add.tilemap(this.level_key); // Attach tiles this.tileset = this.map.addTilesetImage(this.tiled_tileset_key, this.atlas_key); // Create layers // [...] this.charactersLayer = this.map.createLayer('Characters'); }, createPlayer: function() { // Find player tile var player_frame = this.game.cache.getFrameByName(this.atlas_key, this.texture_packer_keys.player); var player_index = player_frame.index + 1; // atlas 0-based, but tilemap tileset is 1-based var player_tile = this.map.searchTileIndex(player_index, 0, false, 'Characters'); // Create and center player sprite this.player = this.game.add.sprite(player_tile.worldX, player_tile.worldY, this.atlas_key, this.texture_packer_keys.player); // Remove placeholder tile this.map.removeTile(player_tile.x, 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 `this.map` Tilemap object, and can't find any reference to the original atlas names, since it seems that `this.map.addTilesetImage(...)` just carries over indexes? Additional question: would I avoid this issue by using an Object layer for my player placeholder?
-
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: this.game.load.atlas('ninja', 'assets/ninja-1.png', 'assets/ninja-1.json'); this.game.load.atlas('ninja', 'assets/ninja-2.png', 'assets/ninja-2.json'); this.ninja = game.add.sprite(x, y, 'ninja'); this.ninja.animations.add('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
-
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
