Sorry your browser is not supported!

remstart

Hi, and welcome to my Air Hockey tutorial, here I will show people
that are completely new to DBC how to
make a simple but addictive air-hockey game
that includes things such as:

* Custom Graphical User Interface (GUI)
* Arrays
* 3D Environment
* Mouse Control
* Keyboard Control
* User Interface
* Camera placement
* Physics
* Artificial Intelligence (AI)
* Scoring
* Winning / Losing

But first there are a few things that we will need to go over
before we start making this game.

First of all, you will notice that I am not
using a REM statement for all this that I am typing, a REM
statement is used when you wish to type a remark just so that
you know what part of code you are typing, instead I am using 
'rem-start' and 'rem-end' (I separeted them with hyphens so 
that they didn't take effect.
These mean that you can type anything you want in-between them without
having to type REM all the time (You can also use an open quote
symbol, [`] )

Next, we shal talk about some basics.

When making a game you could say you have the "chemistry"
and the "physics", what I mean is, there are sections where
you create things such as objects, images, variables, etc.. and there
is also the section where you control them.
The section where you control them is called the main loop, where
everything is controlled because it is looping, you can make a main loop 
by typing 
`Do
`Loop
Anything that you put between the 'do' and 'loop' will be the controls,
though you should type 'sync' just before 'loop' to refresh the screen.

The 'sync' command will not work unless you type 
`sync on
at the very beggining of your program.
You canb also change the sync rate by typing e.g. 'sync rate 60', this
means that the screen will refresh 60 times per second, the sync rate
can to go a maximum of 1000.
It will not always run at this speed, the larger your game is, the slower,
this is why you have to avoid making too many polygons and limbs (separate
parts) on your objects.
If you want your game to run as fast as posible then just type
`sync rate 0

And before we start making the game, here's a tip:
If you don't know what a command means the click on that line and
press F1

Ok, now to start making the actual game....

remend

`(Notice now that I am 'remarking' things I say using the
`open quote symbol, if I didn't use it, then DB wouldn't
`understand what I'm saying.)

`Game Setup
`Here we will turn syncronization on, and hide the mouse pointer
Sync on
Sync rate 0
Hide mouse

`Create Arrays
`Arrays are used to store lots of data, here I am going to make 
`arrays for the scores (just to show you what they mean)
`These are useful because they are 'Global', which
`means they can be used anywhere in the program.
DIM score(2)
`I have put 2 in the brakets because there are two scores to keep.
score(1)=0
score(2)=0
`Here I have told the computer the initial starting score for each player.

`Create players
`OK, now for the first 3D part, we will make the players as little
`boxes, purely because they have a low polygon rate and lets the
`game run faster.
for p=1 to 2
`Here I have started a 'For/Next' loop, this will create 2 objects
`object 1 to 2, you could make it up to 1 to 10000 and it would
`create 10000 objects.
`It's not only used for objects though.
Make object Box p,100,20,100
`Notice I've put p as the object number, you can only have one of
`that object number, i.e. you couldn't do this..
`Make object cube 1,100
`make object cone 1,100
`The cone would have to be object number 2, but since I've put 'p' here,
`it will create all objects ranging from object 1 to object 2.
`You could replace the letter p with any letter, I just made it
`p for player.
`The other three numbers mean the X,Y and Z scale of the object
Next p
`This ends the 'for/next' loop

`Now we shall colour the players
Color object 1,rgb(0,255,0)
Color object 2,rgb(255,0,0)
`Here I have used the color object command
`This will color the object anyway you want.
`The 'rgb' part stands for 'red, green, blue', and in the
`breakets I've put a value for each of them.
`The maximum value you can have for each one is 255.

`Position Players
`Here we will position the players
`using the X,Y and Z axis.

`I will do this using a varible for each axis of each player,
`x#,y#,z# will be the players x,y and z positions
`ox#,oy#,oz# will be the opponents x,y and z positions
`(The # means it's a real number, you can have Integers, Real numbers and
`strings, Integers are whole number e.g. 5, you do not
`put anything after an integer, real numbers have
`decimals e.g. 8.54321, you put # after a real
`number, strings are texts, e.g. "Hello World", you put a dollar
`sign after a string ($), here they all are:
`Interger  :  5             : variable 
`Real      :  8.54321       : variable#
`String    :  "Hello World" : variable$
x#=0
y#=10
z#=-300

ox#=0
oy#=10
oz#=300
`Now that I've made values for the objects' positions
`I shall apply them to the actual objects
Position object 1,x#,y#,z#
Position object 2,ox#,oy#,oz#

`Now that the players have been made and positioned, we shall make a
`little putt, we will do this by making a cylinder and flattening it.
make object cylinder 3,20
`now that we have created a cylinder (object number 3), you will notice that 
`we do not have three scale values after it, only 1, this applies to 
`all scales, the only sprimitive object that you can scale each size in 
`the same command is the box, which is basically a cube, but you can 
`stretch around in the same command as making it.
`To scale the put:
scale object 3,100,30,100
`Notice here that the X, Y and Z values are much bigger than the uniform
`scale value, if you put say the x scale value to 100 then the
`x scale value will stay at the uniform value, in this case 10.
`The only one that's not 100 is the Y scale, which means its going 
`to be flatter.
Color object 3,rgb(0,0,255)
`This shall color the putt blue.

`Again we will make positioning variables for the put, these are really
`important because later in the main loop we shall use them to
`change the putt position.
px#=0
py#=1.5
pz#=0
a#=rnd(50)
`Notice here that I added 'a#', this can be the angle variable, which
`is equally as important as the rest.
`The rnd part makes a random value, and what you put in the brakets
`will tell it the maximum value it's allowed to go to.

`Now to just apply there coords. to the putt
position object 3,px#,py#,pz#
yrotate object 3,wrapvalue(a#)
`Here I've typed wrapvalue, and in brackets I've put the angle value
`This isn't imporant right now, but I'm just showing you the command.
`It basically means that whatever goes between the brakets will
`not go over 360, if it does it will go back to 0, and if if 
`gets to less than 0 it will go back to 360
`e.g. If the angle gets to 370 degrees then its angle will be 10 deg.
`If its angle gets to -10 deg. then it'll be 340 deg.

`we shall now make a simple 3D scene
make object box 4,420,10,1200
`we make a box
color object 4,rgb(255,0,255)
`colour it purple
position object 4,0,-6,0
`and position it

`OK, now that we've attended to all the objects we will attend to the camera.
`First, we position it
position camera 0,200,-700
`(you do not need a number for the camera)
point camera 0,0,0
`This will point the camera, the 3 numbers are the coords. where the
`camera will point to.

`Now that the camera is done we will want a different 
`backdrop colour.(3D background colour.)
Backdrop on
`This will turn the backdrop on
color backdrop rgb(0,0,0)
`This will color the backdrop, I've 0 for every value to it will
`be black, but If you're very lazy you could just type: 'Color backdrop 0'

`OK, now for the "physics" of the game, here will be all your controls
`including mouse movement for the player, AI, Scoring, winning,
`losing, etc..
`but first, we must set a winning score
win_score=1
`In the main loop we will make it that if you score gets to the winning
`score then you win, vise versa, but that will come later..


`--MAIN LOOP--
`-------------
Do
`normally I make the main loop stand out because its a very important part.
`I make it stand out by tyoing things like I did ontop of it, you don't have
`to though.
`Nothing will work yet until we've finished the loop, so you will
`not be able to test your game for a while

`OK, now, to make some simple Mouse controls
x#=(mousex()-screen width()/2)/2
`What I've done here is update the players X coordinate,
`this is how...
`the players X coord is the same as:
`Half of:
`the mouse position X, take away half of the screen width.
`This means that I can move the mouse and the X coord will follow it.
`(If you look at the bit where I created the 3D scene, i scaled it
`just as much as I needed for the player to go.
`What I mean is that the mouse can only go a certain distnce, which means
`that the player can only go a certain distance, so I've scaled the floor
`just as much as the player can go.

`Now to update the player's position
position object 1,x#,y#,z#


`OK, now we will control the ball, we will not do AI yet, because the`
`opponent's movement is based on the ball's movement
`First, we will make the ball move at an angle, the angle
`was already confirmed earlier.
bx#=newxvalue(bx#,a#,1.0)
bz#=newzvalue(bz#,a#,1.0)
`What I've just done is change the coordinated according to the angle,and
`the speed that I wish to have, in this case it's 1.0

`Now, for the physics of the ball

`what we will do first is make the ball bounce off the walls.
`This is how:
`If the ball reaches the and of the floor, we gets the angle of the
`ball, and take it away from 360, this will make it bounce, however,
`if you wanted to do this with a wall going from left to right you would
`take the ball's angle away from 180
if bx#>210 or bx#<-210
`If the ball if at the edge of the floor..

a#=wrapvalue(360-a#-0.5)
`bounce off..
`Notice I used wrapvalue here to stop the angle exceding
`360 or going less than 0
`I've also made it curve slightly by taking away 0.5 deg
`just to make it interesting

endif
`I typed endif here because there was an if statement above,
`here's the syntax:
`IF something happens
`do something
`ENDIF
`-------but, what if you have more that one IF statement?
`IF something happens
`IF another thing happens
`IF yet another thing hapens
`do something
`ENDIF
`ENDIF
`ENDIF
`-
`or
`-
`IF something happens AND something happens etc...
`do something
`ENDIF

`To make the ball bounce off the players people would normally use
`collision, but personally I don't like collision.
`I'm going to do it differently.
`I'm going to check if the ball is between the players left side and right
`I will also check if the ball is close enough to be touching the player,
`If all this is true, the bounce off...

`If the box is close enough for the player to touch
if bx#>x#-50 and bx#<x#+50
if bz#<-250

`bounce off
a#=wrapvalue(180-a#)

`notice here I used 180 as it is not going to bounce off a wall going
`from the back of the area to the front..

`Two endifs, 'cause there are two ifs..
endif
endif

`And now, I will do the same with the opponent.. make the ball bounce off him
if bx#>ox#-50 and bx#<ox#+50
if bz#>250

a#=wrapvalue(180-a#)
endif
endif

`we will update the putt's position after the scoring has been done..

`Now for the AI
`I would'nt say you'd call this REAL AI, because it's not actually
`intelligence, it would be real AI if you did this:
`e.g.
`made a seening range for the opponent
`look out to see something cylinderical and blue
`look where it's moving
`decide a way to go
`decide what would happen if it did go there
`if what happens is good then go there,
`otherwise, start again, but with a diffrent place to go..

`But here, were not making real AI, after all, the smartest robot
`anyone's made so far is about as smart as a cricket..

`Here's how we will do it:
`If the ball is near the opponenent,
`check what side the opponent its on (left or right)
`if its on the left, move left, otherwise, move right

`Ok, here we go
if bz#>0
`This checks if the ball if on the opponent's side of the floor
if bx#>ox#
`if the ball if to the right of the opponent..
inc ox#,0.5
`increment the opponent's X coord.
else
`otherwise
dec ox#,0.5
`decrement the opponene't X coord.
endif
endif
`two ENDIFs because there are two IFs.

`Update Opponent
position object 2,ox#,oy#,oz#

`OK, now the game is pretty much playable, unless the ball
`goes past someone and you cant get it back..
`So, we might aswell attend to the score at the same
`time as this problem..

`if the ball goes past the player
if bz#<-400

`bring ball back
bx#=0
bz#=0

`and make it face the other way
a#=wrapvalue(a#-180)

`increase opponents score
`this is where these arrays come in...
score(2)=score(2)+1

`end if statement using endif
endif

`do the same but instead with the opponent..
if bz#>400
bx#=0
bz#=0
a#=wrapvalue(a#-180)
score(1)=score(1)+1
`here it's score(1), not score(2), 1 in the players score, and
`2 is the opponents score.
endif

`Update the putt
position object 3,bx#,by#,bz#
yrotate object 3,wrapvalue(a#) 

`Now, to show the score,

`we will first need to change the ink colour
ink rgb(255,255,255),0
`I have made it white, the 0 afterwards means the background color,
`you only need that if you're making something 2D.
`Just putting 0 is the lazy way, here's how it should be done:
`ink rgb(255,255,255),rgb(0,0,0)

`show the score

`Here we will type the score somewhere on the screen, but, 
`to make a number come up for a score is hard, if you wanted a string to
`show as a score you would just type something like "score$",
`but the score isn't a string, it's an integer, so we need to
`turn it into a string..
`here's how its done..
text 50,100,"Player Score: "+str$(score(1))
text 50,150,"Opponent Score: "+str$(score(2))

`SYNTAX:
`text X position, Y position, "Text"
`the bit after the text is optional, you dont need it
`if you dont have anything that changes to show, but since the score changes
`we have to add this:
`+str$(score(?))
`when you type the + after the text you can add a string or a number,
`it must be a string though, so to turn a number into a string
`we type '+str$(number)'

`now, to simply make somebody win..
if score(1)=win_score
`here we relate back to the win_score variable, which was three..

set text size 40
set text font "comic sans ms"
set text to bold
`change text settings
center text 320,240,"YOU WIN!"
`and type win message
`center text means its always center justified

x#=0
ox#=0
bx#=0
bz#=0
`and restore positions

endif

`do the same with the opponent
if score(2)=win_score

set text size 40
set text font "comic sans ms"
set text to bold
center text 320,240,"YOU LOSE!"
x#=0
ox#=0
bx#=0
bz#=0

endif


`END the main LOOP
`IMPORTANT!!!
`and remember, always type 'sync'
sync
loop