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®
- Note 1: This is probably outdated, looking for other tools
- 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 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 :
{ "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" ] }- The Animation of Free version will be incorrect so in the next tutorial, we will talk about how to use the DATA.