RPG in a Box
Official Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
======Animating a Character======
----
This tutorial will explain the basics of [[animation]] in RPG in a Box and will walk through the creation of some simple [[character]] [[animation|animations]], one for when the [[character]] is in an idle state (i.e. standing still) and one for when the [[character]] is walking.

**Note:** This tutorial assumes that you already understand the basics of using the [[Voxel Editor]] to build a model.

=====Creating the Base Model=====
To begin, we'll need to build a the base model for our [[character]]. Open the "New Resource" dialog and create a new blank model of type "Character" in the [[Voxel Editor]]. Using the "Attach/Place Voxels" tool (and any others as necessary), build a simple human or humanoid [[character]] similar to the one shown in the image below. This will serve as the first frame of the idle [[animation]], so they should just be in a natural standing position.

{{:wiki:anim_char_frame_01.png?nolink|}}

=====Creating the Idle Animation=====
A [[character|character's]] idle [[animation]] is played whenever they are standing still and no other [[animation]] is active. If a [[character]] does not have one defined, the game will default to displaying the first frame of the model. Even a simple [[animation]] can add a lot of life to your game and is recommended whenever possible.

For this tutorial we'll create an idle [[animation]] having two frames, with the existing first frame serving as one of those. Click the "Duplicate Current Frame" button on the [[animation]] toolbar to make a copy of the first frame.

{{:wiki:anim_char_duplicate_button.png?nolink|}}

The editor will duplicate the current frame and switch the view to the new frame, in this case frame #2. Make some slight adjustments to the model, like bending the knees a bit and adding minor movements to the arms as shown in the image below. The "Shift Model Down" button ({{:wiki:arrow_down.png?nolink|}}) on the [[voxel_editor|Editor Tools]] panel can be useful for this as it moves the entire model down by one [[voxel]].

{{:wiki:anim_char_frame_02.png?nolink|}}

Now that we have the two idle frames, we'll need to define it as an [[animation]]. Click the "Add Animation" button on the [[animation]] toolbar.

{{:wiki:anim_char_add_anim_button.png?nolink|}}

In the "Add Animation" dialog that appears, enter the "Name", "Start Frame", "End Frame", "Type", and "Speed" values as shown in the image below. See [[Animation Types]] for more information about the supported playback types. For the name, you can either type "idle" into the box yourself, or click the magnifying glass button ({{:wiki:magnifier.png?nolink|}}) to select from a list of [[predefined animation names]]. This list includes special names that are connected to certain behaviors and scenarios, like idling, walking, attacking, etc.

{{:wiki:anim_char_idle_settings.png?nolink|}}

Click OK to finish defining the [[animation]], then click the "Play" button ({{:wiki:control_play_blue.png?nolink|}}) on the [[animation]] toolbar to see the idle animation that you've created!

{{:wiki:anim_char_idle.gif?nolink|}}

Click the "Play" button again to stop the [[animation]].

=====Creating the Walk Animation=====
A simple walk [[animation]] can be made with just 3 frames. Duplicate frame #1 and move it to the end using the "Move Current Frame Right" button on the [[animation]] toolbar. This new frame will now be frame #3 and will serve as the first frame of our walk [[animation]].

{{:wiki:anim_char_move_frame_button.png?nolink|}}

In this new frame, modify the model so one arm is angled backward and the leg on the same side is angled forward. Also make adjustments to the other arm and leg but in reverse (the arm angled forward and the leg angled backward, as shown in the image below).

{{:wiki:anim_char_frame_03.png?nolink|}}

Go to frame #1 and duplicate it again, then move it to the end by clicking the "Move Current Frame Right" button twice so it is now frame #4. This will be the second frame of our walk [[animation]]. The [[character|character's]] arms and legs should be straight down, so you can keep the frame as is, or make some minor adjustments like moving the arms slightly away from the body as shown below.

{{:wiki:anim_char_frame_04.png?nolink|}}

The third and final frame of the walk [[animation]] should be similar to similar to the first one, but with the arms and legs flipped. Go to frame #3 and click the "Duplicate Current Frame" button followed by the "Move Current Frame Right" button to move the new frame so it's now frame #5. Ensure you are in the "Front View" then click the "Flip Model Horizontally" button ({{:wiki:shape_flip_horizontal.png?nolink|}}) to flip the model.

{{:wiki:anim_char_flip_button.png?nolink|}}

Frame #5 should now look similar to the image below.

{{:wiki:anim_char_frame_05.png?nolink|}}

Now that we have the 3 frames created for the walk [[animation]], click the "Add Animation" button ({{:wiki:add.png?nolink|}}) on the [[animation]] toolbar and define its settings as shown below. The walk [[animation]] will use the Ping Pong type instead of Loop. With the Ping Pong type, the frames will be played in order, then reversed back to the start frame, and so on. In this case, the sequence of frames will be 3, 4, 5, 4, 3, 4, 5, etc.

{{:wiki:anim_char_walk_settings.png?nolink|}}

Click OK to finish defining the [[animation]], then click the "Play" button ({{:wiki:control_play_blue.png?nolink|}}) on the [[animation]] toolbar to see the walk [[animation]] that you've created!

{{:wiki:anim_char_walk.gif?nolink|}}

Click the "Play" button again to stop the [[animation]].

=====Tweaking and Testing the Animations======
After you've defined an [[animation]] in the [[Voxel Editor]], you can later adjust it from the [[Model Properties]] panel on the left. Expanding an [[animation]] in the list will display its settings, most of which can be edited. You can tweak the speed as an [[animation]] is playing to see the effect in real-time.

{{:wiki:model_props_anims.png?nolink|}}

Once you are done, save the model and [[exporting_your_game|export your game]] to test out the new [[animation|animations]] that you've created!

{{:wiki:anim_char_example_game.gif?nolink|}}

~~NOTOC~~
RPG in a BoxOfficial Documentation

User Tools

Site Tools

Page Tools

RPG in a Box
Official Documentation
