How to cut a sprite with different tile sizes

[Mike]

Well the title says it all:

 

And here is the sprite:

 

 

p.s.

Yes I've started to make the breakout demo game with Phaser

[Chris]

You need to create a file that contains all metadata for the sprites (information about which sprite is at which position and its dimensions).

[Mike]

Yep i find the Atlas samples, but is there some tool, for easier metadata creation ?

[Chris]

I created a Web-App do automate this process for websites, but it generates a CSS file...

 

http://spritepad.wearekiss.com

[Mike]

Cool, i tested it but your tool is for making such a "atlas" image.

In my case i already have the image, and what i need is some tool to mark all tile zones and then to export the info like this:

 

"frames": [

{
    "filename": "run00",
    "frame": {"x":34,"y":128,"w":56,"h":60},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":0,"y":2,"w":56,"h":60},
    "sourceSize": {"w":56,"h":64}
},
{
    "filename": "run01",
    "frame": {"x":54,"y":0,"w":56,"h":58},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":0,"y":3,"w":56,"h":58},
    "sourceSize": {"w":56,"h":64}
}

}

 

I wonder if Tiled could do the job... but maybe it's a bit overkill.

 

EDIT:

 

And with some clicks here an update:

http://jessefreeman.com/game-dev/advantages-of-texture-atlases-over-sprite-sheets/

 

So, if i find more info about this topic, i'll post it here

Edited May 2, 2013 by Mike

[rich]

I use Texture Packer, but if you need a free solution then get Shoebox instead (in fact get it anyway, it has some fantastic features). None of them will be able to use the single 'packed' image you posted above though, you're supposed to feed them a set of individual images really, but that shouldn't take long to do.

[Mike]

Ok thanx for the info:

 

So i'll make a short review:

 

1. I've sliced the image trought Photoshop

2. I've used TexturePacker for combining the images to a new Atlas image and JSON map file

 

And for now everything looks bright.

[rich]

Texture Packer is a fantastic tool, worth every single penny But for those on a budget Shoebox, despite a quite strange right-click mini interface, is very powerful too.

[Chris]

rich, we should add a static page to the board, collecting useful tools for game development.

[MadMunky]

Hi All,

 

My first post so sorry to drag up an old thread but is there any better way of doing this yet? I have my images like below and before I started using phaser I used drawImage with an array of the x/y locations for each sprite on my sheet, do I really now have to slice up all these images to get them into phaser?

 

[MadMunky]

Morning All,

 

Sorry to keep dragging this up but can anyone advise if I can use my existing array to get my images into Phaser, the array I have looks like this...

 

//The Array consists of StartX,StartY,Width,Height,ScreenDrawX,ScreenDrawY

 

var ImageArray = new Array();

 

      ImageArray[0] = new Array(15, 0, 98, 76, 15, 0);

      ImageArray[1] = new Array(0, 0, 15, 76, 0, 0);

      ImageArray[2] = new Array(15, 0, 98, 76, 15, 0);

      ImageArray[3] = new Array(113, 0, 15, 76, 113, 0);

 

      ImageArray[4] = new Array(128, 0, 15, 76, 0, 0);

      ImageArray[5] = new Array(143, 0, 17, 76, 15, 0);

      ImageArray[6] = new Array(160, 0, 64, 76, 32, 0);

      ImageArray[7] = new Array(224, 0, 17, 76, 96, 0);

      ImageArray[8] = new Array(241, 0, 16, 76, 113, 0);

 

      ImageArray[9] = new Array(0, 76, 32, 42, 0, 14);

      ImageArray[10] = new Array(32, 76, 8, 42, 32, 14);

      ImageArray[11] = new Array(40, 76, 48, 42, 40, 14);

      ImageArray[12] = new Array(88, 76, 8, 42, 88, 14);

      ImageArray[13] = new Array(96, 76, 32, 42, 96, 14);

 

      ImageArray[14] = new Array(128, 76, 41, 36, 0, 14);

      ImageArray[15] = new Array(168, 76, 6, 36, 40, 14);

      ImageArray[16] = new Array(174, 76, 36, 36, 46, 14);

      ImageArray[17] = new Array(210, 76, 6, 36, 82, 14);

      ImageArray[18] = new Array(215, 76, 41, 36, 87, 14);

 

      ImageArray[19] = new Array(0, 118, 12, 28, 0, 18);

      ImageArray[20] = new Array(12, 118, 34, 28, 12, 18);

      ImageArray[21] = new Array(46, 118, 4, 28, 46, 18);

      ImageArray[22] = new Array(50, 118, 4, 28, 78, 18);

      ImageArray[23] = new Array(54, 118, 34, 28, 82, 18);

      ImageArray[24] = new Array(88, 118, 12, 28, 116, 18);

 

      ImageArray[25] = new Array(100, 118, 13, 28, 0, 18);

      ImageArray[26] = new Array(113, 118, 10, 28, 13, 18);

      ImageArray[27] = new Array(123, 118, 10, 28, 104, 18);

      ImageArray[28] = new Array(133, 118, 14, 28, 114, 18);

      

      ImageArray[29] = new Array(146, 111, 16, 76, 0, 0);

      ImageArray[30] = new Array(162, 111, 96, 76, 16, 0);

      ImageArray[31] = new Array(258, 111, 16, 76, 112, 0);

 

If I convert it to a JSON file can I just format it like this without all the rotated/trimmed/spritesourcesize etc...

 

,{

"filename": "img01",

"frame": {"x":15,"y":0,"w":98,"h":76}

}

,{

"filename": "img02",

"frame": {"x":113,"y":0,"w":15,"h":76}

}