Posts Tagged ‘ frame animation ’

How to make character animation

– first, make a file named “character_animation.js” and put the tamplate in it:

function Project_Settings(id)
{
}
function Start(id)
{
}
function Main(id)
{
}
– Go to the Sprites folder and put character folder in it. (Download character.rar)
– define these variables:
var speed, is_down, f, x, y, timer;
var frames=new Array();
– in Project_Settings :
set_title("Character Animation");
window_mode(0);
set_screen(800,600);
in the first line, we set the window title, next we set it to windowed and finally set the resolution to 800×600 pixels.

– in Start event, lets initialize our variables:

speed=0;
f=0;
timer=0;
x=100;
y=250;
is_down=false;
– after that, we need to fill our array with frames. so:
for (var i=0; i < 8; i+=1)
{
    frames=load_texture("character\\"+(i+1)+".png");
}
now we’re set to go.
– in Main event, draw the character using draw_sprite function :
draw_sprite(frames[f],x,y);
– now we need to make a timer for frame animation :
if (is_down)
{
    if (timer < 4)
    {
        timer+=1;
    }else{
        timer=0;
        f+=1;
        if (f > 7)
        {
            f=0;
        }
    }
}
you can play with timer values to change the speed of the animation.
now its time to move our character using keyboard.
I’ll do it for one direction, you do the rest 😉

– make a keyboard keypress event :

function onKeyPressed(e)
{
}
– add following lines in it :
if (e=="Right")
{
    is_down=true;
}
it says if you press the Right arrow on your keyboard, it’ll start moving. now lets stop it on releasing the key !
function onKeyReleased(e)
{
    if (e=="Right")
    {
        is_down=false;
        f=0;
    }
}
Time to move !
– get back to Main event and add this line after if (is_down){
x+=2;
Save your script and run your game by dragging character_animation.js onto <Quick2D.exe>

Feel free to ask your questions.

%d bloggers like this: