Pew Pew Chronicles: Ready, Steady, Go!

This is part five of a series of blog posts about a crazy journey that eventually led to Pew Pew becoming one of the first apps in Microsoft’s App Store. On a long flight from Seattle to Omaha in December 2011 I learned about Metro and got immediately hooked.  After installing Windows 8 Developer Preview and playing with Metro I discovered that I could even cross-compile Pew Pew to Metro. But there was a problem: this game was “crappy”, not “charmingly crummy” and unsuitable for submission to the Windows 8 First App Contest. My Death March Plan boiled down to improving Pew Pew first before implementing Metro features. This all had to be done in 10 days.

 

Improving Pew Pew

I started the morning of 12/26/2011 with drinking an almost poisonous amount of coffee to get my blood moving. I knew I had a lot of things to do before I could submit Pew Pew to the app store by 1/8/2012. These were the features I needed to get done by 1/1/2012:

A. Improving Pew Pew WAG 
1. Resizable Game Area 8h
2. Replace game controller with analogue joy stick 10h
3. Use hand-written looking font, rather than Helvetica 8h
4. Roll-overs on buttons 2h
5. Redesign start screen 3h
6. Add health bar 3h
Total: 34h

On 1/1/2012 I would then decide whether it would make sense to continue, or drop out of the contest.

 

Resizable Game Area

The original Pew Pew version was designed as a prototype game for mobile devices and used a fixed size of 320 x 480 pixels for the game area. If you resized the browser window the game area would still stay at that size. In order to fix this problem I added an event listener that attached to the document’s window and observed the onresize event. When my event listener got triggered I resized the game area and notified every game object (ship, enemies, UFO, chaser etc.) of the boundary changes. I made a note that the size of the game objects should also change depending on the size of the game area. If the game area was 320 x 420 or smaller I wanted to use small images, otherwise I wanted to use bigger images.

 

Hover Ball

In the original Pew Pew version the game controller was a circle with a line in it that indicated the direction of where the ship was heading. The game controller was mirroring mouse movements. As you moved the mouse the line in the game controller would spin around similar to a steering wheel. I decided that this game controller had to be replaced with something like a joy stick as Ian Lobb suggested in his code review of Pew Pew.

I thought, why not introducing a new kind of joy stick? A ball that hovers over a pad. Yes, that would be the joy stick of the future! You would control the Ship’s movements by moving a hovering ball in different directions. If you released the mouse the ball would snap back to the middle of the Hover Ball Pad. If you dragged the ball further away from the pad the ship would accelerate. Not being able to accelerate/decelerate the Ship was one of the main complaints Ian Lobb had about the game controller. The Hover Ball would solve all of those problems and it would look cool, too.

Fortunately switching the original Circle game controller over to the Hover Ball  turned out to be easier than I thought. So I moved on to other problems.

 

Text

The original Pew Pew used flash.text.TextField controls for everything that had text on it: the start screen, the score bar in the game area, and the screen between level changes that said “Wave completed!”. Every button was a flash.display.SimpleButton, which internally uses a TextField.

TextField’s default font is Helvetica and I wanted to change that and use hand-written fonts throughout the game (which Ian Lobb had also suggested). Now, you can set any font you like via TextField.defaultTextFormat and flash.text.TextFormat . But the problem is that not every platform has every font. In order to avoid this dependency I used Photoshop: First I created a new text box, then I set the font to a font I found named “Handwriting Dakota” and wrote the text I wanted to display. Finally I exported my text as a PNG image file.

In Pew Pew I then replaced TextField and SimpleButton with my own classes that loaded my handwritten text image snippets. This was very tedious work, which I usually did in the evenings while watching TV.

 

Buttons

The original Pew Pew version used SimpleButton, which are rather ugly rectangles with Helvetica labels. I had to replace those with my own buttons with handwritten text image labels and round “crummy” corners. I also added support for roll-over states: over, down, and up. In other words I created three images for each button using Photoshop.

 

Start Screen

The original Start Screen was just hideous. I completely redesigned it using handwritten text images and added a line that gave credit to Mike Chambers with a link pointing to Pew Pew’s github depot. I made a note that if the URL should probably be implemented as a real link if there was time left.

 

Health Bar

Pew Pew’s original game area displayed some sort of score bar at the top showing the number of lives you had left and the points you had accumulated including the level (“wave”) you had reached. My plan was to replace that score bar with a crummy looking Health Bar with three sections: Ship symbols for the lives left plus two number wheels for the points and the current wave level.

 

Checkpoint

When I reached the checkpoint on 1/1/2012 I was pleased. I had implemented most of the Pew Pew improvements I needed and I made great progress on my Metro features (more on Metro features in my next post).  Not everything was entirely done and my list with notes of things with what I should add if there was time left also grew disturbingly long. I hadn’t started with the Health Bar yet, and the button labels were all still in Helvetica. But the bottom line was encouraging. Pew Pew didn’t look crappy anymore. I liked the direction this was going. I decided: No need to drop out, everything was under control.

It was time to get some feedback from other folks. Just by coincidence I met my friend Christina Storm at a coffee shop to discuss a project we were working on and I told her that I wouldn’t have much time, because I had been working on this “stupid game”. After telling the whole story Christina generously offered her help. She said: “Don’t worry about our project. Why don’t you send your game over to me and I’ll play with it? You probably need some testers.” That was exactly what I needed.

 

Straight To Video

Knowing that Christina would test the game and give me feedback encouraged me to work even harder on Pew Pew. On 1/3/2012 I threw my first alpha version over the fence. It took Christina only a few hours to reply. She did something really wonderful by creating a video that recorded her first attempts to play the game. As she was describing what she was seeing and how she was thinking Pew Pew would work it became quickly clear that my Hover Ball turned out to be not such a brilliant idea. On video I could see that she was trying to move the Ship with the mouse. First she tried dragging the ship, which didn’t do anything. Then she suspected that that ball in the right corner might have something to do with steering the ship and fiddled with that. When she dragged the Hover Ball the ship suddenly moved. But the movements of the ship were jerky and seemed unrelated to the movements she applied to the ball. This was a disaster. Towards the end of her video recording Christina was very frustrated. Her Ship got destroyed numerous times, because she couldn’t figure out how to navigate it. She felt like a sitting duck. The game sucked.

 

Morituri Te Salutant

It was Monday and before watching Christina’s video I thought I was well on track for freezing Pew Pew on Friday, which would give me enough time to test the game on Saturday before submitting it to the app store on Sunday, the dead line for the Windows 8 First App Contest. In this week I was planning on implementing all of those Metro features.

But now I had to redesign a new joy stick and there were still a few features missing. To make things worse this week was a very busy first work week in 2012. In my original plan I set my capacity for the first work week to 3 evening hours. I was looking at 9 hours for Tuesday to Friday in order to get Pew Pew back on track.

Implementing a joy stick plus the rest of the Metro features in 9 hours? That was perhaps a little bit too ambitious.