[Tutorial] Your Very First Game

[Insectoid]

This is a tutorial to teach new programmers the basics of game making, all in one spot. This tutorial will cover the following areas, as well as provide links to tutorials that explore the topic more deeply:

-Character Movement
- 8 point movement
- 360 movement
- Jumping

-Collision Detection
-Whatdotcolor
-Rectangular
-Basic circle

-Sprites in Turing

-Important things to remember


Oh, and this is my first tutorial, so woo!

[Insectoid]

Movement

8-point movement

8-point movement is the simplest way to move a character. It isn't the best, though, because you can only move in 8 directions! It takes only a few lines of code to do.

The first thing to learn is the command 'Input.KeyDown'. It works like this:

Turing:

var keys : array char of Boolean %This is the variable you need. Don't ask about the 'array char of boolean', it doesn't matter. loop         Input.KeyDown (keys) %This tells the computer to check if a key is pressed, and which one         If keys (KEY_UP_ARROW) then %this says 'if a key is pressed and the key pressed is the up arrow, then do something (in this case, increase the Y value).                 y += 1         End if end loop

"So, now I know the command, how do I use it?"

Well, movement is all about changing the X and Y values of the character. So, in pseudo code,

code:

if (KEY_UP_ARROW) is pressed then         y += 1  % this is the same as Y := Y + 1 End if If (KEY_DOWN_ARROW) is pressed then         y -= 1 End if If (KEY_LEFT_ARROW) is pressed then         x -= 1 end if if (KEY_RIGHT_ARROW) is pressed then         x += 1 end if

Get it? Great! Now we can create movement!

Turing:

var x : int := 100 var y : int := 100 var keys : array char of boolean loop     Input.KeyDown (keys)     if keys (KEY_UP_ARROW) and y < maxy then %makes sure the character won't go past the top of the screen         y += 1     end if     if keys (KEY_DOWN_ARROW) and y > 0 then         y -= 1     end if     if keys (KEY_LEFT_ARROW) and x > 0 then         x -= 1     end if     if keys (KEY_RIGHT_ARROW) and x < maxx then         x += 1     end if     Draw.FillOval (x, y, 10, 10, red)     delay (10)     cls end loop

So now you've mastered 8-point movement. Great! But 8-point movement is pretty lame. 360 degrees is way more fun!


360 Degree Movement

360 degree movement is far more fun than 8-point, because you can move in any direction! It is a bit more complicated though, because instead of directly manipulating the X and Y values, you adjust the amount added to them. This is where velocity comes in.

In 8-point movement, the velocity of the character is a set amount (in my case, 1). In 360, the velocity is controlled by the arrow keys. Since this is a new element in our program, we have to make it a variable:

code:

var y_velocity : int := 0 % This should be zero at the start of the game var x_velocity  : int := 0

So, how do you use this in a game? I'll show you.

Turing:

var x : int := 100 var y : int := 100 var x_velocity : int := 0 var y_velocity : int := 0 var keys : array char of boolean loop     Input.KeyDown (keys)     if keys (KEY_UP_ARROW) and y_velocity < 5 then %makes sure the character won't go past the top of the screen         y_velocity += 1 %See here, we are changing the velocity instead of the coordinates     end if     if keys (KEY_DOWN_ARROW) and y_velocity > -5 then % we also set the max speed here (5)         y_velocity -= 1     end if     if keys (KEY_LEFT_ARROW) and x_velocity > -5 then         x_velocity -= 1     end if     if keys (KEY_RIGHT_ARROW) and x_velocity < 5 then         x_velocity += 1     end if     if y >= maxy or y <= 0 then         y_velocity *= -1 %If the ball hits a wall, the velocity will reverse, 'bouncing' the ball the other way     end if     if x >= maxx or x <= 0 then         x_velocity *= -1     end if     y += y_velocity % this is where the ball's X and Y values are actually changed.     x += x_velocity     Draw.FillOval (x, y, 10, 10, red)     delay (10)     cls end loop

Well, now you understand 360 degree movement (I hope).

"This is all good and fun, but I want to make a side-scroller fighting game! How do I do that?"

Well, why do you think I'm writing this tutorial?

Jumping

8-point and 360 movement are both suited to bird's eye view games. Jumping is more suited to games played from a profile perspective (always looking at the character's side, like Mario). X and Y velocity are still used, but differently. While X is still the same (or not used at all), Y gets some extra code added, and gravity is introduced.

Except in certain games, gravity is constant, and shall be declared as such.

code:

const Gravity : int := 2

I think it's worth noting that if you initialize a variable as soon as you declare it, you don't have to put : int or : string, so instead of what I just wrote, I could do this:

