What is a game loop

Many games require movement that is affected by constant changing factors. This often requires that movement to be adjusted on a regular basis. In arcade games, for example Bitbreaker, this action is required to happen many times each second. A game loop is the function that fires this repeatable action on a regular basis.

Game loop types

I tried the following types of game loops while developing my Windows Phone App.

• Looping a storyboard
• Composition Target Rendering
• Dispatch Timer

Looping a storyboard

This is a very simple way to create a game loop.

1. Create a storyboard either in the XAML or in your code behind file.
2. Set the storyboards duration to the amount of time you want delayed between each action.
3. Set the storyboard to repeat forever.
4. Set up a Storyboard.Completed Event handler to fire a function every time your storyboard plays out: Storyboard.Completed += new EventHandler(Storyboard_Completed);
5. Place your game logic inside the function called on completed.

CompositionTarget.Rendering

This is a good way to ensure your game loop is called every possible chance it can as it matches your games frame rate.

1. Add CompositionTarget.Rendering to your event handlers: CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
2. Place your game logic inside the function called

Dispatch Timer

This is good way to control your game loop repeating at a consistent rate.

1. Add the new reference: using System.Windows.Threading;
2. Declare Dispatch Timer as a member: DispatcherTimer timer = new DispatcherTimer();
3. Set the interval value to control the time delay between each action: timer.Interval = TimeSpan.FromMilliseconds(25);
4. Set up a Tick event handler on our DispatchTimer: timer.Tick += new EventHandler(timer_Tick);
5. Place your game logic inside the function called on each Tick.
6. Start the DispatchTimer: timer.Start();

The results

After trying all 3 methods on a Windows Phone, I found the DispatchTimer to be the best suited for my Windows Phone game. So while many people think Windows Phones are more suited for business users and the odd chore like comparing buildings insurance online, these results show that it’s more than suitable for gaming. I needed to get the fastest frame rate but also keep the movement in my game consistent. The dispatch timer achieved this very well.

I found using the looping storyboard approach gave me a low frame rate as it required communicating with the XAML each time, even if there were no visible parts moving.

I use the CompositionTarget.Rendering route often when creating games for the common desktop PC, this is due to it giving a very fast loop. However, when developing for the Windows Phone, we are using a much slower processor and can’t guarantee the frame rate will stay consistent. For Bitbreaker I required the ball to keep a consistent speed, using this approach would make the ball speed up and slow down when asking the game to perform different tasks of varying difficulty.

Click here to view Bitbreaker on the Marketplace (you will need Zune installed).

As this was my first attempt at producing a Mobile app, I knew I was in for some interesting learning curves. Because of this I decided that my first app should be based on the well established bat and ball style game.

Game features

The launch version consists of the following features:

• 1 free trial level
• 36 additional levels in the full game
• 5 power-up blocks that effect game play
• 6 types of blocks to hit varying in strength
• 1 bat that deflects the ball lower at the edges
• An exponential multiplier point system requiring skill to master
• 3 tier achievement system for each level
• Fast level restart system for people trying to hit those top achievements

Level designs

The level designs range from quirky retro designs honoring the game industries history to complex and tough mazes. The user is required to complete a level before unlocking the next one to play.

Multiplier bonus system

I wanted to encourage players to try and trap the ball in mazes instead of just bashing away brick by brick. To help this I implemented a multiplier point system. Each time the player destroys a block they get an additional multiplier point that multiplies the score you get for destroying the next block. When the ball hits the bat then the multiplier bonus resets back to zero. This means in order to score high points the player needs to trap the ball so that it destroys several blocks before hitting the bat again. Some later complex levels allow the user to score massive points if played correctly

Obstacles overcome

During my progress I had several obstacles present themselves that I had to work around.

The first one, that presented itself early on, was having to code for a mobile processor. Having created Silverlight experiences for desktop PCs over the last 4 years has somewhat spoiled me over the years, meaning I have not had to be too careful about how many times I check values within the XAML. I found with the Windows Phone platform that taking my usual approach to creating a game left me with an unimpressive framerate when testing on the device. I soon learnt my lesson and started storing data in arrays and variables, this meant my app only had to trawl the XAML tree when it absolutely needed to.

