Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It

I recently presented a Visual Studio Live Orlando session entitled Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It.  It was an introductory course for all developers on how to get started with Windows Phone Game development. This included coding our own little game, lots of free sample projects, and tips and tricks I’ve learned a long the way.

I have posted all of the slides and demo projects in the usual My Stuff section on this blog .

Here is a rundown of what you will find inside the zip folder once you download it.

1-XNA-Dave-TrekGame

This was the first piece of code we wrote together and shows the basics of the XNA game loop as well as some simple touch and sound effects.  The Content Project consisted of two images: space.png, a large starfield and ship.png. Both of these freely redistributable pieces of artwork were grabbed using Bing Image Search.  We also edited ship.png a bit to make it more lifelike using the free tool Paint.Net.

The project was a good first exposure and I took us through each of the common sections in Game1.cs.

Class Variables

Here is where we created the Textures to hold our ship and space field, the vector to track its position and the SoundEffect and its related Instance to add some effects later on. .

             Texture2D shipTexture;
            Texture2D backgroundTexture;

            Vector2 shipPosition;

            SoundEffect redAlert;
            SoundEffectInstance redAlertInstance;

Game1

We used the hardware scalar available in XNA to correctly scale our spaceship for the smaller screen and set the game to run in FullScreen mode.  This is one of the common mistakes made by developers first out since running in a dark background will make you think you have a black border when in fact you have the system tray across the top of your game.  Testing in both light and dark themes, always a great idea in any phone app, will show the system tray sitting on top.

             //Backbuffer - Dave
            graphics.PreferredBackBufferWidth = 480;
            graphics.PreferredBackBufferHeight = 800;
            graphics.IsFullScreen = true;  

LoadContent

This method is where we load all of the content we will be manipulating in our game.  In this case we are setting both the space and ship texture and then putting the ship directly in the middle of the phone screen.  We are also loading our first sound effect – redAlert into memory and getting an instance of it to detect the state of the sound (playing, stopped, etc).

             // load the sprite's texture
            shipTexture = Content.Load<Texture2D>("ship");

            // load the background texture
            backgroundTexture = Content.Load<Texture2D>("space");

            // center the sprite on screen
            Viewport viewport = graphics.GraphicsDevice.Viewport;
            shipPosition = new Vector2(
                (viewport.Width - shipTexture.Width) / 2,
                (viewport.Height - shipTexture.Height) / 2);

            redAlert = Content.Load<SoundEffect>("RedAlert");
            redAlertInstance = redAlert.CreateInstance();  

Update

Now we are in our main Game Loop. From here on out we are going to Update/Draw, Update/Draw, 30 times a second (although Windows Phone is capable of going up to 60 fps we used the default framerate of 30fps that is included in the project template).  Each update we check to see if there have been any touches from the user and if there have we take the first one.  Once we get the location of this first touch we do some math to move the space ship to the center of the touch point.  We then call PlayRedAlert.

             TouchCollection touchCollection = TouchPanel.GetState();
            if (touchCollection.Count > 0)
            {
                TouchLocation t1 = touchCollection[0];

                double x = t1.Position.X - (shipPosition.X + (shipTexture.Width / 2));
                double y = t1.Position.Y - (shipPosition.Y + (shipTexture.Height / 2));
                double speed = Math.Sqrt(x * x + y * y) / 20;

                double angle = (float)Math.Atan2(y, x);

                shipPosition.X += (float)(speed * Math.Cos(angle));
                shipPosition.Y += (float)(speed * Math.Sin(angle));

                PlayRedAlert();

            }   

PlayRedAlert

This method will check the current state of the Redalert sound and if it is not playing it will go ahead and fire the Play event.  If the sound is still playing (from a recent touch event) it will not override and simply ignore the new touch.  If we did not do this sounds would continue to play with every touch and overlap into a loud mess of incoherent noise.  We also have the ability to mess around with Pitch and Pan (move the sound between different ears on the headphones).  In this case we raised the pitch by 50% and had a Red Alert sound that sounded very much like a Chipmunk.

             if (redAlertInstance.State != SoundState.Playing)
            {
                redAlertInstance.Play();
                redAlertInstance.Pan = 0f;
                redAlertInstance.Volume = 1f;
                //redAlertInstance.Pitch=0.5f;

            }

