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
- Asset used in this tutorial belongs to Konami®
- 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
- 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 :
{ "images": ["ContraA.png"], "frames": [ [167, 2, 24, 34], [258, 2, 24, 33], [2, 2, 14, 46], [18, 2, 14, 45], [100, 2, 17, 36], [34, 2, 21, 36], [193, 2, 21, 34], [144, 2, 21, 35], [119, 2, 23, 35], [284, 2, 23, 33], [238, 2, 18, 34], [216, 2, 20, 34], [309, 2, 22, 31], [80, 2, 18, 36], [57, 2, 21, 36], [309, 2, 22, 31], [140, 39, 34, 17], [176, 38, 20, 16], [54, 40, 16, 20], [198, 38, 20, 16], [72, 40, 16, 20], [90, 40, 23, 18], [258, 37, 18, 23], [115, 40, 23, 18], [278, 37, 18, 23], [90, 40, 23, 18], [18, 49, 34, 11] ], "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:45b6e15e0ae86aae9a001c364782e236:cf08f0478e9691f91c2217c30f56a70e: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.