User Tools

Site Tools


en:tutorials:animation:realistic_walk_movement

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
tutorials:community:sausage:realistic_walk_movement [2015/10/28 19:28 (9 years ago)] – ↷ Links adapted because of a move operation sausageen:tutorials:animation:realistic_walk_movement [2022/06/21 07:49 (22 months ago)] (current) – minor typo iarwain
Line 21: Line 21:
  
 ===== Prerequisite ===== ===== Prerequisite =====
-You are best to be familiar with the [[tutorials:anim|Anim Tutorial]] before this one.+You are best to be familiar with the [[en:tutorials:animation:anim|Anim Tutorial]] before this one.
  
  
-===== Simple Movement vs Distance Array =====+===== Fixed Distance vs Varying Distance =====
  
-With a simple movement, for each frame change, the object is usually moved pixels along. With this solution, a list of varying distance values is used. For each frame change, an evant value is taken, and the character is moved that many pixels along.+With a simple movement, for each frame change, the object is usually moved a certain amount of pixels along. With this solution, a list of varying distance values is used. For each frame change, an event value is taken, and the character is moved that many pixels along.
  
 That is the concept in a nutshell. That is the concept in a nutshell.
Line 32: Line 32:
 I have provided a set of animation frames for this tutorial here.  I have provided a set of animation frames for this tutorial here. 
  
-{{tutorials:community:sausage:droid-animation.png|}}+{{tutorials:animation:droid-animation.png|}}
  
 The graphic is 506 x 100 and each frame varies in width. Save to the data/anim folder. The graphic is 506 x 100 and each frame varies in width. Save to the data/anim folder.
