How To....

Starting game design and game writing

paulfo — Wed, 08 Apr 2009 14:37:42 GMT

Over the last couple of months I’ve attended a number of events which have allowed me to show many young people how to ‘make’ their own game. This quick demo has used the Platform Starter Kit which is included in the XNA Games Studio.

The Platform Starter Kit is as its name suggests a ‘Super Mario Bros’ © style platform game. It is very easy to change and add more levels to the game and with a tool like Paint.Net (a free paint program the understands transparency) you can also alter the various graphical elements of the game. For example, my son has great fun redesigning the platform bricks, the backgrounds and even the main player! Once you have altered the graphics you just save them and recompile the game – when you then run the game you have YOUR game graphics. If you edited and changed all the graphics used by the Platform Starter Kit you’d have your very own platform game!

So let me show you how you can go about doing this.

First of all, you need the tools installed on your machine. See the 'How To’ article titled ‘Build a computer game in one hour’ for what to download and how to set up the XNA Game Studio.

Once this is all setup, you can start up Visual Studio C# 2008 Express (we’ll call this VS or C# (that’s C Sharp) for short).

From Vista’s All Programs menu it’ll look like this.

Once started you need to make a new project:

Select File –> New –> Project from the C# menu.

This will give you a new window to choose the style of project from.

We want the Platform Starter Kit

You can change the name and solution name text - maybe call it MyFirstGame.

C# will then take a moment to build the platform starter kit project. Depending on how powerful your computer is this may take a few seconds to a minute or two, so just sit patiently until the status bar at the bottom of the C# windows says is has created the project successfully.

The starter kit actually makes three projects. One for Windows, one for the Xbox 360 and one for the Microsoft Zune (think Microsoft’s iPod alternative).To run the game as it is, just press F5 but make sure the Windows version of the game is set up as the starting game. You’ll be able to see the Xbox and Zune projects because they are called Xbox and Zune! But the Windows version of the game will just be the name you gave the game. My name was Platformer5

as you can see here. So what you need to do is make sure this is the game C# will try to run first.

Do this by right-clicking on the name (Platformer5 for me) and selecting the ‘Set as Startup Project’ option.

Once you have done this (the project name is then BOLD) you can just press the F5 key to start the game!

Go on have a go now, if you are following along. There are only three levels in the current game. The objective is to get your man to collect all the gems and avoid all the monsters. So make your way to the exit once you have all the gems on each level.

When you have completed all the levels the game starts again at the first level.

If you have played Super Mario Bros© you’ll know it has 8 worlds with 5 levels per world. Giving the game 40 levels in total.

We can add levels to our game very easily. Let’s do that now.

In the Solution Explorer on the right of your C# screen you’ll see a list of all the things that are in the game. Once of the things is called HighResolutionContent(Content). This is where all the graphics and sounds are for the game. If you open this folder by clicking on its name you’ll see more folders named after their contents. For example, Backgrounds includes all the background images used in the game.

There is also a folder called Levels. If you open this folder, you’ll find three text files. These files tell the computer how to draw each level in the game. If you open the first level by double clicking on 0.txt you’ll see the contents of the file in the editor, like this:

Let me explain what you are seeing. First of all the ‘.’ (full stop) is a blank. The computer doesn’t draw anything when it finds one of these. If it finds a ‘G’ it will draw a Gem. If it finds a ‘#’ (hash) it will draw a solid platform. The 1 marks the starting point for the player character on each level and the ‘X’ marks the exit point for the level. Some additional symbols are: ‘-‘ (hyphen) is a soft platform – one the player character can climb through. There are also four monsters in the Platform Start Kit. These are represented by A, B, C or D. So if you replace a ‘.’ on the line between the 1 and the X in the 0.txt file with A, B, C or D you’ll have a monster running around there when the game starts!

