locked
How to Create a Sprite Animation with Key Events RRS feed

  • Question

  • Hello Small Basic Community, 

    I am collaborating with Dinomite07 to make a simple fighting game. One the main components we are currently focusing on is controls. We are trying to figure out how to assign the "Right" and "Left" Key Events to make the sprite move in the specified directions. However, we don't only want to make the sprite to move in the desired directions but also create an animation while it's walking. Our main questions are: how to assign key events and create a sprite animation while the key is pushed. To put this in perspective, I remember reading an article in the Small Basic Blog about Zock77's stick figure side scroll-er. If someone can post code that achieves this result or better yet post the actual code of Zock77's program that would be very helpful. I can't seem to download it myself. All the help would be much appreciated. Here's the link to the article:

    http://blogs.msdn.com/b/smallbasic/archive/2014/05/20/draft-small-basic-featured-program-sidescroller.aspx


    • Edited by Ezra94 Wednesday, August 27, 2014 11:18 PM Reword
    Wednesday, August 27, 2014 11:16 PM

Answers

  • Dinomite07, 

    Here is another rough prototype. This one is an improvement over the previous sample. This one includes a two frame animation. It does not include your sprites since I am still experimenting with code so you should use your sprites when you test it. Just a fair warning it has some issues. There is constant sputtering and it isn't smooth but it's a start. Also, it still moves only "Right". You will also need to tap the right key a couple of times to get the animation to work. I will continue add more to this code and refine it. Please, let me know if this works. 

    intialise() 
    
    While "True" 
      updateGamePlay()
      If (frame > 2) Then 
        frame = 1
      EndIf  
    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 
      
      keyDown = "False" 
      
      posX = 10
      frame = 1
      
      stickGuy[1] = ImageList.LoadImage("C:\Users\Ezra\Pictures\walkR1.png")
      stickGuy[2] = ImageList.LoadImage("C:\Users\Ezra\Pictures\walkR2.png")
      stickFrame = Shapes.AddImage(stickGuy[frame])
    EndSub
    
    Sub updateGamePlay 
      If (keyDown = "True") Then
        stickFrame = Shapes.AddImage(stickGuy[frame]) 
        'Shapes.ShowShape(stickFrame)
        Shapes.Move(stickFrame,posX,0)
        'Shapes.HideShape(stickFrame)
        keyDown = "False"
      EndIf 
    EndSub 
    
    Sub onKeyDown 
      lastKey = GraphicsWindow.LastKey 
      If (lastKey = "Right") Then 
        keyDown = "True" 
        posX = posX + 10
        frame = frame + 1
      EndIf
    EndSub


    • Edited by Ezra94 Thursday, August 28, 2014 2:15 AM Reword
    • Proposed as answer by litdev Monday, September 1, 2014 6:26 PM
    • Marked as answer by litdev Sunday, September 7, 2014 2:26 PM
    Thursday, August 28, 2014 2:15 AM

