Handcrafted Games

(French) Si vous attérrissez ici

Mister Helmut — Tue, 13 Dec 2011 16:44:00 +0000

Si vous provenez du site du Global Game Jam et que vous venez d'attérir sur ce site, c'est que vous êtes curieux ou que vous avez mal tapé l'adresse du site.

Si vous avez mal tapé l'adresse du site, cliquez ici pour y accéder.

Si vous êtes ici par curiosité, ce présent site est le blog anglophone d'un des organisateurs de l'événement. Ce blog traite du développement de jeux vidéo et plus particulièrement de la technologie XNA. Malheureusement, ce blog n'est plus poursuivi.

A well deserved status update of this blog

Mister Helmut — Fri, 07 Oct 2011 14:15:00 +0100

Let's cut it short, this blog is discontinued ;-).

The fact is that I hardly find free times in my professional/personal life to get seriously involved in a project. Well, I fortunately still have free times, but not enough to do what I would like to do, and do it seriously. Writing lengthy and well documented tutorials is incredibly time consuming and I don't find any interest in writing small ones. I would like to write some very didactic stuff, so more people could get in the XNA/WP7 communty, and also because I really like to teach things and share knowledge, encourage vocations and so on. But I am glad that my tutorials are still quite visible and enjoyed, notably the one on Sgt. Conker's website.

Other reasons could be that blogs are dead now (long live micro-blogging?) and I fear that knowledges sharing will suffer of this. I am also a lot less visible than before. I took a little break from the community and it had the consequence for me to be mostly anonymous by now. I lost my reputation points on the AppHub (not to mention than my nickname has changed with my appliance to the WP7 dev program) and I haven't been in touch with the people I usually speak to for so months now. I am also twitting a lot less dev related stuff, as I switched to researcher mode over developer.

So, what now? My other website, Daily XNA, is still alive and kicking. Well, not sure if kicking is the appropriate word here, the XNA community is living many mutations right now, there's less great people, no more blogs' update from the best MVPs and the current state of the indie landscape are making Steam and mobile platforms the ways to go. I really wonder what will be the future of indie distribution.

I am also still teaching Game Design and Development to master degree students this year, with some Kinect goodness to promote Natural User Interfaces. I'm really happy with this, as it quenches my thirst of knowledge sharing.

I still have some long term dev projects, but I have lost my appetite to commercially publishing them, making them to progress really really slowly. It's really a hobby more than everything, but it allowed me to get in touch with some nice people. Especially an alcoholic one from UK ^^. Still trying to create a French XNA/WP7 User Group, but the whole French community seems to be composed of 5 people... Not to mention students that can't participate to such groups because of geographical restrictions.

Oh and, I'm quite surprised that I am proposed jobs through this blog. Surprisingly, I received offers for game related positions but also for teaching activities. And I'm also glad that the ones who interviewed me are still in touch with me despite the fact I am not looking for a job right now.

One last word, I'm trying to organize a Global Game Jam site in the east of France this year. Still working out details but nothing is confirmed yet. I hope to clarify things up by the end of the month.

Thanks for visiting this blog! And don't forget that you can still get in touch with me via twitter or linkedin.

I am still around

Mister Helmut — Mon, 18 Oct 2010 13:47:00 +0100

Most blogs are not updated mainly due to one reason: personal life/work. I have been quite busy the last few months but I am still around, "contributing" to the XNA community, reading of lot and twitting a little bit.

First of, I have submitted an updated version of my Pong tutorial to the Sgt Conker tutorial contest and was really surprised to make the third place. I hope that this tutorial will help beginners despite the very good education content on the App Hub website (the new name of the creators' club online). The tutorial I submitted has a lot of typo, so I hope to be able to post a new version on the Sgt Conker website.

What now? I am still planning to write a few articles on this blog. The first to come out will be an introduction to the Farseer physics engine in its 3.1 version. As one may know (or not), I am teaching video game development to master degree students and my course is based on my tutorials. This year, the course has been extended so I will have more time to do more interesting stuff than just a Pong, Space invaders and so on. My plan is to go into 2D physics games as it is a good mean to quickly and simply do funny things (IMO).

Concerning the prices I have received from the Sgt Conker contest, the four months Premium subscription will be dedicated to peer reviewing creators' projects as I have no concrete projects to submit myself (or more precisely, four month is too short for my ongoing projects). As of the ToonBoom license, I'm planning to do something with it, but can not really speak about it until further confirmation.

That's all for all the plans and for today.

Can game disks really rot?!

Mister Helmut — Sun, 01 Aug 2010 14:23:00 +0100

Yesterday, I wanted to test the new Alan Wake DLC, 'The Signal', but to my surprise, my console told me that the game disk is unreadable... By unreadable, I mean that the dashboard doesn't even load the preview image nor the name of the disk, but still recognize it as a game. But when I want to launch the game, an error pops up with the 'unreadable disk' message. Sometimes, it even recognizes the disk as a DVD and plays the 'put this disk into a 360 console in order to play' (similar message when you try to put a 360 game in a PC).

So I tried everything the xbox support website is suggesting. Clearing the cache, testing without the hard drive plugged, etc.

So I tried other games. Some are working, some aren't... Thankfully, I have a second 360 (a day-one console I replaced by a Super Elite last year) and used it to test my games. Guess what? Same problem... Some of my games are definitely unreadable. Don't tell me that the disks may be damaged, since they are all new and unscratched (I double-checked this, since I'm kinda a maniac in regards of my collectibles).

Here's the list of the affected games: Alan Wake, Mass Effect 2 (disk 1 & 2), Resonance of Fate (End of Eternity), Darksiders and Skate 3 (I didn't even played to this one).

The point is that this list represents exactly all the games I bought in 2010. The only one which is not in the list is Red Dead Redemption. All of my other games are working (and will hopefully continue to work).

Well, so, what now? Are both of my consoles having the exact same problem? Are my games really rotten? Is there any reason why only the games I bought in 2010 are affected?

I'm actually completely puzzled and quite nervous about this.

XNA 4.0 beta is now available!

Mister Helmut — Mon, 12 Jul 2010 19:38:00 +0100

After two Community Technological Preview versions, XNA Game Studio 4.0 has finally reached the beta stage.

Let's cut it short, you can download it here: http://download.microsoft.com/download/4/E/A/4EA52332-C6B1-476E-9938-C4F805146AF5/vm_web.exe.

I'd like to remind you that XNA is now part of the Windows Phone 7 SDK as an all-in-one installation package (which will also install Visual Studio 2010 Express).

This beta version is still limited: Xbox 360 is not yet allowed and XNA 4.0 will only work with the english RTM of Visual Studio 2010 (included in the all-in-one package in its Express version). But the API is now fully complete with WP7 screen orientation support and HiDef target on Windows (among other new features).

For more information about this release, please visit the creators' website and/or read the release notes.

For even further reading, Shawn Hargreaves's blog has a tremendous amount of blogpost detailing API changes in XNA 4.0.

Crowd funding and Indie games?

Mister Helmut — Mon, 14 Jun 2010 19:29:00 +0100

Do you know what “crowd funding” is? It is a way to produce entertainments. Basically, you allow people to participate to the base funding of a project and they will get a part of the benefits (depending on how much they funded, and if there’s any benefits) and/or have special opportunities to participate to the production. Crowd funding originally started with indie film makers unable to raise enough funds and asked people on the internet to donate while promising a return on investment (ROI). They successfully raised $50,000 and shot their film. The model is now adapted to many types of art, mainly music. Websites like mymajorcompany allow artists to present their works and people freely pick their favorite and donate. Then, if the artist is successfully produced and release an EP, they will receive a part of the benefits. Crowd funding recently reached the adult industry with a twist: in addition to the ROI and depending on the amount you gave, you are able to meet the actors or to shot your own scene… (I said shooting, not acting).

Crowd funding is not about giving all the production decisions to the people funding you. It is a catchy way to get money directly from your public. People will not have control over what you’re doing, you’re only giving them the feeling they’re producing your project. The typical model involves incremental “goodies” depending on the amount of money given. For example, if people give $1 to $10, they’ll get a ROI when the project is released; if they give $11 to $50, ROI + a free copy of the product; if they give $100+, they’ll meet the team, shake hands etc. up to giving people the opportunity to influence something (like choosing the name of a song, usually something not critical to your project). The advantages of crowd funding are that you barely have to invest yourself and you’re directly get in touch with your clients (which would buy your product anyway if they’re already ok to donate). Crowd funding may not end well: the project could be discontinued, or not sell well. That's why participating in such projects is usually called a “bet”.

So now, what about Indie games adopting crowd funding? You’ll maybe tell me that most indie developers allow people to donate, pre-order etc. But are they attracting people with something else? Most are not. We can mention Unknown Worlds, allowing pre-order on Natural Selection 2 while giving the SDK and special alpha demos to the people who pre-ordered. Puppygames are also usually offering beta testing to pre-orders. But none are adopting the “internet producers” model by giving back a ROI.

The big question is: will the benefits large enough to remunerate the producers AND to enable the indie studios to keep going?

I really wonder if this production model could fit to the Indie game industry. I think that people are now used to play some indie games and may be aware of how such games are produced. So, there should be enough people interested in producing indie games. It would be a little like a “pay what you want” model, except that people are getting involved at the earliest production stage of a project.

Programming your first XNA game for PC, Xbox 360 & Windows Phone 7: Pong

Mister Helmut — Thu, 10 Jun 2010 09:33:00 +0100

I’d like to introduce the XNA framework to you with this very simple and straightforward tutorial. We will see what XNA is and how its basic features works to continue with the programming of your first game, a simple Pong clone for Windows. At last, we’ll try to convert it to the Xbox 360 and Windows Phone 7. This tutorial assumes that the readers have a basic C#/.Net understanding. I hope that it will help you to understand the basics of the framework and that it will motivate you to go further in. The article should be suitable to complete beginners in game programming.

About this tutorial: when I was running my previous French blog, I wrote this tutorial. It was first released by the time of XNA 2.0 and is still a nice French references to begin with XNA. I then had the opportunity to teach video game programming to master degree students and choose to use this tutorial as the introduction of the course. I rewrote it a bit for the need of my course and with the coming of XNA 4.0 and the support of the Windows Phone 7 platform I felt like it would be nice to rework it even more to fit actual standards.

English not being my native language, please forgive and/or report any English oddities.

This tutorial targets XNA 4.0 “April Refresh” CTP. It will be updated when the final version will be released. It uses some new features of XNA 4.0 so it will not run out-of-the-box on previous XNA version (mainly due to the usage of Viewport.Bounds and changed SpriteBatch.Draw arguments order).

Last modified: June the 10th, 2010 (initial post).
Required assets: download link.
Offline version: PDF.

The XNA framework

XNA is a free development framework by Microsoft, enabling cross-platform game development thanks to simple and comprehensive programming tools. The supported platforms are Windows PC’s, the Xbox 360, Zune media players and Windows Phone 7. The framework integrates itself into Visual Studio 2010 (as of XNA 4.0), including the free Express edition, and features the following components:

A powerful .NET API to handle graphics, sounds, videos, inputs, networking and storage;
An audio development tool, XACT, to build complex cross-platform sound banks;
A debugger capable of remote debugging Xbox 360 and Zune games;
A Windows Phone 7 emulator so that you don’t need to own such a device to debug WP7 games.

XNA has been designed for hobbyist and independent developers and builds upon a strong community. If you have any problems during your XNA journey, don’t hesitate to ask for help at the official XNA community, the creators club. If correctly and gently exposed, your problem will most likely be resolved with the help of XNA experts or XNA team itself.

Last but not least, the creators club allows you to release and sell your creations on the Xbox 360 or Windows Phone 7 marketplaces.

First steps to the XNA framework

In order to begin with the framework, let’s review the requirements and setup our environment. You’ll need a computer with the following specifications (see XNA 4 specs):

Windows Vista or Seven (or their “server” equivalent);
A DirectX 9.1c capable graphic card (or better) with up to date drivers and DirectX runtime; A DirectX 10 capable graphic card if you’d like to debug Windows Phone 7 XNA projects;
Visual Studio 2010 (or the free-to-use Express edition);
XNA 4.0.

If you’re a student, you may be able to get a copy of Windows Vista/Seven and/or a professional release of Visual Studio through the MSDN AA of your school (if it has subscribed to it). So go ask the IT manager of your school for further detail. If you’re school don’t have access to the MSDN AA, you can still pretend to student advantages thanks to the Microsoft’s Dreamspark program (sign up and follow the instructions).

If you’re not a student or simply don’t want to bother with a professional edition of Visual Studio, the Express edition is fairly enough for XNA purpose. Another version wouldn’t bring you more features unless you have other programming need than XNA.

When you’re fully equipped, install Visual Studio 2010 and XNA 4.0 after. You’re now ready to go.

Note about the CTP: installing Visual Studio before XNA 4.0 is no longer required since XNA 4.0 comes in an all-in-one installation package.

Creating your first project

Start up Visual Studio and create a new project by clicking the “File/New Project…” menu. Here you’ll have a list of the available project templates. Give the name and directory you want to your project and under the Visual C# item, pick “Windows Game (4.0)”.

The project you’ve just created is now composed of the following elements:

The “Properties” directory, holding application manifest (not-so-important stuff);
The “References” meta-directory, listing all the .Net assemblies your project need;
The “Content References”, listing the linked Content Pipeline (we’ll see what it is soon);
The “App.config” file, holding basic .Net setup, no need to edit it (for a XNA game);
The “Game.ico” file, is the icon of the executable file of your game;
The “Game1.cs” file, is the main source code file of a XNA project (I’ll detail this later);
The “GameThumbnail.png” file, is the icon of your game that will be displayed on the Xbox 360 and Windows Phone 7 marketplaces;
The “Program.cs” file, is the entry point of your program (initializing your Game1 class).

Alongside your project, you’ll find another project having the same name with a “Content” suffix. This represents the Content Pipeline of your project, a very important XNA component.

The Content Pipeline

The Content Pipeline has an almost explicit name. Its purpose is to manage your game assets (graphics, sounds, 3D models…) from the importation up to the execution with barely any hassle. Its main features are:

Importing the most common asset file formats and transparently load them into comprehensible C# objects;
Ease of use (one line asset loading);
Automatically links dependent assets (3D models, textures, shaders…);
Ensures that your assets are cross-platform, loaded and displayed the same way;
Offers on-the-fly assets compression;
Bake up your assets and bundle it with you game.

The use of the Content Pipeline is mandatory for non-Windows deployment. You can still load your assets the “hard way” from files on PC if you’d like to.

You can create as many Content projects as you want but it is more convenient to stick with one per game project. Remember the “Content References” in your game project? This is where you link your project to your Content project. By default, your project is linked to the already created Content project.

Now for the supported file formats, here’s the list:

2D graphics: .bmp, .png, .jpg;
3D models: .x, .fbx;
Shaders: .fx;
Audio: .mp3, .wav, .wma;
Video: .wmv;
Font: TrueType;
Any XML, text or binary files.

You may find many other format importers on the web or code one yourself if you need to (http://msdn.microsoft.com/en-us/library/bb447754.aspx).

Adding assets to your project

To add assets to your project, right click on your Content project, and “Add/Add an existing item” and pick your assets. You can also organize your assets into folders or add assets just by drag’n’droping files to your Content project.

The Game class

Now open up the Game1.cs file. You should notice that the Game1 class is inherited from a class named Game. The Game class is provided by XNA and manages the game loop (more generally the game workflow). It is composed of the following methods:

Initialize: called after the construction of the class, it ensures that all the class fields are constructed and ready to be initialized. The purpose of this method is (as you may have guessed) to initialize class members (in the same way of the Winforms’ Initialize method);
LoadContent: called after Initialize, this method is meant to be used to load your game assets;
UnloadContent: called before during the disposal of the Game class and ensure that your game assets are disposed correctly when you exit it (it doesn’t mean that you don’t have to take care of your memory allocation);
Update: called every time before the Draw method and should be used to update your game engine. This will be the place of collision handling, inputs handling, game world updating etc. Its GameTime argument propose services to know the amount of time elapsed since the last Update call. This is very useful to synchronize your game engine;
Draw: called in an infinite loop, it is meant to draw your game. Even if it is possible, for the sake of clean code, you should avoid writing any logic update here.

The Update and Draw methods represent the Game Loop and are called in an infinite loop so that your game is constantly refreshed and running. XNA default settings set the loop frequency to 60 loops per second, meaning that your game should run at 60 frames per second (as long as your Update/Draw don’t take too much time). You can adjust the settings to void this limit so that your game runs as fast as your Update/Draw allow it to, but we’re not going to cover this in this tutorial.

You’re free to not use the Game class but it provides useful services behind the Game Loop and if you’re coding yourself such a class, you’ll most likely end up with a pretty similar one. So why bothering re-writing the wheel? Plus the fact the Game class ensures the workflow of your game.

The Game1 class comes with two fields initialized:

GraphicsDeviceManager graphics: manages what is called the “graphical context”. More accurately, it allows you to setup the graphics card states (i.e. screen resolution, vertical synchronization, anti-aliasing, etc.) and to get information about the hardware capabilities;
SpriteBatch spriteBatch: provides services for 2D drawings. This will be the most important object covered by this tutorial.

Initializing and drawing 2D graphics

We will now take a look at how one can import 2D graphics and display it. You will need some game assets in order to continue. I’ve prepared a bundle with everything you need to follow this tutorial: grab it there.

Now take a look at the file named texture1.bmp. It is a simple image with 2D graphics. Notice that there are many single graphic entities inside the picture. An individual graphical entity is called a sprite and if an image contains many sprites, we’re in front of a sprite sheet.

Other terms do exist to describe sprites and sprite sheets. Like tiles and tile sets. If you have already toyed with some “RPG maker”, you should be familiar with their meanings. Like a sprite sheet, a tile set is an image containing several tiles, a tile being an independent rectangle of your image. To the difference with sprites, tiles inside a tile set are usually the same size, forming a regular grid. You may have noticed that tiles can be disposed side by side to form complex graphics, like a puzzle, using several times the same tile. This technique is commonly used in 2D games (RPG, side-scroller…) and was historically used because of the lack of memory of the 8/16bit systems.

Let’s import the texture: right click on your Content project, create a new folder named “Textures”, and add the existing texture1.bmp to this folder. It should now appear in your project. Right click on the texture1.bmp item and select “properties”, this will obviously show the asset properties. You’ll see a bunch of stuff, the one that is important for now is the “Asset Name” which should be set to “texture1”. This is the internal name of your asset, not its filename. XNA set a default name corresponding to the filename without its file extension, but you can freely change it. Keep in mind it has nothing to do with the filename.

Now, inside your Game1 class, as a class member, add a new member to host our texture. To this purpose, the Texture2D is intended manage your 2D texture (as you could have found out by yourself).

Texture2D myTexture;

We now need to code the actual loading of the asset, so go inside the LoadContent method and add the following line of code:

myTexture = Content.Load<Texture2D>(@"Textures/texture1");

The Content object is a default Game class member representing your Content project. Everything linked to your Content project should be accessed through the Content member. Its Load function is generic and will allow you to easily load any supported type of asset by specifying the wanted type to the Load<Type> template. To load an asset, just specify the desired type and the asset name (not its file name). If you try to load an unsupported type for the given asset, you’ll encounter an exception at runtime. The “@” before the asset name is a C# operator specifying that the special characters of the following string don’t need to be escaped. It is way more convenient to use it when dealing with asset locations since it will avoid you from doubling all the dashes (making your code more readable). Notice that you access assets as if they were files in the hierarchy of your Content project, but with assets names as their filename (this may be a bit puzzling at first glance).

Take a look at the content of the Draw method:

protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
 
            // TODO: Add your drawing code here
 
            base.Draw(gameTime);
        }

The first line cleans the entire buffer so that the whole screen is reset to a blue color (the infamous CornflowerBlue). The last line calls the Game base Draw method and should always be the last instruction of your Draw method. I will not cover this feature as we will not use inheritance and game components.

The SpriteBatch.Draw(…) method

To draw 2D graphics, the only thing you will need is the SpriteBatch.Draw(…) method. But beforehand, take a look at how the screen is addressed by XNA:

As you can see, the screen origin is in the upper left corner and goes positively to the opposite screen corner. This is a bit strange if you’re used to the Cartesian system. The unit is the pixel, meaning that (with default XNA screen resolution of 800x600) the X axis goes up to 800 and the Y one to 600. Textures are addressed the same way.

Here’s one the SpriteBatch.Draw(…) overload header:

SpriteBatch.Draw( Texture2D, // the texture to use for drawing Rectangle, // the rectangle where you want to draw on the screen (in screen coordinate) Rectangle, // the part of the texture you want to draw (in texture coordinate) Color); // the color hue of the drawing, Color.White will give a default hue

Now, considering our texture1, here’s an example call and the expected result:

spriteBatch.Begin();
            spriteBatch.Draw(
                myTexture,
                new Rectangle(10, 20, 50, 100),
                new Rectangle(0, 0, 50, 100),
                Color.White);
            spriteBatch.End();

The main difficulty in understanding 2D drawing is to understand the difference between source and destination rectangles. Have a look at the following illustration.

On the left, we have the texture containing the objects we’d like to draw, but we only want to draw a portion of that texture. The source rectangle defines this portion and must use the texture coordinates. Then, you define where on the screen you want that portion to be drawn by defining the destination rectangle (in screen coordinates). Note that the destination rectangle doesn’t have to be as wide/high as the source rectangle. Different sizes will result in stretched drawing.

SpriteBatch.Begin(…) / End()

You may notice that the SpriteBatch.Draw call is surrounded by two other methods, namely Begin and End. Begin Begin could mean “ok mister GPU, here’s what you’re going to draw and how you’re going to draw it”. It tells the GPU to draw what’s coming and the properties to apply, like the usage of AlphaBlend, the order in which the sprites are going to be drawn etc.

The End method tells to the GPU that the Draw calls are complete and that he can now draw everything with the properties it have been configured.

You have to know that the CPU will tell the GPU what to draw only when you call the End method. The result of this method is the transfer of the drawing primitives to the GPU and transferring data between the CPU and the GPU is very expensive. So try to put as many Draw calls as possible between the Begin and End statements, this will greatly improve your game performance by reducing transfers to the GPU. Using several Begin/End is mainly intended to use different drawing parameters or to ensure that some elements are drawn before/after other elements.

Coding a Pong clone in 5 minutes

You should now master the basics of XNA. Despite the title of this section, we’re not going to write a Pong clone in 5 minutes, but if you were confident in XNA, you should be able to do it.

Defining the basics

Ok, what do we need to make a Pong game?

Two playable bars (2 x Rectangle);
A ball (1 x Circle);
A tennis field;
A score display;
Motivated supporters.

Inside the assets package you should have already downloaded (if not so, grab it here), you should find the following files:

Objects.png: an image file containing the graphics for the two bars and the ball;
Grass.png: an image file, a grass texture;
Bounce.wav: a sound file for ball bounces;
Supporters.wav: a sound file for goals.

Add all of them to your Content project.

Let’s now define all those entities in our project, as Game1 class members.

// our pong entities
        Rectangle blueBar;
        Rectangle redBar;
        Rectangle ball; // since there’s no “circle” class in XNA, we’ll simulate it with a bounding rectangle box
 
        // our pong clone textures
        Texture2D grass;
        Texture2D spriteSheet;
 
        // our sound effects
        SoundEffect ballBounce;
        SoundEffect playerScored;

We now need to initialize our three Rectangle structures and we’ll do it in the (suspense…) Initilize method:

protected override void Initialize()
        {
            // initializing our entities
            blueBar = new Rectangle(
                32, // x coordinate of the upper left corner of our rectangle
                GraphicsDevice.Viewport.Bounds.Height / 2 - 64, // y coordinate of the upper left corner
                32, // its width
                128); // and its height
            redBar = new Rectangle(
                GraphicsDevice.Viewport.Bounds.Width - 64, // x coordinate of the upper left corner of our rectangle
                GraphicsDevice.Viewport.Bounds.Height / 2 - 64, // y coordinate of the upper left corner
                32, // its width
                128); // and its height
            ball = new Rectangle(
                GraphicsDevice.Viewport.Bounds.Width / 2 - 16, // x coordinate of the upper left corner of our rectangle
                GraphicsDevice.Viewport.Bounds.Height / 2 - 16, // y coordinate of the upper left corner
                32, // its width
                32); // and its height
 
            base.Initialize();
        }

Explanation:

We want our bars to be 32x128 pixels and be placed left and right to the screen and perfectly centered. Defining a Rectangle consist of four parameter: the x coordinate of the upper left corner (in screen coordinate), the y coordinate of the upper left corner, the width of the rectangle (32) and its height (128).

Noticed this kind of math?

GraphicsDevice.Viewport.Bounds.Height / 2 – 64

This is how we vertically center our bars. GraphicsDevice.Viewport.Bounds is a Rectangle provided by XNA that will always represent the actual bounds of the screen. If the resolution of your game is 800x600, the bounds will be Rectangle(0, 0, 800, 600). So if we want to center something, we just have to consider the half of the screen, minus the half of the rectangle we’d like to be centered (or else only its upper left corner will be centered).

If you understood all this, you shouldn’t have difficulties understanding our ball definition. We’d like our ball to have a 32 pixels diameter so we bound it with a 32x32 Rectangle (since no circle class exists in XNA, up to you write one).

Let’s now load the assets we’ve defined earlier, so go to the LoadContent method. The following code should be straightforward if you read the introduction of this article:

protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
 
            // load our textures from the Content Pipeline
            grass = Content.Load<Texture2D>(@"Textures/Grass");
            spriteSheet = Content.Load<Texture2D>(@"Textures/Objects");
 
            // load our sound effects from the Content Pipeline
            ballBounce = Content.Load<SoundEffect>(@"Sounds/Bounce");
            playerScored = Content.Load<SoundEffect>(@"Sounds/Supporters");
        }

Drawing the scene

At last, we will draw the entire scene but beforehand, I’ll introduce to you a simple problem.

The painter’s problem: even if you never heard about it, you should be familiar to it. When a painter would like to drawn a landscape on the background and a house in front of it, it has to first complete the background and then paint the house over it. If he did the house first, he would encounter problems detailing the background at the house’s edges. Graphics API pretty much the same way but are more restrictive: everything that is drawn will recover what’s already drawn if it overlaps. So you have to draw graphics according to their distance from the camera.

Currently, what I said is not completely true since there’s some hardware magic called the Z-buffer which sorts everything out even if you draw everything in a random order. But the Z-buffer has been designed for 3D purposes and when dealing with 2D graphics, we’re no more working with Z coordinate so we have to sort this ourselves.

XNA offers mechanisms to sort 2D graphics via the SpriteSortMode argument of the SpriteBatch.Draw method but it is cleaner to draw things in the right order and to tell XNA to draw directly (SpriteSortMode.Immediate) because: 1) your code will be much more readable 2) it will be faster at execution.

