Petit Computer Journal#10

Petit Computer Journal #10

Graphics and Paint

We are going to go ahead and do all the graphic routines. I think the best way to do it is to just make a paint program. It won't be the prettiest paint program ever, but it'll do to make us understand how the graphic works. For the interface, I'll use Directional Pad for choosing colors and Tools. Touchscreen is for drawing. Turn the panel off by PNLTYPE "OFF"

'SHAPE MAKER
ACLS:GPAGE1:PNLTYPE "OFF"
S=0:MAXS=12:

S is current shape number. MAXS is Max shape number. Starts with one, and as time goes on, keep increasing it.

@LOOP
GOSUB @DT
VSYNC 1:B=BUTTON(3)
IF B AND 1 THEN C=(C+1)%16
IF B AND 2 THEN C=(C+16-1)%16
IF B AND 4 THEN S=(S+MAXS-1)%MAXS
IF B AND 8 THEN S=(S+1)%MAXS

X=TCHX:Y=TCHY
FOR I=1 TO 1:I=!TCHST:IF I==0 THEN GOSUB SETR:GOSUB @DRAW
NEXT
GOTO @LOOP

The interface routine is simplicity itself. Basically, either use the directional pad to change color and shape, or detect Touch screen for drawing. This is done simply because it was done spontaneously while waiting for something. I added the number of shapes gradually over time.

@DT
CLS:COLOR 0
?"COLOR=";
GPAGE 0:GFILL 50,0,100,50,C:GPAGE 1
LOCATE 0,10:?"SHAPE=";
IF S==0 THEN ?"CIRCLE"
IF S==1 THEN ?"LINE"
IF S==2 THEN ?"BOX"
IF S==3 THEN ?"FILL"
IF S==4 THEN ?"LINETO"
IF S==5 THEN ?"PAINT"
IF S==6 THEN ?"PSET"
IF S==7 THEN ?"PAINT BORDER"
IF S==8 THEN ?"AIRBRUSH"
IF S==9 THEN ?"AIRBRUSH STENCIL"
IF S==10 THEN ?"PSET STENCIL"
IF S==11 THEN ?"HEAVY AIRBRUSH STENCIL"
RETURN

This is to draw the top screen, showing the color and the shape tools. If the selection is somewhat random, it is because I add to it random. The first four was done immediately. Then I add LINETO. PAINT,PSET follows. PAINT BORDER because I want to learn how to use it. The rest is my desire to add stipling to the graphic.
It is actually an improvisation. A good way to do it is using ELSE-IF ladder. A better way to do it would be using Array. The best way to do it is by using Graphics, icons, and highlights. I'm not going to do that for now.

@SETR
DX=TCHX-X:DY=TCHY-Y
R=SQR(DX*DX+DY*DY)
RETURN

Set Radius. This is used for CIRCLE.

@DRAW
GCOLOR C
S=S%MAXS:ON S GOSUB @CIR,@LIN,@BOX,@FIL,@LI2,@PAI,@SET,@BOR,@AIR,@STE,@PST,@HAIR

It doesn't get any simpler than that. Who knew computer programming can be so easy? I know I'm bucking the convention here, but I really don't think much about computer programming. Computer programming is merely the translation from English (human) language to BASIC (computer) language. It can be done mechanically. Design, which requires you to specify something that doesn't exists, is a much more challenging endeavour, simply because there is no way to be sure what you do is the best way to do it. You must experiments with different things.

I like to have 3 different solutions to the problem: A good one, a better one, and a best one. It has served me well throughout the years and something I suggest you adopt in order to expand your skills as computer programmer.

@CIR
FOR J=0 TO R:GCIRCLE X,Y,J:NEXT
RETURN

@LIN
GLINE X,Y,TCHX,TCHY
RETURN

@BOX
GBOX X,Y,TCHX,TCHY
RETURN

@FIL
GFILL X,Y,TCHX,TCHY
RETURN

Do I really need to explain these? They are self-explanatory. I will mention that loop for circle. The circle command isn't filled. I don't find much use for rings. I want circles. This is a design decision. So, I wrote it like that. Filled CIRCLE! It's not perfect, though, and you are encourage to fix it.

The color was set by GCOLOR C statement above. I could, and indeed, should, use the expanded command of specifying color at the end: GLINE X,Y,TCHX,TCHY,C on all commands. It's part of unifying aspect of the program.

@LI2
X2=TCHX:Y2=TCHY
GLINE X,Y,X2,Y2
X=X2:Y=Y2
RETURN

This is simply connecting line. If you look at the Touch screen code above, you will see that the last point of the line becomes the first point of the next line. Easy as pie!

@PAI
GPAINT X,Y
RETURN

@SET
IF TCHST==1 THEN GPSET TCHX,TCHY:GOTO @SET

@BOR
GPAINT X,Y,C,C+1
RETURN

GPAINT is easy enough. How about @BOR? That's GPAINT with border. I want to see how the paint functions with border color specified. Here, I specified C+1 as the border. Obviously, you can specify any color you want as the border, not just the next one.

Regarding GPSET, I put it in a loop because I want to do stippling technique. No mystery there.

