Back | Home

Let's Draw Game-Editor Tutorial

In this demo we will draw a random starfield of random colors. You can make the starfield denser by continually selecting the Down Arrow. the fantastic Game-Editor setpen(), moveto() and putpixel() functions are demonstrated here along with the C rand() function and the C for loop control

LET'S DRAW A RANDOM STARFIELD

1. Start a new project and add an actor of type CANVAS, name it whatever you like.

2. Go to Config and change Game resolution to 240 x 320 Pocket PC (for Pocket PC resolution).

3. Resize your Canvas Actor to the View Size. I make mine look like this.

4. Right-Click over your Actor and select Actor Control | Events | Add | Key Down - and press the Down Key. Then select Add Action | Script Editor.

5. Enter the following code into the Script Editor (or cut and paste):

//Random Starfield
int posX = 240;
int posY = 320;
int loopCount = 0;
int x = 0;
int y = 0;

for(loopCount=1; loopCount<1000; loopCount++)

{
x = rand(posX);
y = rand(posY);
setpen(rand(255),rand(255),rand(255),0,1);
moveto(x,y);
putpixel(x,y);
}

6. Select Add | Immediate Action | Close. Close Actor Control.

7. Go into Game Mode and press the Down Arrow to try it out.

Here is how your program will look:

Here we have only drawn points, NEXT we will cover drawing lines and shapes like this little program I wrote called Imagine.

LET'S DRAW A CIRCLE!

This is an Old School circle. Old School meaning we will draw it by formula. We will still be using points and be plotting the sine and cosine values of 0 through 360 to draw a circle. The circle will look like this:

CIRCLE

In my example the value 100 is the diameter. The 120,160 values are the x,y center of the circle.

You can edit these values all you want. For example, if you use 50 as a multiplier for one of the cos/sin values and leave the other at 100 you will get a 45 degree ellipse like this:

45 DEGREE ELLIPSE

OK HERE WE GO!
Start another project like before but use this script instead:

//Old School Circle Routine
//100 = diameter
// 120,160 = distance from 0,0

int loopCount = 100;
int x = 0;
int y = 0;

for(loopCount=0; loopCount<360; loopCount++)

{
x = 100*sin(loopCount)+120;
y = 100*cos(loopCount)+160;
setpen(255,255,255,0,1);
putpixel(x,y);
}

LET'S DRAW A GRADIENT

GRADIENT

//Gradient Code
int loopCount = 0;
int x = 0;
int y = 0;
int rColor = 0;
int gColor = 0;
int bColor = 0;

for(loopCount=0; loopCount<320; loopCount++)

{
x = loopCount;

setpen(0,0,bColor,0,1);
moveto(loopCount,y);
putpixel(x,y);
lineto(loopCount,y+320);
bColor++;
}

LET'S DRAW A CARDIOID!

CARDIOID
A heart-shaped plane curve, the locus of a fixed point on a circle that rolls on the circumference of another circle with the same radius.

//Cardioid Code
int x,y;
int p = 10;//Radius of Cardioid
float i,y1,x1,y2;
x=240;
y=320;
setpen(0,0,255,0,1);

moveto(0,y/2);
lineto(x,y/2);
moveto(x/2,0);
lineto(x/2,y);

for(i=-100;i<=100;i+=.005)
{
x1=p*(cos(i)+i*sin(i));
y2=p*(sin(i)-i*cos(i));
putpixel(x/2+(x1*1),y/2-(y2*1));
}

That's it!
Now try experimenting and seeing what you can do

See our new game site