If DIV dos not run you may need to add it to your allowed list in your firewall / antivirus.
First we need to register our version of DIV. At the main page, enter your name and a company name (you can enter anything here).
Then press Accept
The DIV Desktop will now open - this is where the magic happens.
The large window at the top is the DIV HELP window, which covers all the details about DIV you should ever need.
In the lower corner, you will see:
click the [+] icon to open the menu
We're going to start by making a simple spaceship. Let's use the menu to create a new map
Click "Maps MENU" from the "Main Menu", then click "New"
In the size input boxes, enter 64 and 64, then press "Accept".
You'll see a new window has appeared on your DIV Desktop, as a little black box. Double click this to open the Graphics editor.
Zoom into the graphic using the 'z' key, or the mouse scroll function (either the mouse wheel, or touchpad scroll gesture should work)
We're going to create a simple spaceship as our player character.
Select a colour from the palette for our main ship colour
You can see I've chosen a blue colour -but you can pick whatever you like!
Once you have selected your colour, close the palette widown by pressing ESCAPE or using the 'X' close icon on the window
The select the lines tool from the graphic editor menu (open this by clicking the first icon on the bar)
Now we have the lines tool select we can draw our simple ship
Starting at the lower left corner, click once to start our drawing, move the mouse up to the top middle of the graphic and click again to create a
single line:
then back down to the lower right corner
up to just below the center
and back to where we started, completing our basic shape
Now we can fill in our shape with the bucket fill tool
open up the main menu again and select the bucket fill tool
Finally, click in the middle of our graphic to complete our spaceship
Press the escape key on your keyboard, or the "X" icon on the edit toolbar to exit the editor and return to the DIV Desktop
You'll see the black square is now our spaceship!
Now we need to add this to an FPG File - from the Main Menu click "FPG FILES" and then click "NEW"
Give your FPG a name - I've used "tutor0.fpg" and then press "Accept"
Your empty FPG is now on the DIV Desktop ready for use
Draw your spaceship graphic into the FPG Window - starting by clicking and holding from the MIDDLE of the graphic (not the window title), move your
mouse over to the FPG and release
Make sure your graphic code is set to '1' (we'll need this when we write the code) and Give your graphic a description if you like. I've caled mine
"Spaceship" and press "Accept"
You'll see the FPG window updated to show your new graphic
If you click the "images" checkbox you can see our spaceship graphic inside the window along with its GRAPH code which we will use to display it on
screen.
Let's open up a new PROGRAM and get our graphic on screen.
Click "Programs" from the Main MENU
and then click "New" from the "PROGRAM Menu"
Now give your program a name. I've chosen "tutor0.prg" and click "Accept"
Your new empty program window is now ready for input
Every DIV program starts with the same command, the PROGRAM name, BEGIN and END
lets add those now
Type the following code into the program editor window
Code:
PROGRAM tutor0;
BEGIN
END
First thing to do is set the screen resolution we want to use. DIV has preset values for screen resolutions which you can find in the HELP system. I'm
going to use 640x480 in this example, which is defined as m640x480 in DIV. The function to create the game window at that resolution is set_mode and
we use it as follows:
Add the following line in between the BEGIN and END statements in the program:
Code:
set_mode(m640x480);
If you want to see the other resolutions available, position the cursor on "set_mode" in the editor and press F1. this will bring up the help system
you can get help for any div command this way.
Go back to our program editor. Lets load our FPG file
after set_mode, add the following code:
Code:
load_fpg("tutor0.fpg");
this tells DIV to load the graphics file we created and added our spaceship to.
Now lets add the main loop to the program. Add this below the load_fpg statement.
Code:
LOOP
FRAME;
END
the LOOP statement tells div we want a continuous loop.
the FRAME statement tells div we want to draw to the screen
and the END statement returns control to the top of the LOOP
remember - you can find out more about any of these functions in the HELP by using F1
our main ccode now looks like this:
now lets add our player PROCESS. this is wht we will use to show our sprite on screen and accept player input.
Add the following below your code.
Code:
PROCESS player()
BEGIN
y = 400;
graph = 1;
LOOP
x = mouse.x;
FRAME;
END
END
Lets go through this and explain what each line does:
PROCESS player;
This defines our "player" PROCESS which is our spaceship
BEGIN - defines the start of our PROCESS
y = 400; - positions our spaceship at y coordinate 400
graph = 1; - this sets our spaceship spriate to 1 - the code in our FPG
LOOP - defines our infinite loop
x = mouse.x; - each screen update, read the mouse x coordinate into our spaceship "x" coordinate.
FRAME: - tells DIV to draw the screen.
END closes our loop and PROCESS definitions
There is one more thing to do before we can run our program, and thats to spawn our player PROCESS
we call the player PROCESS by adding a call to its nae in our main PROGRAM:
add the following code just under our load_fpg statement in the main PROGRAM definitoin:
Code:
player();
The full code for this step is as follows:
We can now run our program! Press F10 and we should see our spaceship on screen, and by moving the mouse, our spaceshift should move left and right!
try it!
Excercise for this tutorial
Can you modify the code so that the shop moves up / down as well as left / right?
In the next step we will add a background and some weapons to our spaceship
