How to access Atlas data?

[spinnerbox]

I am using

game.load.atlasJSONHash('boxes', 'boxesSheet.png', 'boxesSheetHash.js');

where the hash file was generated by ShoeBox for Pixi.js and the line above works.

 

Each of the boxes should be button and Phaser.Button constructor accepts 4 frames, up, down, over and out. Since ShoeBox doesn't have option for custom sorting of the images when creating the spritesheet, I have to map each frame with each frame number it has in order to display my buttons with the 4 states.

 

I also know that game.cache has useful functions to access loaded assets in Phaser.

 

Which function is the most appropriate to get data from the loaded atlas above?

 

getRenderTexture(), getTilemapData() return null since they think 'boxes' is invalid key.

[rich]

The parameters for Phaser.Button is EITHER a frame number OR a frame name. Frame names are strings, usually based on the filename of the image *within* the atlas. Open the shoebox json file into a text editor and have a look, you can easily find the frame names from there. Then it makes no difference at all which order the images are and you won't have to edit anything.

 

To display a frame from an atlas just use a Sprite and give it the frame name when you create it. RenderTextures and Tilemaps are entirely different things, neither of which use atlases.

[spinnerbox]

Ok. Tried with your advice in mind and it works. The problem I have now is, when I run the "for" loop to place all boxes (buttons) on stage, it also places the whole atlas spritesheet on stage for each button I have.

 

Do I miss something?

 

On the left are the boxes which work as buttons, react on rollover, but on the right is the whole spritesheet 21 times

 

 

Here is my code:

       preload: function () {            gameObject.load.atlasJSONHash('boxes', 'assets/images/boxes/boxesSheet.png', 'assets/images/boxes/boxesSheetHash.json');        },        create: function () {            var k = 1,                upFrame = null,                overFrame = null,                outFrame = null,                downFrame = null;            for (var i = 0; i < 9; i += 1) {                for (var j = 0; j < 7; j += 1) {                    overFrame = 'box' + k + '_over.png';                    downFrame = 'box' + k + '_up.png';                    outFrame = downFrame;                    box = gameObject.add.button(i * 75, j * 75, 'boxes', function () {}, null, overFrame, outFrame, downFrame, outFrame);                    k += 1;                }            }        },

 THe json file, made with ShoeBox for Pixi.js

{"frames": {    "box1.png": {        "frame": {"x":177, "y":454, "w":58, "h":46},        "spriteSourceSize": {"x":0,"y":0,"w":58,"h":46},        "sourceSize": {"w":58,"h":46}    },    "box1_over.png": {        "frame": {"x":413, "y":310, "w":58, "h":71},        "spriteSourceSize": {"x":0,"y":0,"w":58,"h":71},        "sourceSize": {"w":58,"h":71}    },    "box1_up.png": {        "frame": {"x":413, "y":238, "w":58, "h":71},        "spriteSourceSize": {"x":0,"y":0,"w":58,"h":71},        "sourceSize": {"w":58,"h":71}    },    // more frames},"meta": {    "image": "boxesSheet.png",    "size": {"w": 472, "h": 526},    "scale": "1"}}

[spinnerbox]

Don't use "for" loop? Place buttons one by one? haha

[rich]

I don't see anything immediately wrong with the code (or the atlas) so it must be something else causing this. Using a 'for' loop is fine.

[spinnerbox]

Creating each button separtely works without the issue above. Wondering what is the problem with the "for" loop? Slower initialization of objects while in loop?

 

The loop just runs over the code without warrantly all was executed properly. Not sure

 

Can I check somehow if each button was added to stage before the loop continues?

[spinnerbox]

Yes, found what it is. In the previous code I was using frame numbers, so 21 boxes per 3 frames gives 63 frames. Therefore I set i to go to 9 and j to go to 7 to visit 63 frames.

 

Then I tried with atlas and frame names and there are just 21 frame names. So 9x7 printed the boxes 3 time more than needed.

 

Sorry for the haslle. I am still learning the engine, how it works.