- Using Character Animation System 2/2 -
-
Welcome! In this section we will creating the Animation System for our Fighter so he won't look like Ken (but Ryu instead)!
-
Please make sure that you checked all the previous tutorials as the information will be needed especially for making palettes for our Omen!
-
Now lets start!
Preparation
-
First of all we need to prepare a "FAnim" component to use our Animations. We can simply copy the "FAnim_Temp" and put it where MyOmen_Char is.
-
Then let's update the "Animation System" reference to the new "FAnim" we made.
-
Let's continue by preparing a Character Icon for our Fighter. Before that we will be adding a couple of Folders to keep things tidy.
-
After adding our Icon image file from outside, lets make a Sprite and then a Flipbook out of it!
-
Now lets use the Character Icon by adding it to the reference in FAnim we just made.
-
Then to test things out lets change the 2 Fighters in Test Mode to MyOmen_Char we just have.
-
If we see the Ryu Portraits beside the health bars, we got it correct!
-
PS: Setting T2 Fighter 1 Material Value to 0 is better too because we don't have a Palette yet.
An Idle Animation to Test
-
One problem we have as obvious as it is that we got no Palette and we are still using Ken's Flipbooks animations.
-
Now let's make an Idle Animation by importing images from outside and making sprites out of them.
-
If you went through the Paper2D section you already know what's happening!
-
The reason we have put Pivot on Sprites to the feet is so that the Fighter is aligned with the Stage Ground.
-
Finally lets put our Idle Animation to test. We will be setting our "Standing Idle" value to the new Flipbook in "MyOmen_FAnim" we just made and make sure looping is toggled on!
Creating Different Looks (Palette System)
-
Now that we have an Idle Animation, we can work on creating different looks. This one will be with Palettes as Omen is using Ryu's pixelated images. We will do a Non-Palette one later.
-
Let's grab "PalGrid_Translucent_MI" and make 2 copies of it in our Fighter's folder. Each one will represent a Palette for our Fighter!
-
After importing our Grid image where all the colors of Ryu's colors are contained we can put it right in the Main and Rendering Slots.
-
Feel free to test if all colors are correct. Note that there are 2 Rows in this image so we need the second one.
-
This image file is also in Omen's own folder for quick access. (Omen that comes with UF2D)
-
The reason we have both Main and Rendering as same PalGrid image is that we will be editing the colors in the Material Instance itself that contains them.
-
You can also provide a Rendering PalGrid to change the colors.
-
Feel free to watch the video on the right to see how I am changing Omen's colors!
-
In the video you will see that I am changing Row 00's 10th and 11th values which belongs to Omen's bandanas and Row 01's 01st - 05th inbetween values belong to his outfit.
-
Now that we have 2 Palettes with different colors, we can add them to the "Default Outift" slot of Omen!
-
Since this is a pixelated Fighter and we got no need for any Outfit slots, we can use the Default Outfit and fill its palette list with our newly made Materials.
-
In Material List you will see 4 Indexes to fill. They correspond to each Team Member that is possibly using the same palette. We are working on 1vs1 right now so all Team Members can have same outfit color no problem!
-
Due to having Lighting in your Stages (or lacking any), Palettes may not look as you expect them to when in game.
-
In this case it is definitely okay to change the values while the game is running so you get to see how they truly look!
Creating Different Looks (Non-Palette System)
-
Things are different if you have hand drawn images as Palette System won't work on them.
-
First rule is we need to provide image files for each color variation.
-
In this example we have Both White and Blue Ryu outfits as separate files for the idle animations.
-
Now that our textures are ready, lets create Sprites from only one set of Textures.
-
After setting Pivot Point to the feet of the images to align the Fighter with the Stage Ground, we will be adding the other color textures to the "Additional Textures" Array.
-
Feel Free to watch the video on the fight for demonstration!
-
Next, we need to let MyOmen_FAnim now that we are NOT using any palette system for both outfits. First Outfit will be the "Default" one while the blue colored Omen will be the first "Extra Outfit".
-
Let's not forget to use the non-pixelated Flipbook we just made as Idle Animation to test.
-
Now let's test it out. In "Framework Kickstarter", change the "T2 Fighter 1 Outfit" value to 0.
-
Default Outfit Value is -1 and Extra Outfit Values starts from 0. This will make first Omen to have White Colored Sprites while the other one will have Blue!
-
From now on the tutorials will continue with Pixelated Omen so keep in mind!
Moving on With Animations
-
Back to our Idle Animation, we didn't really work on making a Collision for it. All sprites come with a regular collision that covers all the sprite but it is not enough most of the time.
-
Let's update the collision of the the First Sprite of Idle Animation and set its "Collision Source" value to "First Frame Collision".
-
Since its just an idle animation, first frame's own collision will be enough for all of the sprites!
Intro Animation
-
Here I will be preparing the Sprites for the Intro Animation. Same deal as Idle Animation really!
-
Note that I am checking the pivot point values from the Omen that is already provided. Key is always having the pivot on where the feet are.
-
Now lets handle the Flipbook. Again as same as the Idle Animation but got sprites going on in different order, so we are going to add them one by one.
-
I am still checking Omen's own Intro Flipbook so feel free to tag along!
-
Normally Intro Flipbooks need no collision but it is okay to have First Frame Collision regardless.
-
Let's update the "Intro" value in our FAnim and test it out!
-
Note that you can have more than one Intro Animation or State, there is no limit for that and we will get to that soon enough.
Idle Blend Animation
-
You probably realized that there is a small blinking (no flipbook) between intro and idle animation. Because UF2D also got a "Idle Blend Animation".
-
This Animation is used so that transition to Idle Animation is not instant and jarring in some cases.
-
If your Fighter does not need such animation you can use the Idle Animation again. However our Omen will have one so let's get to it!
-
You probably realized that there is a small blinking (no flipbook) between intro and idle animation. Because UF2D also got a "Idle Blend Animation".
-
This Animation is used so that transition to Idle Animation is not instant and jarring in some cases.
-
If your Fighter does not need such animation you can use the Idle Animation again. However our Omen will have one so let's get to it!
Other Regular and Receive Hit Animations
-
We will not go through and make each animations as that would take way too many time. However you can copy all the rest of the Omen animations from one Fanim to another as the video shows!
-
This goes for Receive Hit Animations too. Whole system is still a work in progress so once we get a more robust system in place we will go deeper into it.
-
Feel free to check each value for receive hit ones, their names and animations can give easy clues to make your own (and you can always ask me personally).
-
We are done with Fighters and their Animation Systems for now. In the end they are in a sense empty husks on their own, holding only global variables and reacting to Player Inputs when needed. What's most important is the State Modules themselves! So feel free to check them out here!
-
We will also get to see how to add Fighters into a Character Select Screen when the time comes. However for now the gameplay itself needs to be fully polished as Menus are simple in concept.
-
Feel free to move on and check about State Module System!