code:

const gravity := 2

Just remember that if you're declaring a real variable, you have to add '.0' to the number

code:

const gravity := 2.0

Enough of that.

The way jumping works is that when someone hits the 'up' key, the Y velocity shoots way up, but is then reduced by gravity (y_velocity -= gravity). While velocity is positive, the character goes up. When the velocity becomes negative, the character will go down.

Things to remember:

-Only reduce velocity when the character is in the air, or he'll fall through the floor.
-Only jump when the character is on the ground (unless your game requires otherwise).

So, lets try it out!

Turing:

const Gravity := 2 var x := 100 var y := 100 var y_velocity := 0 var keys : array char of boolean setscreen ("offscreenonly") loop     Input.KeyDown (keys)     if keys (KEY_UP_ARROW) and y <= 0 then         y_velocity := 30 %If the jump button is pressed, velocity shoots up.     end if     if keys (KEY_LEFT_ARROW) and x > 0 then         x -= 5 %basic X movement.     end if     if keys (KEY_RIGHT_ARROW) and x < maxx then         x += 5     end if     y_velocity -= Gravity %Here, we subtract gravity from velocity.     y += y_velocity %We've seen this before! Adding velocity to coordinates     if y < 0 then %this makes sure the character stays above the ground (if he goes undr, it brings him back up)         y := 0         y_velocity := 0     end if     Draw.FillOval (x, y, 10, 10, red)     View.Update     delay (20)     cls end loop

Wow, that was a lot to take in! Here's a link to Mazer's Tutorial on jumping.
And that concludes the first section of the tutorial. Next: Collision Detection.

[SNIPERDUDE]

To be continued?

Well so far it seems good.

Just noticed one thing, where you put
array char of Boolean

it should be array char of boolean.
the B lower cased.

[Insectoid]

Yes, To be continued. I'm about half done part II.

the 'boolean' bit was probably Word 'fixing' my mistakes .

[Insectoid]

Collision Detection

Collision Detection is a very useful skill. It allows you to react to objects colliding. Perhaps your game involves moving the character to a target, or avoiding asteroids, or bullets spilling someone's brains, it all uses collision detection.

Whatdotcolor

Whatdotcolor is the easiest way to detect a collision. If the object hits something of a certain color, it has collided! The syntax for whatdotcolor is as follows:

code:

whatdotcolor (x, y)

This will return the color of the pixel located at (x, y)

Used in a program:

Turing:

if whatdotcolor (10, 10) = blue then         put "the color is blue" end if

The nice thing about whatdotcolor is that you can check at as many points as you want. The downside is that it severely limits the graphics to simple colors.

An example of whatdotcolor collision:

Turing:

var charx : int := 100 var chary : int := 100 var targetx : int var targety : int var num : array char of boolean setscreen ("offscreenonly") loop     targetx := Rand.Int (10, 630) %just setting the coordinates of the target     targety := Rand.Int (10, 390)     loop         Input.KeyDown (num) %Remember this from 'Movement'?         if num (KEY_UP_ARROW) and chary < 390 then             chary := chary + 1         end if         if num (KEY_DOWN_ARROW) and chary > 10 then             chary := chary - 1         end if         if num (KEY_LEFT_ARROW) and charx > 10 then             charx := charx - 1         end if         if num (KEY_RIGHT_ARROW) and charx < 630 then             charx := charx + 1         end if         Draw.FillOval (targetx, targety, 20, 20, black) %draw everything         Draw.Oval (charx, chary, 5, 5, brightred)         exit when whatdotcolor (charx, chary) = black %The one line of collision detection. This will only check the center of the circle.         View.Update         delay (5)         cls     end loop     cls end loop

Sorry if the code there was a bit messy, it was my first collision program, resurrected to help the new!

The collision code can be expanded to as many points as you like,

Top, bottom, left, right:

Turing:

exit when whatdotcolor (x, y-5) = black or whatdotcolor (x, y+5) = black or whatdotcolor (x-5, y) = black or whatdotcolor (x+5, y) = black

Corners:

Turing:

exit when whatdotcolor (x-5, y-5) = black or whatdotcolor (x-5, y+5) = black or whatdotcolor (x+5,y+5) = black or whatdotcolor (x+5, y-5) = black

combined (8 points):

Turing:

exit when whatdotcolor (x, y-5) = black or whatdotcolor (x, y+5) = black or whatdotcolor (x-5, y) = black or whatdotcolor (x+5, y) = black or whatdotcolor (x-5, y-5) = black or whatdotcolor (x-5, y+5) = black or whatdotcolor (x+5,y+5) = black or whatdotcolor (x+5, y-5) = black