Line 39: Line 39:
  
  
-<code ini>[DroidAnimationSet] +<code ini> 
-AnimationList DroidWalkAnim#DroidIdleAnim +[DroidObject] 
-LinkList DroidIdle2Walk#DroidWalk2Idle#DroidIdleLoop#DroidWalkLoop+Graphic = DroidGraphic ; Default frame size for all the animation frames.  
 +AnimationSet = DroidAnimationSet 
 +Position = (5, 130, 0) 
 +  
 +[DroidGraphic
 +Texture droid-animation.png  
 +Pivot top right
  
-[DroidIdle2Walk+[DroidAnimationSet
-Source DroidIdleAnim +Texture       droid-animation.png 
-Destination DroidWalkAnim +KeyDuration   0.2 
-Property    immediate +Digits        2 
- +StartAnim     DroidIdleAnim 
-[DroidWalk2Idle] +DroidIdleAnim = 1 
-Source DroidWalkAnim +DroidWalkAnim 7 
-Destination = DroidIdleAnim +DroidIdleAnim-> = DroidIdleAnim # .DroidWalkAnim 
-Property    immediate +DroidWalkAnim-> = DroidWalkAnim # .DroidIdleAnim 
-Priority 10 +
- +
-[DroidIdleLoop] +
-Source = DroidIdleAnim +
-Destination = DroidIdleAnim +
- +
-[DroidWalkLoop] +
-Source = DroidWalkAnim +
-Destination = DroidWalkAnim+
  
 [DroidIdleAnim] [DroidIdleAnim]
-KeyData1      droid1 +Direction left # up ;get frames from right to left, in this case: get a single frame from the right
-KeyDuration1  = 0.2 +
-Property    = immediate+
  
-[DroidWalkAnim+[DroidIdleAnim01
-DefaultKeyDuration  = 0.2;  +TextureSize (70, 100, 0) 
-KeyData1            = droid1 +KeyEvent    = AR1 ;move 0 distance when idle
-KeyData2            = droid2 +
-KeyData3            = droid3 +
-KeyData4            = droid4 +
-KeyData5            = droid5 +
-KeyData6            = droid6 +
-KeyData7            = droid7 +
-EventName1 = AR1 +
-EventTime1 = 0.2 +
-EventValue1 = 13 +
-EventName2 = AR1 +
-EventTime2 = 0.4 +
-EventValue2 = 6 +
-EventName3 = AR1 +
-EventTime3 = 0.6 +
-EventValue3 = 18 +
-EventName4 = AR1 +
-EventTime4 = 0.8 +
-EventValue4 = 10 +
-EventName5 = AR1 +
-EventTime5 = 1.0 +
-EventValue5 = 19 +
-EventName6 = AR1 +
-EventTime6 = 1.2 +
-EventValue6 = 14 +
-EventName7 = AR1 +
-EventTime7 = 1.4 +
-EventValue7 = 21 +
-</code> +
- +
-The [DroidWalkAnim] section contains the custom events which are very important. Each EventName is set the same as this is not important for this tutorial. But the EventTime and EventValue values are very important, and are defined in order to be in sync with the EventHandler. The KeyDuration for the animation is 0.2 so each EventTime is as well, starting with: 0.2, then 0.4, 0.6, 0.8 etc etc.  +
- +
-We start with 0.2, not 0.0 because we don't want a movement on the first frame. +
- +
-And each EventValue contains a pixel distance value used to move our character each step. These vary as you can see above: 13, 6, 18, 10, 19, 14 & 21 pixels. +
- +
- +
-<code ini> +
-[DroidObject] +
-Graphic = droid1; This will do as a default. +
-AnimationSet = DroidAnimationSet +
-Position = (5, 130, 0) +
- +
-[DroidGraphic] +
-Texture     = ../data/anim/droid-animation.png  +
-Pivot = top right+
  
-[droid1@DroidGraphic] +[DroidWalkAnim01]
-TextureCorner = (0, 0, 0)+
 TextureSize = (63, 100, 0) TextureSize = (63, 100, 0)
 +KeyEvent    = AR1 # 30 ;move 30 pixels right on this frame
  
-[droid2@DroidGraphic] +[DroidWalkAnim02]
-TextureCorner = (63, 0, 0)+
 TextureSize = (72, 100, 0) TextureSize = (72, 100, 0)
 +KeyEvent    = AR1 # 5 ;move 4 pixels right on this frame, etc
  
-[droid3@DroidGraphic] +[DroidWalkAnim03]
-TextureCorner = (135, 0, 0)+
 TextureSize = (78, 100, 0) TextureSize = (78, 100, 0)
- +KeyEvent    = AR1 # 0 
-[droid4@DroidGraphic] +  
-TextureCorner = (213, 0, 0)+[DroidWalkAnim04]
 TextureSize = (78, 100, 0) TextureSize = (78, 100, 0)
- +KeyEvent    = AR1 # 19 
-[droid5@DroidGraphic] +  
-TextureCorner = (291, 0, 0)+[DroidWalkAnim05]
 TextureSize = (65, 100, 0) TextureSize = (65, 100, 0)
- +KeyEvent    = AR1 # 22 
-[droid6@DroidGraphic] +  
-TextureCorner = (356, 0, 0)+[DroidWalkAnim06]
 TextureSize = (80, 100, 0) TextureSize = (80, 100, 0)
 +KeyEvent    = AR1 # 4
 + 
 +[DroidWalkAnim07]
 +TextureSize = (70, 100, 0)
 +KeyEvent    = AR1 # 26
 +</code>
  
-[droid7@DroidGraphic] +The ''[DroidWalkAnimXX]'' sections contains the individual frame sizes. Normally we use a ''FrameSize'' in the AnimSetbut because our frames are all different sizes we specify them manually.
-TextureCorner = (4360, 0) +
-TextureSize = (70, 100, 0)</code>+
  
 +Also in the ''[DroidWalkAnimXX]'' are the custom key events which are very important. The first value is the  event name and the second value is the event value.
 +
 +Each event value contains the pixel distance value used to move our character each step. These vary as you can see above: 30, 5, 0, 19, 22, 4 & 26 pixels.
  
 You'll notice there is only right hand movement defined, just to keep the tutorial simple. You'll notice there is only right hand movement defined, just to keep the tutorial simple.
- 
- 
- 
  
  
 ===== Setting Up ===== ===== Setting Up =====
  
-A few things to set up, first our little droid object:+A few things to set up, first our little droid object in the Init() function:
  
 <code c> <code c>
-orxOBJECT *droid = orxObject_CreateFromConfig("DroidObject");+droid = orxObject_CreateFromConfig("DroidObject");
 orxObject_SetCurrentAnim(droid, orxNULL ); orxObject_SetCurrentAnim(droid, orxNULL );
 +</code>
 +
 +And then the object variable at the top of the code:
 +
 +<code c>
 +#include "orx.h"
 +orxOBJECT *droid;
 </code> </code>
  
Line 174: Line 134:
  case orxANIM_EVENT_CUSTOM_EVENT: {  case orxANIM_EVENT_CUSTOM_EVENT: {
  
- orxLOG("<%s>@<%s> was fired PIXELS %f ",  pstPayload->zAnimName, orxObject_GetName(orxOBJECT(_pstEvent->hRecipient)), pstPayload->fCustomEventValue );+ orxLOG("<%s>@<%s> was fired PIXELS %f ",  pstPayload->zAnimName, orxObject_GetName(orxOBJECT(_pstEvent->hRecipient)), pstPayload->stCustom.fValue );
  
  orxVECTOR droidVector;  orxVECTOR droidVector;
  orxObject_GetPosition(droid, &droidVector);  orxObject_GetPosition(droid, &droidVector);
- droidVector.fX = droidVector.fX + pstPayload->fCustomEventValue;+ droidVector.fX = droidVector.fX + pstPayload->stCustom.fValue;
  orxObject_SetPosition(droid, &droidVector);  orxObject_SetPosition(droid, &droidVector);
  
Line 190: Line 150:
  
  
-In the event handler, the orxANIM_EVENT_CUSTOM_EVENT is fired because the EventTime(s) having been defined in the config. The current position is added to by retrieving the active EventValue (pstPayload->fCustomEventValue) from the config file. +In the event handler, the orxANIM_EVENT_CUSTOM_EVENT is fired because the KeyEvents having been defined in the config. The current position is added to by retrieving the active KeyEventValue (pstPayload->stCustom.fValue) from the config file. 
  
 Setting the proper animation with key on and key off is done with: Setting the proper animation with key on and key off is done with:
  
 <code c> <code c>
- if(orxInput_IsActive("Right") && orxInput_HasNewStatus("Right")){ +  if (orxInput_IsActive("Right")) { 
- orxObject_SetTargetAnim(droid, "DroidWalkAnim" ); +   orxObject_SetTargetAnim(droid, "DroidWalkAnim"); 
- }  +  
-  +  else 
- if(!orxInput_IsActive("Right") )+   orxObject_SetTargetAnim(droid, "DroidIdleAnim"); 
- orxObject_SetCurrentAnim(droid, "DroidIdleAnim"); //currently used instead of orxObject_SetTargetAnim(droid, orxNULL );  due to a small bug in orx 1.2 (fixed in SVN) +  }
- }+
 </code> </code>
  
-When you run the program, the droid's feet should plant nice and firmly on the ground as it walks along. +And you'll need a key map:
  
 +<code c>
 +[MainInput]
 +KEY_ESCAPE = Quit
 +KEY_RIGHT  = Right
 +</code>
  
 +When you run the program, the droid's feet should plant nice and firmly on the ground as it walks along. 
  
- 
- 
- 
- 
-Possible pitfalls: 
- 
-1) Be careful to make all your Config EventTime(s) different. Two EventTime(s) the same will crash. 
en/tutorials/animation/realistic_walk_movement.1446085725.txt.gz · Last modified: 2017/05/30 00:50 (7 years ago) (external edit)