Time pertinent Button issue- please help wasted 2 days trying to figure out what is wrong!

[oler]

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.

[rich]

Here, this code works perfectly for me in Phaser 2.1.0-dev, 2.0.7 and 2.0.5 (not in 2.0.6 due to a known issue), I didn't bother testing any further backwards than that:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');    game.load.image('background','assets/misc/starfield.jpg');}var button;var background;function create() {    game.stage.backgroundColor = '#182d3b';    background = game.add.tileSprite(0, 0, 800, 600, 'background');    button = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, this, 'over', 'out', 'down');    button.onInputOver.add(over, this);    button.onInputOut.add(out, this);}function over() {    console.log('button over');}function out() {    console.log('button out');}function actionOnClick () {    background.visible =! background.visible;}

You can find all the assets for this example in the Phaser Examples repo, so you can compare the json file with what you're generating. That is the key to this: the Atlas json file must be correct, loaded as the correct type (hash or array, depends how you exported it) and the frame names must be referenced correctly as well.

 

Open button_texture_atlas.json in a text editor and you can see for yourself what it should look like. That's a strange json array export from Texture Packer.

[rich]

If you still can't get it to work then I strongly suggest you post the exact json + png file you're trying to use here. Also format your code using the code tags in the forum, because it's a bit of a headache to read as-is.

[jouniii]

Check console log for errors. Usually the reason you get full textureatlas content as the frame means the set frame cannot be found. 

 

By quick look of your code, I'd try simply using correct frame names. Instead of 'AllinButton_Pressed' use 'AllinButton_Pressed.png'

 

Maybe that's your issue?

 

The latest TexturePacker has an option to strip file extensions for the JSONHash format frame names.

[oler]

Omg thank you soooo much

 

Here, this code works perfectly for me in Phaser 2.1.0-dev, 2.0.7 and 2.0.5 (not in 2.0.6 due to a known issue), I didn't bother testing any further backwards than that:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');    game.load.image('background','assets/misc/starfield.jpg');}var button;var background;function create() {    game.stage.backgroundColor = '#182d3b';    background = game.add.tileSprite(0, 0, 800, 600, 'background');    button = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, this, 'over', 'out', 'down');    button.onInputOver.add(over, this);    button.onInputOut.add(out, this);}function over() {    console.log('button over');}function out() {    console.log('button out');}function actionOnClick () {    background.visible =! background.visible;}

You can find all the assets for this example in the Phaser Examples repo, so you can compare the json file with what you're generating. That is the key to this: the Atlas json file must be correct, loaded as the correct type (hash or array, depends how you exported it) and the frame names must be referenced correctly as well.

 

Open button_texture_atlas.json in a text editor and you can see for yourself what it should look like. That's a strange json array export from Texture Packer.

 

Omg thank you soo much!! I finally figured it out. it was the  json format..it needed a json array which i got from http://www.leshylabs.com/apps/sstool/  ....you definitely helped me figure it out since i needed a fresh pair of eyes...many thanks!!!

[oler]

Check console log for errors. Usually the reason you get full textureatlas content as the frame means the set frame cannot be found. 

 

By quick look of your code, I'd try simply using correct frame names. Instead of 'AllinButton_Pressed' use 'AllinButton_Pressed.png'

 

Maybe that's your issue?

 

The latest TexturePacker has an option to strip file extensions for the JSONHash format frame names.

Yes definitely the file extension naming from texture packer was definitely the factor... I was also not referencing them correctly. Thanks man!

[oler]

Hey guys last question:

//preloadgame.load.atlas('button', 'untitled folder/button_texture_atlas.png', 'untitled folder/button_texture_atlas.json');//createbutton = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, this, 'over', 'out', 'down');

1)  When you reference the atlas key: 'button'....is the default display button always the "first frame"??

 

2) Can you choose the default display button, in an atlas when there are more than 20 sprites in the atlas?

 

thanks again guys

[rich]

1) The default is for the frames to all be null.

 

2) It's the frames that dictate the appearance - if you had an atlas with 20 buttons in, and say the frame names for button 14 were "over14", "out14", etc - then you just need to specify those as the frame names for the button.