@AIR
FOR W=1 TO 200:NEXT
IF TCHST==1 THEN GPSET TCHX+(RND(17)-8,TCHY+(RND(17)-8):GOTO @AIR
RETURN

@STE
VC=GSPOIT(X,Y)
@STE2
VSYNC 1:VX=TCHX+(RND(11)-5):VY=TCHY+(RND(11)-5)
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
IF TCHST==1 GOTO @STE2
RETURN

@PST
VC=GSPOIT(X,Y)
@PST2
VX=TCHX:VY=TCHY
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
IF TCHST==1 GOTO @PST2
RETURN

@HAIR
VC=GSPOIT(X,Y)
@HAIR2
VX=TCHX+(RND(11)-5):VY=TCHY+(RND(11)-5)
IF GSPOIT(VX,VY)==VC THEN GPSET VX,VY
FOR W=1 TO 200:NEXT:'WAIT AWHILE
IF TCHST==1 GOTO @HAIR2
RETURN

The @AIR airbrush is simple enough. There is a WAIT 200 cycles because if not, the pixels are sprayed remarkably quickly. Otherwise, it's just a random GPSET within a square.

@STE Stencil is the same way with the added factor GSPOIT() where VC is set to the current color. The pixel won't be plotted unless the pixel color is the same as the original VC.

@PST GPSET with Stencil. Enough said.

@HAIR Heavy airbrush. This is where I experimented the most. The discoveries found here was shared with other functions, notably the WAIT 200 cycles.

And you know what? The implementation of the program itself was really quick. So much so, in fact, that it was done while there was still waiting time. I spent the rest of the time doodling. Dogs, Flowers, People, and other sketches. It really works! It makes me wonder whether or not I should spend points getting The New Art Academy!

Haha, joking aside, I did do several renderings that I like very much. I experimented with saving the pictures. Not too successful, so I will need to revisit the issue in later journal. Until then, please have fun with drawing sketches, and share!

UPDATE:

I managed to implement LOAD/SAVE GRP files. Pretty simple. SAVE GRP0:filename (top screen). GRP1:filename (bottom screen). Also GRP2, and GRP3, for back buffer screens. I will give you the subroutine codes only. I assume you know how to integrate it to the program.

@BIG :'BIG LINE TO
X2=TCHX:Y2=TCHY
GLINE X,Y,X2,Y2
GLINE X+1,Y,X2+1,Y2
GLINE X-1,Y,X2-1,Y2
GLINE X,Y+1,X2,Y2+1
GLINE X,Y-1,X2,Y2-1
X=X2:Y=Y2
RETURN

@SAV
SAVE "GRP1:G0"
RETURN

@LOA
LOAD "GRP1:G0"
RETURN

Also, there's no reason why we can't have at least reasonable User Interface. Try this:

@LOOP
GOSUB @DT
VSYNC 1:B=BUTTON(3)
IF B AND 8 THEN C=(C+1)%16
IF B AND 4 THEN C=(C+16-1)%16
IF B AND 1 THEN S=(S+MAXS-1)%MAXS
IF B AND 2 THEN S=(S+1)%MAXS

That's right. We just exchanged the up/down with left/right. What does this change give us? How about this?

@DT
CLS:GPAGE 0

GFILL 0,160,255,175
GFILL C*16,160,(C+1)*16,175,C
FOR I=0 TO 15
GFILL I*16,175,(I+1)*16-2,191,I
NEXT

COLOR 0
LOCATE 0,0:?"ACTION"
?"   CIRCLE"
?"   LINE"
?"   BOX"
?"   FILL"
?"   LINETO"
?"   PAINT"
?"   PSET"
?"   PAINT BORDER"
?"   AIRBRUSH"
?"   AIRBRUSH STENCIL"
?"   PSET STENCIL"
?"   HEAVY AIRBRUSH STENCIL"
?"   BIG LINETO"
?"   SAVE GRP1:G0"
?"   LOAD GRP1:G0"

LOCATE 0,S+1:?">"

GPAGE 1
RETURN

Now the interface have gone from only a Dilbert nerd would tolerate, to the average programmer would tolerate. Quite a big difference with only small changes involved. Small, but significant changes. I made the mistake of coding a lot of PRINT, only to take them out once I realized this small change is all it takes. The lessons here are:
1. Good is the enemy of Great
2. Do not be afraid in discarding bad code!
3. Think then Do. Do then Think results in a lot of time wasted writing and discarding bad code.

I would love to have zoom, but the whole interface must be redesigned. Maybe a speech balloon and layer option, hmmm?

Petit Computer Journal #8

Petit Computer Journal #8

The Apple Picker Game? We're going to finish it up proper! Actually, we're not going to really make it professional quality. But we'll put on some fancy dressing on it to make it really enjoyable!

Adding color:
It was later in the development cycle (fancy words for repeatedly finding and fixing numerous bugs) that I find myself squinting at the screen looking for that last apple among the many snakes. Adding colors solves this problem. I colored the apples pink because I find red is too strong among the snake green.

Adding music:
It makes a great game. Looking at the help menu, I see a list of ready made music. Use BGMPLAY N, where N is a number. BGMSTOP to stop the music. Remember that N is a number. If you do this: BGMPLAY FANCY. That means you're playing music as defined by variable FANCY, which would be zero if you haven't set it to anything.

I purposely did not add music for level playing. I found it to be too noisy. But if you want it, add this to @NEWLEVEL
BGMPLAY LEVEL+ADJ
This will launch a new background music with every new level, with ADJ as offset.

Adding Sound Effect:
Oh, this is a good one! I added scream, hit, and coin sounds immediately. Easy sound effects! It took me awhile to add steps sound, but once I did, I never want to go back! This is how you know what you did is good!

Adding walls:
This was a doozy! The program kept hanging up (a polite way to say unintended infinite loop) and I didn't know why! Obviously, I needed to work out the math on paper, and then do exhaustive analysis upon it. I did neither. I did hack-and-slash programming, so even now, I'm not sure the solution is correct.

I did test out this form:
FOR I=0 TO 0:T=RND(5)+5):I=ABS(MY-T)-1:NEXT:WX[0]=T
You probably wonder why I bothered to put the FOR loop in there. I use it as REPEAT loop, just so you know. Notice that I set the value of I everytime. When MY==T, the loop will repeat. That is, T of any value EXCEPT WY.

