# How would you animate a stick figure that is walking right?

• ### Question

• ```'Stick Fighter
'Graphics: Background, Floor, Lava, Water, Stickfigures, HP Bar, Timer, Walking, Punch, Kick, Guard
'Controls: A = Punch
'                  S = Guard
'                 D = Kick
'                 Move = Left and Right Arrow Key
'                Jump = Up Arrow Key
'                Go Down = Down Arrow Key
'Math: HP is 100%
'            ft = half a brick
'             Punch does 10% dmg and is 5 ticks, can reach 3ft
'             Kick does 15% dmg and is 8 ticks, can reach 5ft
'             Guard negates all dmg, lasts for 2-3 seconds
'            Lava does 100% dmg in 1 tick
'            Water does 25% dmg every 2 ticks

intialise()
Level()
While "True"
updateGamePlay()
EndWhile

Sub intialise
GraphicsWindow.Title = "Stick Fighter"
gh = 600
gw = 1200
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Left = (Desktop.Width - gw) / 2
GraphicsWindow.Top = (Desktop.Height - gh) / 4

GraphicsWindow.KeyDown = onKeyDown

keyDown = "False"

posX = 10
posY = 10
EndSub

Sub Level
GraphicsWindow.DrawresizedImage(background , 0, 0, 1200, 1200)
For i = 1 To gw Step 50
GraphicsWindow.DrawResizedImage(brick,0+i, 575,50,50)
EndFor
endsub

Sub updateGamePlay
If (keyDown = "True") Then
Shapes.Move(walkR1,posX,posY)
keyDown = "False"
EndIf
EndSub

'input lag
' press right arrow key it goes right, press down and it goes right, press down again and it goes down
Sub onKeyDown
lastKey = GraphicsWindow.LastKey
If (lastKey = "Right") Then
keyDown = "True"
posX = posX + 10
EndIf
EndSub ```

Thursday, August 28, 2014 5:31 PM

• A simple starting code how I might do a left and right walking man - no images and the setup is minimal - this prototype is all about the game loop and keyboard control only.

```GraphicsWindow.KeyDown = OnKeyDown
GraphicsWindow.KeyUp = OnKeyUp

'Simplified dummy setup for images walking left and right - this is just to see something - a game would use images for each player etc
player1X = 50 'Initial X (Left of player)
player1Y = GraphicsWindow.Height - 50 'Initial Y (Top of player)
For i = 1 To 5
GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.HideShape(player1WalkLeft[i])

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.HideShape(player1WalkRight[i])
EndFor
'Show initial player
player1Frame = 1 'First frame
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y)
Shapes.ShowShape(player1)

'Main Loop
While("True")
start = Clock.ElapsedMilliseconds
iFrame = iFrame+1

movePlayers()

delay = 25 - (Clock.ElapsedMilliseconds-start) 'Max delay of 25ms is 40 fps
If (delay > 0) Then
Program.Delay(delay)
EndIf
EndWhile

'Move players
'player1 is the current active shown image (there is only every one not hidden at a time)
Sub movePlayers
If (keyDown["Left"]) Then
player1X = player1X-3 'Move player position left 3 pixels per frame
If (Math.Remainder(iFrame,8) = 0) Then 'Update player every 8 frames of movement
Shapes.HideShape(player1) 'Hide current player image (will be last player image)
player1Frame = 1+Math.Remainder(player1Frame,5) 'Cycle player image in group (these for walking left)
player1 = player1WalkLeft[player1Frame] 'The next player image in group is now the current player image
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y) 'Just move player
EndIf
ElseIf (keyDown["Right"]) Then
player1X = player1X+3
If (Math.Remainder(iFrame,8) = 0) Then
Shapes.HideShape(player1)
player1Frame = 1+Math.Remainder(player1Frame,5)
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y)
EndIf
EndIf
EndSub

'Register events
Sub OnKeyDown
key = GraphicsWindow.LastKey
keyDown[key] = "True"
EndSub

Sub OnKeyUp
key = GraphicsWindow.LastKey
keyDown[key] = ""
EndSub```

• Edited by Thursday, August 28, 2014 8:59 PM
• Proposed as answer by Friday, August 29, 2014 12:51 AM
• Marked as answer by Friday, August 29, 2014 3:02 AM
Thursday, August 28, 2014 7:55 PM
• `i assume this is where i can add the 5 pictures (figures going left)For i = 1 To 5  player1WalkLeft[i] = Shapes.AddImage (ll1)  Shapes.HideShape(player1WalkLeft[i])`

i got all the image into the program

timer.interval (500) for each picture to change every 2 pixels

trying to make an array that has the 5 pics with 1/2 second intervals

