ZaBingo! Torque X Game Development Diary 3

Adding User Interface, Sound, and Effects

The game idea started on Sunday and was quickly put to paper and called out the major pieces of programming, such as game objects, components, services, and user interface. Using the new Starter Game 2D project template, the skeleton was born. The next day, the artwork was pulled together, the basic level was assembled using Torque X Builder 2D, and the main game services were coded.

Now, the fundamentals of the game were in place. Tiles drop into the game scene and player 1 or player 2 could buzz-in to claim them and drag them over their game card. At this point, there is no fancy graphics, no sounds, no menus, and no score. When the game started, it just jumps directly into the scene, so that repetitive testing and improving is more efficient and I could easily refine the core game.

The next day changed all that by turning this into a ‘real’ game with those missing pieces. This post describes the process of adding those missing pieces and closes out with a video of my in-house Alpha testing team.

1. Improving Graphics
2. Adding Sound
3. Adding Splashscreens and Menus
4. Adding Game Score
5. Testing and Improving

Improving Graphics

Since this is a puzzle game that is aimed at children (specifically mine), the graphics expectations are pretty low. It still needs to look interesting and children like bright colors. So, I’ve changed the colors to be more contrasting with a blue background, yellow tiles, and tan cards. I’ve also added some flare to the scene with grass leaves that appear on the bottom of the screen.

The game is also going to use a lot of dynamic text, such as a changing score and timer, and I don’t want to use the standard Ariel and Courier fonts that are built in. So, I’ve created sprite fonts. There are tools available for taking TrueType and OpenType fonts and converting them to bitmap fonts. The tool I use is on my Web site: SpriteFont Studio.

I used it to turn these font settings...



...into this sprite font texture.



Then, in Visual Studio, add the image file to the game’s Content project and set its properties to this:

Adding Sound

I always add the sound at the end of the game project. Mostly, because a game requires endless testing over and over and hearing the same sounds can drive me crazy. I could turn off the speakers, but I do want my other system sounds, such as email/IM notifications.

In XNA, the process starts with getting the sounds as .wav files. I fine tune, clip, add audio effects, and convert between formats using [url= http://audacity.sourceforge.net/]Audacity[/url] – it’s free and awesome.

With a .wav file in hand, we’re off to XACT, the XNA audio authoring tool that comes with XNA. You can find it in the Windows Start menu under XNA’s Tools folder. Create a Wave Bank “wavebank” and a Sound Bank “soundbank”. Then, drag your .wav files into the wavebank list. They will be colored red until you use them. Then, drag each sound from the wavebank into the soundbank (top) and then drag each sound from the soundbank list into the Cue list below. Lots of dragging, I know. But there’s good reason for it. You can make a lot of customizations along the way, including blending sounds, changing pitch and adding looping properites, and so on. Save the XACT project and .wav files to a new folder in the game project, called sounds (under the data folder in the Content project). Next, compile the sound project from witin XACT using File + Build from the main menu.



Next, in the Torque X game project, some changes need to be made:
1. Add the .xap project file just saved into the content project and set its build action to compile
2. Edit the TorqueSettings.xml file and replace <EnableAudio>true</EnableAudio> with:

<EnableAudio>true</EnableAudio>
  <AudioGlobalSettingsFile>datasoundsZaBingo.xgs</AudioGlobalSettingsFile>

The .xgs file name should match the .xap file name in the game project
3. Add the game code to load the wave/sound banks and playback sounds…
Add two fields to hold references to the banks

WaveBank _waveBank;
SoundBank _soundBank;

Add properties to make these banks easily accessible anywhere in the game’s code

public WaveBank GameWaveBank
{
    get { return _waveBank; }
}
public SoundBank GameSoundBank
{
    get { return _soundBank; }
}

In the game class BeginRun() load the wavebank and sound bank into class variables.

//load the sounds
_waveBank = new WaveBank(TorqueEngineComponent.Instance.SFXDevice, @"datasoundswavebank.xwb");
_soundBank = new SoundBank(TorqueEngineComponent.Instance.SFXDevice, @"datasoundssoundbank.xsb");

Playback a sound when you need it, in this case the “buzzer” Cue name.

GameSoundBank.GetCue("buzzer").Play();

Adding Splash Screens

Part of the terms of use of Torque X is displaying the splash screen for the engine and since I’m displaying a splash screen for them, I might as well display one for me too ;) So, I have code that shows one splash screen, then another. I create a new class that inherits from GUISplash and use its OnSplashFinished() callback decide what to do next.

You can download the code from here to see what it looks like.

In the game class, I immediately show the splash screens when the game begins, by adding the following to BeginRun().

//start by showing the GarageGames splash screen
GuiSplashScreen splashScreen = new GuiSplashScreen(@"dataimagesSplashGG");
GUICanvas.Instance.SetContentControl(splashScreen);

And then also add the callback methods to the game class.