So go on, add some more platforms (# or –) and some more gems (G) and maybe a monster or two (A,B,C or D). Just make sure that the length of each line is the same. The computer is expecting to have lines 20 characters long. If you have a line to short or to long you’ll get an error. If this happens – don’t panic! First check the level files you’ve edited to to make sure the lines are all the right length. Then run the game again.

Also, all the letters (G,A,B,C,D,X) need to be CAPTIAL letters and you can only have one X and one 1 in each level. This is my modified level 0:

That was easy wasn’t it?

Now, the next thing you might like to do is add more levels to the game. You can do this easily too.

In the Solution Explorer, select one of the level files (0.txt, 1.txt, 2.txt) and then right-click and copy it. Now right-click on the ‘Levels’ folder and select Paste. You should then have a new .txt file created called something like Copy of 2.txt depending on what file you copied.

What you need to do now is rename this file to the next level number. For example, I need the level file to be called 3.txt. If I added more they would have to be 4, 5 and 6 etc as I added them. It is important to number them consecutively as the game depends on this to get the level order right :-)

So my Level folder now contains these:

The next step is a bit techie but easy enough. We need to tell the C# compiler what to do with these new level files when it is building the game. We do this by selecting each new level file in turn and changing the Build Action to None. It will be Compile by default, but as the txt files don’t need compiling we change the build action to None.

Now you can open your new level file and edit it to make up a completely new level for the game. Just remember each line needs to be 20 characters long and all letters need to be CAPITAL letters. Once you have finished editing your new level files you can press F5 again to run your game and try out your new levels.

If you want to be like Super Mario Bros © you need to make 40 level files!

Once you have fiddled a bit with the levels you probably will want to change some of the graphics. You’ll find the various graphic files in folders in the project. These folders will also be on your disk drive, so the thing to do is find the project directory from within your Documents folder on your hard disk. Typically this is Documents –> Visual Studio 2008 –> Projects –> <your project name> –> <your project name> –> HighResolutionContent

Replace <your project name> with the name of your project. This is required twice assuming you named the project and the solution the same thing!

Once inside the HighResolutionContent folder you’ll find all the content folders containing various graphics. Stepping into the Sprites folder will take you to the place where the monster and player graphics are stored. If you step into the Player folder you’ll see a animation file for each player state – celebrate, die, idle, jump and run. If you open one of these files in Paint.Net (or your favourite graphics program) you can change each animation frame so your character looks or does something different. Remember when you used to make ‘flip book’ animations by drawing a stick person on the corner of several pages and then flicking through then quickly to see the stick person move? Well this is what the computer is kind of doing. It moves through each frame in the image file one at a time to make the character appear as if it is moving.

So if you want to change the character you have to edit each one of these frames in the image file and then save the image.

The other graphic files you might like to edit include those in the Tiles folder. These are the tiles used to draw the platforms. So changing these will see the platforms drawn in the game change. The A suffixed tiles are the hard tiles, the B suffixed tiles are the soft tiles.

There are also the backgrounds to each level. These are draw in three parts. The sky, middle ground and fore ground. This is so in the future you can make the game scroll and move each of these layers at a different speed to make it look the player is moving ( the foreground moves faster than the sky you see – watch the next time you are in a car).

By changing these background images you’ll change the settings of each level. So you could make this a game on an alien planet in space just by changing the images for the backgrounds and the sprites!

As long as you save your edited files back to the place you found them and keep their name the same C# will use them when it builds the game for you (when you press F5). If you want to go back to the originals images you can just create a new platform starter kit project using a different name and take the image files from there :-)

Have fun making your version of the Platform starter kit!

Project: Simple Multitouch device

paulfo — Mon, 23 Feb 2009 13:42:00 GMT

Multitouch devices are all the rage - they allow you and your friends to use your hands all together to control and interact with the computer. If you haven't seen one before take a look at this video:

This is a multitouch application running on the Microsoft Surface - a multitouch device designed for the entertainment industry, if costs approx. £10000.

But you can make a multitouch device to work with your laptop or school PC very easily and very cheaply.

All you need is:

1) A Windows computer

2) A cardboard box - quite a tall A4 sized one would be perfect.

3) A Web cam

4) A sheet of acrylic a little bigger then the size of your box opening (you can use a picture frame for the whole of the top)

5) A sheet of normal printer paper/tracing paper the size of your acrylic sheet

6) Scissors and sticky tape

Here is a short video showing you how to make the multitouch device. Once you have made this you will need to install the software on your computer to enable it. The required software, and instructions to use it, can be downloaded from here. The NUIGroup is a community of hobbyists who build multitouch devices.

