...
- Suppose your artist has given you a set of sprite images like in this pack : SpritesheetTest.7z (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 Aligned AEP.7z, Export the sequence as a set of images.
- Open Texture packer and select EaselJS
- Drag and drop all the images you just prepared into the Texture packer
- Since texturepacker doesn't remember the anchor point of the sprite, remember to select trim-mode into "None" so it looks like below instead:
- 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.
The JSON file should look like this :
Code Block language js linenumbers true { "images": ["ContraA.png"], "frames": [ [1672, 2, 2450, 3448], [25854, 2, 2450, 3348], [2106, 2, 1450, 4648], [18158, 2, 1450, 4548], [100210, 2, 1750, 3648], [34262, 2, 2150, 3648], [193314, 2, 2150, 3448], [144366, 2, 2150, 3548], [119418, 2, 2350, 3548], [284470, 2, 2350, 3348], [238522, 2, 1850, 3448], [216574, 2, 2050, 3448], [309626, 2, 2250, 3148], [80678, 2, 1850, 3648], [57730, 2, 2150, 3648], [309626, 2, 2250, 3148], [140782, 392, 3450, 1748], [176834, 382, 2050, 1648], [54886, 402, 1650, 2048], [198938, 382, 2050, 1648], [72990, 402, 1650, 2048], [901042, 402, 2350, 1848], [2581094, 372, 1850, 2348], [1151146, 402, 2350, 1848], [2781198, 372, 1850, 2348], [901250, 402, 2350, 1848], [181302, 492, 3450, 1148] ], "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:45b6e15e0ae86aae9a001c364782e2366f24a0e3caf4b5528125d5e51e0ee4e2:cf08f0478e9691f91c2217c30f56a70ea5cabbae2fe0ffde7b30c9a6a8559419:8bc6413d34f5b5fa1d1f668e2667f290$", "Created with TexturePacker (http://www.texturepacker.com) for EaselJS" ] }- The Animation of Free version will be incorrect so in the next tutorial, we will talk about how to use the DATA.
...