Texture packer

  • Texture packer is a commercial software for packing textures
  • It's free if you don't need to use its advanced features which is good for students use
  • Their official website: https://www.codeandweb.com/texturepacker/tutorials#none
    • There are tutorials for Easeljs, Phaser.io, Unity, etc
  • Asset used in this tutorial belongs to Konami®
  • Note 1: As we are probably using the FREE version, please check the Comparison Here
  • Note 2: You can actually do it just using normal tools like GIMP and Photoshop, just need to have a technical specification with the programmer
  • Suppose your artist has given you a set of sprite images like in this pack : 1.01 (Optional)Texture packer (Original sprite ripped by http://www.nes-snes-sprites.com/contra.html)
  • You need to first align the textures so that they can be played in sequence using eg: photoshop animation function(very not userfriendly) / Aftereffect / Pencil 1.01 (Optional)Texture packer, Export the sequence as a set of images.
  • Open Texture packer and in the "setting" panel,  you will be able to choose the "Framework" you are using.
     
  • After clicking, you will be prompted to select the engine you are using, choose the corresponding framework, as of now, we'll go with "Phaser (JSONArray)" (You need paid version for phaser3 exporter)
  • If you want more control, click "Advanced settings" which we will do now
  • Drag and drop all the images you just prepared into the Texture packer's left side, if you just want to test, Download ContraExported.zip (I've already aligned the pictures with after effects for you).  
    You can also download Aligned AEP.7z for the source project file if you want to experience how to export the sequence with the same size. Check How to export PNG sequence with AfterEffect
     
  • Since texturepacker doesn't remember the anchor point of the sprite, remember to select trim-mode into "None" so it looks like below instead:
  • Give it a name and we can publish sprite sheet
  • Fill in Json and Texture file to the file in which you need to save and then publish texture, you will get one JSON file and a PNG file : contraArrayJSON.zip

  • The JSON file for Phaser should look like this:

    {"frames": [

{
	"filename": "Contra_00000.png",
	"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}
},
{
	"filename": "Contra_00001.png",
	"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}
},
{
	"filename": "Contra_00002.png",
	"frame": {"x":128,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00003.png",
	"frame": {"x":192,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00004.png",
	"frame": {"x":256,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00005.png",
	"frame": {"x":320,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00006.png",
	"frame": {"x":384,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00007.png",
	"frame": {"x":448,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00008.png",
	"frame": {"x":512,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00009.png",
	"frame": {"x":576,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00010.png",
	"frame": {"x":640,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00011.png",
	"frame": {"x":704,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00012.png",
	"frame": {"x":768,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00013.png",
	"frame": {"x":832,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00014.png",
	"frame": {"x":896,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00015.png",
	"frame": {"x":960,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00016.png",
	"frame": {"x":1024,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00017.png",
	"frame": {"x":1088,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00018.png",
	"frame": {"x":1152,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00019.png",
	"frame": {"x":1216,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00020.png",
	"frame": {"x":1280,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00021.png",
	"frame": {"x":1344,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00022.png",
	"frame": {"x":1408,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00023.png",
	"frame": {"x":1472,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00024.png",
	"frame": {"x":1536,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00025.png",
	"frame": {"x":1600,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
},
{
	"filename": "Contra_00026.png",
	"frame": {"x":1664,"y":0,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64}
}],
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "contra.png",
	"format": "RGBA8888",
	"size": {"w":1728,"h":64},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:b89557b36b523f47709473ed5969cc4a:ddbce3c0bc518ed19d83a69207493aec:cd3387f44c03f351dd29c3261ad23ac3$"
}
}

  • The JSON file for easeljs should look like this (Older version):

    • The Animation of Free version will be incorrect so in the next tutorial, we will talk about how to use the DATA.

      {
"images": ["ContraA.png"],
"frames": [
    [2, 2, 50, 48],
    [54, 2, 50, 48],
    [106, 2, 50, 48],
    [158, 2, 50, 48],
    [210, 2, 50, 48],
    [262, 2, 50, 48],
    [314, 2, 50, 48],
    [366, 2, 50, 48],
    [418, 2, 50, 48],
    [470, 2, 50, 48],
    [522, 2, 50, 48],
    [574, 2, 50, 48],
    [626, 2, 50, 48],
    [678, 2, 50, 48],
    [730, 2, 50, 48],
    [626, 2, 50, 48],
    [782, 2, 50, 48],
    [834, 2, 50, 48],
    [886, 2, 50, 48],
    [938, 2, 50, 48],
    [990, 2, 50, 48],
    [1042, 2, 50, 48],
    [1094, 2, 50, 48],
    [1146, 2, 50, 48],
    [1198, 2, 50, 48],
    [1250, 2, 50, 48],
    [1302, 2, 50, 48]
],
"animations": {
     
        "Contra_00000":[0],
        "Contra_00001":[1],
        "Contra_00002":[2],
        "Contra_00003":[3],
        "Contra_00004":[4],
        "Contra_00005":[5],
        "Contra_00006":[6],
        "Contra_00007":[7],
        "Contra_00008":[8],
        "Contra_00009":[9],
        "Contra_00010":[10],
        "Contra_00011":[11],
        "Contra_00012":[12],
        "Contra_00013":[13],
        "Contra_00014":[14],
        "Contra_00015":[15],
        "Contra_00016":[16],
        "Contra_00017":[17],
        "Contra_00018":[18],
        "Contra_00019":[19],
        "Contra_00020":[20],
        "Contra_00021":[21],
        "Contra_00022":[22],
        "Contra_00023":[23],
        "Contra_00024":[24],
        "Contra_00025":[25],
        "Contra_00026":[26]
},
"texturepacker": [
        "SmartUpdateHash: $TexturePacker:SmartUpdate:6f24a0e3caf4b5528125d5e51e0ee4e2:a5cabbae2fe0ffde7b30c9a6a8559419:8bc6413d34f5b5fa1d1f668e2667f290$",
        "Created with TexturePacker (http://www.texturepacker.com) for EaselJS"
]
}

1 Comment

  1. Victor Cheung

    To be updated: As of texture has been updated