Computer Science Canada

Having troubles moving sprite across the screen using the arrow keys?
Author:  CookieMonster [ Sat Nov 02, 2013 10:30 am ]
Post subject:  Having troubles moving sprite across the screen using the arrow keys?
Hi I'm having trouble with moving the sprite across the screen, the sprite move but it's not smooth. For example when I press the right arrow key the sprite moves on the spot, but shifts right after the 'loop'. I don't know how to explain this but i hope you understand Smile

this is my code:

Turing:

%Declare Variables
var chars : array char of boolean
var pics : array 0 .. 6 of int
var sprite, standR, standRID, standL, standLID : int
var x,y : int
x:=200
y:=200
%Initialize standing sprite
standRID := Pic.FileNew ("standR.bmp")
standR := Sprite.New (standRID)
standLID := Pic.FileNew ("standL.bmp")
standL := Sprite.New (standLID)

%Starting picture
Sprite.SetPosition (standL, x,y, true)
Sprite.Show (standL)

%
%For each key press repeat
%
loop
    Input.KeyDown (chars)
    %
   
    %
    %If the user presses the right arrow key
    %
    if chars (KEY_RIGHT_ARROW) then
        %
        %Hides the standing still sprite
        %
        Sprite.Hide (standR)
        Sprite.Hide (standL)
        %
        % Loading each picture into the array
        %
        for i : 1 .. 7
       
        x := x + 5
            pics (i - 1) := Pic.FileNew ("right" + intstr (i) + ".bmp")
             
             delay (20)
            if Error.Last not= 0 then
                put "Error loading image: ", Error.LastMsg
                return
           
            end if
        end for
        sprite := Sprite.New (pics (0))
        %
        %Animate picture
        %
        for i : 1 .. 10
            Sprite.ChangePic (sprite, pics (i mod 6))
            Sprite.SetPosition (sprite, x,y, true)
            Sprite.Show (sprite)
            delay (80)
        end for
        Sprite.Free (sprite)
        Sprite.SetPosition (standR, x,y, true)
        Sprite.Show (standR)
    end if
    %
    %If the user presses the left arrow key
    %
    if chars (KEY_LEFT_ARROW) then
        %
        %Hides the standing still sprite
        %
        Sprite.Hide (standL)
        Sprite.Hide (standR)
        %
        % Loading each picture into the array
        %
        for i : 1 .. 7
        x := x - 5
            pics (i - 1) := Pic.FileNew ("left" + intstr (i) + ".bmp")
            if Error.Last not= 0 then
                put "Error loading image: ", Error.LastMsg
                return
            end if
        end for
        sprite := Sprite.New (pics (0))
        Sprite.SetPosition (sprite, x,y, true)
        Sprite.Show (sprite)
        %
        %Animate picture
        %
        for i : 1 .. 10
            Sprite.ChangePic (sprite, pics (i mod 6))
            delay (80)
        end for
        Sprite.Free (sprite)
        Sprite.SetPosition (standL, x,y, true)
        Sprite.Show (standL)
    end if
    %
 
 
end loop




What's wrong with it? D:


Mod Edit:
Please wrap you code in either of the following in order to preserve whitespace (indentation) and to highlight the syntax.
code:

[syntax="turing"] ... code ... [/syntax]

[code] ... code ... [/code ]
Author:  Zren [ Sat Nov 02, 2013 11:50 am ]
Post subject:  RE:Having troubles moving sprite across the screen using the arrow keys?
You should only be drawing one complete picture (frame) for each iteration of the main game loop. I'll provide an example after this next bit.

Since having animations play as you move is slightly more complicated, let's first work our way up to that point.

Step 1: Draw a black box.
Step 2: Have that box react to keyboard input.
Step 3: Replace black box with 1 static/unchanging picture.
Step 4: Change the picture according to which direction the "box" is moving in. Make him face left/right/up/down etc.

To do step 4, instead of doing like you are doing:

Turing:

loop
    if chars (KEY_LEFT_ARROW) then
        for i : 1 .. 10
            characterX -= moveSpeed % Move character left
            % Draw sprite i
        end for
    end for
end loop


Try and break up where you process your game logic and where you draw things. This will help you make your games more complicated later on.

Turing:

loop
    % Input
    Input.Keydown(chars)
   
    % Logic
    % Have previous game state react to input.
    if chars (KEY_LEFT_ARROW) then
        characterX -= moveSpeed % Move character left
        characterState = "face left"
    elsif chars (KEY_RIGHT_ARROW) then
   
    elsif ...
   
    else
        % Standing
    end for
   
    % Draw
    picturePath := characterState + ".png" % Eg: "face left.png"
    picId := Pic.FileNew(picturePath)
    Pic.Draw(picId, ...)
    Pic.Free(picId)
   
    % Frame Rate Control
    delay(...)
end loop


Note that loading a picture, then freeing it every frame is extremely inefficient, but it will make it much easier to do reach our final goal without learning about arrays/hashmaps.


Alright, lets check our goal.

Step ?: Play animations as the character moves.

For your goal, you have to distinguish when you're currently holding the button down (to continue the animation) and when you first press the button down (to change and start a new animation) and when you release that button (to change back the standing animation).

Step 5: Distinguish when the key was just pressed down.

For this, we need to remember the last keyboard state. To do this, just make another variable to store it into before updating it.

You're going to need to default the values of chars and charsLast before starting the loop, so that you don't get errors stating when you try charsLast := chars.


Turing:

% Initialize
Input.Keydown(chars)
Input.Keydown(charsLast)

loop
    % Input
    charsLast := chars % Remember last keyboard state
    Input.Keydown(chars)
   
    % Logic
    if charsLast (KEY_LEFT_ARROW) and chars (KEY_LEFT_ARROW) then
        % Still holding down the key
    elsif not charsLast (KEY_LEFT_ARROW) and chars (KEY_LEFT_ARROW) then
        % Just pressed the key
    elsif charsLast (KEY_LEFT_ARROW) and not chars (KEY_LEFT_ARROW) then
        % Just released the key
    end if
end loop


Since doing this code for all 4 arrow keys will seem repetitive, with the only thing changing between them being the placement of the not, making things harder to read. I suggest using functions.

Turing:

function KeyPushedDown (c : char) : boolean
    result not charsLast (c) and chars (c)
end KeyPushedDown

...

loop
    ...
   
    % Logic
    if KeyHeldDown (KEY_LEFT_ARROW) then
        % Still holding down the key
    elsif KeyPushedDown(KEY_LEFT_ARROW) then
        % Just pressed the key
    elsif KeyReleased(KEY_LEFT_ARROW) then
        % Just released the key
    end if
end loop


Step 6: Use a variable to represent which picture in the animation we're on.

Eg:
Turing:

characterState := "walk left"
characterStateFrame := 2
picturePath := characterState + characterStateFrame + ".png" % "walk left2.png"


We then increment that variable (characterStateFrame) every frame. We should also reset it to 0 (the start of the animation) whenever we change animations (whenever characterState is changed).

/mini tutorial

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy