Say hello to Simon Squared, my 3.5 day old WP7 Game

So I finished my “Build a Windows Phone 7 Game in 3 days” challenge, and in just 3.5 days! Only to find, when I went to the competition website a few hours ago, that they’ve moved the goal posts: the deadline is no longer this coming Sunday, but February 28th 2011.

So, if I can convince myself that it doesn’t go against the spirit of my own challenge, I can now spend a bit more time polishing the game, and adding things like sound effects, tombstoning, leaderboards, etc.

But what does it actually do?

I’ve called it Simon Squared, in homage to Simon, an electronic game popular in the 1980s. I’m too young to remember it, but it was a game that flashed coloured lights in sequence, and you had to remember the sequence and play it back. Simon Squared shows you a tiled shape, and then explodes it before your eyes, twisting the pieces one by one. You have to remember the moves it has made, then put the pieces back together.

Since this is Windows Phone 7, you do this by touching the pieces, dragging left and right, up or down to flip them horizontally or vertically, or dragging diagonally to rotate them. Once they’re in the correct orientation, you double tab them to send them sliding back into place in the puzzle.

Here’s a short video to demonstrate¹:

What do you think? Does it look like 3 1/2 days work?

---

1. I was hoping to have a longer, more polished video, but Windows Live Movie Maker kept blue-screening my computer when I tried to render it.

Day 3.5 of my “Build a Windows Phone 7 game in 3 days” Challenge

Red Gate’s Windows Phone 7 App competition ends in three days time. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1, Day 2 and Day 3. Sundown of Day 3 found the game to hard for me to play. This was the result of an extra half day I found scrunched up in my coat pocket:

09:30 Trying to find ways to make the game easier!

09:56 Figured out how to draw translucent, alpha-blended models: set BasicEffect.Alpha to something less than 1, and remember to set GraphicsDevice.BlendState = BlendState.AlphaBlend before rendering. Oh – and objects have to be drawn in reverse order – those at the back first. Now the original puzzle is shown along with exploded pieces – I think I am able to play it now!

10:06 Added a little bump to the front of the tile model, so that you can tell when shapes have been flipped on their backs:

10:55 Implemented a more mathematical way of checking if a shape is back in its home orientation: Take the Vector (1,1) and apply the same sequence of X,Y, and Z rotations to it as to the shape, and check if it still equals (1,1).

11:00 Trying to figure out an algorithm for increasing puzzle hardness gradually.

11:34 Started using SpriteBatch to draw text on top of my game, but 3D objects started rendering weirdly. As ever though, Sean Hargreaves had the answer: SpriteBatch changes several of the GraphicsDevice properties which need to be reset the next time round before drawing the 3D stuff.

12:18 Got a scoring system working, with the score being drawn up on screen

13:19 Added a help button, and a help screen on application startup. Now all I need is a logo, and I think I’m done.

Day 3 of my “Build a Windows Phone 7 game in 3 days” Challenge

The deadline for Red Gate’s Windows Phone 7 App competition is three days away. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1 and Day 2. This was Day 3:

8:50 Further work on the Csv ContentImporter to make it do more of the work in processing the shape data, saving some time in the game.

9:20 Having sorted out the skin of the game, and given it some rudimentary muscles, I now have to introduce mind, or at least, a Brain Stem: I need game logic.

11:12 Made some changes to my content importer, and it no longer works. Now to learn about debugging the content pipeline! Turns out to be pretty easy, thanks to this. Problem is fixed moments later.

11:15 Actually, it’s not. Pressure is starting to get to me. Finding myself guessing at fixes and hitting F5 to see if it works, then repeating the cycle when it doesn’t. Calm down!

13:00 Got first bit of game logic working – deciding whether a shape is orientated correctly for snapping back to the home position.

13:54 Decided to try using radial layout to arrange the exploded shapes on screen –. Now how do I do that? Found an F.A.Q on polar coordinates, and a few minutes later:

14:40 Roped Vinod into creating some levels for the games. He’s taken my Excel level editor spreadsheet to the next level by adding VBA code to generate puzzles automatically.

17:30 Got something looking gamish. Puzzle now knows when it has been completed, and animates off screen. New puzzle animates on. Only problem is, it’s too hard for me to play! Can’t fix that now though – off to the company Christmas dinner.

22:30 First feedback on the game from a friend who volunteered for testing: “The idea is cool, …, very cool!”

I wonder if I can borrow a bit of extra time?

Day 2 of my “3 days to Build a Windows Phone 7 Game” challenge

The deadline for Red Gate’s Windows Phone 7 App competition is four days away. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1. This was Day 2:

10:05 – Caught the lurgy. Not feeling well enough to concentrate on real work, and family poorly too. But I might be able to get a bit of the game done.

10:22 - starting work on better gesture processing. Decided on horizontal drag to flip shape in Y axis, vertical to flip in X axis, and diagonal drag to rotate left or right around the Z axis. Double tap will be used to snap the shape into its final position.

10:37 - my little boy wants to use the dining room table to do some colouring, so I head upstairs to sit on the bed. Optical mouse works surprisingly well resting on the duvet.