All replies

  • '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
    background = ImageList.LoadImage("E:\LOLOLOL\background.jpg")
    brick = ImageList.LoadImage("E:\LOLOLOL\brick.png")
    r1 = ImageList.LoadImage("E:\LOLOLOL\1.gif")
    r2 = ImageList.LoadImage("E:\LOLOLOL\2.gif")
    r3 = ImageList.LoadImage("E:\LOLOLOL\3.gif")
    r4 = ImageList.LoadImage("E:\LOLOLOL\4.gif")
    r5 = ImageList.LoadImage("E:\LOLOLOL\5.gif")
    l1 = ImageList.LoadImage("E:\LOLOLOL\11.gif")
    l2 = ImageList.LoadImage("E:\LOLOLOL\22.gif")
    l3 = ImageList.LoadImage("E:\LOLOLOL\33.gif")
    l4 = ImageList.LoadImage("E:\LOLOLOL\44.gif")
    l5 = ImageList.LoadImage("E:\LOLOLOL\55.gif")
    k1 = ImageList.LoadImage("E:\LOLOLOL\k.gif")
    k2 = ImageList.LoadImage("E:\LOLOLOL\kk.gif")
    p1 = ImageList.LoadImage("E:\LOLOLOL\p.gif")
    p2 = ImageList.LoadImage("E:\LOLOLOL\pp.gif")
    g1 = ImageList.LoadImage("E:\LOLOLOL\g.gif")
    g2 = ImageList.LoadImage("E:\LOLOLOL\gg.gif")
      
      GraphicsWindow.KeyDown = onKeyDown 
      
      keyDown = "False" 
      
      posX = 10
      posY = 10
      walkR1 = Shapes.AddImage(r1)
    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
      If (lastKey = "Left") Then
        keyDown = "True"
        posX = posX - 10
      endif
      If (lastKey = "Up") Then
        keyDown = "True"
        '200 to simulate a jump
        posY = posY - 200
       endif
      if (lastKey = "Down") Then
        keyDown = "True"
        posY = posY + 10
      endif
    EndSub 

    code, we made it so far that the single image can move right and left

    we want to make it so it is animated when it moves right and left using the stick figures above

    1,2,3,4,5,11,22,33,44,55 images

    Thursday, August 28, 2014 1:30 AM
  • Dinomite07, 

    Here is another rough prototype. This one is an improvement over the previous sample. This one includes a two frame animation. It does not include your sprites since I am still experimenting with code so you should use your sprites when you test it. Just a fair warning it has some issues. There is constant sputtering and it isn't smooth but it's a start. Also, it still moves only "Right". You will also need to tap the right key a couple of times to get the animation to work. I will continue add more to this code and refine it. Please, let me know if this works. 

    intialise() 
    
    While "True" 
      updateGamePlay()
      If (frame > 2) Then 
        frame = 1
      EndIf  
    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 
      
      keyDown = "False" 
      
      posX = 10
      frame = 1
      
      stickGuy[1] = ImageList.LoadImage("C:\Users\Ezra\Pictures\walkR1.png")
      stickGuy[2] = ImageList.LoadImage("C:\Users\Ezra\Pictures\walkR2.png")
      stickFrame = Shapes.AddImage(stickGuy[frame])
    EndSub
    
    Sub updateGamePlay 
      If (keyDown = "True") Then
        stickFrame = Shapes.AddImage(stickGuy[frame]) 
        'Shapes.ShowShape(stickFrame)
        Shapes.Move(stickFrame,posX,0)
        'Shapes.HideShape(stickFrame)
        keyDown = "False"
      EndIf 
    EndSub 
    
    Sub onKeyDown 
      lastKey = GraphicsWindow.LastKey 
      If (lastKey = "Right") Then 
        keyDown = "True" 
        posX = posX + 10
        frame = frame + 1
      EndIf
    EndSub


    • Edited by Ezra94 Thursday, August 28, 2014 2:15 AM Reword
    • Proposed as answer by litdev Monday, September 1, 2014 6:26 PM
    • Marked as answer by litdev Sunday, September 7, 2014 2:26 PM
    Thursday, August 28, 2014 2:15 AM
  • Thursday, August 28, 2014 2:21 AM
  • I think I found one that works

    need to test it out

    https://www.youtube.com/watch?v=pKQ4_eSoucs&feature=youtu.be&hd=1

    jumping isnt shown in the video for some reason but it works

    found it MRX202 and trying to figure out what is what and how to fix graphics

    '         ARROWS to move
    '         SPACE to jump
    '         ESCAPE to quit
    
    gw = 1200                                    'Window width
    gh = 600                                  'Window Height
    gh32 = gh -25                             'Top of the brick line on the bottom
    
    md = 1                                      'Man direction 1=left 2=right
    z  = 1                                      'Man's slide number for walking animation
    
    IncX = 2                                    'Background speed X
    IncY = 1                                    'Background speed Y, no real use yet
    ManX = gw/2-16                              'Man's position X, center on screen
    ManY = gh32-64                              'Man's position Y
    IncZ = .1                                   'Walking appearance speed
    Jp = 8                                      'Jump power
    IncJy = .2                                  'Jump Gravity
    
    Delay = 10
    play  = "True"
    debug = "True"
    
    SetupWindow()
    SetupImages()
    
    Main:
    GraphicsWindow.KeyDown = OnKeyDown
    GraphicsWindow.KeyUp   = OnKeyUp
    
    While play
        
      If jump Then
        ManY = ManY + Jy                        'Adjust ManY for the jump
        If Jy < Jp Then                         'The man will only fall this fast
          Jy = Jy + IncJy                       'Add for gravity
        EndIf
      EndIf
      If ManY > gh32-64 Then                    'The man landed the brick line
        jump = ""    
        ManY = gh32-64                          'Put the man at the right height
      EndIf
      
      x = x + dx
      y = y + dy
      z = z + dz
      
      If x < -32   Then
        x = x + 32
      ElseIf x > 0 Then
        x = x -32
      EndIf
      
      If y < -32   Then
        y = y + 32
      ElseIf y > 0 Then
        y = y -32
      EndIf
      
      Shapes.Move(background  x,y)
      Shapes.Move(brickline   x,gh32)
      
      If z > 4.9   Then
        z =  1
      EndIf  
      zInt = Math.Floor(z)
      
      If mdlast <> md Or mslast <> zInt Or jump Then
        Shapes.Move(man[md][zInt],ManX,ManY)
        Shapes.ShowShape(man[md][zInt])
        Shapes.HideShape(man[mdlast][mslast])
      EndIf
      
      mdlast = md
      mslast = zInt
      
      If debug Then
        DebugData()
      EndIf
      
      Program.Delay(Delay)
      
    EndWhile
    
    Sub OnKeyDown
      
      key = GraphicsWindow.LastKey
      
      If     key = "Left"   Then
        dx = IncX
        dz = IncZ
        md = 1
      ElseIf key = "Right"  Then
        dx = -IncX
        dz = IncZ
        md =  2
      ElseIf key = "Space" and jump <> "True" Then
        jump = "True"
        Jy = -Jp
      ElseIf key = "Up"     Then
        dy =  IncY
      ElseIf key = "Down"   Then
        dy = -IncY
      ElseIf key = "Escape" Then
        Program.End()
      EndIf
      
    EndSub
    
    Sub OnKeyUp
      
      key = GraphicsWindow.LastKey
      
      If     key = "Right" Or key = "Left" Then
        dx = ""
        dz = ""
      ElseIf key = "Up"    Or key = "Down" Then
        dy = ""
      EndIf
      
    EndSub
    
    Sub SetupWindow
      If debug Then
        TextWindow.Left = gw + 20
        TextWindow.Top  = 10
      EndIf
      GraphicsWindow.Hide()
      GraphicsWindow.Height = gh
      GraphicsWindow.Width  = gw
      GraphicsWindow.Top  = 5
      GraphicsWindow.Left = 5
      GraphicsWindow.BackgroundColor = "Black"
    EndSub
    
    Sub SetupImages
      manl2 = ImageList.LoadImage("E:\LOLOLOL\22.gif")
      manr2 = ImageList.LoadImage("E:\LOLOLOL\2.gif")
      background = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\background.jpg"))
      brickline = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\brick.gif"))
      man[1][1] = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\11.gif"))
      man[1][2] = Shapes.AddImage(manl2)
      man[1][3] = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\33.gif"))
      man[1][4] = Shapes.AddImage(manl2)
      man[2][1] = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\1.gif"))
      man[2][2] = Shapes.AddImage(manr2)
      man[2][3] = Shapes.AddImage(ImageList.LoadImage("E:\LOLOLOL\3.gif"))
      man[2][4] = Shapes.AddImage(manr2)
      Shapes.Move(brickline, 50,50)
      For i = 1 To 4
        Shapes.Move(man[1][i],ManX,ManY)
    
        Shapes.HideShape(man[1][i])
        Shapes.Move(man[2][i],ManX,ManY)
      
        Shapes.HideShape(man[2][i])
      EndFor
      GraphicsWindow.Show()
    EndSub
    
    Sub DebugData
      TextWindow.Clear()
      TextWindow.WriteLine("KEY = " + key)
      TextWindow.WriteLine("X = " + x + " Y = " + y)
      TextWindow.WriteLine("DirectionX = " + dx)
      TextWindow.WriteLine("DirectionY = " + dy)
      TextWindow.WriteLine("Jump = " + jump)
      TextWindow.WriteLine("ManX = " + ManX + " ManY = " + ManY)
      TextWindow.WriteLine("MD = " + md + " Z = " + z)
    EndSub







    • Edited by Dinomite07 Thursday, August 28, 2014 3:15 AM
    Thursday, August 28, 2014 2:30 AM