rr1 = r[1], xx, r[2], xx, r[3]
ll1 = l[1], xx2, l[2], xx2, l[3]
xx = Timer.Interval(500), Shapes.HideShape(player1WalkRight[i])

xx2 = Timer.Interval(500), Shapes.HideShape(player1WalkLeft[i])

how would i add implent it into the code

```GraphicsWindow.KeyDown = OnKeyDown
GraphicsWindow.KeyUp = OnKeyUp

'Simplified dummy setup for images walking left and right - this is just to see something - a game would use images for each player etc
player1X = 50 'Initial X (Left of player)
player1Y = GraphicsWindow.Height - 250 'Initial Y (Top of player)
For i = 1 To 5
Shapes.HideShape(player1WalkLeft[i])

Shapes.HideShape(player1WalkRight[i])
EndFor
'Show initial player
player1Frame = 1 'First frame
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y)
Shapes.ShowShape(player1)

'Main Loop
While("True")
start = Clock.ElapsedMilliseconds
iFrame = iFrame+1

movePlayers()

delay = 25 - (Clock.ElapsedMilliseconds-start) 'Max delay of 25ms is 40 fps
If (delay > 0) Then
Program.Delay(delay)
EndIf
EndWhile

'Move players
'player1 is the current active shown image (there is only every one not hidden at a time)
Sub movePlayers
If (keyDown["Left"]) Then
player1X = player1X-3 'Move player position left 3 pixels per frame
If (Math.Remainder(iFrame,8) = 0) Then 'Update player every 8 frames of movement
Shapes.HideShape(player1) 'Hide current player image (will be last player image)
player1Frame = 1+Math.Remainder(player1Frame+1,5) 'Cycle player image in group (these for walking left)
player1 = player1WalkLeft[player1Frame] 'The next player image in group is now the current player image
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y) 'Just move player
EndIf
ElseIf (keyDown["Right"]) Then
player1X = player1X+3
If (Math.Remainder(iFrame,8) = 0) Then
Shapes.HideShape(player1)
player1Frame = 1+Math.Remainder(player1Frame+1,5)
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y)
EndIf
EndIf
EndSub

'Register events
Sub OnKeyDown
key = GraphicsWindow.LastKey
keyDown[key] = "True"
EndSub

Sub OnKeyUp
key = GraphicsWindow.LastKey
keyDown[key] = ""
EndSub```

• Edited by Thursday, August 28, 2014 11:44 PM
• Marked as answer by Friday, August 29, 2014 3:01 AM
Thursday, August 28, 2014 10:13 PM

### All replies

• If you have 5 images for walking right you need to hide and show them in order so that only one is shown at a time.

First I would decide how the control will work?  You have to keep pressing to walk as you have it (posX only increases each time a right is pressed) or walking while the right key is held down, inwhich case you need to monitor keydown and keyup.

Next I would prototype without any other stuff - forget backgrounds, level etc.

You will need an array to store the walking images in so you can hide and show them in a loop, possible with time interval between the image showing - so you will have to work out carefully EXACTLY what it will do before coding it - it is hard to change as you go so time spent thinking it through fully first will save time and effort.

For example, it might be:

While the right key is pressed, move the character to the right at 3 pixels per frame, change to the next image from the 5 right walking images (cycling them) after 8 frames.  Update the frames at 40 per second.  Therefore in 1 second the character will do 40 frames, move 120 pixels and take 1 full step (5*8).  Then work out how to cycle the frames at the desired frame update rate using arrays and some counters in the main game loop, perhaps using Math.Remainder to detect every 3rd or 8th frame.

• Proposed as answer by Friday, August 29, 2014 12:51 AM
Thursday, August 28, 2014 6:54 PM
• A simple starting code how I might do a left and right walking man - no images and the setup is minimal - this prototype is all about the game loop and keyboard control only.