11:30 - Completed work on gesture recognition. To get overall drag movement, need to store the first FreeDrag sample, and the last, then process them both when a DragCompleted sample is read.

11:35 - Now to work on Hit Testing my shapes when the user touches them. Apparently the term to google for is "3D Picking". XNA helps out here with the ViewPort.Unproject method. There’s also a sample showing how it's done.

14:40 - Hit testing working nicely now. I was impressed with how quickly it came together following the sample (and borrowing some of its code!).

15:13 - Found out how to change the colour of the material: set the DiffuseColor property of BasicEffect on each mesh in the model before rendering. Rather weirdly, DiffuseColor is a Vector3, but if you want to work with something more normal you can do

effect.DiffuseColor = new Color(255, 0, 0).ToVector3();

15:31 - Got shapes rendering with tiles of different colours:

17:10 Built a “level editor” for defining puzzles. Uses Excel to create a CSV which is then imported using a custom XNA ContentImporter. My content importer converts the lines of CSV data in Level objects, Level being a class I defined. The XNA Content Pipeline then takes care of serializing this into binary form and packaging it with my game. Within the game I can just do

var levels = Content.Load<Level[]>("Levels\\Levels");

and XNA will automatically deserialize it. I have to say, I'm very impressed with the XNA content pipeline, and how easy it is to extend it.

Build a Windows Phone Game in 3 days – Day 1

After an unpromising start, Day 1 of my 3 day Build a Windows Phone 7 game challenge ended very satisfactorily. Here's how it unfolded:

9:16 - installed WP7 tools, downloaded XNA book, setup a BitBucket Mercurial repository, and created a Solution. We're off!

9:32 - trying to render my first 3D shape - found a great roadmap to XNA tutorials.

10:07 - Got a 3D spaceship animating on screen following this tutorial

11:12 - thrashing around a bit trying to find a modelling tool to build my own 3D shape. Tried TrueSpace and Autodesk's SoftImage Mod Tool. They all have such arcane and obtuse interfaces - might have spotted a gap in the market here! Found a tutorial on CodeProject about using Blender to create XNA models.

12:10 - at last, my own model bouncing around on screen. Created it using Wings3D - which isn't exactly an intuitive tool, but (to pay it a huge compliment) has the least difficult to use interface of any of the tools I've tried this morning. The results: Move over Electronic Arts!

14:16 - started researching how to extract the Mesh from my tile Model, so that I can combine them into Models representing shapes consisting of multiple tiles. Instead found a great insight from Sean Hargreaves: Models are archetypes: you only need one of each kind, and you can then draw it at multiple places with different transformations (I might have called them 3D Stencils, but I think "stencil" has a different meaning in the 3D community). With this guidance, created a Tile class with a reference to the Tile model, plus an Offset vector which can be used to generate a Translate transform to position the Model correctly when it is rendered on behalf of that Tile.

15:16– figured out how to transform shapes consisting of multiple tiles so that they move as a unit. It all boils down to Matrix multiplication. To position a particular Tile, first multiply together the matrices representing its own translations within the shape, then multiply the result by the matrix representing the transforms of the shape as a whole.  Or as one post in the forums very usefully put it:

Matrix Order = Scale x Local Translation x Local Rotation x World Translation x World Rotation

Isn’t Maths magic? Now look what I’ve got:

16:09 – Thanks to the Input.Touch namespace I now have the shape responding to gestures. It will flip and spin at the swipe of a finger! Only trouble is, when the gesture is a Drag, the shape flips, then keeps on flipping. Turns out the problem is that in each call to my Update method I’m only reading one gesture from TouchPanel.ReadGesture, and the other multiple gestures that are generated by that single swipe get queued up -  only to be interpreted by my Update method in subsequent calls as further gestures. From the examples in Charles Petzold’s book I learn that in each call to the Update method I should ReadGesture until IsGestureAvailable returns false

17:05 – feeling rather chuffed. Just implemented a simple Storyboard class that allows me to schedule a series of animations, then play them back at the appropriate point as time progresses. I’ve now got multiple Shapes doing a little dance on screen.

Can I build a Windows Phone 7 game in 3 days?

Red Gate Software launched a competition three weeks ago: three prizes of $10,000 to be won for the best Windows Phone 7 application, as judged by panels of developers. Now I’ve always had a hankering to write a game, particularly one involving 3D graphics. Microsoft made me hanker some more when they released the XNA framework a few years back. And, would you believe it, you can use the XNA framework to write 3D games for the Windows Phone 7.

Now it just so happens that I have 3 unplanned days in my schedule between tomorrow morning¹ and the competition deadline on December 19th. And my colleague Vinod has had an idea for a memory game with a twist.

Taking stock, what do we have?

• An incentive. Provided by Red Gate ü
• The Tools. Cheers, Microsoft ü
• The Windows Phone 7 Programming bible. Thanks, Charles Petzold ü
• A germ of an idea. Nice one, Vinod ü
• And 24 hours clear in the calendar …

So, what do you think? Can I learn the XNA framework, and produce an award winning game in just three days? There’s only one way to find out.

On my marks … Get Set … Go!

---

1. Yes, I am writing this at 1 o’clock in the morning. I couldn’t sleep for excitement. Sad, am I not?