Tools you'll need for the "Hard Way"

---

If you want to make a character from scratch with custom animations, you'll need some additional programs

• Adobe Flash CS5+ - Used to draw and animate the character
• Texture Packer - Used to export the character (The trial version is enough to work with)
• Spriter - Used to do both of the above. It has a custom exporter for Move or Die Characters.

Character structure

---

There are 4 important elements in every character folder:

• Asset Sheet (image)

Named "[FolderName]Sheet.png" eg: "JoeYellowSheet.png"

The asset sheet is a big .png sheet containing smaller .png images consisting of parts that make up the character. Here is a full list:

• Body.png - The default body of the character.
• BodyFat.png - The inflated version of the character's body (used in modes like Blow Back and Sugar Rush).
• LifeBarCircle.png - This image goes in the life bar behind the player's expression as a background.

--- The elements below are optional ---

• Eyes[Name].png - These are images of the same size consisting of the character's eyes. They have pre-set names mentioned in the "Face" section below.
• Mouth[Name].png - Similar to the eyes, this is the character's mouth. Both the eyes and the mouth change dynamically in-game.
• Pupil.png - This is the character's eye pupil in case the eyes are designed so that the pupils move around.
• Any other assets - Legs, hands, accesories, anything that wasn't mentioned above...

All the elements above are stored in this big sheet (pictured above with Pumpkin Joe) exported by TexturePacker later on.

• Sheet Info (text file)

Named "[FolderName]Sheet.json" eg: "JoeYellowSheet.json"

This text file is automatically exported by Texture Packer with the asset sheet above. It contains all the information needed for the game to slice the asset sheet up and extract all the parts as individual pieces.

• Animation (text file)

Named "[FolderName]Anim.json" eg: "JoeYellowAnim.json"

This animation text file contains the animation info for the character. It has multiple values for each character asset's every frame, this tells the engine how to animate the character.

• Masks Folder (optional folder)

This one contains the eyes masks in case the character has moving pupils. It's the only optional element in a character's folder. If a character doesn't have a "masks" folder, the game will assume that character doesn't have moving pupils. (More info in the "Eyes" section below)

• Offset File (optional file)

This is a .ini file called [CharacterName].ini that contains offset values for the eyes, mouth and the in-game healthbar expression. It helps in case your character's face doesn't align properly with its body.

The hard way

---

Now let's get into the cool parts of modding your own character, specifically, making your own from scratch (or from a template).

In the Character Starter Kit you'll find a folder called "Source Files". In there you have everything you need to create a new character and make it work in-game.

Let's go through the contents of the "Source Files" folder:

• Exporter Folder

You don't care about this folder. It contains some code that will handle the exporting of assets later on. It's only there because the act of exporting wouldn't work without it, so don't mind it...

• Assets Folder

This folder holds all the individual assets that go in the character's Asset Sheet described above. You can find a list with all of them a bit lower in the "Assets" section.

• Masks Folder

As described above, this folder is optional and reserved only for character that have moving pupils.

• CharacterSheet.tps (Texture Packer File)

This is the texture pack file that brings all the assets from the "Asset" folder together and exports them as the character's Asset Sheet.

• CharacterSource.fla (Adobe Flash File)

And finally, the most important file, the Adobe Flash source file that contains the source vector graphics of the character and animations. From this file you will export the individual assets and the character's animation.

This is what you should see after you open the CharacterSource.fla.

The most important element here is the character animated movieclip. It contains the source of all the basic assets that are required to have a playable character and all the animations.

This is how the file's timeline looks

The "Content" layer is the most important one. The first frame contains everything you saw in the image above, and after that, each frame contains either eyes or mouths (12 eyes and 16 mouths for the default Joe character).

And this is how the character animation looks like if you open the character's movieclip.

As you can see, every element is stored on a separate layer and individually animated.

More about that in the "Animation" section below.

Assets

---

Let's talk about the assets of the default character that you can find in the Character Starting Kit. This is what you'll find in the Assets folder:

These are all the individual parts that make up the character saved as PNG files directly from the CharacterSource.fla file.

As mentioned above in the Asset Sheet part of the Character Structure section, here you will find the Body.png and BodyFat.png, LifeBarCircle, both legs, 12 eyes, 16 mouths and a pupil.

All of these will be packed together and saved as the Asset Sheet with the help of Texture Packer later on in the Export section.

Face

---

The lack of it

Making a character without a face is super easy. Simply make sure you delete the Eyes and Mouth layers from the CharacterSource.fla. If the game doesn't find any assets for either the eyes or the mouth in the animation, it simply won't display any.

A good example of a character without a face is BioloJoe

How it works

There are many expression that are used in the game in various situations that give the characters their personalities. They are made by combining various sets of eyes and mouths, and that's why it is encouraged to make as many expressions as possible for your own characters.

You don't have to worry about animations or timings, the game automatically changes the character's expression when needed as long as they are present in the Asset Sheet.

Here is a list of the eyes and mouth assets from the default character.

First, the eyes:

The N1,N2,N3,N4,N5 and N6 eyes are used by the game progressively as your health drains to signal the character's pain (or how concerned Joe is).

And here is the list for mouths.

Just like the Eyes, there are N1 - N6 mouths that are used for the health depleating and various others used in combination with the eyes in order to create specific expressions and give the characters personalities.

Offset File

In case your character's face doesn't align properly with its body, you don't have to re-animate the eyes and mouth to make them fit.

You can simply use the offset file that contains offset values for the character's face.

This is how the file looks inside.

You can play around with the values directly in the Character Viewer from the Level Editor to make sure everything looks good before putting them in the offset file.

