Message Board

Chat room - users
Game Over
Work In Progress

Code Exchange
Add to Favourites

Submit news

Not logged in [Login - Register]
Go To Bottom

Printable Version  
Author: Subject: Day 1 - Simple Graphics. Time: Approx 15 minutes.
DIV Nerd


Posts: 8388607
Registered: 25-2-2016
Member Is Offline

[*] posted on 4-3-2016 at 07:27 PM
Day 1 - Simple Graphics. Time: Approx 15 minutes.

All the code and assets for this tutorial are on github !

If you'd like to watch this lesson being done live, please checkout the following YouTube video:

Firstly, you'll need to install DIV. If you haven't done so already, please grab the build for your system from our downloads page.

Launch div by running either D.EXE (windows) or d-LINUX (linux users)

Linux users:

If the program does not start, try installing the sdl libraries from your package manager. For a debian based system this is
sudo apt-get install libsdl1.2-debian libsdl-mixer1.2

Windows users:

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


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:


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:


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.


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.

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:


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
View user's profile View All Posts By User

  Go To Top

Powered by XMB
XMB Forum Software © 2001-2012 The XMB Group
[Queries: 18]