Draw

The final method took all of our textures and drew them to the screen.  Remember that order in the batch is important.  If we wanted to background to be draw on top of the spaceship we would only need to move it before the ship in the spriteBatch order.

             GraphicsDevice.Clear(Color.White);

            spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);

            spriteBatch.Draw(backgroundTexture, Vector2.Zero, Color.White);

            spriteBatch.Draw(shipTexture, shipPosition, Color.White);

            spriteBatch.End();  

2-XNA-Gestures

The

The second project, NinaAcademy , is a freely available starter kit on AppHub.  NinjaAcademy is a great example of how to use the built in Gestures Windows Phone supports.  All of this is done through the TouchPanel and we simply tell it which gestures we want to listen for.  For example if we wanted to watch for Flicks we would use something like this:

         TouchPanel.EnabledGestures = GestureType.Flick;

We can also listen for multiple gestures such as Flick and Tap we would use the following:

          TouchPanel.EnabledGestures = GestureType.Flick|GestureType.Tap;

3-XNA-Accel

I then took us through the feely available Codeplex project, Mango Teapot.  Mango Teapot, besides being a great example of using 3d Models and the new Silverlight on XNA capabilities, utilizes the Accelerometer to manipulate the phone.  By clicking on the gravity button below the teapot we start to read data from the accelerometer inside the phone.

OnUpdate

 if (useGravity)
            {
                if (useMotion)
                {
                    teapot.World = Matrix.CreateFromYawPitchRoll(0, MathHelper.PiOver2, 0) * motion.CurrentValue.Attitude.RotationMatrix;
                }
                else if (useAccelerometer)
                {
                    Vector3 original = new Vector3(0f, 0f, 1f);
                    Vector3 current = new Vector3(accelSensor.CurrentValue.Acceleration.X, accelSensor.CurrentValue.Acceleration.Z, -accelSensor.CurrentValue.Acceleration.Y);

If you recall using the accelerometer in Windows Phone is like any other sensor (Microsoft.Devices.Sensors) we simply add a reference to the namespace, declare the object and then call the start method when we want to begin collecting data.  We then tell it which eventhandler we want to use every time a new the sensor detects a new reading (the user moved the phone in some way).  You will get data in all three dimensions: X, Y and Z  in the –1 to + 1 range.  If the user moves the device too hard you may see numbers returned as high as –3 to +3.  This is a trick you can use if you want a “shake to reset level” type of functionality just look for consistent readings in the 2s to 3s and you know the user is shaking the device.

Since the release of the Windows Phone 7.5 Developer Tools  developers have been treated to accelerometer simulation right through the emulator.  Simply click the advanced tools button on the top right of the main emulator window and you will see a screen like the above.  Then drag the orange dot around and you will move the simulated phone in three dimensions.  You can also jump to specific orientations as well as use recorded data.

4-XNA-SL-Paddle

The final project we walked through was Paddle Battle.  Paddle Battle is another free sample publically available on the App Hub. We covered the new Silverlight and XNA Application template, what differed from normal XNA, and how to create a menu system using all Silverlight UIElements in your XNA game.  Paddle Battle is a simple example that includes a main menu for enabling sounds and starting the game. 

Making Money

I ended the session with a tour of App Hub and Microsoft PubCenter.  Most of the strategies I covered around making money can be found in my Real World Windows Phone Development Series here. These included how to get your app featured in the marketplace, free vs. paid, trial download ratios and what Microsoft is doing to help you be successful (contests, content, and free training, etc.).

I hope if you’ve been on the fence about writing a game for Windows Phone these sample projects will be a good starting place.  Don’t forget if you live in the United States and are local to NY, NJ, or PA I would love to hear from you!