Computer Programming: Getting started

paulfo — Mon, 23 Feb 2009 09:50:56 GMT

Computer programming is a great skill. The right computer programs can change the world! By writing a helpful computer program and making it available to others, you can help people all over the world do things. How powerful is that - as a computer programmer you can be a force for good in the world!

Microsoft has lots of stuff online to help you get started in the world of computer programming. There are all kinds of videos and articles for you to watch and read to help you start to program. You might want to create a web site or a Windows program. The key thing is all you need to get going is a Windows computer - we provide the programming tools and fun teaching materials for free!

Step 1: Go have a look at the Kids Corner

Here you will find direct links to materials introducing computer programming - what's it all about, how to think about computer programming and project ideas. There are also links to e-books that will teach you how to program using Microsoft's professional programming languages - these are the programming languages real programmers use to build web sites, games, mobile phone applications, Windows applications and even robot control programs!!

Step 2: Download a programming tool to start programming!

The Express editions of Microsoft's professional programming tools are all available for free. You can download all of them or just the ones you are interested in. The key programming tools are Visual Basic and C# (pronounced C Sharp). There is also the Web Design tool - which helps you build your own web sites obviously - and a database program called SQL Express (a database is like a chest of draws - somewhere you keep things safe and get to them when you need them).

Step 3: Download a programming project guide!

There are lots of programming courses and projects for you to try. Each one has an indicator to show who should try it - Beginner, Intermediate and Advanced. We suggest you work your way through all of them to get a good understanding of programming. Each guide has a video and a worksheet to take you step by step through the activity - helping you understand a new area of programming each time. Programming courses are here and programming projects are here!

Learning to program is fun. Once you can program a little, you can turn your computer into a really useful tool to help you and others do stuff!

Here are some top tips to help you get going:

1) Break things into small tasks. Every program can be broken down into small tasks: ask the user for input, read the input, test the input, use the input, tell the user the result. If you think a programming task is to difficult look to see if you can break it down into smaller and smaller tasks. At the lowest level you should be able to describe a programming task in a simple sentence, and translate that sentence into one or two programming commands, making writing the program easy.

2) Read more. Programming languages, tools and errors all come with lots of documentation telling you about them. Before trying to use a new command, tool or when you get a programming error, look it up in the documentation and read about it. As a programmer you will never stop learning new stuff and will read lots to help you learn.

3) A second pair of eyes. If you get stuck with a bug in your program ask a friend to help. Often when you talk a friend through your program you or they can spot your mistake. Its good to talk!

4) Bugs happen! Every computer program can have a bug - an error. Sometimes identifying the bug is really hard, even when you've asked a friend to help (3). At times like this you need to go small (1). Test each little step in your code to see if it does what you meant it too. The programming tool you use should be able to help you. Run your application in Debug Mode and use the Step keys to run each command of your program one at a time, while you look at the results to check each command is doing what it should be. You can read about 'Debugging' (2) to learn an important programming skill ;-)

Build a computer game in one hour!

paulfo — Tue, 17 Feb 2009 16:15:00 GMT

With Microsoft's games technology it is now easier then ever before to build a computer game. In this activity you will be able to follow a two tutorials; one builds a 2D game and the second builds a real 3D game! Each tutorial takes about one hour once you have your computer set up with all the tools. All you need to get is a Windows computer with Internet access. The rest of the Microsoft tools you need to get started are FREE. Here's what you need.

The bits you need

Windows XP or Windows Vista computer*
Microsoft Visual C# Express 2008 programming tool - FREE
Microsoft XNA Games Studio 3.0 - FREE

*Your computer will need a reasonable graphics card particularly for the 3D game. If you play modern arcade games on your computer already you'll be fine. But give the 2D game a go anyway - it has the least graphical requirements.

Getting started

1. Download Visual C# Express 2008 and install it by running the installation file (vcssetup.exe).

The setup downloads all the required stuff from the web. When it has finished you'll have a proper software development tool - totally FREE. Even better this tool is the starting point for Microsoft's professional development tools. So if you were to get a job writing software for Windows you'd be using the same, familiar tools!!!

2. Download XNA Games Studio 3.0 and install it by running the installation file (XNAGS30_setup.exe).

