Search the Community

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.