Archive for October, 2007

28
Oct
2007

Code Free Pong

6 Comments

screenshot.jpgPong, the timeless classic that started it all and the first Torque Game Builder tutorial that I’ll tackle. This game is a simple virtual tennis game in which two players (represented by paddles) bounce a ball towards each other.

This tutorial is a very basic introduction to the Torque Game Builder engine and it’s also my first tutorial for the package, the resulting Code Free Pong For Mac and Windows game can be downloaded and played on Mac and Windows or you can download the Source Code directly to follow along.

Getting Started

Let’s get started by opening the Torque Game Builder and creating a new game called Pong. It will be an empty game to start with, so we’re going to have to import a couple of static graphics to get us started. I’ve already build the paddles and ball for your game, so you can download these files to get started without having to build them yourself. Now let’s import the files by switching to the Create panel and selecting the Create New icon (Create New) to import each of the two files.

The next step is to setup our game by importing some predefined files and is going to require that we first quit Torque Game Builder and save our level (I called mine LevelOne). Since Torque doesn’t recognize files added to the directory once it has started, we have to quit TGB for a few moments.

In your file manager, lets move the whole behaviors folder from our desktop to the appropriate folder which in my case is ../Pong/game/. We want to replace the existing behavior folder with the preprogrammed behaviors supplied by Garage Games. Once those files are copied, we can reload Torque Game Builder and continue building Pong by loading our previous game and then selecting File > Open Level or using the keyboard shortcut Control – O to load our existing level.

Setting Up the Ball

What we want to do now is drag the ball graphic into the middle of our screen and drop it, this will create a single white dot which will act as our ball. Switch from the Create Panel to the Edit Panel and look down the list until you see the Scripting tab, open it and lets name this object “ball” and then open the Collision tab. We want to set the ball to Send and Receive Collisions by clicking the appropriate check boxes. Once that’s done let’s switch the Collision Response to BOUNCE.

Now let’s take a quick look at what we’ve done here and make sure we understand it all. An understanding of the Torque basics will help us progress through the next part of the tutorial. We dragged a copy of the ball graphic into the picture, then we selected it and clicked Edit. Under that menu, we changed its name to ball. Next, we told it that the ball could both be hit and hit other things. Finally, we told it that when something hits it, the proper response is to bounce.

Adding Behaviors

In Torque a Behavior is a preprogrammed set of instructions used to help us get our games up and running faster, the team at GarageGames includes a variety of Behaviors in the TGB kit and we’re going to use them to create Pong. There are two behaviors we want to setup for our ball.

First, let’s add the Random Velocity behavior which will give our ball a random start angle at the beginning of the game. To add this, lets open the Behavior tab and use the pulldown menu to located it. Once that’s done, we’re going use the green + beside the menu to add it to our ball. If you’d like you can now preview the game and watch your ball spin wildly out of control in a random direction.

Back in Torque, we want to give your ball life and the ability for it to “die” so lets add the Takes Damage behavior and set its maximum number of lives to 19 since a game of Pong can only ever go to a maximum of 19 points.

Setting the World Limits

Now the ball can take damage and it can also bounce but we need to make the ball stay on screen so lets take a look at the World Limits tab and our limit mode to BOUNCE, this will ensure that if the ball hits the edges of the world it will bounce back.

To set the actual World Limits we have two options, we can type the appropriate world limit numbers into the box or we can do it graphically by rolling our mouse over the ball until we see an icon representing the World Limits. If we click onto that icon the screen will zoom out slightly and present you with a lightly shaded box. This box is your World Limits and represents where the call is allowed to travel in the game. Resize the box so the top and bottom are at the top and bottom of the outermost green box (which is the edges of our game screen) and do the same for the left and right but instead of being exactly on the edges, lets add a little space to let the ball fall off our screen. When you hit the Enter key, you’re returned to your game preview mode and you’ll see that the values in World Limits now represent the values of the box you resized.

