Introduction: Creating Animation and Games: Chapter 1 Getting Started.

By Propellerpowered

Welcome to the first of a multi-part series:
Creating Animation and Games: Chapter 1 Getting Started

This series will dive into using Propeller microcontroller based systems to create your own graphics, animation, and video games. I'll assume that you only have a very basic knowledge of microcontroller programming and take you step-by-step from beginning with a single dot to the creation of several video games which will provide you great examples for getting started with your own ideas.

Required hardware:

Almost any Propeller based microcontroller board will work with this material. I'll provide instructions which will be applicable to Propeller boards with TV output, and VGA output. I'll also show you a way to interface to multiple control devices, including basic keyboard, or game controllers.

Naturally, there are a couple *recommended* configurations which are my personal favourites:

The Propeller Experimenter's Board (PMC 2014)

Designed to be compatible with the VGAplus256/PMC 2013 kit, this completely compatible kit provides VGA output capable of either 64 or 256 color output depending on it's configuration. Stereo right/left channel audio, PC keyboard input, IR port, a Wii Classic Controller/Nunchuck port, as well as an Breadboard Experimenting Area with I/O. As of August 2014, this board is available at Propellerpowered/Tindie and is highly recommended.

The VGAplus256 w/Quickstart combination

Otherwise known as the Pocket Mini Computer Kit, it features a lot of bang for the buck with dual mode VGA output capable either 64 or 256 color output depending on it's configuration. Stereo right/left channel audio, PC keyboard input, IR port, a Wii Classic Controller/Nunchuck port, as well as plenty of I/O connections for those who want experiment with adding/adapting other unusual or retro gaming controls. This is the board you'll see used in many examples. This kit was replaced by the Propeller Experimenter's Kit in 2014. (see above paragraph)


The software I'll be using in this material is compatible with TV, 64 color VGA, and 256 color VGA. While you can use either of these three video systems with this material, for best results use the VGAplus256 hardware I'm using in my examples. Compared to TV output, VGA is twice as nice. Add to that the ability to display 256 colors instead of 64 and the creative juices will start flowing.

The best news of all is that all of the designs I've mentioned are Open Source with their designs and schematics published. You can literally "roll your own" favorite board with your own custom controller and go crazy. The sky is the limit!!

Step 1: Introducing Spin

The Parallax Propeller can be programmed in three common languages:
  • C
  • Assembly
  • Spin
The C language which tends to be most common in microcontroller circles was recently added to the available languages.  Propeller Assembly provides extremely fast access to the chip when every cycle counts.   The Spin language tends to feel like a cross between Pascal, and BASIC.  It is a great balance between power and ease of use, and I'll be using it in all my code examples.   

If you've never programmed a stitch of Spin in your life, don't worry, I'll provide explanation along the way.  Since I arrived at Spin myself as BASIC programmer, I'll use examples which will help you if you've ever programmed in BASIC.   No coding experience?  Again, don't sweat it, Spin is a great language to get started in!

Want to really crack into the Spin language?  

Download a copy of the Propeller Manual and give it a look!  
Be warned, this isn't light reading, and is not required for this series.

Step 2: Introducing the Propeller Tool

The Propeller Tool is the Windows based software application we'll use for creating Spin code.

Download the latest version of Propeller Tool from: http://www.parallax.com/PropellerTool

Install the program using all of the default settings. On the Install Optional Driver step, make sure to leave the checkbox checked for the "Automatically install/update driver" feature.     When you double-click the Propeller Tool software link that the installer placed on your desktop for the first time, it will ask you about file associations.  Click Yes.

Next, connect a USB cable from your Propeller board to the computer.  After a moment or two of automatically locating and installing the correct drivers, you should be ready to go.   You can give your configuration a quick test by pressing F7 in the Propeller Tool.   You should see the words, Propeller chip version 1 found on COM ##.



Step 3: Introducing SLUG

SLUG is an acronym for Simple Low-res Utility code for Gaming. 
It was designed by Alex Schafer ("Trodoss" on the Propellerpowered/Parallax forums)