```GraphicsWindow.KeyDown = OnKeyDown
GraphicsWindow.KeyUp = OnKeyUp

'Simplified dummy setup for images walking left and right - this is just to see something - a game would use images for each player etc
player1X = 50 'Initial X (Left of player)
player1Y = GraphicsWindow.Height - 50 'Initial Y (Top of player)
For i = 1 To 5
GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.HideShape(player1WalkLeft[i])

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
Shapes.HideShape(player1WalkRight[i])
EndFor
'Show initial player
player1Frame = 1 'First frame
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y)
Shapes.ShowShape(player1)

'Main Loop
While("True")
start = Clock.ElapsedMilliseconds
iFrame = iFrame+1

movePlayers()

delay = 25 - (Clock.ElapsedMilliseconds-start) 'Max delay of 25ms is 40 fps
If (delay > 0) Then
Program.Delay(delay)
EndIf
EndWhile

'Move players
'player1 is the current active shown image (there is only every one not hidden at a time)
Sub movePlayers
If (keyDown["Left"]) Then
player1X = player1X-3 'Move player position left 3 pixels per frame
If (Math.Remainder(iFrame,8) = 0) Then 'Update player every 8 frames of movement
Shapes.HideShape(player1) 'Hide current player image (will be last player image)
player1Frame = 1+Math.Remainder(player1Frame,5) 'Cycle player image in group (these for walking left)
player1 = player1WalkLeft[player1Frame] 'The next player image in group is now the current player image
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y) 'Just move player
EndIf
ElseIf (keyDown["Right"]) Then
player1X = player1X+3
If (Math.Remainder(iFrame,8) = 0) Then
Shapes.HideShape(player1)
player1Frame = 1+Math.Remainder(player1Frame,5)
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y)
EndIf
EndIf
EndSub

'Register events
Sub OnKeyDown
key = GraphicsWindow.LastKey
keyDown[key] = "True"
EndSub

Sub OnKeyUp
key = GraphicsWindow.LastKey
keyDown[key] = ""
EndSub```

• Edited by Thursday, August 28, 2014 8:59 PM
• Proposed as answer by Friday, August 29, 2014 12:51 AM
• Marked as answer by Friday, August 29, 2014 3:02 AM
Thursday, August 28, 2014 7:55 PM
• `i assume this is where i can add the 5 pictures (figures going left)For i = 1 To 5  player1WalkLeft[i] = Shapes.AddImage (ll1)  Shapes.HideShape(player1WalkLeft[i])`

i got all the image into the program

timer.interval (500) for each picture to change every 2 pixels

trying to make an array that has the 5 pics with 1/2 second intervals

rr1 = r[1], xx, r[2], xx, r[3]
ll1 = l[1], xx2, l[2], xx2, l[3]
xx = Timer.Interval(500), Shapes.HideShape(player1WalkRight[i])

xx2 = Timer.Interval(500), Shapes.HideShape(player1WalkLeft[i])

how would i add implent it into the code

```GraphicsWindow.KeyDown = OnKeyDown
GraphicsWindow.KeyUp = OnKeyUp

'Simplified dummy setup for images walking left and right - this is just to see something - a game would use images for each player etc
player1X = 50 'Initial X (Left of player)
player1Y = GraphicsWindow.Height - 250 'Initial Y (Top of player)
For i = 1 To 5
Shapes.HideShape(player1WalkLeft[i])

Shapes.HideShape(player1WalkRight[i])
EndFor
'Show initial player
player1Frame = 1 'First frame
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y)
Shapes.ShowShape(player1)

'Main Loop
While("True")
start = Clock.ElapsedMilliseconds
iFrame = iFrame+1

movePlayers()

delay = 25 - (Clock.ElapsedMilliseconds-start) 'Max delay of 25ms is 40 fps
If (delay > 0) Then
Program.Delay(delay)
EndIf
EndWhile

'Move players
'player1 is the current active shown image (there is only every one not hidden at a time)
Sub movePlayers
If (keyDown["Left"]) Then
player1X = player1X-3 'Move player position left 3 pixels per frame
If (Math.Remainder(iFrame,8) = 0) Then 'Update player every 8 frames of movement
Shapes.HideShape(player1) 'Hide current player image (will be last player image)
player1Frame = 1+Math.Remainder(player1Frame+1,5) 'Cycle player image in group (these for walking left)
player1 = player1WalkLeft[player1Frame] 'The next player image in group is now the current player image
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y) 'Just move player
EndIf
ElseIf (keyDown["Right"]) Then
player1X = player1X+3
If (Math.Remainder(iFrame,8) = 0) Then
Shapes.HideShape(player1)
player1Frame = 1+Math.Remainder(player1Frame+1,5)
player1 = player1WalkRight[player1Frame]
Shapes.Move(player1,player1X,player1Y) 'Move the image before we show it
Shapes.ShowShape(player1) 'Show current player image
Else
Shapes.Move(player1,player1X,player1Y)
EndIf
EndIf
EndSub

'Register events
Sub OnKeyDown
key = GraphicsWindow.LastKey
keyDown[key] = "True"
EndSub

Sub OnKeyUp
key = GraphicsWindow.LastKey
keyDown[key] = ""
EndSub```

• Edited by Thursday, August 28, 2014 11:44 PM
• Marked as answer by Friday, August 29, 2014 3:01 AM
Thursday, August 28, 2014 10:13 PM
• Hello litdiv,

