Texture Atlas not updating correctly

jesseabramson · December 18, 2015

Basically every time I add a new sprite to my atlas png and json file the game shows the wrong sprite that changes to the correct one when i mouseover it, or doesn't load at all.

My preload looks like this:

preload = function() {    game.load.atlas(        'spritesheet',        'images/spritesheet.png',        'images/spritesheet.json',         Phaser.Loader.TEXTURE_ATLAS_JSON_HASH    );}

Not sure what I'm doing wrong, thanks.

BlitZ · December 21, 2015

Is it a browser caching issue ? try it in private browsing mode or clear your cache and see if it persists.

jesseabramson · January 21, 2016

Nope, all computers, fresh cache, incognito, even if I create a fresh atlas I still get this same issue.

drhayes · January 21, 2016

Can you post the JSON and what key you're using to generate your sprite?

jesseabramson · January 23, 2016

For example, the following JSONHash atlas gives the wrong icon (appears as a cactus until I hover over it, then it switches to the right one) for ui-circle.

{"frames": {

"cactus1":
{
	"frame": {"x":335,"y":184,"w":29,"h":66},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":29,"h":66},
	"sourceSize": {"w":29,"h":66}
},
"cactus2":
{
	"frame": {"x":98,"y":181,"w":32,"h":66},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
	"sourceSize": {"w":32,"h":66}
},
"door":
{
	"frame": {"x":85,"y":229,"w":8,"h":21},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":8,"h":21},
	"sourceSize": {"w":8,"h":21}
},
"flag":
{
	"frame": {"x":132,"y":184,"w":47,"h":48},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":0,"w":47,"h":48},
	"sourceSize": {"w":48,"h":48}
},
"forest":
{
	"frame": {"x":138,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"gate":
{
	"frame": {"x":68,"y":201,"w":21,"h":26},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":26},
	"sourceSize": {"w":21,"h":26}
},
"grass":
{
	"frame": {"x":138,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"ground":
{
	"frame": {"x":2,"y":92,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"icon_forest":
{
	"frame": {"x":98,"y":92,"w":27,"h":87},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":27,"h":87},
	"sourceSize": {"w":27,"h":87}
},
"icon_grass":
{
	"frame": {"x":68,"y":229,"w":15,"h":20},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":15,"h":20},
	"sourceSize": {"w":15,"h":20}
},
"icon_ground":
{
	"frame": {"x":260,"y":216,"w":29,"h":33},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":29,"h":33},
	"sourceSize": {"w":29,"h":33}
},
"icon_sand":
{
	"frame": {"x":937,"y":172,"w":32,"h":66},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":66},
	"sourceSize": {"w":32,"h":66}
},
"icon_stone":
{
	"frame": {"x":2,"y":183,"w":58,"h":63},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":3,"y":0,"w":58,"h":63},
	"sourceSize": {"w":65,"h":91}
},
"icon_water":
{
	"frame": {"x":669,"y":183,"w":57,"h":59},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":4,"y":4,"w":57,"h":59},
	"sourceSize": {"w":65,"h":89}
},
"level1-obsidian-1":
{
	"frame": {"x":205,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-obsidian-2":
{
	"frame": {"x":272,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-sandstone-1":
{
	"frame": {"x":339,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-sandstone-2":
{
	"frame": {"x":406,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-stone-1":
{
	"frame": {"x":473,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-stone-2":
{
	"frame": {"x":540,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-wood-1":
{
	"frame": {"x":607,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level1-wood-2":
{
	"frame": {"x":674,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-obsidian-1":
{
	"frame": {"x":741,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-obsidian-2":
{
	"frame": {"x":808,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-sandstone-1":
{
	"frame": {"x":875,"y":2,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-sandstone-2":
{
	"frame": {"x":133,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-stone-1":
{
	"frame": {"x":200,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-stone-2":
{
	"frame": {"x":267,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-wood-1":
{
	"frame": {"x":334,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"level2-wood-2":
{
	"frame": {"x":401,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"ring1":
{
	"frame": {"x":803,"y":93,"w":65,"h":76},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":76},
	"sourceSize": {"w":65,"h":76}
},
"ring2":
{
	"frame": {"x":803,"y":171,"w":65,"h":76},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":76},
	"sourceSize": {"w":65,"h":76}
},
"ring3":
{
	"frame": {"x":870,"y":172,"w":65,"h":76},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":76},
	"sourceSize": {"w":65,"h":76}
},
"ring4":
{
	"frame": {"x":870,"y":93,"w":65,"h":76},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":76},
	"sourceSize": {"w":65,"h":76}
},
"roof1":
{
	"frame": {"x":669,"y":93,"w":65,"h":88},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":88},
	"sourceSize": {"w":65,"h":88}
},
"roof2":
{
	"frame": {"x":2,"y":2,"w":66,"h":88},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":66,"h":88},
	"sourceSize": {"w":66,"h":88}
},
"roof3":
{
	"frame": {"x":70,"y":2,"w":66,"h":88},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":66,"h":88},
	"sourceSize": {"w":66,"h":88}
},
"roof4":
{
	"frame": {"x":736,"y":93,"w":65,"h":88},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":88},
	"sourceSize": {"w":65,"h":88}
},
"sand":
{
	"frame": {"x":468,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"stone":
{
	"frame": {"x":535,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
},
"tree1":
{
	"frame": {"x":942,"y":2,"w":27,"h":87},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":27,"h":87},
	"sourceSize": {"w":27,"h":87}
},
"tree2":
{
	"frame": {"x":69,"y":92,"w":27,"h":107},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":27,"h":107},
	"sourceSize": {"w":27,"h":107}
},
"tree3":
{
	"frame": {"x":942,"y":91,"w":30,"h":79},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":30,"h":79},
	"sourceSize": {"w":30,"h":79}
},
"ui-circle":
{
	"frame": {"x":728,"y":183,"w":56,"h":56},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":6,"y":5,"w":56,"h":56},
	"sourceSize": {"w":65,"h":64}
},
"wall-e":
{
	"frame": {"x":127,"y":92,"w":4,"h":46},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":61,"y":20,"w":4,"h":46},
	"sourceSize": {"w":65,"h":106}
},
"wall-ne":
{
	"frame": {"x":260,"y":184,"w":37,"h":30},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":28,"y":4,"w":37,"h":30},
	"sourceSize": {"w":65,"h":106}
},
"wall-nw":
{
	"frame": {"x":299,"y":184,"w":34,"h":31},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":4,"w":34,"h":31},
	"sourceSize": {"w":65,"h":106}
},
"wall-se":
{
	"frame": {"x":181,"y":184,"w":38,"h":31},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":27,"y":52,"w":38,"h":31},
	"sourceSize": {"w":65,"h":106}
},
"wall-sw":
{
	"frame": {"x":221,"y":184,"w":37,"h":31},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":52,"w":37,"h":31},
	"sourceSize": {"w":65,"h":106}
},
"wall-w":
{
	"frame": {"x":62,"y":183,"w":4,"h":47},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":0,"y":20,"w":4,"h":47},
	"sourceSize": {"w":65,"h":106}
},
"water":
{
	"frame": {"x":602,"y":93,"w":65,"h":89},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":65,"h":89},
	"sourceSize": {"w":65,"h":89}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.1",
	"image": "sheet4.png",
	"format": "RGBA8888",
	"size": {"w":974,"h":252},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:63bc5c8fea52cc2923dc96e419d1d95e:4ecb4e2adfa6a5522eab1273c0fed54c:2f375dd63c49c31ef9757a65807d13ba$"
}
}

drhayes · January 25, 2016

Are there mouse handlers in your game?

jesseabramson · January 25, 2016

Yes there are

drhayes · January 26, 2016

Oooh, what do they look like?

jesseabramson · January 27, 2016

The buttons are set up with this hover function

options[name].events.onInputOver.add((function(option) {
		Session.set('option', {tooltip: option.tooltip});
	}), this);

drhayes · January 27, 2016

What are the instances stored in the options object? Are they sprites, images, buttons..? What does the code look like that populates it?

jesseabramson · January 28, 2016

Yep, they're all buttons;

options[name] = game.add.button(x, y, 'spritesheet', func, this, 'ui-circle');

drhayes · January 29, 2016

Here's my guess: the GameObjectFactory.button method has more params than you gave. You supplied the "overFrame" as "ui-circle", but left out "outFrame", "downFrame", and "upFrame". I'm betting if you set "outFrame" as "ui-circle" it would work.

As to why it's picking the cactus, I don't know. It *might* be because it got set as the default texture somehow, so if you didn't supply the name of the frame you wanted you get the cactus instead.

Thanks for bearing with me and all the info. Hopefully that fixes the problem.

jesseabramson · January 31, 2016

Problem solved! Genius! So strange that it defaulted to cactus.

Texture Atlas not updating correctly

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members