|
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" ] } |