The Playing Field

I think it’s kind of a misnomer that it’s called pong, because this game really plays more like an air hockey machine than a ping pong table.

But oh, well, history is history, and I guess it’s kind of like ping pong, if you were playing in a room the size of the table…

Anyway, in this section, we’ll add the graphics we need for our game and lay them out on the "field", so we can see what our game will look like.

Instructions

Start with LameStation Basic Template as we did in the SNAKE tutorial.

HelloPong.spin

CON
    _clkmode = xtal1 + pll16x
    _xinfreq = 5_000_000
 
OBJ
    lcd  : "LameLCD"
    gfx  : "LameGFX"
    ctrl : "LameControl"
 
PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start

This is a pong game, so thing ping pong. What does it need?

A ball
Two paddles
A table
A score board

A Ball

Add the graphics for the ball. I’m using a giant white square because it’s very pong-ey, but you can make the ball whatever you want it to be.

HelloPong.spin

PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start
 
DAT
 
    ball_gfx
    word    0
    word    8, 8
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111

Draw the ball to a nice spot in the center of the screen.

HelloPong.spin

PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start
 
    gfx.Sprite (@ball_gfx, 64, 32, 0)
 
    lcd.Draw
 
DAT
 
ball_gfx

Two Paddles

The paddle graphics are next. Again, a white rectangle is pretty much what the original pong had, so let’s just use that.

HelloPong.spin

    word    %%11111111
    word    %%11111111
 
    paddle_gfx
    word    0
    word    8, 16
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111

Draw the paddles twice, once on each side of the screen.

HelloPong.spin

PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start
 
    gfx.Sprite (@ball_gfx, 64, 32, 0)
    gfx.Sprite (@paddle_gfx, 4, 32, 0)
    gfx.Sprite (@paddle_gfx, 124, 32, 0)
 
    lcd.Draw

A Table

There really isn’t much to draw here. We could make it fancy and add all kinds of crazy table graphics, but for now, let’s keep it simple and make a dotted line down the center.

We could create one image for the entire net, but that would be wasteful. Instead, we’ll take a single dot and copy it until it makes a line. Here’s a dot we can use.

HelloPong.spin

    word    %%11111111
    word    %%11111111
 
    centerline_gfx
    word    0
    word    2, 4
    word    %%11
    word    %%11
    word    %%11
    word    %%11

Add a variable i for array indexing.

HelloPong.spin

    ctrl : "LameControl"
 
VAR
    byte    i
 
PUB Main

We’ll draw the dot on the screen 8 times to make a dotted line 64 pixels long. Remember, the ball and paddles sit on top of the table, so the line should be drawn first.

It’s like painting a picture!

HelloPong.spin

PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start
 
    repeat i from 0 to 7
        gfx.Sprite (@centerline_gfx, 64, i*8, 0)
 
    gfx.Sprite (@ball_gfx, 64, 32, 0)
    gfx.Sprite (@paddle_gfx, 4, 32, 0)

We have a dotted line!

The Blob

There’s one problem: everything is the same color so it just kind of blends together.

The ball and paddles are white, so let’s make the net gray.

HelloPong.spin

    centerline_gfx
    word    0
    word    2, 4
    word    %%33
    word    %%33
    word    %%33
    word    %%33

Tip	A gray pixel is `%%3` on LameStation.

If we look at it now, it’s starting to look pretty slick. Check it out.

Note	You may have noticed we haven’t score board graphics yet. That one’s a bit more complicated, so we’ll add it in a later section.

The Code

HelloPong.spin

CON
    _clkmode = xtal1 + pll16x
    _xinfreq = 5_000_000
 
OBJ
    lcd  : "LameLCD"
    gfx  : "LameGFX"
    ctrl : "LameControl"
 
VAR
    byte    i
 
PUB Main
    lcd.Start(gfx.Start)
    ctrl.Start
 
    repeat i from 0 to 7
        gfx.Sprite (@centerline_gfx, 64, i*8, 0)
 
    gfx.Sprite (@ball_gfx, 64, 32, 0)
    gfx.Sprite (@paddle_gfx, 4, 32, 0)
    gfx.Sprite (@paddle_gfx, 124, 32, 0)
 
    lcd.Draw
 
DAT
 
    ball_gfx
    word    0
    word    8, 8
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
 
    paddle_gfx
    word    0
    word    8, 16
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
    word    %%11111111
 
    centerline_gfx
    word    0
    word    2, 4
    word    %%33
    word    %%33
    word    %%33
    word    %%33

View this example at /tutorials/HelloPong/ThePlayingField.spin.

Total Recap

In this section, you learned:

How to plan out the playing field in advance
How to piece together a larger image from a smaller one
How to center a rectangle on a coordinate despite platform limitations
How to use the color gray

Think about this!

You created a simple formula to generate a vertical dotted line. How would you create a horizontal dotted line? Diagonal?

Feeling Adventurous?

We decided to keep the playing field fairly simple this time around, but what if we wanted to make it nicer? Try spicing up the playing field: make it like a hockey rink or something more than a dotted line!

The Playing Field