XNA Games Studio adds additional functionality to the C# ( that's C Sharp) development tool specific to games development. The games you write can run on a Windows computer, or a Zune mp3 player. They can also run on your Xbox 360 - but you need the Creators Club membership for this. If you are at University you can get a 12month membership for free via Microsoft's Dream Spark.

3. Take a look at the 2D Game Tutorial to get going!

4. Once you've conquered that one, take a look at the 3D Game Tutorial!

5. Now you'll really be itching to take your game further. So take a look at the rest of the starter kits and maybe even job the XNA Creators Club to start running your games on your Xbox 360!!!

Note some starter kits are Premium kits that require XNA Creators Club membership to access. (but most of them aren't and are really cool - see the Racing game first if you need convincing!)

6. To get more help and find others building games too - including University students, hobbyists AND professional games developers why not visit the XNA UK user group site for advice and even more samples!

7. Now you might be closer to making some money from your work. Take a look at the new Community Games on Xbox Live! Your own home made games can be published onto Xbox Live for the 17million Xbox 360 owners to review and PURCHASE. Microsoft shares this revenue with you - you'll actually get a cheque from Microsoft!

Intro to programming: Microsoft Small Basic

paulfo — Mon, 16 Feb 2009 11:42:00 GMT

'Just like we speak and understand English or Spanish or French, computers can understand programs written in certain languages. These are called programming languages. In the beginning there were just a few programming languages and they were really easy to learn and comprehend. But as computers and software became more and more sophisticated, programming languages evolved fast, gathering more complex concepts along the way.'

This is were Microsoft Small Basic comes in. Small Basic is a programming language that is designed to make programming easy, approachable and fun for beginners. Here is how to get started.

Get going with Small Basic.

The Small Basic install file can be downloaded from http://SmallBasic.com. You need to have a personal computer running Windows XP or higher operating system. Additionally the .Net Framework 3.5 will be installed during installation if necessary. Small Basic is free.

Once you have downloaded the 'SmallBasic.MSI' installer file just run it to install Small Basic. You will need to accept the license agreement to successfully complete the installation.

Small Basic will appear as an application on your Windows programs menu with the 'Introducing Small Basic' guide. The guide is an excellent resource for teaching programming. Watch the video below to get the idea, then work through the guide exercises.

Windows Vista's All Programs menu illustrated.

Selecting Microsoft Small Basic will start the programming tool.

You are now ready to start programming! Try typing this short program into the white editor window:

TextWindows.WriteLine("Hello World")

Now press the blue 'Run' arrow or press the F5 key.

The result of your program will be displayed in a small 'command window'. It will say Hello World and then ask you to press any key to continue. Pressing a key takes you back to your program editor. Well done! You have created your first computer program. It really isn't that hard is it?

While typing in your line of code, you may have noticed the dynamic little help window and the detailed command help window appear. The command help window tells you want the command will do, and the little help window tells you what commands you can use at that point of the program. This is called 'Intellisense' - the computer is helping you write your program! Once the little help window appears you can use the up and down arrows to find the command you need and then press the Return key to select it. You don't even have to type all the commands!

Now try adding one more bit to your program. Add this line of code to the start of your program:

TextWindow.ForeGroundColor = "Yellow"

So your complete program should now look like this:

TextWindow.ForeGroundColor = "Yellow"

TextWindows.WriteLine("Hello World")

Press the blue arrow again, or F5, to run your application. You should see the same as before but in yellow!

To learn more programming watch this little video. Pause it frequently so you can copy the program code into your own program editor window. You can watch the video full screen by double clicking the video window when playing. You will need Microsoft SilverLight to watch the video - this is free to use.

You can also follow along and learn a lot more by working through this 'Small Basic Introduction to Programming' (Note this document should also be on your Start menu once you have installed Small Basic). This document is a full guide to programming with Small Basic. By the time you have finished working through it you will be able to write your own computer programs in Small Basic using advanced features to connect to the Internet and control your Windows computer!

There are some sample programs installed with Small Basic - look in the Samples directory.

Tetris - the popular game of falling blocks, all written in Small Basic - is available here.

Flickr - search for pictures on Flickr using tags and then set your favourite to be your computers Desktop background - is available here.

Other samples are published here