My box has a Min. Bounds of X = -60 and Y = -38, the Max. Bounds are X = 60 and Y = 38. This represents the furthest from the center of the screen my ball is allowed to travel before it bounces and if you’d like to see it in action you can now preview the game which will show your ball randomly bouncing off the top and bottom of the screen as well as disappearing on the left and right but eventually bouncing back into the frame.

Killing the Ball

Our game is coming along great but the problem is obvious, when the ball goes off the left and the right side of our screen, the ball needs to die so lets drag a paddle in from the Create menu and then switch back to Edit. This isn’t really going to be a paddle but I want to show you how we can use the same graphic for multiple purposes in Torque Game Builder.

First, lets resize our paddle to stretch from the top of the outermost green line to the bottom of the outermost green line. Let’s go to the Scene Object tab where we should clean up the killzone values by setting it to Position Y = 0 (which will center it vertically) and set it’s X = 5 which puts it just to the right of our ball. I’m also going to set the Width = 1 and a Height = 80 to make sure it’s bigger than my World Limits. Under the Physics tab we want to check the option Immovable which will ensure the the ball doesn’t push it around.

That’s a great start but now we need to actually kill the ball. Let’s quickly switch to our Collision tab and tell Torque that this new object can Send Collisions but can’t Receive Collisions.

Under the Behaviors tab we want to add the Deals Damage behavior and we want to set the strength of the damage to 1 and deselect the deleteOnHit option. Now our wall deals 1 point of damage each time the ball hits it but it won’t disappear regardless of how many times it’s hit.

Let’s go back to our ball now by selecting it and make sure it’s in the center of the screen by changing our Scene Object settings to a Position of X = 0 and Y = 0. You can now preview the game and watch the ball die each time it hits the killzone wall.

Lets now move our killzone to it’s proper location but before we do, we want to copy it using the keyboard short cut Control – C and paste a new one with the keyboard shortcut Control – V. The first killzone should be moved to Position X = -55 and the second killzone will be at Position X = 55. Now both killzones are off the screen to the left and right but still within the World Limits we set previously. If you test your game the ball will now bounce off the top and bottom of the screen but respawn when it goes past the left and right edges of the screen.

Setting Up the Paddle

Now let’s switch back to the Create panel and drag a paddle into the screen. We want to use the same practices we used above to name this paddle “paddlep”. Under the Scene Object tab we will set the Position to X = 45 and Y = 0 which centers the paddle vertically and places it on the right hand side of our screen. Under the Collision tab we want to make this object Send Collision and Physics but not receive either. These are all fairly similar to what we did for our killzone so far but now I want to add the World Limits for our paddle by settings it’s Min. Bounds to X = 44 and Y = -40, it’s Max. Bounds should be X = 46 and Y = 40, this will set the area our paddle can move. We also want to change the Limit Mode to BOUNCE which will cause it to bounce when it hits the edges.

Adding movement to our paddle is easy with the Torque Game Builder, let’s add the Behavior Thruster Control and change the horizontalThrust to 0 and the verticalTrust to 50. This will cause the paddle to move up and down but lack the power to move left and right. Previewing the game now will let you bounce the ball off the paddle if you’re lucky enough for it to come your way.

Adding another Paddle

As will the killzones, we want to copy and paste the paddle and change it’s Scene Object settings to a Position of X = -45 and Y = 0. The World Zones need to also be changed to Min. Bounds to X = -44 and Y = -40, it’s Max. Bounds should be X = -46 and Y = 40. Remember to rename the paddle to paddlec, to reflect that this is the computers paddle.

Selecting the Thruster Control in the Behaviors panel will allow us to remove it so that we can add the behavior Move Toward Object, and we can set the object to ball using the pulldown menu with a speed of 50.

In Summary

So now we have a simple version of Pong using the Torque Game Builder. It’s pretty straight forward really, we need a ball which knows the size of the world it’s allowed in and it needs to bounce if it hits them. If it hits the sides of that world, it needs to die and if it hits the paddles it needs to bounce.

