Atlas Problem

[henrikkee]

Hello,

 

I'm trying to use the TexturePackerGUI i have generated the spritesheet and a XML archive, when i test my game. This happen:

 

Phaser.Loader - textureatlas[sprites]: Unexpected token <

Phaser.Cache.getImage: Key "sprites" not found in Cache.

Cannot set frameName: bonecoandando1.png

 

Code o my Game:

mapa.prototype = {		create: function () {	var tempodejogomapa = 0		if(niveldisponivel == 1){mapa = game.add.sprite(0,0,"mapa");}	if(niveldisponivel == 2){mapa = game.add.sprite(-800,0,"mapa");}	if(niveldisponivel == 3){mapa = game.add.sprite(-1600,0,"mapa");}	if(niveldisponivel == 4){mapa = game.add.sprite(-2400,0,"mapa");}			player = game.add.sprite(625,440 ,'sprites', 'bonecoandando1');	game.physics.arcade.enable(player)			if(niveldisponivel == 2){player.reset(523,440)}	if(niveldisponivel == 3){player.reset(523,123.5)}	if(niveldisponivel == 4){player.reset(191,123.5)}	if(niveldisponivel == 5){player.reset(105,123.5)}		if(vjoyon){		game.vjoy = game.plugins.add(Phaser.Plugin.VJoy);        game.vjoy.inputEnable(0, 0, 800, 600);		buttonp = game.add.button(740, 550, 'botaopulo', this.pular, this, 2, 1, 0);		buttonp.fixedToCamera = true;}		},	update: function () {			if(player.position.x < 523 && nivelmapa == 1){player.body.velocity.x = 0;player.reset(523,440);}	if(player.position.y < 123.5 && nivelmapa == 2){player.body.velocity.y = 0;player.reset(523,123.5);}	if(player.position.x < 190 && player.position.x> 180 && nivelmapa == 3){player.body.velocity.x = 0;player.reset(191,123.5);}	if(player.position.x < 105 && nivelmapa == 4){player.body.velocity.x = 0;player.reset(105,123.5);}		if(player.position.x > 625 && nivelmapa == 0){player.body.velocity.x = 0;player.reset(625,440);}	if(player.position.y > 440 && nivelmapa == 1){player.body.velocity.x = 0;player.reset(523,440);}	if(player.position.x > 523 && nivelmapa == 2){player.body.velocity.x = 0;player.reset(523,123.5);}			if(enterButton.isDown){		if(nivelmapa == 1 && player.position.x == 523 && player.position.y == 440){game.state.start('nivel1');}		if(nivelmapa == 2 && player.position.x == 523 && player.position.y == 123.5){game.state.start('nivel2');}		if(nivelmapa == 3 && player.position.x == 191 && player.position.y == 123.5){game.state.start('nivel3');}		if(nivelmapa == 4 && player.position.x == 105 && player.position.y == 123.5){game.state.start('nivelfinal');}	}	},	pular: function(){	if(nivelmapa == 1 && player.position.x == 523 && player.position.y == 440){game.state.start('nivel1');}	if(nivelmapa == 2 && player.position.x == 523 && player.position.y == 123.5){game.state.start('nivel2');}	if(nivelmapa == 3 && player.position.x == 191 && player.position.y == 123.5){game.state.start('nivel3');}	if(nivelmapa == 4 && player.position.x == 105 && player.position.y == 123.5){game.state.start('nivelfinal');}	},

XML code:

<?xml version="1.0" encoding="UTF-8"?><!-- Created with TexturePacker http://www.codeandweb.com/texturepacker--><!-- $TexturePacker:SmartUpdate:e433778311e7731d97964fb86e05b046:1/1$ --><!--Format:n  => name of the spritex  => sprite x pos in texturey  => sprite y pos in texturew  => sprite width (may be trimmed)h  => sprite height (may be trimmed)oX => sprite's x-corner offset (only available if trimmed)oY => sprite's y-corner offset (only available if trimmed)oW => sprite's original width (only available if trimmed)oH => sprite's original height (only available if trimmed)r => 'y' only set if sprite is rotated--><TextureAtlas imagePath="sprites.png" width="512" height="1024">    <sprite n="agua0001.png" x="438" y="199" w="14" h="31" oX="0" oY="4" oW="31" oH="18" r="y"/>    <sprite n="agua0002.png" x="500" y="364" w="9" h="32" oX="0" oY="8" oW="32" oH="17" r="y"/>    <sprite n="agua0003.png" x="498" y="198" w="12" h="32" oX="0" oY="4" oW="32" oH="16" r="y"/>    <sprite n="agua0004.png" x="304" y="98" w="15" h="32" r="y"/>    <sprite n="agua0005.png" x="405" y="199" w="15" h="31" r="y"/>    <sprite n="balao.png" x="304" y="199" w="99" h="54"/>    <sprite n="bandeira1.png" x="2" y="254" w="300" h="50" r="y"/>    <sprite n="bandeira2.png" x="2" y="202" w="300" h="50" r="y"/>    <sprite n="bandeira3.png" x="2" y="150" w="300" h="50" r="y"/>    <sprite n="bandeira4.png" x="2" y="98" w="300" h="50" r="y"/>    <sprite n="barrahp1.png" x="2" y="82" w="320" h="14"/>    <sprite n="barrahp2.png" x="2" y="66" w="320" h="14"/>    <sprite n="barrahp3.png" x="2" y="50" w="320" h="14"/>    <sprite n="barrahp4.png" x="2" y="34" w="320" h="14"/>    <sprite n="barrahp5.png" x="2" y="18" w="320" h="14"/>    <sprite n="barrahp6.png" x="2" y="2" w="320" h="14"/>    <sprite n="base.png" x="405" y="232" w="97" h="96" r="y"/>    <sprite n="body.png" x="324" y="2" w="160" h="160"/>    <sprite n="bonecoandando1.png" x="237" y="700" w="62" h="28" r="y"/>    <sprite n="bonecoandando2.png" x="306" y="693" w="62" h="34" r="y"/>    <sprite n="bonecoandando3.png" x="173" y="693" w="62" h="34" r="y"/>    <sprite n="bonecoandando4.png" x="242" y="664" w="62" h="34" r="y"/>    <sprite n="bonecoandandofrente1.png" x="2" y="751" w="62" h="35" r="y"/>    <sprite n="bonecoandandofrente2.png" x="66" y="728" w="62" h="35" r="y"/>    <sprite n="bonecoandandofrente3.png" x="2" y="714" w="62" h="35" r="y"/>    <sprite n="bonecoandandotras1.png" x="68" y="691" w="62" h="35" r="y"/>    <sprite n="bonecoandandotras2.png" x="136" y="676" w="35" h="62"/>    <sprite n="bonecoandandotras3.png" x="178" y="656" w="62" h="35" r="y"/>    <sprite n="caixa.png" x="128" y="774" w="32" h="32"/>    <sprite n="cap.png" x="304" y="255" w="96" h="96"/>    <sprite n="chaofalso.png" x="130" y="740" w="32" h="32"/>    <sprite n="chaovoador.png" x="296" y="428" w="96" h="32"/>    <sprite n="chefaoandando1.png" x="100" y="381" w="96" h="73" r="y"/>    <sprite n="chefaoandando2.png" x="2" y="381" w="96" h="73" r="y"/>    <sprite n="chefaoandando3.png" x="394" y="405" w="96" h="73" r="y"/>    <sprite n="chefaoandando4.png" x="296" y="353" w="96" h="73" r="y"/>    <sprite n="chefaoandando5.png" x="198" y="381" w="96" h="72" r="y"/>    <sprite n="chefaocuspindo.png" x="198" y="306" w="96" h="73" r="y"/>    <sprite n="chefaoidle1.png" x="100" y="306" w="96" h="73" r="y"/>    <sprite n="chefaoidle2.png" x="2" y="306" w="96" h="73" r="y"/>    <sprite n="chefaoidle3.png" x="402" y="330" w="96" h="73" r="y"/>    <sprite n="coracao1.png" x="136" y="634" w="40" h="40"/>    <sprite n="coracao2.png" x="139" y="592" w="40" h="40"/>    <sprite n="coracao3.png" x="460" y="726" w="40" h="40"/>    <sprite n="coracao4.png" x="460" y="684" w="40" h="40"/>    <sprite n="corlava.png" x="304" y="165" w="192" h="32" r="y"/>    <sprite n="cuspe1.png" x="483" y="209" w="8" h="8"/>    <sprite n="cuspe2.png" x="483" y="199" w="8" h="8"/>    <sprite n="cuspe3.png" x="503" y="130" w="7" h="8" r="y"/>    <sprite n="espinhos.png" x="486" y="96" w="16" h="32" oX="0" oY="16" oW="32" oH="32" r="y"/>    <sprite n="espinhoteto.png" x="486" y="42" w="22" h="32" oX="5" oY="0" oW="32" oH="32"/>    <sprite n="explosao1.png" x="461" y="642" w="40" h="40"/>    <sprite n="explosao10.png" x="394" y="480" w="68" h="64" r="y"/>    <sprite n="explosao11.png" x="394" y="676" w="64" h="64"/>    <sprite n="explosao12.png" x="260" y="599" w="65" h="63" r="y"/>    <sprite n="explosao13.png" x="394" y="609" w="65" h="65"/>    <sprite n="explosao14.png" x="2" y="649" w="64" h="63" r="y"/>    <sprite n="explosao15.png" x="264" y="532" w="65" h="65"/>    <sprite n="explosao16.png" x="195" y="525" w="67" h="64" r="y"/>    <sprite n="explosao17.png" x="2" y="516" w="67" h="65" r="y"/>    <sprite n="explosao18.png" x="2" y="583" w="66" h="64" r="y"/>    <sprite n="explosao19.png" x="66" y="765" w="60" h="59" r="y"/>    <sprite n="explosao2.png" x="142" y="542" w="49" h="48"/>    <sprite n="explosao20.png" x="394" y="546" w="68" h="61"/>    <sprite n="explosao21.png" x="2" y="788" w="58" h="58"/>    <sprite n="explosao22.png" x="338" y="516" w="54" h="52"/>    <sprite n="explosao23.png" x="464" y="480" w="46" h="47"/>    <sprite n="explosao24.png" x="454" y="199" w="27" h="29"/>    <sprite n="explosao3.png" x="338" y="462" w="54" h="52"/>    <sprite n="explosao4.png" x="173" y="729" w="61" h="56"/>    <sprite n="explosao5.png" x="327" y="631" w="65" h="60"/>    <sprite n="explosao6.png" x="331" y="570" w="61" h="59"/>    <sprite n="explosao7.png" x="193" y="591" w="65" h="63" r="y"/>    <sprite n="explosao8.png" x="70" y="626" w="64" h="63"/>    <sprite n="explosao9.png" x="71" y="559" w="66" h="65" r="y"/>    <sprite n="latinha1.png" x="486" y="2" w="24" h="18" r="y"/>    <sprite n="latinha2.png" x="486" y="22" w="23" h="18" r="y"/>    <sprite n="latinha3.png" x="486" y="76" w="22" h="18" r="y"/>    <sprite n="lava1.png" x="422" y="199" w="14" h="31" oX="0" oY="4" oW="31" oH="18" r="y"/>    <sprite n="lava2.png" x="500" y="330" w="9" h="32" oX="0" oY="8" oW="32" oH="17" r="y"/>    <sprite n="lava3.png" x="498" y="164" w="12" h="32" oX="0" oY="4" oW="32" oH="16" r="y"/>    <sprite n="lava4.png" x="486" y="130" w="15" h="32" r="y"/>    <sprite n="lava5.png" x="304" y="132" w="15" h="31" r="y"/>    <sprite n="moeda1.png" x="268" y="462" w="68" h="68"/>    <sprite n="moeda2.png" x="72" y="456" w="68" h="57" r="y"/>    <sprite n="moeda3.png" x="72" y="515" w="68" h="42" r="y"/>    <sprite n="moeda4.png" x="492" y="405" w="14" h="68"/>    <sprite n="moeda5.png" x="464" y="572" w="43" h="68"/>    <sprite n="moeda6.png" x="2" y="456" w="68" h="58" r="y"/>    <sprite n="moeda7.png" x="198" y="455" w="68" h="68"/>    <sprite n="pixel.png" x="504" y="101" w="3" h="3"/>    <sprite n="pixelvermelho.png" x="504" y="96" w="3" h="3"/>    <sprite n="sacola1.png" x="142" y="499" w="51" h="41" r="y"/>    <sprite n="sacola2.png" x="142" y="456" w="51" h="41" r="y"/>    <sprite n="sacola3.png" x="464" y="529" w="46" h="41" r="y"/></TextureAtlas>

 

[Tom Atom]

Hi,

 

 first: I do not see loading code in your listing ... is it missing?,

 second: your sprite names includes ".png", but it is missing in your code, so you are asking for different sprite.

[henrikkee]

Hi,

 

 first: I do not see loading code in your listing ... is it missing?,

 second: your sprite names includes ".png", but it is missing in your code, so you are asking for different sprite.

Sorry i forgot, and if i put .png it still the same error 

telaDeLoading.prototype = {	preload: function(){		game.load.atlas('sprites', 'recursos/sprites.png', 'recursos/sprites.xml');	game.load.image("intro",'recursos/imagens/intro.png');	game.load.audio('inicio', 'recursos/inicial.ogg','recursos/inicial.mp3');	game.load.image("controles",'recursos/imagens/controls.png');	game.load.image("mapa",'recursos/imagens/mapa.png',800,600);	game.load.spritesheet("botaopulo","recursos/botoes/botaopulo.png",50,50);	game.load.spritesheet('iniciar','recursos/botoes/Botao1.png');	game.load.spritesheet('instru','recursos/botoes/Botao2.png');	game.load.spritesheet('voltar','recursos/botoes/Botao3.png');	game.load.spritesheet('pausar','recursos/botoes/Botao4.png');	game.load.spritesheet('fullscreen','recursos/botoes/fullscreen.png');	game.load.spritesheet('continuar','recursos/botoes/Botao5.png');	game.load.spritesheet('sairmenu','recursos/botoes/Botao6.png');	game.load.image('fundo','recursos/imagens/fundo.png');	game.load.image('fundo2','recursos/imagens/fundo2.png');	game.load.image('gameo','recursos/imagens/gameover.png');	game.load.spritesheet('menupause','recursos/imagens/pause.png');	game.load.image('tilesCenario', 'recursos/tilechao.png');    game.load.tilemap('mapa', 'recursos/mapa.json', null, Phaser.Tilemap.TILED_JSON);    game.load.tilemap('mapa2', 'recursos/mapa2.json', null, Phaser.Tilemap.TILED_JSON);    game.load.tilemap('mapa4', 'recursos/mapa4.json', null, Phaser.Tilemap.TILED_JSON);    game.load.tilemap('mapafinal1', 'recursos/mapafinal2.json', null, Phaser.Tilemap.TILED_JSON);	},		create: function(){		game.state.start('intro');	},

[Tom Atom]

found 2 more issues:

1) if you are loading with game.load.atlas, you have to specify XML format otherwise it defaults to TEXTURE_ATLAS_JSON_ARRAY. So, use:

 game.load.atlasXML('sprites', 'recursos/sprites.png', 'recursos/sprites.xml');

 It will remove first two errors:

Phaser.Loader - textureatlas[sprites]: Unexpected token <

Phaser.Cache.getImage: Key "sprites" not found in Cache.

 

2) there is something wrong in your atlas format. I debugged function: "XMLData: function (game, xml)" and it has this on top:

        //  Let's create some frames then        var data = new Phaser.FrameData();        var frames = xml.getElementsByTagName('SubTexture');        var newFrame;

So, it expects "SubTexture" tag in xml. export for frames. You have 0 SubTextures in your .xml, so 0 frames is loaded. I have no experience with Texture Packer, as I am using my own tool with some additional features and JSON export, but you should check if you are choosing right type of export from TP.

[henrikkee]

found 2 more issues:

1) if you are loading with game.load.atlas, you have to specify XML format otherwise it defaults to TEXTURE_ATLAS_JSON_ARRAY. So, use:

 game.load.atlasXML('sprites', 'recursos/sprites.png', 'recursos/sprites.xml');

 It will remove first two errors:

Phaser.Loader - textureatlas[sprites]: Unexpected token <

Phaser.Cache.getImage: Key "sprites" not found in Cache.

 

2) there is something wrong in your atlas format. I debugged function: "XMLData: function (game, xml)" and it has this on top:

        //  Let's create some frames then        var data = new Phaser.FrameData();        var frames = xml.getElementsByTagName('SubTexture');        var newFrame;

So, it expects "SubTexture" tag in xml. export for frames. You have 0 SubTextures in your .xml, so 0 frames is loaded. I have no experience with Texture Packer, as I am using my own tool with some additional features and JSON export, but you should check if you are choosing right type of export from TP.

 Thanks