C-64 Game Development Tutorial #1

Richard Marks - www.ccpssolutions.com, May 16, 2009

Welcome to my Commodore 64 Game Development Tutorials!

I am going to be using the VICE x64 emulator, though you can use any Commodore 64 emulator or even the real hardware if you have it!

In this first article, we are going to cover the most basic of BASIC tasks...a bouncing ball demo.

The Program Layout

We are going to layout our programs in the following manner:

Header
Program Init
Main Loop
Sub Routines

I want to be consistent in all my articles, so I have created a 9-line header that I will use to start all my programs in this series.

1 REM C-64 GAME DEVELOPMENT TUTORIALS
2 REM BY RICHARD MARKS
3 REM CCPSCEO@GMAIL.COM
4 REM WWW.CCPSSOLUTIONS.COM
5 REM *******************************
6 REM *
7 REM * THE BASIC BOUNCING BALL
8 REM *
9 REM *******************************

Another consistency that you will notice as I write these programs, is except for this header, all comments will be on an odd-numbered line, and all code will be written in line number increments of ten starting from 100.

Lets look at the code for the program initialization to see what I am talking about.

99 REM *** PROGRAM INIT ***
100 SC=1024:BG=6
110 BX=20:BY=11
120 DX=1:DY=1
130 POKE 53281,BG:PRINT "{SHIFT+CLR/HOME}"

You see that I add my program section comment on the line number preceding the first line of code (number 100 like I said before)

The lines after the section comment are increments of ten. 100, 110, 120, etc...

The Program Design

Now, lets talk a little about what our program will do.

Our demo is going to be very simple so that you can follow it easily.

Here is the program logic:

Flowchart for Program Logic

If you are not familiar with flowcharts (which is what that funny diagram above is) then lets go through it step by step.

Follow the arrows from each step...

START This is where the program starts executing when the user RUNs the program.
INITIALIZE PROGRAM VARIABLES This is where we give the initial values to the variables that we will use in our program.
SET SCREEN COLORS We change the color of the screen and border here.
CLEAR SCREEN We clear the entire screen of all characters at this point.
RUN/STOP PRESSED? Here we have a dummy condition because our program will run indefinitely until the user hits the RUN/STOP key. This is a conditional block. If the result of the condition test is YES then we will follow the arrow down to the next step.
END Here is where our program is no longer running. We are back in the C64 BASIC INTERPRETER at this point.
DRAW BALL We get here if the RUN/STOP condition test result was NO. We draw the ball on the screen here.
WAIT A SHORT TIME We are using a simple FOR-NEXT LOOP DELAY here.
ERASE BALL We erase the ball from the screen to achieve the effect of motion.
UPDATE BALL POSITION We add the ball delta values to the ball's position to obtain the new ball position.
BALL X OUT OF BOUNDS? Another condition test. We want to know if the X position of the ball has reached either the left or right edges of the screen. If the result of the condition test is YES then we will follow the arrow down to the next step.
INVERT X DELTA A simple inversion of our ball's delta X will make it seem to bounce off the edge.
BALL Y OUT OF BOUNDS? Another condition test. We want to know if the Y position of the ball has reached either the top or bottom edges of the screen. If the result of the condition test is YES then we will follow the arrow down to the next step. If the result is NO, then we return to the RUN/STOP PRESSED? condition test to complete the loop.
INVERT Y DELTA We get here in two ways. After the previous step finishes, or if the BALL X OUT OF BOUNDS? condition test result was NO. A simple inversion of our ball's delta Y will make it seem to bounce off the edge. After this step we return to the RUN/STOP PRESSED? condition test to complete the loop.

Well now wasn't that fun? Lets move on to the real fun stuff!

The Program Code

Alright here is what you have been waiting for!

If you were paying attention, you will know that first our program header will be written.

Open up your Commodore 64 emulator
Attach a disk image to it
Type NEW to clear the program memory of the C64 if you haven't done so.
Type in the program header lines

Here they are again for your convenience.

1 REM C-64 GAME DEVELOPMENT TUTORIALS
2 REM BY RICHARD MARKS
3 REM CCPSCEO@GMAIL.COM
4 REM WWW.CCPSSOLUTIONS.COM
5 REM *******************************
6 REM *
7 REM * THE BASIC BOUNCING BALL
8 REM *
9 REM *******************************