Let’s draw our background first:

protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue); // clear all the screen with a blue color
 
            // draw the grass background
            spriteBatch.Begin();
            spriteBatch.Draw(
                grass, // use the grass texture
                GraphicsDevice.Viewport.Bounds, // stretch the texture to the whole screen
                // GraphicsDevice.Viewport.Bounds is Rectangle corresponding to the actual viewport (meaning the entire screen no matter the resolution), only available as of XNA 4.0 CTP
                Color.White);
            spriteBatch.End();

What’s new here? We’re using the Viewport.Bounds as our destination Rectangle, why? Do you remember that this Rectangle always represent the whole screen resolution? We’re just telling the Draw method to stretch the entire grass texture to the entire screen. And we’re done with our background. At this state, if you try to run the game (by pressing F5 to debug it), it should display our nice grass tennis field.

What comes after the background? The bars and the ball should be on the same plane. We can draw all of them at the same time since there’s no risk that they overlap but, wait… all the assets of those entities are in the same single texture. Once again, do you remember the usage of “source rectangle”? (Check the introduction if the answer is no). Before drawing our elements we need to define a source rectangle for each of them to access individual portion of the texture. Look at what’s inside the texture and how it is placed:

The following three source rectangles should be easy to understand (define them as Game1 class members):

// source rectangles of our graphics
        Rectangle blueSrcRect = new Rectangle( // blue bar src rectangle
            0, // upper left corner x-coordinate of the blue bar inside the spriteSheet
            0, // upper left corner y-coordinate
            32, // width
            128); // height
        Rectangle redSrcRect = new Rectangle( // red bar src rectangle
            32, // upper left corner x-coordinate of the red bar inside the spriteSheet
            0,
            32,
            128);
        Rectangle ballSrcRect = new Rectangle( // ball src rectangle
            64, // upper left corner x-coordinate of the ball inside the spriteSheet
            0,
            32,
            32);

We now have everything up to draw the remaining elements. Here’s what comes after our backgrounds drawing:

// draw the entities (bars and ball)
            spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend); // setup alpha blend to support transparency
            // draw the red bar
            spriteBatch.Draw(
                spriteSheet, // use the sprites texture
                redBar, // the rectangle where to draw the bar on the screen
                redSrcRect, // the source rectangle of the bar inside the sprite sheet
                Color.White);
            // draw the blue bar
            spriteBatch.Draw(
                spriteSheet,
                blueBar,
                blueSrcRect,
                Color.White);
            // draw the ball
            spriteBatch.Draw(
                spriteSheet,
                ball,
                ballSrcRect,
                Color.White);
            spriteBatch.End();

Press F5, and see that our game almost look like it is finished. There’s still all the gameplay to implement but our graphics are setup and we’re now free to toy with the gameplay.

Coding the gameplay

Handling the inputs

Now that we’re done with the Draw method, we’ll take a look at the Update method, so go at the corresponding line of code, we’re going to examine its default content:

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) // if the Back gamepad button is pressed
        this.Exit(); // exit our game

The GamePad class allows getting the current state of an Xbox 360 gamepad, being plugged to a PC or to your 360. Its GetState(PlayerIndex) method returns the GamePadState of the player corresponding to the given PlayerIndex.

A GamePadState object has a Buttons member, listing every up-down buttons and their state (A, B, Y, X, RB, LB, Back, Start, and Buttons on Sticks). If you want to know if a button is pressed, just compare a button to a ButtonState. Buttons of the directional pad works the same way and their states are stored in the DPad member of a GamePadState. The other inputs of a gamepad are different, they’re continuous (Sticks’ X & Y axes and Triggers) so you can’t compare them to a ButtonState since they are floating point values. When in default position, those controls have 0.0f value. Triggers go up to 1.0f when fully pressed and the axes range from -1.0f up to 1.0f depending the direction of the axes. (X = 1.0f and Y = -1.0f would mean that the stick is in the lower right corner).

Getting the keyboard state works pretty much the same way. Let’s add a keyboard control to the default code:

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || // if the Back gamepad button is pressed
                Keyboard.GetState().IsKeyDown(Keys.Escape)) // or if the Escape key is down
                this.Exit(); // exit our game

Keyboard.GetState() should be simple to understand now. But what is this IsKeyDown method? Unlike a GamePadState, KeyboardState don’t hold directly fields with keys’ states, you have to ask for a state with the IsKeyDown / IsKeyUp methods. Actually, GamePadState has a similar mechanism and propose the IsButtonDown / IsButtonUp methods.

Moving the bars

Our bars are represented by the redBar and blueBar rectangles, so if we want them to move, when need to modify their Y position (in a Pong game, bars only move along the Y axis). We will use the keyboard as our main input method, up to you to add handle two different gamepads.

// handling keyboard inputs
            if (Keyboard.GetState().IsKeyDown(Keys.E)) // E key down ?
                blueBar.Y -= 10; // move the blue bar up
            else if (Keyboard.GetState().IsKeyDown(Keys.D)) // D key down ?
                blueBar.Y += 10; // move the blue bar down
            if (Keyboard.GetState().IsKeyDown(Keys.Up)) // Up key down ?
                redBar.Y -= 10; // move the red bar up
            else if (Keyboard.GetState().IsKeyDown(Keys.Down)) // Down key down ?
                redBar.Y += 10; // move the red bar down

Quite simply isn’t it? If you launch the game and try to move the bars (with the E/D and Up/Down keys) you’ll notice that the bar can go behind the screen. We don’t want that behavior since they should stop at screen borders.

// limit the bars movement to the screen bounds
            if (redBar.Y < 0) // upper bound
                redBar.Y = 0; // limit
            if (blueBar.Y < 0)
                blueBar.Y = 0;
            if (redBar.Y + redBar.Height > GraphicsDevice.Viewport.Bounds.Height)
                redBar.Y = GraphicsDevice.Viewport.Bounds.Height - redBar.Height;
            if (blueBar.Y + blueBar.Height > GraphicsDevice.Viewport.Bounds.Height)
                blueBar.Y = GraphicsDevice.Viewport.Bounds.Height - blueBar.Height;

Now the bars don’t move outside the screen. The only trick resides in the handling of the lower bound: don’t forget to consider the bar height (the Y coordinates being the one of the upper left corner).

Ball’s motion

In order to make the ball moving, we need something to represent its velocity. Using a 2D vector seems to be the way to go. Fortunately, XNA already have everything at your disposal. Here we define a 2D vector (Vector2) for our ball velocity (as a Game1 class member):

// ball speed
        Vector2 ballVelocity = Vector2.Zero;

And back in the Update method, we can now make our ball move by adding its velocity to its current position:

// move the ball
            ball.X += (int)ballVelocity.X;
            ball.Y += (int)ballVelocity.Y;