The walls will erase snakes. That's fine. I also have to make sure that the walls will never form an enclosed space where the player cannot enter/exit. The easy way is to create some levels with array or DATA statements. I decided to create it dynamically, which isn't the easiest in the world, but I hate putting in DATA too much and results in repeat levels, making them boring.

Adding Lives:
I added this as I realize that the later levels may feature apples surrounded by snakes. I don't want the game to end immediately. Like any good design decision, once I put it in, I don't want to take it out.

Adding Time:
This comes in last. After a while, I started to add challenges. Can I finish 10 levels in 5 minutes? 20 levels in 10 minutes? Yes, I can! You can, too. Look at the levels and time completed. Major bragging rights, there!

Adding Alternative control:
It's not hard to do button controls. I simply extended the button readouts, and that's it! Noteworthy to mention is that I didn't put fast button where pushing L or R button results in faster movement. It's not hard to do, but I can pull the feature out after I put it in. Not a good design decision.

Adding moving snake:
I decided not to. It's not that kind of game. The game evolves from taking apples (Path Finding/Travelling Salesman) problem, to maze game, to Least Cost finding. Along the way, you have to be able to control the person very well to avoid running into snakes.

Adding customized graphic:
I decided not to. The game benefits from seeing the whole level all at once. If I use same size sprites, the size of the game would have expanded radically, for little returns. If I use double size sprites, the game will look great, but play suffers. If I use smaller playfield, the game becomes boring really quickly. If I use big sprite on top screen, and normal size for bottom screen as map, then the player will constantly look at the bottom screen. In which case, why bother?

How to CHEAT:
Yes, you can cheat! You have the source code in front of you! Whenever you feel like you want some extra lives, hit BREAK, then type this:
LIVE=20:CONT
You'll continue no problem. Your live is now 20! You have to be careful to do it so the screen does not scroll, and no apple is overwritten. I recommend waiting until the last apple is on upper right corner.

You can also add more apples, by typing this:
SCORE=9:CONT
Since the level advances every 10 points, this will cause new apples to appear at the next apple taken.

Level select is no problem either. Can you guess how?
LEVEL=15:CONT
Yup. It's that easy!

Finally, you may want a puzzle game, instead of an action game. Not a problem! Do this at @GAMELOOP

From this: VSYNC 15:GOSUB @SETB2
To this: VSYNC 1:GOSUB @SETB3

And you got yourself a puzzle game!

Professional Quality?

This game is a good Hobbyist effort, but I wouldn't call it a professional quality. There are different things that I can do as a professional, but choose not to. I already mentioned the exhaustive testing of walls. Here are some other things that I need to do in order to be professionals:

1. Limit the number of lives to 30, as to not mess up the display.
2. Add option to set background music to the levels
3. Add faster speed button
4. Save/Load High scores
5. Refresh whole screen to prevent display corruption
6. Add variety of enemies. Maybe some will add apples, others fling you randomly to another part of the screen.
7. Add time limit, allowing for levels of difficulty.
8. Also adjust player speed according to level of difficulty.
9. Add Puzzle mode from Option
10. Add replay option, play as demo on splash screen.
11. Tune up the presentation, not necessarily fancy graphics, but I would experiment with different placements of elements.
12. Make sure adding apples, snakes will not hang the game.

If I want to put this out for sale, I will add these:
13. Multiplayer option. 2 players. One is using Dpad. The other, buttons. Photo Dojo style
14. Computer player, single, double. With good path finding algorithm.
15. Selectable number of player
16. Sound/Music selection. Volume adjustable individually.
17. Optional level editor. It's not that hard.
18. Optional sprite editor. It's not that hard.
19. Optional music editor. It's not that hard.
20. Optional 3D graphic. This one is hard, and not at all useful. It's great marketing tool, though.