Loading image from an atlas fails

[GothSeiDank]

I have googled this quite extensively, but I cannot find a solution.

What I am trying to do, is to have all my images on one atlas to reduce loading times and to switch images of my gui buttons depending on their state.

JSON File:

{"frames": {

"achievements":
{
	"frame": {"x":0,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"back":
{
	"frame": {"x":64,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"play":
{
	"frame": {"x":0,"y":64,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128},
	"pivot": {"x":0.5,"y":0.5}
},
"sound-off":
{
	"frame": {"x":0,"y":192,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"sound-on":
{
	"frame": {"x":64,"y":192,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"twitter":
{
	"frame": {"x":0,"y":256,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "gui.png",
	"format": "RGBA8888",
	"size": {"w":128,"h":320},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:d34cb7bd8eb0e89c94b31a3ed28b9d0a:e8dbb93a1c2aba170764620189c242c1:788b34ed4e778d63c84b2c3df4d44949$"
}
}

Code in my Game (stripped down to the essence):

class StateMainMenu extends Phaser.State
{
    // Menu
    btnTwitter      : Phaser.Button;

    // Placement
    bottom          : number;

    constructor()
    {
        super();
    }

    preload()
    {
        // GUI Elements
        this.game.load.atlasJSONHash("guiSheet", "assets/gui/gui.png", "assets/gui/gui.json");
    }

    create()
    {
        this.bottom     = this.game.canvas.height - 38;
        this.createTwitterButton();
    }

    ///////////////////////////////////////////////////////////////
    // Twitter Button
    ///////////////////////////////////////////////////////////////

    createTwitterButton()
    {
        this.btnTwitter = this.game.add.button(38, this.bottom, 'twitter', this.clickTwitterButton, this);
        this.btnTwitter.anchor.set(0.5);
        this.btnTwitter.onInputOver.add(this.overTwitterButton, this);
        this.btnTwitter.onInputOut.add(this.outTwitterButton, this);
    }

    clickTwitterButton()
    {
        window.open("<redacted>", "_blank");
    }

    overTwitterButton()
    {
        this.btnTwitter.scale.set(1.1);
    }

    outTwitterButton()
    {
        this.btnTwitter.scale.set(1.0);
    }
}

Phaser says: phaser.min.js:20 Phaser.Cache.getImage: Key "twitter" not found in Cache.

I am puzzled. All examples I looked at, this should work. So I wondering what I am doing wrong. I am using TypeScript here, but that shouldn't make a difference.

Sorry if this is a basic question, I am new to Phaser. I am using the latest CE Version from Github.

[rich]

Hi,

The image key above is 'guiSheet', then you would use 'twitter' as the button over / out / down / up frames (the final parameters in the add.button method)

Cheers,

Rich

[GothSeiDank]

D'oh. Now I feel stupid. Thanks for clarifying. Been learning it the last few days.

Takes a lot of the elegance away though.

[rich]

To be honest it's posts like this that were the very reason we moved to using config objects in Phaser 3! (if you don't subscribe to the Phaser newsletter then it may be worth doing so, lots more details in this weeks issue)

[GothSeiDank]

Not sure what you mean with config objects, but I guess I expected this feature to work differently than it actually does. It seems that sprite sheets and atlases are centered around animations. But I only want to load one atlas at the start of the game (to minimize the number of times the browser needs to connect) and then use those textures for my game. At the moment, I do not have any animations. 

My problem right now are 2 things: Getting my button image to actually change from sound on to off and keeping that atlas available for all game states. Even if I don't clear the cache when switching states, it still removes all loaded images. 

Also, it looks now like this:

        this.btnTwitter = this.game.add.button(38, this.bottom, 'guiSheet', this.clickTwitterButton, this,'twitter', 'twitter', 'twitter', 'twitter');

Which really just makes it uglier

I am sorry if those are really simple issues, but I am sure everyone knows the overwhelming feeling of a new framework and you still want to get your code perfect the first time  

[rich]

Atlases are just lots of textures in a single file. Sometimes used for animation, often not. It's why all Phaser objects like when you create a Sprite ask for a key AND a frame (the part of the atlas to use) - in the case of a button there are lots of possible frames (mouse over, mouse down, etc).

Images are never removed when changing state unless you explicitly set the Clear Cache argument to true (it's false by default). Check that you haven't. A button created in one state won't be available in another, but the texture that button uses is globally available everywhere.