Getting this? Great!

Whatdotcolor is great for learning, but eventually you'll want to get some sick graphics in there, and whatdotcolor will become a hassle. You'll want rectangular collision next.

Rectangular collision detection

Rectangular collision detection is very different from whatdotcolor. While whatdotcolor checks the color of a specific point, rectangular compares the coordinates of the objects. This makes it great for making buttons.

Every box in Turing has 4 coordinates; (x1, y1) is the bottom left corner. (x2, y2) is the top right corner. Look at Figure 1. What can you see about the relationship between the coordinates of the two boxes?

Figure 1



The conditions for rectangular collision to occur are as follows (taken from RichCash's tutorial, I'm so lazy):


Bx #1's x1 (lowest value) has to be LESS than box #2's x2 (greatest value)
Bx #1's x2 (greatest value) has to be GREATER than box #2's x1 (lowest value)
Bx #1's y1 (lowest value) has to be LESS than box #2's y2 (greatest value)
Bx #1's y2 (greatest value) has to be GREATER than box #2's y1 (lowest value)

To put these into code:

Turing:

if b1x1 <b2x2 and b1x2 > b2x1 and b1y1 < b2y2 and b1y2 > b2y1 then         put "The boxes have collided" end if

Get it?

Lets try it out!

Turing:

var b1x1 := 100 var b1y1 := 100 var b1x2 := 200 var b1y2 := 200 var b2x1 := 300 var b2y1 := 100 var b2x2 := 400 var b2y2 := 200 var keys : array char of boolean setscreen ("offscreenonly") loop     Input.KeyDown (keys)     if keys (KEY_UP_ARROW) then         b1y1 += 1         b1y2 += 1     end if     if keys (KEY_DOWN_ARROW) then         b1y1 -= 1         b1y2 -= 1     end if     if keys (KEY_LEFT_ARROW) then         b1x1 -= 1         b1x2 -= 1     end if     if keys (KEY_RIGHT_ARROW) then         b1x1 += 1         b1x2 += 1     end if     if b1x1 < b2x2 and b1x2 > b2x1 and b1y1 < b2y2 and b1y2 > b2y1 then         put "The boxes have collided!"                     end if     Draw.Box (b1x1, b1y1, b1x2, b1y2, red)     Draw.Box (b2x1, b2y1, b2x2, b2y2, blue)     View.Update     delay (10)     cls end loop

so now you know rectangular collision.

"That's a lot of fun! But my character's aren't square (I certainly hope not!), they're round(ish)! Rectangular collision wouldn't accurately calculate for a ball!"

Fear not! There is a way to do circular collision!

Circular Collision

Turing has a nice little command that returns the distance between objects. This command is Math.Distance.

code:

Math.Distance (x1, y1, x2, y2)

This will return the distance in pixels between the points (x1, y1) and (x2, y2).

So, if that distance is less then the sum of the radii (plural of radius) of your circles, the balls have collided!

code:

code:

if Math.Distance (x1, y1, x2, y2) < (radius_1 + radius_2) then         put "The objects have collided!" end if

Note that, when drawing a circle in Turing, the third and fourth variables are your radius.

so, to put that into a game:

Turing:

setscreen ("offscreenonly") loop     Input.KeyDown (keys)     if keys (KEY_UP_ARROW) then         y1 += 1     end if     if keys (KEY_DOWN_ARROW) then         y1 -= 1     end if     if keys (KEY_LEFT_ARROW) then         x1 -= 1     end if     if keys (KEY_RIGHT_ARROW) then         x1 += 1     end if     if Math.Distance (x1, y1, x2, y2) < (radius_1 + radius_2) then         put "The objects have collided"     end if     Draw.Oval (x1, y1, radius_1, radius_1, red)     Draw.Oval (x2, y2, radius_2, radius_2, blue)     View.Update     delay (10)     cls end loop

And that is circular collision detection. For more info, here's a link to RichCash's tutorial on collision detection.


"This is great for balls that don't move a lot, but I'm making a game of Pool. The balls go so fast, they collide between frames, as if the collision never happens! What do I do? "

Well, this requires very complicated math that wouldn't fit into this basic tutorial. So here's a link to zylum's tutorial on perfect circle collision

And that concludes collision detection. Next: Sprites in turing.

[SNIPERDUDE]

insectoid @ Wed Aug 13, 2008 5:26 pm wrote:

the 'boolean' bit was probably Word 'fixing' my mistakes .

lol, that's why I use notepad.

