Archive for the ‘ Tutorials ’ Category

How to debug faster !

Are you tired of dragging your scripts onto Quick2D.exe ?

The solution is simple !

– Put your scripts in a different folder.

– Right click on a script.

Image

– Choose Open With … -> Choose default program

– Select Quick2D.exe

and BAM ! you’re done.

Now double click on your script and your game runs.

 

Enjoy

Advertisements

How to make Object Instancing

First of all, this tutorial is written based on revision 1.0.3 so if you don’t have it, download it from here.

To have instances of an object, you need to make a class for it.

Its simple and flexible.

function Object ()
{
this.id=0;
this.x=0;
this.y=0;
this.direction=0;
this.speed=0;
this.life=0;
this.draw = function ()
{
draw_sprite(this.id,this.x,this.y,this.life*3);
}
}

This is an example of a class named Object with some parameters and a function for drawing the object.
Project settings are not anything special, simply put:

function Project_Settings (id)
{
set_title(“Object Instancing”);
set_screen(800,600);
}

And then define an Array and a variable:

var rocks=new Array();
var can_create;

rocks is gonna be an array of Object. but how ?

In Start event put :

for (var i=0;i<20;i+=1)
{
rocks[i]=new Object();
rocks[i].id=load_texture(“gem_”+Math.floor(Math.random()*5)+”.png”);
}

We want to have 20 instances of Object class, with random textures loaded from Sprites folder with names like “gem_1.png”

Then, initialize our only variable:

can_create=true;

In this example we want to make 20 gems at mouse clicking point and having the gems moving in different angles.

So before doing anything, write onMouseButtonPressed event:

function onMouseButtonPressed (e)
{
if (can_create)
{
can_create=false;
for (var i=0;i<20;i+=1)
{
rocks[i].x=e.X;
rocks[i].y=e.Y;
rocks[i].life=80;
rocks[i].direction=Math.floor(Math.random()*360);
rocks[i].speed=Math.floor(Math.random()*3)+3;
rotate(rocks[i].id,rocks[i].direction);
}
}
}

can_create is just a variable that controls when we can create our instances.

We have a loop that fills every single object in rocks array with position of mouse clicked point, a life, random direction and random speed and finally a rotation to object’s angles.

Now the Main event:

function Main (id)
{
if (!can_create)
{
for (var i=0;i<20;i+=1)
{
if (rocks[i].life>0)
{
rocks[i].life-=1;
rocks[i].draw();
}else{
can_create=true;
}
rocks[i].x+=xval_to_direction(rocks[i].id,rocks[i].direction,rocks[i].speed);
rocks[i].y+=yval_to_direction(rocks[i].id,rocks[i].direction,rocks[i].speed);
}
}
}

We draw every single object while its life is larger than 0. once its not, we can create another bunch of objects.

And using the functions xval_to_direction and yval_to_direction we move every object along its direction.

Note: objects will fadeout by the time they loose life.

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: