Google Helps Answer the Age old Question …
As with most programmers, I’ve often pondered the deep theological questions of our times. Apparently, so has Google.
As with most programmers, I’ve often pondered the deep theological questions of our times. Apparently, so has Google.
Pong, 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.
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 (
) 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Recently with the help of some great local artists, I completed a series of over 1,100 technically illustrations for the Department of Education including a series of Biology Illustrations designed for online learning opportunities.
The illustrations ranged considerably for technical skill and subject matter. You can enlarge the artwork to the right by clicking on it.
Aaron Gustafson has produced a wonderful article on replacing web images with images suitable for printing, the iIR: img Image Replacement method allows web designers to create pages which look great in both web and print.
Using Aaron’s method, designers should be able to create and maintain websites viewable on multiple devices without having to deploy multiple versions of the site. This will allow users to access the same website via an iPhone, a Wii, a laptop or a printed version and have graphics on the page served to meet their specific needs.
While installing the Adobe Master Collection CS3 for the Mac I got all the way though the first disc and then a blank window popped up, stopping the installer dead. The error, a single blank window where it should be asking for disc two is a fairly common one apparently and is caused by a conflict between Safari 3.x Beta and the Master Collection installer. Now the good news, it’s a painfully easy fix.
First, you have to completely uninstall the Master Collection that you’ve installed so far. You can do this by going to ~/Applications/Utilities/Adobe Installers/Add or Remove Adobe Creative Suite 3 Master Collection. Once done, reboot your Mac.
Second, you have to remove Safari 3.0 Beta from your Mac. You can do this by downloading the installer from http://www.apple.com/safari/download/ and using the uninstall option. Before you do, be sure to copy your bookmarks etc. from ~/username/Library/Safari if you want to save your bookmarks. Once again, reboot your Mac.
Now, once you’re rebooted you are free to install the Master Collection and it will prompt you for disc two as anticipated.
If you want at this point, you can restore Safari 3.0 Beta by installing it.
Fredericton New Brunswick is located on the Saint John River in Eastern Canada, about an hour East of the State of Maine. It is home to both me and my business as a web consultant and graphic designer. From this sleepy little town, I create and consult with business and government leaders from around the world to produce exciting websites using on standards based design.
What separates me from others is my desire to integrate the best into my clients websites. I use local talent here in my region as well as global resources to bring the best talent together to create exciting and in depth web designs. My design theory assumes each of my clients is look for some basic things:
Building websites in Fredericton is no different than building websites anywhere in the world except that my small studio benefits from cost savings, excellent access to air travel to primary markets and access to amazing artists, exceptional programmers and dedicated testers.
If you would like to read more about standards based design and how it can help your business reach your audience please visit some of these links:
Trust the web designer, it will all work out in the end and besides, a great web designer knows what they are doing. Let them tell you what they know instead of forcing them to listen to you tell them how to do their job. Trust me, your web designer can turn your ideas into magic but you have to let them do their job.
Trust: Trust the web designer, it will all work out in the end and besides, a great web designer knows what they are doing. Let them tell you what they know instead of forcing them to listen to you tell them how to do their job. Trust me, your web designer can turn your ideas into magic but you have to let them do their job.
Price: In the web business, price is very poor indicator of talent and an even worse indicator of what you’re going to get. Web designers can charge by the project or by the hour, the first thing you should establish is what you need and what you want (two different things), be willing to work with your designer to create something right for you.
Talent: Your designer should be able to show you that they can do what you’re looking for. Make sure to review their portfolio and spend time researching the websites they’ve created in the past. You’d never hire a chef without sampling their craft and the same should be said about web designers. Take the time to review and understand their style.
Plan: Finding a great web designer can take weeks of research and planning. Many of the best designers in your area may already be booked, so you should plan ahead to know when your project can be ready. Remember, the world may spin on your schedule but creative talent books their time months in advance.
Prepare: When you do find the right designer, for the right price you should appreciate that your designer can only work with what you provide. Have samples of your business cards, letterhead, previous brochures and other marketing materials ready to get to work.
I’m a strong believer that users shouldn’t have to think in order to use my products. In fact, I proudly sport my copy of Don’t Make Me Think to just about every party I venture to, which could explain a lot about the number of parties I go to. In his book, Steve Krug writes a wonderful chapter on helping users recover from their mistake and the most common mistake users make when filling out their web form? Their email address. We can help users by validating at least half of their email address, which should cut down on the number of people that are signing up with errant domains.Let’s look at the PHP function checkdnsrr() which will check if the domain name actually exists and return a true if it does. To use the magic code we simply place the hostname we’re searching for between the brackets and it returns a True boolean if the domain is a valid domain. Remember, it’s better to advise the user that there may be a problem with their domain name and still allow them to complete the form.We may not be able to help them type in the first half of their email, but at least we can help with the domain.