So far you tutorial is really coming out great,
can't wait to see the rest!

[Insectoid]

Lol, I'm gonna have to get a mod to move all these replies to the bottom after I get the last two sections done, to keep it cohesive. ("I couldn't find the sprite section" "sorry, it's on page 5")

I'm going to start (and hopefully finish) the sprite part tomorrow (lots of research on that for commands I haven't used)

[michaelp]

Psh, you think this tutorial will get to 5 pages?

Looks good though.

[Insectoid]

Lol, no, I was exagerating. The tutorial on MS Word is already six pages long though.

[SNIPERDUDE]

O.o

wow. Hope you post it soon though...

[andrew.]

I wish I had this earlier when I was first learning Turing.

[SNIPERDUDE]

Me too.
Although I did have the basics - used the Turing Walkthrough.

[Insectoid]

Yeah, well, the Turing Walkthrough doesn't teach you how to make games. Heck, someone looking for game help might not have a clue which link to click! Then they see this tutorial on how to make games, and find everything they need!

Oh, and I've hit 11 pages on the tutorial now (this includes everything that I've already posted + what I've done since then).

Just out of curiosity, would someone like to make a simple game using collision detection, movement, and sprites as an end-of-tutorial example? I'm a bit busy and actually don't have a game already made that fills these requirements (I rarely use sprites).

[Insectoid]

Sprites in Turing

What is a sprite?

A sprite is a two dimensional or three dimensional image or animation that is integrated into a larger scene.

What does this mean in Turing?

In Turing, a sprite is simply a picture that automatically erases its self as it moves. This can save resources in programs where re-drawing the whole scene again is unnecessary or complicated.

Note that this tutorial does not support sprites in Turing 4.0.5 or earlier.

To create a sprite, you must declare it:

code:

spriteID := Sprite.New ("picture.bmp")

This sets the variable spriteID to a (you guessed it) sprite containing the picture 'picture.bmp'. This is the sprite we will use for the rest of the tutorial.

After you initialize the sprite, you can set it's height and coordinates.

"Wait a second, 'height'? What's that?"

A sprite with a higher height than another sprite will be drawn on top of it. So, A sprite with a height of 2 will be drawn on top of a sprite with a height of 1. If you give a sprite a negative height, it will be behind the background, so you won't see it.

code:

Sprite.SetHeight (spriteID, 1)

spriteID is the variable that we initialize before. We have set the sprite to a height of 1, so it is above any pictures.

Setting coordinates for sprites is different from regular pictures. While normal pictures just have to have the X and Y axis adjusted, sprites require a special command.

code:

Sprite.SetPosition (spriteID, x, y, centered)

The first is the variable of the sprite you want to move, the second are X and Y axis. Fairly simple, but what on earth is centered? 'Centered' is either true or false. If it is set to 'false' The X and Y coordinates will be set in the bottom left corner of the sprite like an ordinary picture or rectangle. If it is set to 'true' however, the coordinates are set in the center of the picture, like an oval. This is very useful for circular collision detection, as you don't need to find the center of the sprite, just use the sprite's coordinates!

If I didn't explain myself well enough, I made a diagram!



So now we've set the coordinates, but we need to make the sprite show up on the screen. This requires the command Sprite.Show

code:

Sprite.Show (spriteID)

If you ever want the sprite to disappear, but remember it's location and picture, you can hide it. It's still there, you just can't see it.

code:

Sprite.Hide (spriteID)

Another useful command is Sprite.ChangePic. It allows you to change the picture that the sprite is holding, so if your sprite scores a goal or kills an enemy, it can change a cheer picture, or a mooning the goalie picture. Whatever suits your needs.

code:

Sprite.ChangePic (spriteID, "newPicture.bmp")

Here, we have changed the picture from picture.bmp to newPicture.bmp

And now, the mother of all sprite commands, Sprite.Animate! It allows you to change the coordinates AND the picture at the same time! It's like a combination of Sprite.SetPosition and Sprite.ChangePic!

code:

Sprite.Animate (spriteID, "newerPicture.bmp", x, y, true)

Here, we've changed the picture to newerPicture.bmp, the x and y coordinates, and left 'centered' at 'true'! Isn't that amazing?

Well, not really. The real amazing thing is that that is all you need to know to use sprites!
This concludes the Sprite section of the tutorial. Up next: Important things to remember, common mistakes and FAQs.

[Insectoid]

Okay, for the last bit, I need everyone to post the questions, problems, and miscellaneous items that frequently pop up in the help section.

And does anybody want to make/supply a game for the end of the tutorial? Details/requirements 2 posts ago.