Jump to content

Loading image from an atlas fails


GothSeiDank
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 :D

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 :D 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...