User Tools

Site Tools


en:tutorials:animation:animation_walkthrough

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:animation_walkthrough [2017/01/10 18:11 (7 years ago)] sausageen:tutorials:animation:animation_walkthrough [2020/08/20 04:57 (4 years ago)] (current) – ↷ Page moved from en:tutorials:animation_walkthrough to en:tutorials:animation:animation_walkthrough sausage
Line 8: Line 8:
 The sprite sheet that will be used throughout is below: The sprite sheet that will be used throughout is below:
  
-{{ :tutorials:chicken-animation-sheet.png?direct |}}+{{ tutorials:animation:chicken-animation-sheet.png?direct |}}
  
 There will be five animations defined from this sprite sheet which are divided as follows: There will be five animations defined from this sprite sheet which are divided as follows:
  
-{{ :tutorials:chicken-animation-cutups.png?direct |}}+{{ tutorials:animation:chicken-animation-cutups.png?direct |}}
  
 The four frames in the red region will be used as the SitDown and StandUp animations. The two frames in the blue region will be the Jump animation. Finally, the six frames in the yellow region is the Run animation. The four frames in the red region will be used as the SitDown and StandUp animations. The two frames in the blue region will be the Jump animation. Finally, the six frames in the yellow region is the Run animation.
Line 24: Line 24:
 <code ini> <code ini>
 [Chicken] [Chicken]
-Graphic = ChickenGraphic +Graphic  = ChickenGraphic 
-Position = (400, 300, -0.1)+Position = (400, 300, -0.1)
  
 [ChickenGraphic] [ChickenGraphic]
-Texture = chicken-animation-sheet.png +Texture       = chicken-animation-sheet.png 
-TextureOrigin  = (0, 0, 0) +TextureOrigin = (0, 0, 0) 
-TextureSize  = (108, 115, 0) +TextureSize   = (108, 115, 0) 
-Pivot   = top left+Pivot         = top left
 </code> </code>
  
Line 48: Line 48:
 Compile and run, and we should have a basic chicken on the screen: Compile and run, and we should have a basic chicken on the screen:
  
-{{ :tutorials:chicken-start.jpg?direct |}}+{{ tutorials:animation:chicken-start.jpg?direct |}}
  
  
Line 56: Line 56:
 <code ini> <code ini>
 [Chicken] [Chicken]
-Graphic = ChickenGraphic +Graphic      = ChickenGraphic 
-Position = (400, 300, -0.1) +Position     = (400, 300, -0.1) 
-AnimationSet = ChickenAnimationSet+AnimationSet = ChickenAnimationSet
 </code> </code>
 +
 +<WRAP center round box tip 60%>
 +The optional ''Graphic'' property is only used to supply a default frame size for the animation frames. If you don't define this, the first frame from your animation will supply the frame size.
 +</WRAP>
 +
  
 Next, define the animation set, which is a very simple one: Next, define the animation set, which is a very simple one:
Line 65: Line 70:
 <code ini> <code ini>
 [ChickenAnimationSet] [ChickenAnimationSet]
-Texture = chicken-animation-sheet.png +Texture     = chicken-animation-sheet.png 
-FrameSize = (108, 115, 0) +FrameSize   = (108, 115, 0) 
-StartAnim = SitDownAnim+StartAnim   = SitDownAnim
 SitDownAnim = 4 SitDownAnim = 4
 </code> </code>
Line 90: Line 95:
 Re-run, and the chicken should be sitting down over and over: Re-run, and the chicken should be sitting down over and over:
  
-{{ :tutorials:chicken-sitting.gif?direct |}}+{{ tutorials:animation:chicken-sitting.gif?direct |}}
  
 ===== Adding More Animations ===== ===== Adding More Animations =====
Line 98: Line 103:
 <code ini> <code ini>
 [ChickenAnimationSet] [ChickenAnimationSet]
-Texture = chicken-animation-sheet.png +Texture     = chicken-animation-sheet.png 
-FrameSize = (108, 115, 0)+FrameSize   = (108, 115, 0)
  
-StartAnim = SitDownAnim+StartAnim   = SitDownAnim
  
-SitDownAnim  = 4 +SitDownAnim = 4 
-StandUpAnim  = 4 +StandUpAnim = 4 
-RunAnim = 6 +RunAnim     = 6 
-JumpAnim = 2 +JumpAnim    = 2 
-IdleAnim = 1+IdleAnim    = 1
 </code> </code>
  
Line 122: Line 127:
 <code ini> <code ini>
 [StandUpAnim] [StandUpAnim]
-KeyDuration = 0.1 +KeyDuration = 0.1 
-Direction = left # up +Direction   = left # up 
-TextureSize = (432, 115, 0)+TextureSize = (432, 115, 0)
 </code> </code>
  
Line 145: Line 150:
 <code ini> <code ini>
 [RunAnim] [RunAnim]
-KeyDuration = 0.1 +KeyDuration   = 0.1 
-TextureOrigin = (0, 115, 0)+TextureOrigin = (0, 115, 0)
 </code> </code>
  
Line 157: Line 162:
 <code ini> <code ini>
 [JumpAnim] [JumpAnim]
-KeyDuration = 0.5 +KeyDuration   = 0.5 
-TextureOrigin = (432, 0, 0)+TextureOrigin = (432, 0, 0)
 </code> </code>
  
Line 167: Line 172:
 <code ini> <code ini>
 [IdleAnim] [IdleAnim]
-KeyDuration = 0.1 +KeyDuration   = 0.1 
-TextureOrigin = (324, 0, 0)+TextureOrigin = (324, 0, 0)
 </code> </code>
  
Line 183: Line 188:
  
 <code ini> <code ini>
-StandUpAnim  = 4 +StandUpAnim = 4 
-RunAnim = 6+RunAnim     = 6
 </code> </code>
  