SLUG is an MIT Licensed object for the Propeller, designed to make it easy to create games and animation.  By operating at a slightly lower "retro" resolution, there is plenty of room for game code, and audio sound effects/music in the 32k space provided by the Propeller chip.   

The SLUG object is a "1 byte/pixel" 128x96 object supporting six sprites, compatible with all three video modes (TV, VGA64, & VGA256) we discussed in the first page of this Instructable.  It's a perfect learning environment for the beginner.

When we start working with sprites and background graphics we'll be using the PC artwork, then moving that art to the Propeller.

Download one of the three SLUG packages (depending on your configuration) and extract the contents to an empty folder.
Open the file, SLUG_Demo.spin with Propeller Tool and send it to your Propeller board using F10.    You should see a space ship with an alien moving right and left across the top of the screen.  

Additional note: If you are using the VGAplus board or Pocket Mini Computer 2012, download the 64 Color version of SLUG. 

Once you have this working you are ready to go to the next step.

Step 4: It All Begins With a DOT

It's time to get into the water so to speak and learn how to manipulate SLUG and learn a little Spin along the way.

Open the Propeller Tool and type up the following program:  
(As you type CON, OBJ, and PUB the background colors will change.)




Programming Notes for TV users:  
If you are using the TV version of SLUG, change the tv.start(ColorMode) to simply tv.start.  
Also change tv : "slug_vga_renderer" to tv : "slug_tv_renderer".

Programming Notes for VGA users:
If you are using the a non VGAplus256 circuit or standard Parallax VGA circuit,
use the original SLUG driver (second link in SLUG in chapter 1).  Change tv.start(ColorMode) to tv.start.

Once everything is typed in, save the program into the same folder you extracted the SLUG archive to, then press F10 to send the program to your Propeller.   If everything was typed correctly, you should have a single block in the center of the screen.

Let's break the program down into understandable parts...

I'll got into depth about how each section works in the next chapter, but for now we'll just look quickly at what you've just entered.

CON is the configuration section of our program.   We've set the variable ColorMode to select between 256 Color VGA Mode (1) and 64 Color VGA Mode (2).  Settings which are established in the CON section of a program remain constant throughout the program.

OBJ is the object section of our program.   Here we can call on ready-to-use programs (code/objects) and include them for use in our program.  We've called in the "Propeller" object and declared it's name to be system.   We've also called in the "slug_vga_rendering" object and declared it's name tv.

PUB defines a "public" program function.  In this case, we named this PUB, "Main".   This has become to the start of our actual program after we defined the "constant" variables in CON, and invited some additional code in OBJect.

All that work and we haven't done anything interesting yet!   Wait for it!  we're into the good stuff now!

system.Clock(80_000_000)  defines the speed this program will run on our Propeller board.   Most Propeller configurations run at a speed of 80Mhz, designated by system.Clock each time we run the program.   This is one of those commands I'll simply ask you to take my word for right now.

tv.start(ColorMode) starts the SLUG rendering code using the setting provided in CON.

tv.Cls(0) clears the screen using the color 0 (black).

tv.plot(64,45,43) plots a single block on the screen at location 64,45  (x,y locations) and in color 43.


Things to try!!  Learn by experimentation! 

1)
Remember the driver is 128 blocks across the screen.   64 is in the middle between the right and side sides of the screen.
There are also 96 blocks between the top of the screen and the bottom of the screen.  45 is again in the middle.
Try changing these numbers and re-run the program using F10.  

2)
Depending on which rendering driver you are using (TV, VGA-64, or VGA-256) you have access to 64 or 255 colors.
Try changing the 0 in the tv.Cls line or the 43 in the tv.plot line to change colors.

3)
Try adding another tv.plot command right below the one you already have in the program.   Change the x,y and colors.

Step 5: What's Next?

Take some time to experiment with the BASICs of SLUG.

In the next chapter, we take an in depth look at game controls and how to implement them with SLUG.

Drop over to the forums at Propellerpowered.com and let us know how you doing and what your game plans are.

Jeff