Overview
This will help you make your own character 😀
Tools You’ll Need
These are the tools you’ll need in order to create your own character from scratch
Note: you don’t need these if you just plan to modify the graphics of an already existing character.
[link] (The Starting Kit)
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)
Your favorite image manipulation program – In case you want to use a different program than Adobe Flash to draw the character, anything works.
How Characters Work
The whole system is structured so you don’t have to worry about code at all. Simply place you character folder in the path below and give it an apropriate name to describe it.
MoveorDie Mods [ModName] Lib Assets Characters [CharacterName]
The game automagically takes all the character folders and considers them individual characters. Now it’s time to mess around with the contents.
The Easy Way
If you only want to change the appearence of an already existing character, you don’t have to go through the trouble of using Adobe Flash or Texture Packer.
Simply copy the contents of an already existing character into the apropriate character folder in the starting kit you downloaded above. Make sure you rename the folder so it’s considered a new character by the game (don’t forget to rename the files inside as well to match the folder’s name).
Now all you have to do is open the [CharName]Sheet.png in your favorite image editor and start making changes!
Careful not to go out of the boundaries because if you do, anything outside of the red rectangles below won’t show up in-game (or it will in another unwanted asset).
Save the image once you are done and check if everything looks good in-game. That’s it, you have modified a character and you can now publish it.
That was the easy way though… if you want to make your character from scratch, it’s going to be a bit tricky-er, keep reading.
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.
LifeBarFace.png – This image goes in the life bar, over the “circle”, it contains the default character expression.
— 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 and LifeBarFace, 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.
Note: Leaving the eyes and mouth in the animation and removing all the eyes and mouths assets from
the Character Sheet might result in an error. So make sure you do it the right way.
Also, the LifeBarFace should also be blank, or something to fit the character’s lack of face.
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.
Note: Only the “EyesN1.png” and “MouthN1.png” are mandatory if your character has a face.
If the game can’t find an expression, it will use the N1 ones. It’s recommended
to create all the eyes and mouths for your character to cover the entire range of expressions.
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.
The file should be in the character’s folder and it should have the name of the character on it.
… / [CharacterFolder] / [CharacterName].ini
This is how the file looks inside.
{
“eyesOffsetX”: 0,
“eyesOffsetY”: 0,
“mouthOffsetX”: 0,
“mouthOffsetY”: 0,
“healthbarFaceX”: 0,
“healthbarFaceY”: 0
}
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
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.
Note: The game does not support different pupils for each eye right now.
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.
Note: The game automatically detects the separate eye sockets and masks the pupils so they don’t
go out of them. If the game doesn’t find a “Masks” folder, the pupils will simply not show up.
Animation
Now here is where we get our hands dirty.
Note: All characters are created facing right.
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.
Note: It’s good to keep the layer name the same as the asset name. Be tidy with your projects!
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.
The Instance Name (on timeline) = Movieclip Name (in library) = Exported Asset Name.
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.
Note: The game will take the animation and it will use the instance name of an asset to look for its
equivalent in the Asset Sheet. If the names don’t match, the game won’t be able to see or use that
asset and the animation won’t work properly. This is very important to get right.
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.
Note: Only the “Original” and “Idle” animations are mandatory.
That being said, just like the expressions, it’s recommended to have all of them in order
to make sure the game can take advantage of all the resources and make the character awesome.
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.
Note: The engine supports animations that use tweening in Adobe Flash, including:
movement, rotation, scaling, alpha and even the “Adjust Color” filter.
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.
Note: All animation files should be named in the form of “[CharName]Anim.json”
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.
Note: You can scroll back up to the “Character structure” section where it says “Asset Sheet”
to see a list of all the assets you need to export.
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
This is the first thing you see when you open the program.
1. Pick the “JSON (Array)” option
This is how an empty slate looks like, now it’s time to make our settings
2. Press the little folder icon to set your saving path.
3. Input the name of your character followed by “Sheet” and press Save.
4. Click on the “Layout” tab to expand it,
5. Uncheck “Allow Rotation”.
6. Disable “Trim Mode”
7. Drag all the exported assets in the “Empty” side bar.
8. Hit the “Publish” button and you are done!
Testing your character
Character Viewer
Before testing your character in-game, make sure it looks good.
There is a “Character Viewer” in the Level Editor that allows you to check all the assets and animations of your character in-engine. The Character viewer will let you know if something is missing or if you did anything wrong.
Once you are happy with how your character looks in the Character Editor, start up the game and see how he looks in action!
That’s it!
At this point you should have the 3 neccesary files for the game to see your chararacter
[CharacterName]Sheet.png – The Asset Sheet
[CharacterName]Sheet.json – The Coordinates for the asset sheet
[CharacterName]Anim.json – The Animation
Now in order to test it, go where the game is installed and place these files in the following path:
Move or Die Mods [ModFolder] Lib Assets Characters [CharacterName] – Files go here –
(Don’t forget about the Masks folder in case your character has moving pupils.
Open the game, go to the character selection screen and your character should be there!
Problems?
If your character doesn’t show up in the character selection screen but it does show up in the Mod Manager, it means the game can’t read the character files, make sure the folder paths are correct and that the contents of the Sheets/Anim.json are also correct.
If your mod doesn’t show up in the Mod Manager, it means the game doesn’t see the mod, make sure your mod folder is in the game’s “Mods” folder and the modinfo.txt is in place with the correct info inside.