I haven't look at the example you've provided yet because I wanted to see if I could figure it out on my own. I managed to make a stick figure that moves when the "Right" key arrow is pressed. There are three frames for walking and one frame for standing. When the program runs it sputters a bit and there appears to be a second stick man that flashes while I press and hold the stick figure. How can I remove this second elusive stick man?. Also, am I going in the right direction code wise? If you need any clarification please let me know.

P.S. I took the sprites from the Zock77's sidescroller. I'm not sure If you have them. If you need them I can send them to you. Thank you.

```Intialise()

While "True"
updateGamePlay()
EndWhile

Sub intialise
gw = 600
gh = 300
GraphicsWindow.Width = gw
GraphicsWindow.Height = gh
GraphicsWindow.Left = (Desktop.Width - gw) / 2
GraphicsWindow.Top = (Desktop.Height - gh) / 4

GraphicsWindow.KeyDown = onKeyDown
GraphicsWindow.KeyUp = onKeyUp

keyDown = "False"
keyUp = "False"

posX = 10

Shapes.Move(walking,posX,50)
EndSub

Sub updateGamePlay
If (keyDown = "True") Then
For frame = 1 To 3
Shapes.Move(walking,posX,50)
posX = posX + 10
Program.Delay(100)
EndFor
keyDown = "False"
EndIf

If (keyUp = "True") Then
Shapes.Move(walking,posX,50)
Program.Delay(100)
keyUp = "False"
EndIf
EndSub

Sub onKeyDown
lastKey = GraphicsWindow.LastKey
If (lastKey = "Right") Then
keyDown = "True"
EndIf
EndSub

Sub onKeyUp
lastKey = GraphicsWindow.LastKey
If (lastKey = "Right") Then
keyUp = "True"
EndIf
EndSub ```

Friday, August 29, 2014 12:34 AM
• I placed another prototype in this thread. Have you considered using Program.Delay() instead of Timer.Interval. Program delay works with the whole program. You'll want to place them in the For loop and underneath the frame animations. I'll try it out with this sample and see if it works.

• Edited by Friday, August 29, 2014 12:59 AM Reword
Friday, August 29, 2014 12:58 AM
• Thanks, I have the images - a great game by Zock77 - for simple examples I try not to use images if they are not intrinsic to the code.
Friday, August 29, 2014 5:26 PM
• I am taking a look at the sample code you posted in this thread and don't understand why you put a For Loop, which starts at 'For i = 1 To 5' . ., that creates your shapes then hides them before your main loop? Is it for " . . 'Show initial player' . . ,which creates the program's first frame?
Friday, August 29, 2014 7:05 PM
• Yes this is just create some shapes and initially hide them.  With Zock's images it is a little better and easier to see it work - the image do help, import QPG365 and replace image location as necessary.
Friday, August 29, 2014 7:09 PM
• Okay, I will try this out. Also, I noticed you registered events differently than the examples in your wiki articles. Instead of writing out keyDown and keyUp as "False" in the beginning of the program, you place key as an array like this. . . . . .
```Register events
Sub OnKeyDown
key = GraphicsWindow.LastKey
keyDown[key] = "True"
EndSub

Sub OnKeyUp
key = GraphicsWindow.LastKey
keyDown[key] = ""
EndSub```
So that would mean by default the keyDown and keyUp events are "False" since keyDown doesn't become "True" until one of the assigned keys are pressed. I assume "" is a way to represent "False" because when the previous key is released that makes keyDown "false".
• Edited by Friday, August 29, 2014 7:36 PM
Friday, August 29, 2014 7:36 PM
• By default the values are undefined or "" in arrays or 0 for scalars, but not "True".  So yes all sorts of slightly different ways to do things, with multiple keys the method here seems better.

Here is the prototype with two walking players and modularized a bit into subroutines and arrays for 2 players, gradually moving towards a game, next would be more keys and images got kick and punch etc, then detection for hits etc.

Import LRM363

Friday, August 29, 2014 7:41 PM
• Thank you! I wouldn't mind adding more features this program. Although, It may take a while since I am new to programming and there's a lot to absorb here.
Friday, August 29, 2014 7:49 PM
• Cool, I leave you to it, here is the last of my little prototype adding standing figures at rest, import SHD493.

• Edited by Friday, August 29, 2014 8:02 PM
Friday, August 29, 2014 7:57 PM
• Alright, I'm going solo then. By the looks of it, Dinomite07 seems to be doing well and making progress. I want to make something that is my own so I may change the images and features if you don't mind. I'm looking forward to evaluating this code and showing my progress. Thanks.
• Edited by Saturday, September 6, 2014 12:45 AM Reword
Friday, August 29, 2014 8:32 PM