We’ve done all this without writing a single snippet of code and created a very simple game in about 20 minutes. There are a lot of neat tricks you can learn by experimenting with this tutorial, for example you could change this into a two player game easily by skipping the last step and changing the input keys or you could get rid of the keys altogether and have the players paddle follow the mouse using a behavior.

What’s Next?

This is a simple version of Pong with very little function and it’s designed as a tutorial for the Torque Game Builder but we could easily expand upon the game by adding more modern graphics, a score board and of course fixing the respawn point so it’s always in the middle of the screen.

Next weekend I’ll put together a new version of Pong with TGB using the scripting features. If you have any questions, please feel free to get in touch with me.

In the mean time, you can download the Code Free Pong For Mac and Windows and play it for yourself.

Tags: ,
Posted in Free Downloads, Torque Game Builder

read more
25
Oct
2007

Creating a Splash Screen in Torque Game Builder

4 Comments

Torque Game Builder from GarageGames is one of my favorite development suites, it’s straight forward with a low learning curve and an easy to navigate user interface but there are a couple of things that are a little tricky and take getting used to. One of those is the process of adding a simple Splash Screen to your project. In this article I will assume that you’ve never used the Torque Game Builder program before but that you have a basic understanding of the concepts of gaming. This tutorial is designed to do nothing more than load a screen, fade it from black and then back to black before loading your game.

So lets get started by loading Torque Game Builder and creating a new project (or loading an existing one). Once it’s opened we want to open the GUI Builder (GUI stands for Graphic User Interface) using the menu Project > GUI Builder or hitting the keyboard shortcut key F10. Once the GUI builder is opened, we are going to add a new GUI by using the menu File > New GIU which will pop up a dialog box allowing you to name your GUI, I want to name mine “ggSplash” because it’s going to be used to load the Garage Game Splash screen. Next we want to set the GUI Class and because it’s a simple fade in we’re going to use the GuiFadeinBitmapCtrl which will do most of the heavy lifting for us. Click Create to create the splash screen.

So this is where the Torque Game Builder GUI Builder gets a little tricky for novice developers, in the upper left hand corner of your newly create splash screen is an object tree which will contain the newly create GUI object with the fancy name GuiFadeinBitmapCtrl, click it to access the property menu below and you will see several options that you can set.

General > faceinTime – How long will it take to fade it in milliseconds (1000 = 1 second)

General > waitTime – How long will it last in milliseconds (1000 = 1 second)

General > fadeouttime – How long to fade out in milliseconds (1000 = 1 second)

GuiBitmapCtrl > bitmap – The file that you want to use as your graphic

There’s also a whole lot of very technical elements to this control but unless you understand them, you’re best to trust GarageGames default values. Using the four above you can effect how the control shows your splash screen. Once you’re done playing with the settings, save the file as “ggSplash.gui” and we’re ready to move onto the really tricky part.

Unfortunately for novice users, there will be some programming to complete in this part of the tutorial but don’t panic, I’ll try to walk you through it gently. First, let’s load the GUI into the games memory. In order to do this we need to change the code of the main game file which can be found in your game directory. The file is called “main.cs” but be careful … there are two of them. The first is in your root directory, for example if your game is called MyGame it’s found in a folder called “MyGame”, within that folder there is another folder named “game”, we want to open the game folder and then load the main.cs file. The best way to know that you’ve got the right one is to make sure your file has a function named initializeProject() near the top (by default it’s on line 10).

Now, in that file we need to add a special line of code to tell your game that you’ve create a new GUI interface. To do that, we must add an exec statement, this special statement tells your game to execute special code. To do this, let’s change our initializeProject() function to look like this:

function initializeProject()

{

// Load up the in game gui.

exec(“~/gui/mainScreen.gui”);

exec(”~/gui/ggSplash.gui”);

// Exec game scripts.

exec(“./gameScripts/game.cs”);

// This is where the game starts. Right now, we are just starting the first level. You will

// want to expand this to load up a splash screen followed by a main menu depending on the

// specific needs of your game. Most likely, a menu button will start the actual game, which

// is where startGame should be called from.

startGame( expandFilename($Game::DefaultScene) );

}