But, our ball isn’t really moving yet. Notice that we initialized the velocity to zero speed. We need to set a positive speed somewhere so the gameplay can begin. We will do this by adding a separate method we can re-use to re-initialize the ball every time we need it (when players score):

private void InitBall()
        {
            int speed = 5; // default velocity
            Random rand = new Random();
 
            // randomize the ball orientation
            switch (rand.Next(4))
            {
                case 0: ballVelocity.X = speed; ballVelocity.Y = speed; break;
                case 1: ballVelocity.X = -speed; ballVelocity.Y = speed; break;
                case 2: ballVelocity.X = speed; ballVelocity.Y = -speed; break;
                case 3: ballVelocity.X = -speed; ballVelocity.Y = -speed; break;
            }
 
            // initialize the ball to the center of the screen
            ball.X = GraphicsDevice.Viewport.Bounds.Width / 2 - ball.Width / 2;
            ball.Y = GraphicsDevice.Viewport.Bounds.Height / 2 - ball.Height / 2;
        }

We have a default velocity defined and a random number generator to add some unpredictability to the ball direction. In a switch statement, we make the ball go randomly in one of the four diagonal. Then, we set the ball’s position to the center of the screen, and the gameplay shall begin.

We can now call our newly created method to initialize the game. Back in the Update method:

// handling ball initialization
            if (Keyboard.GetState().IsKeyDown(Keys.Space))
                InitBall();

This code means that every time we press the space bar, the ball is reset. Meaning that even during the gameplay, one can re-init the ball. That’s not a correct behavior but we don’t care since we’re aiming a playable game, not a polished one ;-). Keep in mind that this is for educational purpose.

Worlds collide

If you tried to run the project, you’ll see that the ball is not bouncing on screen bounds. In the Update method, we add the required code:

// collision handling
            if (ball.Y < 0 || // if the ball reach the upper bound of the screen
                ball.Y + ball.Height > GraphicsDevice.Viewport.Bounds.Height) // or the lower one
            {
                ballVelocity.Y = -ballVelocity.Y; // make if bounce by inverting the Y velocity
            }

This is similar to the way we managed the bars’ movement, with the particularity that instead of blocking the movement, we invert the Y velocity so the ball bounce.

We also need to manage the collision with the bars. It is a little bit different, since we’re going to check for Rectangle to Rectangle collisions. To this purpose, XNA is making our life a lot easier since the Rectangle class has a very useful method to test if two Rectangle are colliding:

if (ball.Intersects(redBar) || // if the ball collide with blue bar
                ball.Intersects(blueBar)) // or the red one
            {
                ballVelocity.X = -ballVelocity.X; // make if bounce by inverting the X velocity
            }

Very simple: we just check if the ball (which is a Rectangle) is colliding with either one of the bars, and invert the X velocity to make it bounce.

Here we are! We have a fully playable gameplay. The game only need some polish and it is almost ready for huge commercial success (if we were in the 70’s by the way…).

Scoring

To add some competition, we will handle a simple score counter and display. We’ll use two more Game1 class members to manage the scores:

// scores
        int blueScore = 0;
        int redScore = 0;

We need to detect if the ball goes behind a bar in order to increment the corresponding score. We’ll do it in the Update method:

// score handling
            if (ball.X < 0) // red scores
            {
                redScore++;
                InitBall(); // re-init the ball
            }
            else if (ball.X + ball.Width > GraphicsDevice.Viewport.Bounds.Width) // blue scores
            {
                blueScore++;
                InitBall(); // re-init the ball
            }

Same math as before to check screen bounds. When the ball goes behind the left or right bound, a player just scored and we re-initialize the ball.

Displaying the score involves to draw some text. Drawing text with graphics API is a bit problematic, text fonts are not ready-to-be-drawn graphics and their structure is not suitable with how graphics cards operate. Prior to use a font, it has to be processed or converted to a suitable asset. Some tools allow you to do so by generating a sprite sheet containing one sprite per character in the font. I let you imagine how boring it is to write a helper class able to seamlessly use this sprite sheet. Graphics API like SDL or OpenGL don’t do this out-of-the-box but some useful libraries exist.

XNA has the feature to handle fonts easily. Let’s have a look at it. We need to add a special type of asset to our Content project: right on the Content project, add a new file, select the Sprite Font item and name it “ScoreFont.spritefont”. An XML file should be showing up after you added it. This file will hold the properties of the font we want to use: the font name, its size, its type (bold, italic…) and other not-so-important stuff. We want the score to be displayed with big readable font, so change the size to 18 and the type to “Bold” (case sensitive!):

<Size>18</Size>
…
<Style>Bold</Style>

Like any asset, we have to define the corresponding variable and to load it. As a Game1 member:

SpriteFont font;

And then in the LoadContent method:

// load our score font
            font = Content.Load<SpriteFont>(@"ScoreFont");

All we have to do now is to draw the text, the same way if it was 2D graphics with the SpriteBatch (in the Draw method, after the grass drawing so it isn’t underneath):

// draw the score
            spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
            spriteBatch.DrawString( // draw our score string
                font, // our score font
                blueScore.ToString() + " - " + redScore.ToString(), // building the string
                new Vector2( // text position
                    GraphicsDevice.Viewport.Bounds.Width / 2 - 25, // half the screen and a little to the left
                    10.0f),
                Color.Yellow); // yellow text
            spriteBatch.End();

Note that drawing text needs a dedicated method, DrawString. It takes as argument the font, the string to display, a 2D vector for the screen coordinate where we want the text to be displayed (remind that it consider the upper left corner of the text box), and finally, the color of the text.

Sound blasting

Last but not least, the sound. We already have our two SoundEffect ready (ballBounce & playerScored). Since XNA 3.0, playing a sound is simple as pie: SoundEffect.Play(). All we have to do, is to call the play method when the ball bounce and when a player scores. Here’s the code update:

// collision handling
            if (ball.Y < 0 || // if the ball reach the upper bound of the screen
                ball.Y + ball.Height > GraphicsDevice.Viewport.Bounds.Height) // or the lower one
            {
                ballVelocity.Y = -ballVelocity.Y; // make if bounce by inverting the Y velocity
                ballBounce.Play(); // bounce sound
            }
 
            if (ball.Intersects(redBar) || // if the ball collide with blue bar
                ball.Intersects(blueBar)) // or the red one
            {
                ballVelocity.X = -ballVelocity.X; // make if bounce by inverting the X velocity
                ballBounce.Play(); // bounce sound
            }
 
            // score handling
            if (ball.X < 0) // red scores
            {
                redScore++;
                playerScored.Play(); // hurray !
                InitBall(); // re-init the ball
            }
            else if (ball.X + ball.Width > GraphicsDevice.Viewport.Bounds.Width) // blue scores
            {
                blueScore++;
                playerScored.Play(); // hurray !
                InitBall(); // re-init the ball
            }

Intermediary conclusion

Our Windows game is now complete! At least what I wanted to expose. Our prototype is far from being perfect, but one of the goals of this article is to give you opportunity to express yourself in the polishing of the game. You may copy/pasted everything but now, it’s up to you to enhance it. Here’s a list of thing you may consider doing:

Enhance collision handling: our model is very rough and far from a true physical model, plus the fact that the bar-to-ball collision is poorly managed (if the ball collide with another border than the front one, you can expect strange behaviors);
Enhance the beginning of the game: in a classic Pong, the ball should go randomly in any direction while our game only throw the ball with 45° angles (more randomness is needed!); when a player score, the ball should be thrown at the him next (and not randomly);
Add a menu;
Handle the end of the game: our prototype doesn’t stop the score;
Add an artificial intelligence: pretty easy, just apply a movement to the enemy’s bar if the ball is up or down the middle of the bar;
…

Porting our Pong clone to the Xbox 360 and testing it

To run a game on the Xbox 360, we need to setup a new project, a 360 one. When it comes to port an existing project, XNA allow you to copy your current project and to create a port with one click. Right click on your Windows project, and select “Create a Copy of Project for Xbox 360”. Tadam, you’ve successfully ported your game. Note that this “copy” isn’t really a copy: all the source files are the one from the original project, they’re just shared between all the ports. This means that if you modify the Windows project, the changes will be applied to the Xbox 360 version as well. You’ll see that you know have two Game1.cs files (one in the Windows project, and one in the 360 one) but actually, there’s only one file, shared. The fact that it appears in all the projects is a little bit misleading.

Running the game on your 360

Please note that the XNA 4.0 CTP “April Refresh” doesn’t allow yet deploying games on an Xbox 360. The following process is valid as of XNA 3.1 and should remain the same with the final XNA 4.0 version. I’ll update the article once it is released.