Line 190: Line 195:
  
 <code ini> <code ini>
-StandUpAnim  = -1 +StandUpAnim = -1 
-RunAnim = -1+RunAnim     = -1
 </code> </code>
  
Line 237: Line 242:
  
 <code ini> <code ini>
-IdleAnim->  = IdleAnim # StandUpAnim +IdleAnim->    = IdleAnim # StandUpAnim 
-StandUpAnim->  = RunAnim +StandUpAnim-> = RunAnim 
-RunAnim-> = RunAnim # SitDownAnim # JumpAnim +RunAnim->     = RunAnim # SitDownAnim # JumpAnim 
-SitDownAnim-> = IdleAnim +SitDownAnim-> = IdleAnim 
-JumpAnim-> = RunAnim # SitDownAnim+JumpAnim->    = RunAnim # SitDownAnim
 </code> </code>
  
Line 351: Line 356:
  
 [KeysForInput] [KeysForInput]
-KEY_ESCAPE = Quit +KEY_ESCAPE = Quit 
-KEY_RIGHT = Run +KEY_RIGHT  = Run 
-KEY_LCTRL = Jump+KEY_LCTRL  = Jump
 </code> </code>
  
Line 360: Line 365:
 <code c> <code c>
 void CheckInputs(){ void CheckInputs(){
- if (orxInput_GetValue("Run") == orxTRUE && orxInput_HasNewStatus("Run")){+ if (orxInput_HasBeenActivated("Run")){
  orxObject_SetTargetAnim(chicken, "RunAnim");  orxObject_SetTargetAnim(chicken, "RunAnim");
  }  }
-  + else if (orxInput_HasBeenDeactivated("Run")){
- if (orxInput_GetValue("Run") == orxFALSE && orxInput_HasNewStatus("Run")){+
  orxObject_SetTargetAnim(chicken, "IdleAnim");  orxObject_SetTargetAnim(chicken, "IdleAnim");
  }  }
Line 410: Line 414:
  
 <code c> <code c>
- if (orxInput_GetValue("Jump"== orxTRUE && orxInput_HasNewStatus("Jump") &&  orxInput_GetValue("Run"== orxTRUE){+ if (orxInput_HasBeenActivated("Jump") && orxInput_IsActive("Run")){
  orxObject_SetTargetAnim(chicken, "JumpAnim");  orxObject_SetTargetAnim(chicken, "JumpAnim");
  }  }
Line 428: Line 432:
  
 <code ini> <code ini>
-IdleAnim->  = IdleAnim # StandUpAnim +IdleAnim->    = IdleAnim # StandUpAnim 
-StandUpAnim->  = RunAnim +StandUpAnim-> = RunAnim 
-RunAnim-> = RunAnim # SitDownAnim # JumpAnim +RunAnim->     = RunAnim # SitDownAnim # JumpAnim 
-SitDownAnim-> = IdleAnim +SitDownAnim-> = IdleAnim 
-JumpAnim-> = RunAnim # SitDownAnim+JumpAnim->    = RunAnim # SitDownAnim
 </code> </code>
  
Line 479: Line 483:
 Change your config to the above and re-run. The chicken will run and jump immediately when told to. Change your config to the above and re-run. The chicken will run and jump immediately when told to.
  
-Excellent. We are all done. The chicken animations are all working correctly, and he behaves perfectly under control.+Excellent. We are almost done. The chicken animations are all working correctly, and he behaves perfectly under control
 + 
 + 
 +===== Another Sprite sheet for another version ===== 
 + 
 +One of the great advantages of Orx's animation system is the ability to create variations of a game character using the same animations and links, but supplying a different sprite sheet and using some simple section inheritance. 
 + 
 +Here is another chicken, this one is blue with a nice red hat: 
 + 
 +{{ tutorials:animation:chicken-animation-sheet-blue.png?direct |}} 
 + 
 +Save this to your data folder as: chicken-animation-sheet-blue.png 
 + 
 +The first step is to create a new chicken object, and giving it a new //AnimationSet// property of ''BlueChickenAnimationSet'': 
 + 
 +<code ini> 
 +[BlueChicken] 
 +Graphic      = ChickenGraphic 
 +Position     = (200, 300, -0.1) 
 +AnimationSet = BlueChickenAnimationSet 
 +</code> 
 + 
 +Then create the ''BlueChickenAnimationSet'' section by inheriting the ''ChickenAnimationSet'': 
 + 
 +<code ini> 
 +[BlueChickenAnimationSet@ChickenAnimationSet] 
 +Texture = chicken-animation-sheet-blue.png 
 +</code> 
 + 
 +In code, change the name of the created object to: 
 + 
 +<code c> 
 +chicken = orxObject_CreateFromConfig("BlueChicken"); 
 +</code> 
 + 
 +Compile and re-run. The yellow chicken is replaced with a blue one. With some simple inheritance and a few extra sprite sheets, you can have ships or enemies that all vary on a theme, and use the same animation actions. 
 + 
 +There are two things that were not covered in this tutorial section: 
 + 
 +  * The Prefix property 
 +  * Animation aliases 
 + 
 +These two properties come in very handy when all the sprites are on the same sprite sheet. But having two separate sprite sheets avoided needing to use that. We'll cover these in another tutorial.
  
-Feel free to [[tutorials:animation_walkthrough_reuse|continue onto part two]] where animations aliases are introduced as way of re-using animations with different sprite sheets.+And now we're really done! I hope you enjoy using the animation system. Ask any questions on the forum, or [[https://orx-project.org/discord|come chat over on discord]].
en/tutorials/animation/animation_walkthrough.1484100677.txt.gz · Last modified: 2017/05/30 00:50 (7 years ago) (external edit)