The second obstacle was getting my app to load quickly on the test device. I found that my initial approach, running a for loop to create 81 block controls, took nearly 40 seconds to load. Two of the rules set out by Microsoft in order to have your app approved are:

Your app must load within 20 seconds

Upon restarting your app from a tombstone state it must take under 5 seconds to load

I found that asking the app to create and then draw so many controls upfront was a big task. To get around this I placed the controls into the XAML and set their visibility to collapsed so that the app did not have to redraw them until I asked it to later on.

The last problem was associated with the type of game I was creating. As I wanted to include blocks that were solid (could not be destroyed) I had the possibility that the ball could get stuck in an indefinite loop. To get around this I implemented a piece of code that checks to see if the ball has been trapped for a prolonged set of time and then adjust the balls trajectory slightly. This process is then repeated until the ball registers a hit with the bat.

Future updates

I have several plans for updates to Bitbreaker. They include some of the following:

• Plenty of more stages and levels
• Invisible blocks
• Moving blocks
• New bat types to unlock each holding different characteristics
• New Ball types to unlock each holding different characteristics
• Multi-ball
• A time trial mode that selects random levels

One way to optimize your Silverlight application is to check that it is not having to render objects that are not being used or seen. If a storyboard is animating an object then that object is redrawn each frame even if it is out of view or behind another object. By stopping these animations or collapsing them until we need them will help keep down the processor requirements.

By using the ‘EnableRedrawRegions‘ property we can see every part of the screen that is being redrawn each frame.

Below is an example of an animation and the ability to move an object on top to hide it.

The ‘how to’ bit

To turn on the EnableRedrawRegions property we need to add the following code in the HTML page hosting the Silverlight:

<param name=“enableRedrawRegions” value=“true” />

Add it after the ‘object‘ tag with the other default ‘param‘ tags created by Visual Studio.

Blend 3 allows you to embed fonts, but unfortunately if you publish your work online you are technically distributing the font. This is illegal and could potentially land you in trouble.

However, there is a way around this, if you encrypt the font so that it is not usable then you are arguably not distributing it any more. This process is known as Obfuscation. It is important, however, to point out that you still need a license or permission to use a non-standard font in your work.

How to Obfuscate a font

First open up Microsoft Word (2007+), create a new document and type every character you will need in the font you require. Save the file as an XPS document and close Microsoft Word.

Locate the saved XPS document on your hardrive and rename the file type from ‘.xps‘ to ‘.zip‘. Now extract the contents of the .zip and find the file called ‘Resources‘, inside this folder should be a document with the file type ‘.odttf‘. Add this file into your Silverlight Solution and set its ‘Build Action‘ to ‘Resource‘.

Now the final part, in the XAML, locate your textBlock and set the ‘FontFamily‘ property to the .odttf file in your solution. Directly after this needs to be a ‘#‘ and then the exact name of how the font was displayed in the selection field in Microsoft Word. This allows you to have multiple fonts in one .odttf file.

The XAML should look similar to the below.

<TextBlock x:Name="textBlock" FontFamily="./Fonts/20FD640A-6B8C-569B-6B08-6F60BA7CC534.odttf#Segoe UI" FontSize="12" Foreground="Black" Text="text content goes here" />

If you are using multiple instances of elements then it may make more sense to think about making these elements User Controls. User Controls allow you to place objects into a container that can be re-used again and again, even multiple times at once. Every User Control has its own XAML file and its own code file.

To make a selection of elements on stage into a User Control it is really simple. First select all the objects you want to include in your new User Control, then right click anywhere on the selected objects. From the drop down options select ‘Make into UserControl…‘. This creates a new XAML file containing the objects you selected with it’s own code behind file too.

Each time you want to add a new instance of your User Control you will need to add the following XAML in…

<local:UserControlName Margin=”0,0,0,0″/>

Data Binding allows us to take the value from one object and apply it to another without needing to know a single line of code.

In this tutorial we are going to control the font size of a textBlock through the interaction of a Slider control. To start off we need to draw a Slider control and a textBlock on our stage as seen below.

This will bring up the Create Data Binding window. First select the ‘Element Property‘ tab (the middle tab). Now click on the object we want to effect (the textBlock), this will bring up a list of values that can be binded. We want to effect the font size so scroll down and select ‘FontSize‘. Finally we need to make sure the ‘Binding direction‘ is set to ‘TwoWay‘, expand the bottom area to change this setting.