You’ll notice that I only added one line to the code above, I’ve added exec(”~/gui/ggSplash.gui”); just below exec(”~/gui/mainScreen.gui”); what this is doing is really simple, it’s telling your game to load the mainScreen into memory and also to load the Garage Games Splash screen.

So now your game knows you have a new page but it’s going to need to know when to load it. To do this, I am going to replace the line startGame( expandFilename($Game::DefaultScene) ); with the new line loadSplashScreen(); which will now look like this:

function initializeProject()

{

// Load up the in game gui.

exec(“~/gui/mainScreen.gui”);

exec(”~/gui/ggSplash.gui”);

// Exec game scripts.

exec(“./gameScripts/game.cs”);

// This is where the game starts. Right now, we are just starting the first level. You will

// want to expand this to load up a splash screen followed by a main menu depending on the

// specific needs of your game. Most likely, a menu button will start the actual game, which

// is where startGame should be called from.

loadSplashScreen();

}

Once that’s done we need to create a new function for the code to call at startup. In programming a function is a little like a recipe, basically we can keep looking it up when we need it and it always does the same thing. The function that we need to create now will be called loadSplashScreen(); and will load our splash screen. Here’s the code:

function loadSplashScreen()

{

canvas.setContent(ggSplash);

schedule(100,0,checkSplashTime);

}

function checkSplashTime()

{

if (ggSplash.done)

startGame(expandFilename($Game::DefaultScene));

else

loadSplashScreen();

}

The second function is a helper for the first, what it’s doing here is setting the canvas (the screen) based on the values we laid out in the GUI Builder. Then, it’s checking every .1 second (100 milliseconds) to see if the process is done yet and if it is, it calls the default start screen for the game. Otherwise, it goes back and restarts the process of checking.

That’s it! That’s all there is to creating a splash screen in Torque Game Builder, not really complicated but a real pain for a novice coder. To give credit where credit is due, when I first started using TGB I used a great tutorial from http://www.videogamebiscuit.com to help me through some of the growing pains and most of my code above has evolved from there similar tutorial.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in Learning, Torque Game Builder

read more
05
Oct
2007

Ben’s First Flash Movie

No Comments

Last summer my ten year old son went away to camp for a week and learnt how to do Flash animations. This is a project he worked on himself, I suppose I’m uploading it so that in a few years we can all look back and laugh a little.

The video is created as using key frame animation, simply put he moved the objects one frame at a time and the end result is a series of images which create an animated effect. Flash allows for a lot more advanced animations … so next week I’ll be teaching it to him.

Tags: , , , , , , , ,
Posted in Blog Posts

read more
03
Oct
2007

Learning Web Design for Print Designers

No Comments

For those who don’t know the dirty little secret of designers, here it is … there are web designers and there are print designers. Rarely do the two specialties cross but it doesn’t have to be that way, great print designers can easily learn to be wonderful web designers without having to know a lot of coding and technical garbage.

First off, let’s be blunt and say the world of web design has changed a lot in the past few years so if your last attempt to build a website was five or six years ago, trust me … this is going to be painless. Building a website is made easier with Adobe Dreamweaver but there are still a few basics that you’ll need to understand before we get into the real world of web development. Before we begin let me be honest and tell you that I’m a stickler for Web Based Standards, follow the rules and nobody gets hurt, break the rules and you’ll spend the rest of your design career wishing you’d listened.

Building a website is broken into two distinct areas, first there’s Web Publishing and then there is Web Design. This of your website design software as Adobe InDesign, before you can design your amazing page layout you have to format your text. The web is really no different.

Web Publishing

To help us publish a new website, you’ll really only need to know a handful of codes and to be honest, Dreamweaver takes care of them all for you. The first code you should know is the <p> tag, it’s a paragraph and when you wrap the code around a bunch of text, the web browser knows that those words represent a paragraph. For example:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

