User Tools

Site Tools


anim_char_tutorial

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
anim_char_tutorial [2017/11/10 08:55] justinanim_char_tutorial [2017/11/14 08:45] (current) justin
Line 1: Line 1:
 ======Animating a Character====== ======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 animations, one for when the character is in an idle state (i.e. standing still) and one for when the character is walking.+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. **Note:** This tutorial assumes that you already understand the basics of using the [[Voxel Editor]] to build a model.
  
 =====Creating the Base Model===== =====Creating the Base Model=====
-(Create base model for the character in a standing position)+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|}} {{:wiki:anim_char_frame_01.png?nolink|}}
  
 =====Creating the Idle Animation===== =====Creating the Idle Animation=====
-(Duplicate frame)+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|}} {{:wiki:anim_char_duplicate_button.png?nolink|}}
  
-(Adjust model slightlyfor example bending knees a bit, etc)+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|}} {{:wiki:anim_char_frame_02.png?nolink|}}
  
-(Define animation using add animation, start at frame 1 and end at 2, explain settings, predefined names)+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|}} {{: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|}} {{:wiki:anim_char_idle_settings.png?nolink|}}
  
-(Click play button on anim toolbar to see animation play, then click again to stop)+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|}} {{:wiki:anim_char_idle.gif?nolink|}}
 +
 +Click the "Play" button again to stop the [[animation]].
  
 =====Creating the Walk Animation===== =====Creating the Walk Animation=====
-(Simple walk animation can be made with just 3 frames. Duplicate Frame #1 and move frame to end using Move button)+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|}} {{:wiki:anim_char_move_frame_button.png?nolink|}}
  
-(First frame, swing one arm forward and bend opposite leg backward, vice versa with other arm/leg)+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|}} {{:wiki:anim_char_frame_03.png?nolink|}}
  
-(Duplicate frame #1 again and move to end, this is Idle second framearms down and legs straight)+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|}} {{:wiki:anim_char_frame_04.png?nolink|}}
  
-(Third frame, duplicate of first walk frame but flipped horizontally)+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|}} {{:wiki:anim_char_flip_button.png?nolink|}}
 +
 +Frame #5 should now look similar to the image below.
  
 {{:wiki:anim_char_frame_05.png?nolink|}} {{:wiki:anim_char_frame_05.png?nolink|}}
  
-(Define animation similar to idle animation)+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|}} {{: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|}} {{:wiki:anim_char_walk.gif?nolink|}}
  
-At some point, explain how to tweak the speed as the animation is playing, may also need to be adjusted based on the character's movement speed and how it appears in-game.+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|}} {{:wiki:anim_char_example_game.gif?nolink|}}
  
 ~~NOTOC~~ ~~NOTOC~~
anim_char_tutorial.1510332908.txt.gz · Last modified: 2017/11/10 08:55 by justin