Prior to be able to run code on your Xbox 360, you need your Xbox to be on the same LAN as your computer (I suppose you know how to setup a network) and a Creators Club license. This license is mandatory to publish games on the Xbox and Windows Phone marketplaces and to debug code on the gaming console. This is because Microsoft host and promote your games on the marketplaces and it is a good way to regulate the community by letting in only serious people (plus the fact that Microsoft want to stay in control of what’s being executed on the 360, for obvious security reasons). The license has a yearly cost of $99 and can be acquired from the Xbox Live marketplace or from xbox.com.

There’s a possibility to get a free trial license enabling you to debug code on your console, but not to sell games (as well as not having access to premium content and forums on the creators club). You may find a trial license via a MSDN AA account, if you’re a student/teacher and if your school has subscribed to the program. If you don’t know if your school can get you a MSDN AA account, go ask the person in charge of your school’s computers. Another way to a trial license is to (still) be student and subscribe to the Microsoft’s Dreamspark program.

Once you have successfully registered your license, you can start downloading the XNA launcher to your 360. You’ll find on the games marketplace along with the Indie Games. It should be named “XNA Game Studio Connect”. This program will only run if you’re connected to the Xbox Live and if the connected GamerTag has a valid creators club license. Run it and go back to Visual Studio.

You now have to link your PC to your Xbox 360. This is to ensure that only trusted computer can deploy trusted code to a trusted console. In Visual Studio, click on the “Add a New Device”.

Choose to add an Xbox 360 console. Visual Studio should now ask you to enter a keycode, this code should be displayed on your 360 if you’ve successfully started the XNA launcher. Enter the code and validate. If everything went ok, you’re now ready to go and you won’t need to do this step anymore. If not, check out your network setup.

When you’re ready, select the Xbox 360 as the target of your application.

And run the Xbox 360 project. You now have your game running on your TV! You can also debug the game like if it was running on the computer by putting some break points etc. Remote debugging works pretty darn well.

We now have a problem: we didn’t handle the gamepad so the game isn’t playable. The only thing you can do, is to press the “back” button to exit the game. The update is simple to achieve:

// handling keyboard and gamepad inputs
            if (Keyboard.GetState().IsKeyDown(Keys.E) // E key down ?
                || GamePad.GetState(PlayerIndex.One).DPad.Up == ButtonState.Pressed)
                blueBar.Y -= 10; // move the blue bar up
            else if (Keyboard.GetState().IsKeyDown(Keys.D) // D key down ?
                || GamePad.GetState(PlayerIndex.One).DPad.Down == ButtonState.Pressed)
                blueBar.Y += 10; // move the blue bar down
            if (Keyboard.GetState().IsKeyDown(Keys.Up) // Up key down ?
                || GamePad.GetState(PlayerIndex.Two).DPad.Up == ButtonState.Pressed)
                redBar.Y -= 10; // move the red bar up
            else if (Keyboard.GetState().IsKeyDown(Keys.Down) // Down key down ?
                || GamePad.GetState(PlayerIndex.Two).DPad.Down == ButtonState.Pressed)
                redBar.Y += 10; // move the red bar down

// handling ball initialization
            if (Keyboard.GetState().IsKeyDown(Keys.Space)
                || GamePad.GetState(PlayerIndex.One).Buttons.Start == ButtonState.Pressed)
                InitBall();

Here it is, we can now play with two gamepad and our Xbox 360 port is complete!

Serious business: porting our game to Windows Phone 7

Before we proceed, another note about the CTP. Copying an existing project to a Windows Phone one has a bug: manifest files are missing. If you want to correct this, read the release notes. The second and last problem this article may encounter, is that the CTP emulator doesn’t feature automatic screen orientation. This means that our pong game can only run in portrait mode which looks strange for a pong clone. These problems will be fixed in the final XNA 4 version.

As we did for the Xbox 360 port, create copy for Windows Phone of your project. If you try to run the game in the emulator, you’ll most likely end up with a cornflower blue screen. This means our game has incompatible graphics properties. To fix this, we need to switch to Windows Phone 7 specific parameters, namely a screen resolution of 480x800 and a refresh rate of 30 frames per second. But we don’t want to apply these changes to our other ports. Fortunately, there’s a way to write code that we only be considered by a specific port thanks to preprocessor statements. The changes will be applied in the Game1 constructor:

public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
 
#if WINDOWS_PHONE
            // Frame rate is 30 fps by default for Windows Phone.
            TargetElapsedTime = TimeSpan.FromTicks(333333);
 
            // Pre-autoscale settings.
            graphics.PreferredBackBufferWidth = 480;
            graphics.PreferredBackBufferHeight = 800;
            graphics.IsFullScreen = true;
#endif
        }

Note that we also set the game to run in full screen mode. On Windows Phone 7, it means that the battery status will not show up over the game. If it wasn’t in full screen, the battery status would hide our score display.

Try to run the game and look at our super portrait pong.

You may notice that the inputs don’t work. Some Windows Phone 7 devices come with a physical keyboard, but since some are not, XNA designer choose to not support keyboards as an input method so that games are experienced the same way on all Windows Phone 7 devices. The only method we have at our disposal if the multi-touch screen.

First, we need to design some sort of interaction scheme: to move the blue bar, we’ll consider the upper left and lower left corner of the screen as our up and down buttons; the opposite corners will be used to move the red bar; to initialize the game, we’ll consider a tap on the middle of the screen. The following code comes right after the inputs handling in the Update method:

#if WINDOWS_PHONE
            // for each detected touch
            TouchCollection touchCollection = TouchPanel.GetState();
            foreach (TouchLocation touchLocation in touchCollection)
            {
                // upper left corner touche detection
                if (touchLocation.Position.X < 50
                    && touchLocation.Position.Y < 50)
                    blueBar.Y -= 10; // move the blue bar up
                // lower left corner
                else if (touchLocation.Position.X < 50
                    && touchLocation.Position.Y > 750)
                    blueBar.Y += 10; // move the blue bar down
 
                // upper right corner touche detection
                if (touchLocation.Position.X > 430
                    && touchLocation.Position.Y < 50)
                    redBar.Y -= 10; // move the red bar up
                // lower right corner
                else if (touchLocation.Position.X > 430
                    && touchLocation.Position.Y > 750)
                    redBar.Y += 10; // move the red bar down
 
                // ball touch
                if (touchLocation.Position.X < 260
                    && touchLocation.Position.X > 220
                    && touchLocation.Position.Y < 420
                    && touchLocation.Position.Y > 380)
                    InitBall();
            }
#endif

This is a quite rough technique. If you’d like to better use the touch screen, try to use the TryGetPreviousPosition method of a TouchLocation to follow a finger along the left or right corner of the screen and make the bar follow the gesture.

By the way, our Pong clone is now fully playable on Windows Phone 7! And that’s it.

Conclusion

Your Pong clone is now (almost) finished and working on three different platforms. There are still many aspects to fine tune, but this up to you now. You should have the background to do basic 2D games.

Hopefully, you noticed that I’m referring to the MSDN online documentation as much as possible. This was a secret message telling you that reading the documentation can save you much time and avoid you some useless search on the internet. If you still have problems, search on the creators club forum, or expose your problem on the forum.

I hope that you enjoyed following this tutorial and don’t hesitate to give me some feedback about it.

Will my children be zombies ?

Mister Helmut — Thu, 27 May 2010 10:17:00 +0100

Like most computer freaks, I started playing and programming quite soon, at the age of 7 I presume. My taller sister received an Amstrad CPC, a quite ironical fact since she was spending her time gossiping and using it as an hype decoration to her desk. After having rolled myself on the floor crying a few times, I successfully got parental rights over the Amstrad. Till the age of 16, I was considered by my family as a strange introverted kid. I don’t remember myself to have been such a scary kid, I had just interests different than playing G.I. Joe and watching TV all the day long, I even was a talkative kid to my parents but the fact that I had different hobbies compared to “standard” kids made me strange.

