Search the Community

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 < frameData.total; 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.

I recently came across this warning, while trying to pack my images into a single texture atlas. I have prepared the atlas with TexturePacker using JSON Hash. For the purpose of the demo I have created a texture with 2 images inside. I have set the texture size to power of 2. The content of the JSON file is: {"frames": {"cat.png":{"frame": {"x":2,"y":68,"w":50,"h":50},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":50,"h":50},"sourceSize": {"w":50,"h":50},"pivot": {"x":0.5,"y":0.5}},"dog.png":{"frame": {"x":2,"y":2,"w":80,"h":64},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":80,"h":64},"sourceSize": {"w":80,"h":64},"pivot": {"x":0.5,"y":0.5}}},"meta": {"app": "http://www.codeandweb.com/texturepacker","version": "1.0","image": "gameContent.png","format": "RGBA8888","size": {"w":128,"h":128},"scale": "1","smartupdate": "$TexturePacker:SmartUpdate:4d5d08212283de860125419268743cc3:0b7ce17362320bea73869f2c1a9da2bb:e88dd6268be3835132a863977762ea7c$"}}In my pre-loader I am loading the atlas using: this.load.atlas('gameContent', 'assets/images/test/gameContent.png', 'assets/images/test/gameContent.json');In my create function, I am loading the cat only: this.cat = this.game.add.sprite(0, 0, 'gameContent', 'cat.png');Upon startup I am seeing this warning in the console. Cannot set frameName: cat.png And instead of loading only the cat from the atlas, it loads the hole gameContent.png. Am I missing something here? Thanks

I have an atlas containing all letters. Due to some reason, the image chosen from the atlas is not being displayed. Instead, it just shows a black box. My preloader: preload: function() { this.load.spritesheet('dude', 'asset/dude.png', 32, 48); this.load.atlas('alphavets','asset/letters.png','asset/letters.json'); this.load.image('ground','asset/platform.png'); this.load.image('sky','asset/sky.png'); }Using the atlas: var x = Math.floor(Math.random()*1000)%this.world.width; var letter = this.add.sprite(x, 0, 'alphabets'); letter.frameName = "a.png"; this.physics.arcade.enable(letter); console.log("Chosen: "+img); letter.body.gravity.y = 200;Why is this happening? The console also says phaser.js not found. I have copied phaser.min.js to my folder.

