Open up the DIV IDE. If you choose to continue at the splash screen, we should see where we were when we left off yesterday.
If we run this program (F10) as it stands currently, we'll see our spaceship, which we can control with the mouse left/right movements
We're going to make our spaceship a little more interesting by adding a space background.
Find the MAP Menu on your desktop
and press "NEW". Then create an image which is 640x480 pixels in size:
Press 'Accept' and our new MAP will be shown on the desktop.
Double click the map window, so we can edit it.
You can see in the picture above, we are going to use the spraycan tool
Let's select a white colour to paint some stars with:
And from the spraycan options menu, select a medium spray
Now using the mouse, draw all over the image. As you hold the mouse button press and mouse around the map, you will see our star background come to
life
Once your'e happy, press escape and drag your star background into the FPG and give it the id of 2
Adding this graphic to our program is easy - lets add this single line of code to our program just below the load_fpg statement
Code:
put_screen( file, 2 );
the put_screen command draw the graphic from the file we loaded (indicated by the "file" variable) and id "2" from our file - which we used when we
dragged the map into the FPG.
run the program with F10, and see our star background in action!
That's our background done, lets add some weapons to our ship.
Now we need to create a simple graphic for our bullet. Create a new map, and select width of 4 and height of 16
press Accept, and once the blank map appears on your desktop, double click to edit, and zoom in using the Z key or by using your scroll wheel.
Use the editor to draw a simple bullet. You can make it look however you like. Make sure you select the pen tool from the graphic menu and choose a
colour from the palette
Once you're happy, press ESCAPE and drag the map into your FPG and give it an ID of 3, then press Accept.
You should be used to creating graphic and adding them to the FPG by now!
Yesterday we created a PROCESS for our spaceship. Todday we will create a PROCESS for our firepower.
the basic code for any process is as follows:
Code:
PROCESS bullet(x,y)
BEGIN
LOOP
FRAME;
END
END
By now you'll know the BEGIN statement defines the start of our PROCESS code, the LOOP defined the start of a continuous loop and the FRAME command
tells DIV we want to draw our graphic on a screen.
One thing different in this PROCESS are the parameters x and y. This sets our initial bullet coordinates to whatever we pass to it. We'll do this in a
moment, but lets finish our bullet PROCESS first.
when we fire a bullet, we want to make it move up the screen. We will do this by decreasing the Y value until it goes off the screen, when we will
finish the process.
Let's do the movement first. This is similar to how we move our ship with the mouse, but by using some simple maths.
just under our LOOP statement, lets decrease our Y variable by 4 pixels using the following code:
Code:
y = y - 4;
the Y variable defines the vertical position on the screen of our graphic. as we set up the screen mode to 640x480, this is between 0 and 480
Now define which graphic we want this PROCESS to use. our bullet graphic is ID 3, so lets see this between the BEGIN and LOOP statements:
Code:
graph = 3;
our bullet PROCESS is almost complete. Let's do one more thing to remove the bullet PROCESS once it goes off the screen. DIV provides an easy way to
do this with the OUT_REGION command.
To do this, we will change the LOOP statemtn into a WHILE statement, and check the out_region result to make sure our bullet is still on screen.
Code:
WHILE ( ! out_region( id, 0 ) )
the out_region function takes two paramters - the ID of the PROCESS to check, and the REGION number.
The region for the whole screen is 0. DIV allows you to define multiple regions, and there are details about this in the HELP.
the ID parameter is a local variable which all PROCESSes have, which is a unique id for that instance of the bullet. We will be spawning multiple
bullets, so each one will have a unique ID.
the ! statement denotes "NOT" - that means check if the bullet is NOT outside the region 0 - which means it is no longer visible on screen.
so, our code is now complete for our bullet PROCESS, we can add this firepower to our ship!
Back in our player PROCESS, lets setup a condition which checks for the mouse button being pressed. Remember we used mouse.x to move our player - the
mouse stuct has handy variables we can use to check for the mouse left and right buttons being pressed and these are called mouse.left and mouse.right
we'll use the LEFT mouse button as a fire button, and if we detect it is pressed, spawn a bullet PROCESS from our current ship x and y position. Add
this code underneath our x = mouse.x; code:
Code:
IF( mouse.left )
bullet(x,y);
END
the IF statement checks to see if the mouse.left variable is set - this can be 0 or 1. remember in DIV (and a lot of other programming languages) 0 is
FALSE and 1 is TRUE)
we can run this code with F10 and fire some bullets from our ship using the left moue button!
Works great eh. As you can see though, we need to tweak this slightly. The bullets arent moving very fast, and they appear to be coming out of the
middle of the ship. Let's correct those now.
The speed of the bullets is defined by the code y = y - 4
This means the bullet is moving just 4 pixels up the screen each frame. Let's change this to 16 pixels per frame by simply changing the 4 to 16!
Code:
y = y - 16;
Run the program with F10, and we see our bullets shooting up the screen!
You can change this number to whatever you like to make your missiles faster or slower.
Now lets fix the bullets coming out of the middle of our ship.
Since our bullets are starting too far down the screen, we need to reduce the Y variable we pass to the bullet function. We need to move this bullet
up by 24 pixels - this is half of 64 (the player height) (32) minus half of 16 (bullet sprite) which is 8 pixels. You can experiment with different
values to see how this affects the bullet.
Replace the bullet(x,y) code in the player PROCESS with the following:
Code:
bullet(x, y-24);
Now when the bullet is spawned, it begins 24 pixels higher up the screen.
Run the program with F10 and see the bullets should appear from the top of the spaceship isntead of the middle!
That's all for this step. Next time we'll add some objects to fire at!