Click ok to save these settings.

Now all that is left to do is to set the minimum and maximum values of our slider, these values will represent the font size range of our textBlock. To change these values go to the ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. We should end up with the following functionality.

When styling up a control, Expression Blend allows you to apply that style to other controls. This firstly allows file sizes to be kept  down as the style is only written in the XAML once. Secondly this allows you to retain consistency across multiple controls set to the same style, when making changes to one, all controls set to that style will update automatically.

Below is an example of four standard button controls.

Now I am going to apply a visual style to the first button. You can read more about applying a style to the button control in this previous post. See how our first button is now visually unique compared to the other three.

Now to apply the same style to the following three buttons is really easy. To apply a style, we right click the button we want to change and select ‘Edit Template‘ and then ‘Apply Resource‘. We now see a list to choose from of styles we have created that are available for that control.

We can repeat this process to each of the buttons to apply this style to all four buttons.

Notice that the style applies to the contents inside the control. The Button control has a ‘Content Presenter‘ inside the control that uses Data Binding (we will touch on Data Binding later in this tutorial series) to pull through the text content, styling and color from the controls top level. By keeping this ‘Content Presenter‘ inside the styling we can keep the text on each button unique.

We can also make our style unrestricted to a fixed size, this allows us to use the same style for different sized buttons as shown below.

Styles can be applied to all control inside Silverlight.

The launch of Silverlight 3 brought with it the introduction of Behaviors. Behaviors are pieces of functionality that can be applied to objects within Expression Blend without the need for knowing any code at all.

Expression Blend has the following Behaviors ready for use:

• ChangePropertyAction - Change an objects property
• ControlStoryboardAction - Tell a storyboard to play/pause / stop
• FluidMoveBehavior - Changes an objects easing
• GoToStateAction - Changes an objects state
• HyperlinkAction - Calls a hyperlink
• MouseDragElementBehavior - Allows an item to be dragged
• PlaySoundAction - Plays an audio element
• RemoveElementAction - removes an object from the stage

To apply a Behavior, first click on the last icon in the main tool bar called ‘Assets‘, then drag your chosen Behavior onto the object you want to activate the Behavior.

Once your Behavior has been placed you will see it indented below that object in the ‘Object and Timeline‘ tab. To set the properties, click on the Behavior and go to the ‘Properties‘ tab. You will see two sections, the ‘Trigger‘ section allows you to set the source target and the event trigger type (mouse enter, mouse click etc). The ‘Common Properties‘ section allows you to set what happens when the Behavior is played.

In this previous post we used the ‘ControlStoryboardAction‘ to start an animation off automatically when the page is loaded.

To find additional Behaviors to use check out the Expression Gallery and CodePlex.

Silverlight ships with lots of built in controls ready for use with default skins applied. All of these controls are skinable following similar steps found here with the ‘Button’ control.

To access the full list of controls available to you in Blend access the last icon in the main tool bar called ‘Assets‘. This will open up a list of available assets of which one group is labled ‘Controls‘, open up this drop down to see the full list of available controls.

With Blend 3 and the Silverlight SDK installed I have a list of over 100 controls to look through. Here is a list of ten useful controls I have picked out, ideal for beginner users:

CheckBox - Works like standard check boxes

To access even more controls go visit the Expression Gallery and CodePlex to see whats available.

Silverlight has 9 mouse icons built in and ready for use. They are:

• Arrow - Standard mouse pointer
• Eraser - Eraser tool similar to most paint applications
• Hand - Hand icon used most for button roll-overs
• IBeam - Used to indicate Text entry is required
• None - Hides the mouse pointer
• SizeNS - Used to show something can be dragged up/down
• SizeWE - Used to show something can be dragged left/right
• Stylus - Used to show a ‘dot’ icon for use with Stylus pens
• Wait - Shows the Windows loading/thinking animation

See the 9 icons in action below…

The’ how to’ bit

To change the mouse Icon when the user rolls over a button, first make sure you have the button in question selected. Then go to the ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. Change the drop down next to ‘Cursor‘ to choose which mouse icon will be used. Once the user rolls off the button the mouse icon will revert back to the arrow icon.