Posted: 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:
- 8 point movement
- 360 movement
-Sprites in Turing
-Important things to remember
Oh, and this is my first tutorial, so woo!
Posted: Tue Aug 12, 2008 10:04 pm Post subject: Re: [Tutorial] Your Very First Game
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:
var keys :arraycharof 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).
End if endloop
"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,
if (KEY_UP_ARROW) is pressed then
y += 1 % this is the same as Y := Y + 1
If (KEY_DOWN_ARROW) is pressed then
y -= 1
If (KEY_LEFT_ARROW) is pressed then
x -= 1
if (KEY_RIGHT_ARROW) is pressed then
x += 1
Get it? Great! Now we can create movement!
var x :int:=100 var y :int:=100 var keys :arraycharofboolean
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:
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.
var x :int:=100 var y :int:=100 var x_velocity :int:=0 var y_velocity :int:=0
var keys :arraycharofboolean
loop Input.KeyDown(keys) if keys (KEY_UP_ARROW)and y_velocity < 5then%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 endif
if keys (KEY_DOWN_ARROW)and y_velocity > -5then% we also set the max speed here (5)
y_velocity -=1 endif
if y >= maxyor y <= 0then
y_velocity *= -1%If the ball hits a wall, the velocity will reverse, 'bouncing' the ball the other way endif if x >= maxxor x <= 0then
x_velocity *= -1 endif
y += y_velocity % this is where the ball's X and Y values are actually changed.
x += x_velocity
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?
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.
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:
const gravity := 2
Just remember that if you're declaring a real variable, you have to add '.0' to the number
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!
const Gravity :=2 var x :=100 var y :=100 var y_velocity :=0 var keys :arraycharofboolean setscreen("offscreenonly") loop Input.KeyDown(keys) if keys (KEY_UP_ARROW)and y <= 0then
y_velocity :=30%If the jump button is pressed, velocity shoots up. endif if keys (KEY_LEFT_ARROW)and x > 0then
x -=5%basic X movement. endif if keys (KEY_RIGHT_ARROW)and x < maxxthen
x +=5 endif
y_velocity -= Gravity %Here, we subtract gravity from velocity.
y += y_velocity %We've seen this before! Adding velocity to coordinates
if y < 0then%this makes sure the character stays above the ground (if he goes undr, it brings him back up)
y_velocity :=0 endif
Posted: 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.
Posted: 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 .
Posted: Wed Aug 13, 2008 6:24 pm Post subject: Re: [Tutorial] Your Very First Game
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 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:
whatdotcolor (x, y)
This will return the color of the pixel located at (x, y)
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:
var charx :int:=100 var chary :int:=100 var targetx :int var targety :int var num :arraycharofboolean 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 < 390then
chary := chary + 1 endif if num (KEY_DOWN_ARROW)and chary > 10then
chary := chary - 1 endif if num (KEY_LEFT_ARROW)and charx > 10then
charx := charx - 1 endif if num (KEY_RIGHT_ARROW)and charx < 630then
charx := charx + 1 endif Draw.FillOval(targetx, targety, 20, 20, black)%draw everything Draw.Oval(charx, chary, 5, 5, brightred) exitwhenwhatdotcolor(charx, chary)=black%The one line of collision detection. This will only check the center of the circle. View.Update delay(5) cls endloop cls endloop
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,
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?
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:
if b1x1 <b2x2 and b1x2 > b2x1 and b1y1 < b2y2 and b1y2 > b2y1 then put"The boxes have collided" endif
Lets try it out!
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 :arraycharofboolean setscreen("offscreenonly") loop Input.KeyDown(keys) if keys (KEY_UP_ARROW)then
b1y2 +=1 endif if keys (KEY_DOWN_ARROW)then
b1y2 -=1 endif if keys (KEY_LEFT_ARROW)then
b1x2 -=1 endif if keys (KEY_RIGHT_ARROW)then
b1x2 +=1 endif if b1x1 < b2x2 and b1x2 > b2x1 and b1y1 < b2y2 and b1y2 > b2y1 then put"The boxes have collided!"
Posted: 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).
Posted: 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:
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.
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.
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
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.
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.
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!
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.
Posted: 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.