Introduction: QuickPlayer: DIY Pocket Game Console

By GadgetGangster.com
Have you seen those Direct-to-TV game devices that hook to your TV and play video game classics.

Ever want to create your own video game system?

You don't need experience in writing code or creating graphics as I'll take you step-by-step.   You'll start by creating your own video game system from an easy to assemble kit, then on into doing your own graphics animation then I'll introduce you to creating your own video game.   

Anyone with any Parallax Propeller board can participate in this Instructable.  Step 1 provides schematics for folks who want to roll their own system from a breadboard, or one of the many Propeller based boards which are on the market.

If you don't have a Propeller microcontroller, here is the kit I'll be using in this Instructable:

Hardware:
Software:

Step 1:

If you are building your own Quick Player kit, follow the assembly instructions follow this steps: {pictures provided.}
  1. Insert the two 1.1k resistors, the 560 ohm resistor , and the 270 ohm resistor.
  2. Add the Electrolytic capacitor at C1- it's polarized; the side of the capacitor marked with a stripe.
  3. The RCA jacks snap into the holes on the top of the board.
  4. Last thing to add is headers. {Tip here - you can use your QuickStart board to hold the headers.}
  5. Then, put the Quick Player on top and solder the headers. All done!
Resistor Chart:
  • 1.1k resistor = Brown, Brown, Red
  • 560 ohm resistor = Green, Blue Brown
  • 270 ohm resistor = Red, Violet, Brown
If you are rolling your own version of this kit using a Propeller breadboard or other Propeller based board, refer to the first image for the correct schematic for video, audio and game control.   
  • Propeller Video is P12,P13,P14
  • Propeller Audio is P10
  • Controller is: P22,P23
The controller software is interchangeable with various game controllers.  Details are here.

Step 2: Setting Up the Software

We'll be working with three software components in this project:

The Propeller Tool:

The Propeller Tool is the official programming environment (IDE) for the Propeller and is provided free of charge. We'll use it to load programs from the computer into the Propeller. The electronic form manual is also provided free of charge. You may want to invest in a printed copy from Parallax as you start programming in "spin", the language used in the Propeller Tool.

When you install and run the Propeller tool, you’ll be asked to “Associate .spin .binary and .eeprom files.” Answering yes will configure the tool properly to open .spin files. 

Instructable Source Code:

Extract all of the files from the archive to an empty folder.   We'll be using several tools and files here, so keep this folder open and handy as you work this Instructable.

Game Boy Tile Designer:

Game Boy Tile Designer isn't really a Propeller tool, but is extremely handy for creation our own custom characters for animation.  
Extract the files from the archive to the same folder you extracted the source files for this Instructable.


Step 3: Testing Your Setup

Connect the Quickstart/Quickplayer to your PC using a USB cable. Make sure you have the video cable connected as well.

Let's start with a simple graphics demo to make sure everything is working properly.  Remember that folder we extracted everything to?  Double click on the file "Graphics_Demo_Quickplayer" to open it into Propeller Tool.  

Press the F11 key on the PC.

This will send the Graphics Demo code to the EEPROM on your Propeller.   The EEPROM is a tiny chip next to the Propeller chip.  It stores the program even when the power is off.  Each time your connect your Propeller to power, the Propeller will load the program stored in the EEPROM until you replace it using the Propeller Tool (F11) with a new program.

If all has gone well, you should have a colorful, graphics display on the TV.
If you have a Wii Controller connected, you should also be able to move the target and throw snowballs.

Step 4: Animation Basics

Now that you have the hardware working properly, let’s take a step back for a moment and look at the basics of animation. Have you ever draw a series of characters on a corner of a notebook and watched them move when you flipped the pages of the corner quickly?

We will be using the same type of “page flipping” animation, only instead of drawing them in the corner of a notebook, we’ll place the characters on the screen, animating them by clearing the screen very rapidly, each time, moving or changing the character.

Animating a walking character simply requires us to create a graphic for each position. Making the character walk across the screen will only require us to display the first image, clear the screen, display the next image one step to the right, clear, and repeat.

Sound easy?

Animating and creating video games on the Parallax Propeller is both fun and easy with the ORE Text Driver. The ORE software takes care of all the difficult video programming, leaving us to do the creative part.

Step 5: The ORE Video Driver.

The Parallax Propeller is capable of hi-resolution graphics with hundreds of colors. 
The ORE video driver scales that back just a bit to provide a balance between memory requirements and ease of use.
  • Display Mode: Text & Characters (each character 8x8 pixels)
  • Resolution: 20x24 Characters per page. (160x192)
  • Number of Colors: 126 total colors, 4 per 8x8 character.
The ORE video driver is a text driver.   Text drivers are very simple to control, and the characters can look like anything from apha numeric letters and numbers to small spaceships, racecars, or anything that you want to create.

The screen layout is 20x24, meaning that you can display up to twenty characters on twenty-four lines.

Step 6: Getting Started With ORE:

Let's jump into the ORE video driver using a simple text demo.

Double-click on the file "HELLO.spin" to open it into Propeller Tool.  Use F11 to send the program to the EEPROM of your Propeller. If everything has gone right, you should have the word, HELLO displayed in 3D characters on the screen.

Ok, now grab a favorite beverage, we're going to get into some code.  (I promise to keep it easy!)

Looking at the blue section in the Propeller Tool, we see the following lines of programming.

REPEAT
   TEXT.CLS
   TEXT.POKECHAR(3,10,WHITE,BLUE,RED,72)
   TEXT.POKECHAR(4,10,WHITE,BLUE,RED,69)
   TEXT.POKECHAR(5,10,WHITE,BLUE,RED,76)
   TEXT.POKECHAR(6,10,WHITE,BLUE,RED,76)
   TEXT.POKECHAR(7,10,WHITE,BLUE,RED,79)
   TEXT.UPDATESCREEN

The REPEAT command sets up a continuous loop. Every line indented beneath it will be repeated over and over.

The TEXT.CLS clears the screen each time the loop repeats.

Each of the TEXT.POKECHAR commands place each character of "HELLO" on the screen.  
At first glance, POKECHAR looks like ancient Greek, but it's pretty easy to unravel the mystery...

POKECHAR = "Place character on the screen."

We are actually sending the command six pieces of information:  
TEXT.POKECHAR(X,Y,COLOR1,COLOR2,COLOR3,CHARACTER)

X = Row (0-20)

Y = Column (0-24)

Color1, Color2, and Color3 can be defined as: BLACK,BROWN,YELLOW,WHITE,GREEN, RED, PURPLE, CYAN, or BLUE.

Character can be any apha-numeric character from 0-126.  
In our example, 72 is H, 69 is E, 76 is L (used twice), and 79 is O. 

Things to try:

Experimentation is an excellent way to learn more about ORE!  Try changing the X&Y positions, colors, or characters in each of the POKECHAR commands.   Each time you make a change, send the program to the Propeller's EEPROM with F11.




Step 7: Designing Game Characters:

Gameboy Tile Designer was written by Harry Mulder © 1999.
He has released the program as freeware which may be redistributed without charge.
His website is: http://www.devrs.com/gb/hmgd/gbtd.html

Now we're going to shift gears from programming code to art and graphics!

GBTD (Gameboy Tile Designer) is obviously not an official Propeller tool. The ORE Video Driver uses the same 8x8 2bpp type of graphics also used by the Gameboy, so adapting the output from this program is pretty straightforward. (Thanks to Alex Schafer)

Double click on GBTD and open the file OREFont.gbr. (You can accomplish the same thing by simply dragging the OREFont.grb icon onto the GBTD icon.)

Take a look at "image1"  Notice the number 65 near the character I've scrolled GBTD to?   This would be the same "character numer" used at the end of the POKECHAR command.  

To display an A, we would have used:
TEXT.POKECHAR(10,3,WHITE,BLUE,RED,65)

Also notice the numbered colors at the bottom of the window. These colors are the four colors we select in our program.  While the colors used in Gameboy Tile Designer are actually selected by our POKECHAR command, you can see their relationships in the characters while in the editor.  We are limited to the colors provided by the program while in the editor, but when we call them in our program we can use any color we please.