That’s it, that’s the basic foundation for HTML. Now remember, if you’re using Dreamweaver the software will add the <p> tags on it’s own, you don’t have to add them unless you’re in code view (View > Code to see the code or View > Design to see the design).

If you want to force a line return in a desktop publishing application we use Shift-Enter and that will force a new line. Well in the wonderful world of HTML we have a similar command it’s <br />. Note the closing / in the code? It’s because <br></br> looks silly, so we combine the opening and closing of a tag into a single object, hence <br/>.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

Take note in the example above that HTML doesn’t care about the actual format of the code, <br /> will insert a line break when viewed in a web browser and it’ll ignore the code when viewing the code. Likewise, the code view doesn’t recognize breaks in the code, so the follow example means nothing to HTML:

<p>Lorem

ipsum dolor sit amet,
consectetuer adipiscing elit. <br />Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

So now you’ve learnt the first two critical tags of HTML. Remember, HTML isn’t about producing amazing graphics it’s about publishing documents to the web. These two tags may seem silly to a designer but to an information architect they’re the most powerful tools in the world.

Next up, we need a basic way to break up HTML into headings and indicated how important text is. For that, we turn to the mighty heading tag, in fact it’s so cool there are six of them. <h1><h2><h3><h4><h5><h6> each of which has a rather unremarkable closing tag, </h6></h5></h4></h3></h2></h1>. Using the proper heading tag outside of a paragraph will indicated how important your text is for both the audience and search engines such as Google.

<h1>My Great Text</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus.</p>

<h2>Less Important Text</h2>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

There you have it, the greatest secret in the universe … how to effectively publish web documents. Actually there are a few other things that you’ll need to know for example if you want to place emphases text and make it appear as an italic on the page, you’ll need to wrap the <em></em> tags around the words you want to effect. Bolding words is accomplished with the <strong></strong> tags, you’ll notice that I don’t use the <i> and <b> tags which the W3C has asked us very politely not to use any more.

Adding an image to your page is a little more complex, basically it’s the <img /> tag but you have to add an optional tag to it so the tag reads <img src=’???’> where the src (source) is equal to the path to your image. Adding a list is fairly easy, first you have to decide if you want an ordered list (numbered) in which case use the <ol></ol> tags or an unordered list (bullets) <ul></ul>. List items contained within the list, have to be wrapped in a <li></li> tag.

<h1>My Great Text</h1>

<p><img src=’path_to_file/filename.gif’>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nec dui. Integer urna lacus, vehicula id, dictum at, cursus at, metus.</p>

<ul>
<li>Donec sed eros in felis dictum euismod.</li>
<li>Nunc quam orci, elementum molestie, porttitor eu, faucibus eget, quam. </li>
</ul>

<h2>Less Important Text</h2>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque condimentum lectus aliquam libero.</p>

<ol>
<li>Donec sed eros in felis dictum euismod.</li>
<li>Nunc quam orci, elementum molestie, porttitor eu, faucibus eget, quam. </li>
</ol>

I kid you not, that’s all there is to publishing HTML web content. Any graphic designer who can figure out how to use Quark or InDesign should be able to publish web content within an hour of starting.

Keep an eye out for my next piece, Web Design which will cover the secret art of Cascading Style Sheets (CSS) which turns your raw and ugly web content into stunning design while still complying to Web Standards.

Tags: , , , , , , , , , , , , , , , , , , , ,
Posted in Learning, Web Site Advice

read more
01
Oct
2007

Ben’s First Motion Capture

No Comments

This is a little brutal but it’s Ben’s first attempt at doing motion capture photography. He’s trying to learn the family trade and if he can master the art of script writing (or communicating his script) I think he’s going to do great. This piece was created with an Olympus camera, Apple iMovie and Adobe Photoshop.

Tags: , , , , , , , ,
Posted in Blog Posts

read more