| Tip | ||
|---|---|---|
| ||
|
- 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:
Code Block language js {"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.
Code Block language js { "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" ] }