Let’s make some changes to our HELLO program. 

Scroll down to character 69, the uppercase E and make some changes to it with GBTD.

Really get creative with it!

Select your working color by click on it at the bottom of the window, clicking each of the cells to change its color.

Now, click on File, and Save recording these changes to the OREFont.grb file.

Now minimize the GBTD program and double click on a file called: makefont 
(Makefont is a simple batch file which calls on the Graphicconvert program to create a new OREFont.spin from your changes. You should see a small, black window appear for a moment, and then disappear. At this point, you have created a new ORE compatible font based on your changes.)

Keep in mind the steps to make this work are in this order:
  1. Make your changes in GBTD.
  2. Click on File and Save in GBTD to (re)save the .grb file.
  3. Double click on makefont to (re)convert the .grb file to spin code.
  4. Run your main program with the Propeller Tool using F11.
Ready to see your work of art?

Close any other files you have open in Propeller Tool and open the HELLO program again. Use F11 to send the program to the Propeller once again. This time you should see HELLO with your glorious new E character on the screen!

The GBTD has several handy features for editing your graphics. You can shift, or flip your character with the small buttons on the left. You can also change your view to edit more than one character at a time. By clicking on View and Tile Size, you create larger
characters by combining them. (Just remember that when you call on them with the POKECHAR command, you will need to use two commands to display each part of the character you created.)

Take a look at the example on the next couple images of some two character sized graphics I created for my Spyhunter game.


Step 8: Creating Animation:

At this point, we've displayed some characters on the screen, then edited them to make our own custom characters.

It's time for some ORE animation!
  • Double-click on the file, "CHARACTER DEMO.spin" from our folder to open an animation demo in Propeller Tool.
  • Use F11 to send it to the Propeller.
Using a Wii controller, you should be able to move the character around the screen.

If you look carefully, you’ll see two 8x16 characters used for forward animation, and two others used for backward animation.
Page flipping multiple characters gives the illusion of animation.

Let's take a peek behind the curtain.  Opening the OREFont in Gameboy Tile Designer we can see the four 8x16 combinations used in our animation: (see image2)
  1. 2-3 & 4-5 are used when going forward.
  2. 6-7 & 8-9 are used when going backward.
Every time we press on the controls the screen is cleared and alternating versions of the forward or backward characters are displayed, at the new screen position.

Let's take a look at the CHARACTER DEMO code and see how it works.   There's quite a bit of code to make this work, but the important bits will be found in the blue section near the top of the program.

First some starting points are established, giving our character his colors as well as his X&Y starting location.

    player_dir       := DIR_SOUTH 'Initial direction to face
    player_step    := 0
    player_x          := 9         'Inital X location on the screen.
    player_y          := 8         'Inital Y location on the screen.
    player_color_1 := WHITE     'Player skin color
    player_color_2 := RED          'Player clothing color
    player_color_3 := BLACK     'Player background color

Next we start our Game Loop.   The Game Loop is a simple REPEATing loop that contains our actual demonstration:

'Game loop
repeat

      'Clear the screen
       text.cls

      'Check for gamepad events
       CheckController

      'Draw the player
       DrawPlayer

      'Build in a delay for animation
       waitcnt(5_000_000 + cnt)

      'Update the screen with changes
       text.UpdateScreen

Our loop does the following:
  • Clears the screen
  • Checks the Wii controller
  • Draws the character on the screen
  • Waits a moment
  • Updates the screen.  

This happens over and over hundreds of time a second.   Page flipping animation!

If you examine the program past the green section, you'll find POKECHAR commands as well as the section for character movement based on the data from our Wii controller.  

Step 9: Where to Go From Here?

This Instructable was designed to give you a taste of what is possible using the Parallax Propeller.

Many great Propeller games have been designed already providing you both entertainment and great examples.

There is also a forum dedicated to Propeller animation and gaming on GadgetGangster.com.

We encourage you to visit the forums and introduce yourself.

Would you like to see a second part added to this Instructable?   Leave me a comment below!

Spin on!
Jeff