Page History

...

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, you can download Aligned AEP.7z (I've already aligned the pictures with after effects for you)
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.

The JSON file for Phaser should look like this:

Code Block

language	js

{"frames": [

{
	"filename": "Contra001.png",  // You don't really need these, but it doesn't hurt either
	"frame": {"x":39,"y":74,"w":24,"h":34},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":34},
	"sourceSize": {"w":24,"h":34}
},
{
	"filename": "Contra002.png",
	"frame": {"x":40,"y":40,"w":24,"h":33},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":33},
	"sourceSize": {"w":24,"h":33}
},
{
	"filename": "Contra003.png",
	"frame": {"x":91,"y":109,"w":14,"h":46},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":14,"h":46},
	"sourceSize": {"w":14,"h":46}
},
{
	"filename": "Contra004.png",
	"frame": {"x":77,"y":109,"w":14,"h":45},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":14,"h":45},
	"sourceSize": {"w":14,"h":45}
},
{
	"filename": "Contra005.png",
	"frame": {"x":18,"y":109,"w":17,"h":36},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":17,"h":36},
	"sourceSize": {"w":17,"h":36}
},
{
	"filename": "Contra006.png",
	"frame": {"x":56,"y":109,"w":21,"h":36},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":36},
	"sourceSize": {"w":21,"h":36}
},
{
	"filename": "Contra007.png",
	"frame": {"x":0,"y":74,"w":21,"h":34},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":34},
	"sourceSize": {"w":21,"h":34}
},
{
	"filename": "Contra008.png",
	"frame": {"x":63,"y":74,"w":21,"h":35},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":35},
	"sourceSize": {"w":21,"h":35}
},
{
	"filename": "Contra009.png",
	"frame": {"x":84,"y":74,"w":23,"h":35},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":23,"h":35},
	"sourceSize": {"w":23,"h":35}
},
{
	"filename": "Contra010.png",
	"frame": {"x":64,"y":40,"w":23,"h":33},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":23,"h":33},
	"sourceSize": {"w":23,"h":33}
},
{
	"filename": "Contra011.png",
	"frame": {"x":87,"y":40,"w":20,"h":34},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":20,"h":34},
	"sourceSize": {"w":20,"h":34}
},
{
	"filename": "Contra012.png",
	"frame": {"x":21,"y":74,"w":18,"h":34},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":18,"h":34},
	"sourceSize": {"w":18,"h":34}
},
{
	"filename": "Contra013.png",
	"frame": {"x":18,"y":40,"w":22,"h":31},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":22,"h":31},
	"sourceSize": {"w":22,"h":31}
},
{
	"filename": "Contra014.png",
	"frame": {"x":35,"y":109,"w":21,"h":36},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":36},
	"sourceSize": {"w":21,"h":36}
},
{
	"filename": "Contra015.png",
	"frame": {"x":0,"y":109,"w":18,"h":36},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":18,"h":36},
	"sourceSize": {"w":18,"h":36}
},
{
	"filename": "Contra016.png",
	"frame": {"x":74,"y":0,"w":34,"h":17},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":17},
	"sourceSize": {"w":34,"h":17}
},
{
	"filename": "Contra017.png",
	"frame": {"x":34,"y":0,"w":20,"h":16},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":20,"h":16},
	"sourceSize": {"w":20,"h":16}
},
{
	"filename": "Contra018.png",
	"frame": {"x":46,"y":17,"w":16,"h":20},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":20},
	"sourceSize": {"w":16,"h":20}
},
{
	"filename": "Contra019.png",
	"frame": {"x":54,"y":0,"w":20,"h":16},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":20,"h":16},
	"sourceSize": {"w":20,"h":16}
},
{
	"filename": "Contra020.png",
	"frame": {"x":62,"y":17,"w":16,"h":20},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":20},
	"sourceSize": {"w":16,"h":20}
},
{
	"filename": "Contra021.png",
	"frame": {"x":0,"y":17,"w":23,"h":18},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":23,"h":18},
	"sourceSize": {"w":23,"h":18}
},
{
	"filename": "Contra022.png",
	"frame": {"x":0,"y":40,"w":18,"h":23},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":18,"h":23},
	"sourceSize": {"w":18,"h":23}
},
{
	"filename": "Contra023.png",
	"frame": {"x":23,"y":17,"w":23,"h":18},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":23,"h":18},
	"sourceSize": {"w":23,"h":18}
},
{
	"filename": "Contra024.png",
	"frame": {"x":78,"y":17,"w":18,"h":23},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":18,"h":23},
	"sourceSize": {"w":18,"h":23}
},
{
	"filename": "Contra025.png",
	"frame": {"x":0,"y":0,"w":34,"h":11},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":34,"h":11},
	"sourceSize": {"w":34,"h":11}
}],
"meta": {
	"app": "https://www.codeandweb.com/texturepacker", // You don't really need this, but it doesn't hurt either
	"version": "1.0",  // You don't really need these, but it doesn't hurt either
	"image": "contra.png",
	"format": "RGBA8888",
	"size": {"w":108,"h":155},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:5121313f4f39cda9777604536a842639:22305770c65c2db3b577256d5f2f5590:cd3387f44c03f351dd29c3261ad23ac3$"  // You don't really need these, but it doesn't hurt either
}
}

The JSON file for easeljs should look like this (Older version):

Code Block

language	js
linenumbers	true

{
"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.

...

Space shortcuts

Page tree

Versions Compared

Old Version 15

New Version 16

Key