Computer Science Canada

[Tutorial] Your Very First Game

Author:  Insectoid [ Tue Aug 12, 2008 9:54 pm ]
Post subject:  [Tutorial] Your Very First Game

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!

Author:  Insectoid [ Tue Aug 12, 2008 10:04 pm ]
Post subject:  Re: [Tutorial] Your Very First Game

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.

Author:  SNIPERDUDE [ Wed Aug 13, 2008 10:05 am ]
Post subject:  RE:[Tutorial] Your Very First Game

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.

Author:  Insectoid [ Wed Aug 13, 2008 5:26 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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

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

Author:  Insectoid [ Wed Aug 13, 2008 6:24 pm ]
Post subject:  Re: [Tutorial] Your Very First Game

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
Posted Image, might have been reduced in size. Click Image to view fullscreen.


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.

Author:  SNIPERDUDE [ Wed Aug 13, 2008 9:37 pm ]
Post subject:  Re: RE:[Tutorial] Your Very First Game

insectoid @ Wed Aug 13, 2008 5:26 pm wrote:
the 'boolean' bit was probably Word 'fixing' my mistakes Razz.


lol, that's why I use notepad.

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

Author:  Insectoid [ Wed Aug 13, 2008 9:42 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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)

Author:  michaelp [ Fri Aug 15, 2008 9:36 am ]
Post subject:  RE:[Tutorial] Your Very First Game

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

Looks good though. Smile

Author:  Insectoid [ Fri Aug 15, 2008 9:58 am ]
Post subject:  RE:[Tutorial] Your Very First Game

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

Author:  SNIPERDUDE [ Fri Aug 15, 2008 4:11 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

O.o

wow. Hope you post it soon though... Razz

Author:  andrew. [ Fri Aug 15, 2008 4:47 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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

Author:  SNIPERDUDE [ Fri Aug 15, 2008 9:10 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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

Author:  Insectoid [ Fri Aug 15, 2008 9:41 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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).

Author:  Insectoid [ Fri Aug 15, 2008 10:40 pm ]
Post subject:  Re: [Tutorial] Your Very First Game

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!

Posted Image, might have been reduced in size. Click Image to view fullscreen.

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.

Author:  Insectoid [ Sat Aug 16, 2008 3:02 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

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.

Author:  Insectoid [ Mon Sep 15, 2008 7:59 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

Right, I didn't get enough material for 'common mistakes' and stuff, so I'm going to leave that out. Could a mod/admin please move all non-tutorial posts to the bottom?

and in the first post, edit out this line:

-Important things to remember

and this line from the last post:

Up next: Important things to remember, common mistakes and FAQs.

and perhaps add to the bottom of the last post "Now you have all the basic tool necessary to create your own game' or something along those lines. This would be so much easier if we could edit posts that have been replied to...

Author:  ecookman [ Wed Oct 15, 2008 11:44 am ]
Post subject:  RE:[Tutorial] Your Very First Game

wow this helps thanks really

Author:  Tyr_God_Of_War [ Thu Dec 04, 2008 11:41 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

Do sprites work with with offscreenonly mode?

Author:  Insectoid [ Fri Dec 05, 2008 8:57 am ]
Post subject:  RE:[Tutorial] Your Very First Game

I believe so.

Author:  csl_hrdcr [ Wed Dec 17, 2008 8:54 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

When i try to use the sprite codes, turing highlights the file name of my sprite and says "The argument is the wrong type." I don't know if I have to add the picture to the file somehow or import it or what.
Please help, I am a noob and I am trying to make a game. Thanks

Author:  Insectoid [ Mon Jan 05, 2009 1:54 pm ]
Post subject:  RE:[Tutorial] Your Very First Game

Ah, I see. You need to Pic.FileNew and substitute that picture into things like Sprite.New instead of the file path. Woops.


: