Page History

...

Tip

title	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
- There are tutorials for Easeljs, Phaser.io, Unity, etc
Asset used in this tutorial belongs to Konami®
Note 1: As we are probably using the FREE version, please check the Comparison Here
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 : SpritesheetTest.7z 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

...

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.
Image Added
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)
Image AddedImage Added
If you want more control, click "Advanced settings" which we will do now
Image Added
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
Image Added
Since texturepacker doesn't remember the anchor point of the sprite, remember to select trim-mode into "None" so it looks like below instead:
Image Added
Give it a name and we can publish sprite sheet
Image Added
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"
]
}

Space shortcuts

Page tree

Versions Compared

Old Version 8

New Version Current

Key