Next we type in the program init section

But, what goes there? Well, to figure this out, ask yourself "what do I need?".

My answers are below.

SC A variable to hold the screen memory address to make the code easier to read.
BG A variable to hold the color of the screen background.
BX A variable to hold the ball's horizontal screen position.
BY A variable to hold the ball's vertical screen position.
DX A variable to hold the ball's horizontal delta. (The velocity of the ball's motion along the X axis.)
DY A variable to hold the ball's vertical delta. (The velocity of the ball's motion along the Y axis.)

99 REM *** PROGRAM INIT ***
100 SC=1024:BG=6
110 BX=20:BY=11
120 DX=1:DY=1

Now, if you payed attention to the flowchat earlier, you will know that we next set our screen color and clear the screen.

To set the screen color, we POKE our background color state we stored in the BG variable into the proper memory address.

The VIC chip inside the C64 (the thing that provides our wonderful graphics) is located at the memory address 53248, and the register number for the screen background color is 33. Add 33 to 53248 and we get 53281. This is the proper memory address that we need to modify so that we can change the color of the screen.

Remember we set BG to have a value of 6? Well that is an index number of the color table..namely the color BLUE.

So that means we are going to clear the screen to blue. To do this, we just POKE our desired color table index number into the background color register of the VIC.

To clear the screen we are going to use a PRINT statement CONTROL CODE. You type PRINT then open the double-quote to enter QUOTE MODE, and press the SHIFT and HOME keys. You should see a little reverse-printed heart. close the double-quote to exit QUOTE MODE. When that code executes, the screen will be cleared.

130 POKE 53281,BG:PRINT "{SHIFT+CLR/HOME}"

Okay, now we begin the main loop of our program.

Drawing the ball. The Commodore 64 has some useful special characters in its ROM. One of which is a solid ball shape. The character value is 81. We are going to POKE that character on the screen at the calculated memory address.

How do we find the memory address to POKE our ball character to?

There is a very simple formula for figuring this out. P = X + Y * W

The screen memory is mapped in a linear fashion starting at memory address 1024. What this means is if you are starting at 1024 and moving right, when you go off the right edge of the screen you appear on the left edge, one row down at memory address 1064. (There are 40 character positions across the screen.)

So, we have our screen memory starting point stored in our SC variable, and our ball X position in BX and the Y position in BY, and we know there are 40 characters that make up one row of the screen. (This is the width of the screen.) So we have enough information to calculate the memory address.

The calculation is simple. For the first time that the code is called the memory address will be 1484. (SC (1024) + BX (20) + BY (11) * 40 = 1484)

149 REM *** MAIN LOOP ***
150 POKE SC+BX+BY*40, 81

Next we need to wait a short amount of time. I'm choosing to wait ten clock ticks.

160 FORW=1TO10:NEXT

To achieve the effect of motion, we erase the ball from its current position. To erase, we are just going to POKE a space (character 32) into the location.

170 POKE SC+BX+BY*40, 32

Updating the ball's position is very easy. Its BASIC addition for crying out loud!

180 BX=BX+DX
190 BY=BY+DY

Okay, we want our ball to bounce off the edges of the screen. To do this we just simple test the position and if we reach an edge, we inverse the delta for the axis.

200 IF BX <= 0 OR BX >= 39 THEN DX = -DX
210 IF BY <= 0 OR BY >= 24 THEN DY = -DY

Finally, we end our main loop by returning to the first line of our main loop code.

220 GOTO 150

Saving

Okay, I should have said this earlier, but SAVE OFTEN AND SAVE EARLY! I saved after I wrote every 2 lines of code in VICE.

To save your program, you need to have a writable disk image attached to your emulator (or a real writable disk in your Commodore 64 disk drive) and you type the following command:

SAVE "PROGRAM NAME", 8

Its VERY important that you remember to SAVE your work, otherwise you will lose your program when you turn off the C64 or quit the emulator!

And that is the end of this tutorial! Thank you for reading. If you have any questions or comments, please contact me.

Screenshots

Click on a thumbnail to view the full-sized image.

All contents of this tutorial are © Copyright 2009, Richard Marks. All rights reserved. Permission to publish this article granted byRichard Marks to Mattias Gustavsson. This article may not be redistributed in any form without permission.Contact Richard Marks if you are interested in publishing this article on your site.