Eyes

---

Mouths are pretty easy, they are all simple images stored in the Asset Sheet. Eyes on the other hand, are a bit more complicated but give you a bit more variety.

First, you have to decide if your character will have moving pupils or not.

If your character doesn't have moving pupils (or pupils at all), you won't have to worry about the "Masks" folder. Simply don't include it in your character folder.

Moving Pupils

If your character has moving pupils, you will need the following elements:

• A: Eyes with space for the pupil to move in

Here are a few examples:

• B: The pupil itself ("Pupil.png" in the sheet)

This is a small static asset of the pupil. Make sure it's slightly bigger than it should be, the game scales it down by about 20% to allow for a better looking pupil when it expands.

• C: A mask image for each set of eyes

And lastly, the "Masks" folder which contains a mask for each set of eyes. A Mask is an image of a black shape on a transparent background that has the same name as its equivalent set of eyes and contains the area in which the pupil will move.

Animation

---

Now here is where we get our hands dirty.

Setup

All the animations in Move or Die are made in Adobe Flash and the CharacterSource.fla is CS5.

I'm pretty sure you can use other programs to handle animations, such as Spriter or Spine, however we don't have a pipeline for animating or exporting in anything other than Adobe Flash, so if you try to use anything else, you'll have to figure out your own ways.

If you open the "=Character" movieclip in the CharacterSource.fla from the character starter kit, you will notice several layers in the timeline.

The first layer, "Labels", serves as a label guide to show you what animation is between those set of frames, it also tells the game the name of the animation so it knows what to use. The layers below the "Labels" one are each for a specific asset, one for each layer.

Asset Management

Each asset (be it directly drawn in Adobe Flash or imported as a bitmap) must be contained inside a Movieclip.

The asset must be centered in its Movieclip with the registration point in the center. The Movieclip name should be descriptive and the same as its instance name in the timeline, more about that in the Instance Name section below.

Instance Names

Before we get to the interesting part of actually animating things, we have to make sure that all the names are in place so the game can see the assets.

If you click on any movieclip present on any layer, it should have the same instance name as the same movieclip in the library, and later on, the same name for the exported asset.

Also important: make sure the instance name is set on all the keyframes in the timeline, this is an easy thing to miss.

If you set the instance name on one keyframe, it doesn't set it on all the keyframes on that layer. We recommend using The Multiple-Frame Instance Name Adobe Flash extension to easily fix that problem.

After all the movieclip names and instance names are in place, we can start animating!

Instance Expressions (and body)

The expressions, as explained above, are formed out of 2 elements: Eyes and Mouths.

Both elements have their own layer in the CharacterSource.fla and are animated separately

When it comes to instance names, it's very important to keep them as "Eyes$" and "Mouth$"

The $ symbol is present in the instance name so the game knows that they can be inter-changed with all the various eyes and mouths that character has.

Same goes for the Body. Its instance name should be "Body$" so the game knows that it can use both the normal and the fat version of it

If the eyes and mouth don't have the correct instance names, the character will end up expression-less.

Animation Labels

There are handful of animations in the template character file separated by the big frames on the Label layer.

Here is a list of all the animations the game uses for a character:

• "Original" - This is one frame, containing the character in its original neutral pose.
• "Idle" - This is the looping idle animation when the character isn't moving.
• "Run" - Looping running cycle.
• "Break" - Plays when the character stops after running, then it transitions into "Idle"
• "Jump" - The beginning of the jump.
• "JumpLoop" - Plays after "Jump" and loops until the character lands.
• "Land" - Plays when the character lands, followed by either "Idle" or "Run"
• "Explode" - Death animation, plays and stops on the last frame.
• "CliffhangFront" - Loops when the character is hanging off the edge of a drop forwards.
• "CliffhangBack" - Loops when the character is hanging off the edge of a drop backwards.

All the animations are made using classic tweens, meaning that all the assets are moved from point A to point B. The engine doesn't support frame by frame animation for characters right now.

Exporting & Asset Sheets

---

Exporting the animation

Now that you have all your animations in place, it's time to export them.

Assuming the "Exporter" folder is in place so Adobe Flash can use it, you should be able to simply press Ctrl + Enter and the animation will automagically export in the same folder with the CharacterSource.fla.

It will be named "[CharName]Anim.json". Set your CharacterSource.fla name early so the exported file will be named appropriately, removing the headache of constnatly renaming files.

Once you have your [CharName]Anim.json, throw it in your character folder, next to the "Masks" folder and the "[CharName]Sheet.png" & "[CharName]Sheet.json" which we'll create in the following step.

You can make changes to your animation at any time. All you have to do is make sure you export and overwrite the previous [CharName]Anim.json from your character folder.

Exporting the assets

Ok, now that our animations are done, it's time to export the assets.

Assuming you kept a consistant naming pattern as mentioned above, you should have a nice list of movieclips in your library.

All you have to do in order to export an asset is to simply right click on the movieclip in the library and then "Export as PNG sequence"

Adobe Flash will automatically set the right size and everything needed to export a .png with the same name as the movieclip.

The exported image should have the same name as the instance name of the animated movieclip, and if you kept those names consistant, there should be no need for any renaming.

Exporting the asset sheet

Once you have the animation and all the assets exported, it's time to get the final puzzle piece.

Let's pack all the exported assets into an asset sheet, resulting in [CharacterName]Sheet.png and [CharacterName]Sheet.json

We will use Texture Packer to do that, and the trial version should be enough for our needs.

It's as simple as opening the program, drag and drop all the assets in and make sure the paths on the side are correct.

Now let's quickly learn how to use Texture Packer with a bunch of images