Where things start puzzling me: recently, I was in my local multimedia store looking for the latest Jeff Lindsay (Dexter anyone?) when I stumbled upon something strange and very moody by the video games shelves. Two games were playable, namely Dante’s Inferno and New Super Mario Bros Wii. Three kids were roaming around, maybe 6 to 8 years old. I’d like to remind the audience that Dante’s is a 18+ rated game, fully playable just next to a Mario game. This sounded to me like a “spot the differences” game. Well, the two oldest of them were playing Dante’s Inferno, while the third, a freaky-6-years-old-pale-kid, was staring at Dante slashing anything to ham sacks, mouth and eyes full open, like if he saw a one mile tall free Lego pyramid. I just stopped myself and scratched my head. Not that this was not common, but this particular kid freaked me out. I had to pass behind him, so I excused myself so he would let me pass. He didn’t moved. He didn’t even noticed me. So I poked him on the shoulder. He didn’t moved… I’ve lifted him and dropped him a little bit off so I could pass. He didn’t even noticed I lifted him… I think that if I wasn’t carefully lifting him, I could have obstructed his vision and he may have patched a leather cross upon his chest and started attacking me.

It may looks like an isolated case, but a few days later, I had a very bad “déjà-vu” in the very same settings. Kids, same store, God of War 3 VS Sega All Star Racing, a scary-blond-kid and two other kids extravagantly happy to put to the light centaurs’ stomach. If this happens quite often, does it mean it is a common fact by today standards? I hope not. Was I such a kid? Obviously not. Most importantly, will my children be zombie gamers? Gotta prepare myself for the outbreak… I don’t feel like it is a normal situation and I’m a little bit afraid about it: I grew up with games and by actual culture evolution, I expect my kids to do so to. I don’t know what could make a kid so scary: being exposed to games with parent looking over them or not being exposed at all. For instance, the kid of a friend grew up playing Quake 3 with his father on LAN, fraging at the age of 6 and he’s a totally normal teenager now. I wonder if those strange kids grew up with games and which one.

Anyway, I don’t agree with the fact that big stores are demoing 18+ games next to a Mario game.

Writing a simple javascript RSS parser

Mister Helmut — Wed, 05 May 2010 12:36:00 +0100

When I started to think about coding a personal news portal (daily-xna.com), I had one main requirement: it had to be lightweight in order to run smoothly on my not-so-powerfull webserver. A common solution would have been to use Magpie RSS, a simple and well featured PHP RSS parser but it wouldn't meet my requirement as I'd like my portal to display more than 10 RSS feeds. More importantly, I needed fast page loading, which is not possible with magpie (parsing 10 rss takes way too much time). I prefered to use an asynchronous loading so that the main page loads quickly and doesn't use many server resources. I went with client side scripting, namely javascript, so that the actual parsing occurs in the client browser. But coding a RSS parser implies to download remote XML files. This isn't possible via javascript since it doesn't allow the usage of distant files. There's still ways to achieve it.

This blogpost describes how I coded my asynchronous RSS parser thanks to a file proxy and caching system.

First of, as I said, javascript doesn't allow file downloading from another domain name than the one the script is running on. Why? For obvious security reasons (it is fairly easy to replace a javascript code since everything runs inside the client browser, one could download malicious files). There is still ways to feed javascript with distant file, mainly by tricking it via a proxy.

Coding a file proxy

I used PHP to code a file proxy with caching features to reduce remote file access. To this purpose, I used the CURL PHP extension (which need to be activated, not all webhosters support it, so check your phpinfo() beforehand). CURL allows to build HTTP request in order to download distant files. I added a caching system to limit XML file downloading (my news feeds are rarely updated more than once per hour). Here's the code:

<?php
// filename: proxycache.php
 
// parameters
$timeout = 3600; // time before a cached file gets refreshed (in sec)
$folder = './cache/'; // directory where cache files belong (the directory must already exist)
 
$url = $_GET['url']; // the URL of the file to download is given to the script via the "url" GET variable and encoded (i.e. proxycache.php?url=http%3A%2F%2Fexample.com%2Frss.xml)
$hash = md5($url); // we create a hash so that our feed is uniquely identified
$file = $folder.$hash; // we define a unique filename for the cache system so that feeds have a unique cache file
 
$xml = ''; // the futur RSS
 
// first of, we check the date of the last modification of the cached file
if (file_exists($file) && time() - filemtime($file) < $timeout) // if the elapsed time is smaller than the defined cache lifespan
{
	// we read the cached file and put it into $xml
	if ($handle = fopen($file, 'r'))
	{
		//ok
		$xml = fread($handle, filesize($file));
		fclose($handle);
	}
	else
	{
		// cannot open cache for reading
		exit('cannot open cache for reading');
	}
}
else // if the cache is timed out
{
	// we open a distant connexion to download the file
	$session = curl_init($url);
	curl_setopt($session, CURLOPT_HEADER, false);
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
	$xml = curl_exec($session);
	curl_close($session);
 
	// once we have successfuly downloaded the RSS file, we update the cache
	if ($handle = fopen($file, 'w'))
	{
		//ok
		fwrite($handle, $xml);
		fclose($handle);
	}
	else
	{
		// cannot open cache for updating
		exit('cannot open cache for updating');
	}
}
 
// we'r done, let's display the XML file
header('Content-Type: text/xml');
echo $xml;
 
?>

RSS parsing with jQuery

Now that we have a file proxy, we can start using client side scripting. I needed something to parse XML files easily. I went with the jQuery library which also enabled me to parse the feeds asynchronously so that the HTML page doesn't have to wait the processing of all the feed before being displayed.

<head><!-- put the javascript code in the head -->
 
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		// our main parsing function
		// ContentDiv: the id of the div where the feed should be displayed
		// FeedURL: the encoded URL of the news feed
		function get_rss_feed(ContentDiv, FeedURL) {
			// settings
			var limit = 10; // number of element to display (some feeds are already truncated, so do not be suprised if some of them are shorter than your limit)
 
			var regSpace = new RegExp("[ ]", "g"); // a regexp to split spaces for RSS date parsing
			var regA10 = new RegExp("[T-]", "g"); // a regexp to split "T" and "-" for Atom date parsing
			var tabMonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
 
			// get the current date
			var date = new Date();
			var month = tabMonth[date.getMonth()];
			var day = date.getDate();
 
			// use the JQuery get function to grab the URL via our proxy, put the results into an argument for parsing when the feed retrieval is complete
			$.get('proxycache.php?url=' + FeedURL, function(d) {
 
				// grab the post title
				var feedTitle = $(d).find('title:first').text();
				// grab the post URL
				var feedLink = $(d).find('link:first').text();
				// create our output HTML (you may edit it to fit your own design)
				var html = "<a href=" + feedLink + "><span class=\"title\">" + feedTitle + "</span></a>";
				// limiting iteration (used to limit the number of item displayed)
				var loop = 1;
 
				// find each <item> in the file and parse it
				var items = $(d).find('item'); // rss
				if (items.length == 0) // if an <item> isn't found, we may be facing an Atom file instead of a RSS one
					items = $(d).find('entry'); // so we look for an <entry>
 
				$(items).each(function() { // items iteration
					if (loop == limit) // if we reach our number of item to display, we end the iteration
						return false;
 
					// grab the current item
					var $item = $(this);
					// grab the post title
					var title = $item.find('title').text();
					// grab the post's URL
					var link = $item.find('link').text();
					// do not forget the pubdate
					var pubDate = $item.find('pubDate');
					var fullDate = '';
 
					if (pubDate.length == 0) { // no pubdate? looks like we hitted an Atom entry
						pubDate = $item.find('a10\\:updated');
						if (pubDate.length == 0) // there's different Atom syntax, if no <a10:updated> is found, we look for <updated>
							pubDate = $item.find('updated');
						// parsing the date, grabbing the day and the month
						pubDate = pubDate.text().split(regA10);
						pubDate[1] = tabMonth[pubDate[1] - 1];
						fullDate = pubDate[1] + ' ' + pubDate[2];
					}
					else { // RSS date format
						pubDate = pubDate.text().split(regSpace);
						fullDate = pubDate[2] + ' ' + pubDate[1]; // grab day and month
					}
					// if the item has been published today, make the date stronger
					if (pubDate[2] == month && pubDate[1] == day) {
						fullDate = "<b>" + fullDate + "<\/b>";
					}
					// build our final output
					html += "<a href=\"" + link + "\" target=\"_blank\">" + fullDate + " - " + title + "<\/a><br\/>";
 
					loop++;
				});
 
				// clear the destination div
				$(ContentDiv).empty();
				// populate the div
				$(ContentDiv).append($(html));
			});
		};
 
		// general function to display all the feeds
		function get_all_feeds() {
			get_rss_feed('#feed1', 'http%3A%2F%2Fexample.com%2Frss.xml');
			get_rss_feed('#feed2', 'http%3A%2F%2Fexample2.com%2Frss.xmll');
			// and so on if you'd like more feeds (just add a new div)
		};
		//]]>
	</script>
</head>
 
<body onload="get_all_feeds();">
	<div id="feed1">Loading...</div>
	<div id="feed2">Loading...</div>

