Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to cut a sprite with different tile sizes


Mike
 Share

Recommended Posts

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 by Mike
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 10 months later...

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?

 

screen1.png
screen2.png
screen3.png
screen5.png
Link to comment
Share on other sites

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}
}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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