public void OnFinishedLoadSplashGarageGames()
{
    //next show the studio splash screen
    GuiSplashScreen splashScreen = new GuiSplashScreen(@"dataimagesSplashEG");
    GUICanvas.Instance.SetContentControl(splashScreen);
}
public void OnFinishedLoadSplashStudio()
{
    //now load the main menu
    GuiMainMenu mainMenu = new GuiMainMenu();
    GUICanvas.Instance.SetContentControl(mainMenu);
}

As you can see, after showing the second splash screen a main menu is displayed.

Adding a Main Menu

A main menu is essentially just a bitmap with some input event handlers. I create a new class that inherits from GUIBitmap and has an input map. To start the game, one of the methods tied to the inputmap calls the well known method:
Game.Instance.SceneLoader.Load(@"datalevelslevelData.txscene"); .
You can either add your options text as GUIButton objects (that can highlight) or just bake them into the background texture. I often do both, with help text baked in and anything that needs to be highlighted as a button object.

You can download my basic menu class from here.

Adding Game Score

One very important lesson about Torque X GUI: if you change the canvas’ content control (to load a splash screen or menu) you loose your reference to the renderable sceneview. You either need to save a reference to the scene view first, or just create a new one. I always create a new one because I want to add GUI objects (such as score, target, etc) to the sceneview anyways.

Start by creating a class (mine is called GUIPlay) that inherits from GUISceneview. Minimally, that’s all you need to do. This gives you a renderable canvas for your game. You can now do anything you want with this scene view – add gui objects, override the Draw() method, override the Update() method, anything! I added a few items, most notably the score, as GUIText objects.
First declare the text and text-style objects at the top of your class.

GUITextStyle textStyleScore = new GUITextStyle();
 
        GUIText _playerScore1;
        GUIText _playerScore2;

Next, in the class constructor, create instances of the text and style objects and then set their properties, such as position and displayed text.

textStyleScore = new GUITextStyle();
textStyleScore.FontType = "dataimagesfont48";
textStyleScore.TextColor[0] = Color.Orange;
textStyleScore.SizeToText = false;
textStyleScore.Alignment = TextAlignment.JustifyCenter;
textStyleScore.PreserveAspectRatio = true;
 
_playerScore1 = new GUIText();
_playerScore1.Style = textStyleScore;
_playerScore1.Position = new Vector2(25, 25);
_playerScore1.Size = new Vector2(400, 120);
_playerScore1.Visible = true;
_playerScore1.Folder = this;
_playerScore1.Text = "Player1: 0";
 
_playerScore2 = new GUIText();
_playerScore2.Style = textStyleScore;
_playerScore2.Position = new Vector2(780, 25);
_playerScore2.Size = new Vector2(400, 120);
_playerScore2.Visible = true;
_playerScore2.Folder = this;
_playerScore2.Text = "Player2: 0";

I also overrided the OnRender() method so that I can keep the scores and timer updated. I keep the scores in the Game class and expose them with a public property.

public override void  OnRender(Vector2 offset, GarageGames.Torque.MathUtil.RectangleF updateRect)
{
    _playerScore1.Text = "Player1:  " + Game.Instance.Player0Score;
    _playerScore2.Text = "Player2:  " + Game.Instance.Player1Score;
  
     base.OnRender(offset, updateRect);
}

Now, point to the new GUIPlay sceneview by calling the following.

GuiPlay playGUI = new GuiPlay();
GUICanvas.Instance.SetContentControl(playGUI);

Testing and Improving

And now we have a game. Complete with solid repeatable game play, input that supports the standard Xbox 360 game controller and the Scene-It “Big Button Controller”, full game setup screens, in-game GUI, and sounds. Time to test this game out. Since this is a game for kids, I’ll use my own 8 and 6 year-old girls as guinea pigs and share their initial reactions and feedback. The test was conducted just before bedtime on the Xbox 360 using the Scene-It Big Button controllers.



Link to the testing video.

It looks like they enjoy it and have some ideas for improvement for version 2 of the game.

Conclusion

After a couple days, the game concept has evolved into a playable game – a tribute to the awesome power of Torque X, XNA, and the C# language. But it also took some discipline. It’s sooooo tempting to start off with the blingy graphics and cool sounds and elegant GUI. But you have to start with gameplay first. Once that is working and proven out in a prototype, then, all the rest can be quickly piled on. Even in this simple game, the classes I created for the core game play are similar, but not exactly what I first spelled out on paper. In the next and final post, I’ll share the process of getting this game on the Xbox, preparing it for game console consumption, submitting into a public Beta Play Test, and then release to the Xbox Live Community Games Marketplace. I’ll also share the sales results and burry a link to download the full game source code in the game credits of the final product.

Diary History

#3 Adding User Interface, Sound, and Effects
#2 Focus on Core Game Play
#1 Designing and Preparing the Game

John Kanalakis
www.envygames.com