We're done! This RSS parser may not be perfect but it perfectly fits my needs. Consider my code to belong to the public domain, so feel free it use, redistrube etc. Please tell me if you're using it.

Introducing “The Daily XNA”

Mister Helmut — Wed, 28 Apr 2010 15:43:00 +0100

I would like to introduce my personal portal to you: The Daily XNA.

The story behind it: I'm a RSS/Atom feeds fan and my usage of the internet, my various interests and other things imply me to have my web browser crawling under bookmark entries, including cascading RSS. I'm also a mobile user and use about 2 to 4 different devices to access the internet during a single day... So I had to organize my bookmark.

The Daily XNA is my solution to XNA links organization. I tried to make it an “one-stop” page to have a quick look at the most relevant news feeds. Why not making myself an iGoogle page? Because I wanted something lightweight, quicker to access (remenber I often switch between devices) and more convenient to me. Since it is a public website, I thougth it may profit to people sharing an interest in XNA related news. Feel free to suggest me any change, feeds etc. and if you find it useful.

Amateur games: from the intention to the actual making of a game

Mister Helmut — Wed, 28 Apr 2010 14:32:00 +0100

As an hobbyist game developer, making a video game isn’t just to wake up during a vacation with “well, let’s make a game out of my free time” as a thought. Most amateur development projects are born from boredom, thinking that there’s no problem at releasing a finished project. Some managed to actually “ship” their game (lucky ones), but that represent maybe 1% of all the amateur projects. Many factors affect such development: starting new projects while the ongoing one isn’t finished, team issues, time, adding new features…

Here are my personal point of view on the states of mind you should avoid during an amateur project. Click the “read more” link for further reading.

The will is the key

There’s no secret in making a complete game, you’ll have to be motivated, for an extended time. Motivation isn’t an issue during the beginning of a project: it’s still fresh and motivating until you reach a satisfying milestone which is usually dependent on your coding skills (some are satisfied with a sprite moving around, others with an almost working game editor…). From then on, things may get complicated. You suddenly lower the priority of your project (since you’ve reached a satisfactory step) and notice that you have less free time (vacations over?) or that you’d like to do something else alongside your project. Stay focused, this is a turning point and there will be more of them. The key is to stay motivated, manage your time, impose yourself regular coding sessions during a week and most importantly: don’t start another project! One of the problems of geeky programmers, is to have too much motivation for too much project ideas at the same time. Stick to the one you’ve just started and remind yourself why you started the project every time your motivation drops a bit.

Are you good enough at programming?

If you are good enough at programming, when starting to think about making a game, you should have a clear technical vision of where you’re heading, instantly knowing what you’re going to code and in which order just by thinking to make a video game. If no concrete diagram appears in your head, you’d better reconsider making a game and go back learning, maybe making small educative games.

Keep it simple and don’t change your original design

When starting an amateur project, you’ll most probably begin with a simple idea. Then, you’ll think about how to done it and after some readings you’ll think that it would be nice to feature this and that. Once you’ve started the actual coding, you’ll most likely add features to your design as the project comes along (new top-notch effects, more content, complex gameplay…), ultimately reaching a complicated design not feasible in reasonable time. The more you add time consuming features, the more there are chances you’ll face a motivation drop because it lowers the coming of a release and the frequency of satisfactory milestones.

Stick to a simple design. Try to define your design with a general single line like “top-down 2D racing game” or “fast paced shoot-them-up” and write it down as the title of your design paper. Then list the things you’ll need (e.g. a 2D engine, a particle system, an editor,…), keeping in mind your capabilities at doing the listed points. Your original design should fit on one page only. Don’t change your original design. You’ll most likely fail at releasing anything if you’re always changing/adding things. Keep your ideas for a potential “2.0” release or a future project. Be wise and think about finishing the project before anything else.

Release type

The release type or your project license has to be carefully chosen as it will condition many aspects of your project. Commercial release will close to you the doors of free-to-use-for-non-commercial-purpose game assets but it will allow you to invest a little bit, hoping to have a return on investments (but keep in mind that you’re project may commercially fail despite being good). There’s many scheme to adopt: pay-what-want, donation welcomed, fund the development with goodies or exclusive content… Some of them (essentially commercial ones) imply tedious administrative tasks before getting into it. You should think about the release type depending on the following two points.

Alone VS team

Most team based amateur projects will face troubles managing themselves to the point they may fail. First, try not to team up with strangers, more specifically internet strangers. Why? 1) Because you don’t know their motivation. 2) Because they are possibly at the other side of the Earth. 3) They’re less attached to your project than you, and may leave anytime. 4) Managing a virtual team is a real pain and need an almost professional organization (that’s not amateurish enough). 5) People will most certainly dislike other people in the team. 6) They may be not mature enough. Etc. If you want to team up with somebody, look among your friends, coworkers, or very good internet friends. To be simple: people you know well, trust, know their skills and share interests with. Don’t impose them YOUR game idea, instead, suggest a brainstorming and select something that motivate everybody for better group cohesion.

Working alone is usually nice: you work at your own pace, know where you’re heading, etc. But if you’re working alone, you'll have nobody to remind you to work on the project and unless you’re a talented genius in all the aspect of game making, you’ll get stuck at some point, the next section point.

Paying or not paying for assets?

If you’re working alone (or with programmers only), when it comes to game assets (graphics and music), unless you’re an artist, you’ll quickly need to rely on someone else. Let’s cut it short: free and talented artists are almost impossible to find. The reason is that the few artists interested in contributing to a video game are likely to already be part of an interesting/important project or to make profit out of the shortage of free-artists (or just because they're real professionals offering services to amateurs).

Now, think about it, do you really want to make a game to the point to invest in it? Even if you don’t plan to sell it? Wouldn’t you be proud of it if it has cool graphics and sounds? Consider the fact that hobbies generally cost money and that investing in a game project isn’t that different from investing in any other hobby. There’s a lot of community where you can find nice artists (newgrounds to name one). It’s a little bit more complicated to find 3D artists but many websites are selling models and textures. If you go with this scheme, prepare yourself to invest more than $100 (a complete soundtrack may cost more). If you’re planning to sell your game, you’re probably thinking that you can freely invest a considerable amount of money. Watch out: even if you consider your game to be great, it may not sell so well, maybe not sell at all (most amateur projects aren't profitable). Take a look at the other amateur projects’ numbers, compare them to your project and ask yourself if you’re still that much confident at hoping a decent return on investments.

As of non-commercial game, you’ll have way more opportunities, like using free for non-commercial use assets (like all the stuff on newgrounds). If you still need an artist, you may find one in some dedicated forums (xna, gamedev) but pay attention to how you’re going to present your project. The best you can do, is to finish entirely your game prototype (with dummy assets), showing that you’re very serious and motivated and that you have a well prepared plan at finalizing it. This is your best bet on attracting a real artist.

Another solution, if you’re not an artist and don’t want to “hire” someone for the graphics, is to go for an oldschool art direction, oldschool enough so you could do everything yourself and focus on the gameplay. If you polish everything well, you may end up with something atypical (Monaco is a recent example of polished oldschool game with innovative design).

Be clean

Don’t use assets or code you’re not allowed to: assets you didn’t asked for permission, assets you didn’t mentioned the author, assets you found on google without knowing if there’re licensed, free but not for commercial use assets while selling your game… Show you’re clean and you’ll get attention from anybody you may work with and much more.

You’re free to use any assets for prototyping purpose, but try to never show you’re progress using some of them (or at least, thanks the author) and do not let some of them in public releases.

Contribute to communities

Help others on community websites, try to be a valuable contributor. Creating a network will help you to get some help when you're facing difficulties and will also auto-promote your project. It is always interesting to get in touch with other people. Think about it as your karma.

Manage your communication

Have this in mind: most gamers don’t care about game development and focus on graphics, gameplay and content. So if you want to advertise your game, try to not be too techish about it and focus on gamers’ interests. Don’t spam forums with your project, stick to the natural web workflow: blog and/or twit about it and hope to get a nice natural webrank. Once your game is nearly complete, make videos, a dedicated website and try to get in touch with specialized websites, ask them for promotion or submit them press releases.

Welcome to Handcrafted-games!

Mister Helmut — Fri, 09 Apr 2010 11:31:00 +0100

Welcome to handcrafted-games.com, my personal blog.

Who am I?

My nickname is Mister Helmut, I am researcher in computer science and addicted to video games and development.

You may find more about me on the about page.

What to expect from this website?

XNA development, game industry and gamer thoughts related articles.