Hello all and the main guy "rich" thank you for this wonderful framework...its been smooth sailing until I hit this terrible bump and I am beyond irate and even more I have a big project due in about 3 days... I have spent the last 2 days off and on trying to figure out why in all the world I cant get a button with texture atlas or spritesheet to work and I am at my wits end...Please help!!! What I am trying to accomplish: I am creating a turn based game project, which has a lot of buttons, which change depending on button which clicked, overstate,outstate, downstate... why is there no specific doc on this it is very confusing... By the way I have looked through all the examples on : http://examples.phaser.io/ and throughout the forum to no avail The problem when I reference the atlas key and the "framenames" in the button instance like: this.allbutton = this.add.button(680, 700, 'MainGameSprite', this.buttonCallback, this, 'AllinButton_Pressed', 'AllinButton', 'AllinButton_Pressed');the whole texture/spritesheets gets output to the screen, instead of the first frame?...here are the json and jsonhash files i tried from leshy and texture packer..Maybe its the json? I have used Leshy http://www.leshylabs.com/apps/sstool/ texture packer https://www.codeandweb.com/sprite-sheet-maker leshy output : https://mega.co.nz/#!nwF3xKRC!h9aQIOUL3iwi6lGVHE1rrOCiF_uNBvJksPOlmlbn2vc texture packer output : https://mega.co.nz/#!zwN0WQ4D!4r1urUSNMR_h8R5PzojyHdvRm6vtU9pcf-_Tb9Zl1yM sample json texture packer: {"frames": {"AllinButton.png":{"frame": {"x":764,"y":63,"w":164,"h":58},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":164,"h":58},"sourceSize": {"w":164,"h":58},"pivot": {"x":0.5,"y":0.5}},"AllinButton_Pressed.png":{"frame": {"x":930,"y":63,"w":164,"h":58},"rotated": false,"trimmed": false,"spriteSourceSize": {"x":0,"y":0,"w":164,"h":58},"sourceSize": {"w":164,"h":58},"pivot": {"x":0.5,"y":0.5}}, here is some snippet of code from me to assure you that I have (or tried at least) to do everything right : ///index.htmlBasic stateswindow.onload = function(){ //inject game object into container div var game = new Phaser.Game(1386, 786, Phaser.CANVAS, 'gameArea'); //add states to game object game.state.add('Boot', xGame.Boot); game.state.add('Preloader', xGame.Preloader); game.state.add('Lobby', xGame.Lobby); game.state.add('Game', xGame.Game); //start boot sequence game.state.start('Boot'); ///preloadxGame.Preloader = function (game){this.background = null;this.preloadBar = null;//this.ready = false;};xGame.Preloader.prototype = {preload: function (){ this.load.atlasJSONHash('MainGameSprite', 'img/Slices/TextureAtlas/testpng.png','img/Slices/TextureAtlas/testjson.json');//tried both atlas and atlasJSONHash for leshy and texture packer and spritesheet this.load.atlas('MainGameSprite', 'img/Slices/TextureAtlas/testpng.png','img/Slices/TextureAtlas/testjson.json');this.load.spritesheet('cardsActions', 'img/Slices/sprites/CardActions.png', 329, 353); }} ///gamexGame.Game = function (game) {};xGame.Game.prototype = {create: function () { // this is from me trying everything including pulling out hair...... //tried //this.gameSprite = this.add.sprite(100, 200, 'cardsActions'); //this.gameSprite.frameName = 'AllinButton'; // The numbers given in parameters are the indexes of the frames, in this order: over, out, down //tried the atlas thing this.allbutton = this.add.button(680, 700, 'MainGameSprite', this.buttonCallback, this, 'AllinButton_Pressed', 'AllinButton', 'AllinButton_Pressed'); ////tried the spritesheet frame thing, but didn't make sense since I had multiple spritesheets of varying component texture sizes this.allbutton = this.add.button(550, 500, 'cardsActions', this.actionOnClick, this, 1, 0, 2); // setting the anchor to the center this.allbutton.anchor.setTo(0.5, 0.5);}}in both cases and other test this has been my output: http://imgur.com/X0PpASg or in the case of the texture atlas it sprints the whole spritesheet!!? for example this example menu shows close to an in game activity : http://dev.phaser.io/examples/sprites/shared-sprite-textures but even the documentation on this is poor eg: function preload() { // We load a TexturePacker JSON file and image and show you how to make several unique sprites from the same file game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');}function create() { game.stage.backgroundColor = '#404040'; chick = game.add.sprite(64, 64, 'atlas'); // You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself) chick.frameName = 'budbrain_chick.png'; This works in the example but makes no sense.... i have looked into almost every example out there including : phaser/ressources/basic referenced here http://www.html5gamedevs.com/topic/2136-buttons/ from browsing this topic..So I took every precaution and advice about formats for texture atlas I removed "check rotation"as specified in this topic: http://www.html5gamedevs.com/topic/1783-basic-problems-with-animations/ Please solution needed Ideally I would like to use a texture atlas to fit this as opposed to several different spritesheets which become very obfuscated in terms of frames? what if you have multiple spriteshteets, what becomes of the frame numbers in different button instances? ie: //in loadthis.load.spritesheet('Actions', 'img/Slices/sprites/CardActions.png', 329, 353);this.load.spritesheet('setofanotheraction', 'img/Slices/sprites/CardActions.png', 329, 353);//in createbutton 1 = this.add.button(550, 500, 'Actions', this.actionOnClick, this, 1, 0, 2);button 2 = this.add.button(550, 500, 'setofanotheraction', this.actionOnClick, this, ?,?,? wtf???);So please if you can help solve the texture atlas issue, it will be much appreciated...I have no more hair left to pull, I will be watching this thread eagerly...thanks to the hero in advance.

I have a jump animation and a midair movement animation. The jump animation is 5 frames long, and I want it to play all the way through when the player jumps from a grounded state. However if the user jumps starting from the ground, then starts to move left or right, it plays the midair movement animation. Now, when the user stops moving, I want to transition back to jumping, but starting at frame 4 or 5 of the jumping animation. sprite.play(name);sprite.animations.frameName = frameId;I've also tried using animations.frame = number, but no luck with that either. I just need to know if there's a play, but skip to frame method that I'm not seeing.