This is a guest blog post by Dominic Szablewski, the creator of Z-Type, winner of the Community Choice Award in the Mozilla Labs Game On 2010 competition.
About Me
My name is Dominic Szablewski, I live in Germany near Frankfurt and I recently finished my bachelor for Digital Media at the Hochschule Darmstadt. The topic of my bachelor thesis was HTML5 Gaming. My JavaScript Game Engine Impact and the first demo game Biolab Disaster were initially created as a proof of concept for this thesis, but evolved into much more.
I write about my projects and web technology in general on my blog PhobosLab.org and on twitter.com/phoboslab. I now try to make a living by creating games and selling Impact. So far it’s working.
The Idea
Z-Type was specifically created for Mozilla’s Game On. I immediately wanted to participate in the competition when I first heard of it, but the deadline seemed so far away that I didn’t bother to begin working on a game back then. Fast forward to this tweet announcing that the deadline was only one week away – it took me by surprise. I still hadn’t even began working on anything. The thought of just submitting my earlier game Biolab Disaster crossed my mind but was immediately dismissed again.
Because time was short, I decided to create an open ended arcade game where you shoot for the highscore. A game like Tetris that just gets faster and faster the longer you survive. A game where I wouldn’t have to design multiple levels or write a story.
I enjoyed Crimsonland’s Type-o-Shooter mode back in 2003 and recently discovered Typing of the Dead. And while many JavaScript and Flash Apps out there test your typing speed, they make no attempt of being a game. So I set out to fill that void with Z-Type.
Although the games don’t look or play alike, the name Z-Type is an homage to the classic space shooter R-Type – but with a Z! Because Z is a really cool letter.
Graphics
I initially wanted to create a Resident Evil like setting with zombies and lots of blood and gore. But considering the time frame and my limited artistic abilities, I ultimately decided for a more abstract space theme. I also wanted a game that looks modern to show that Impact can be used for more than just retro pixel style Jump’n’Runs. The simplistic, yet shiny looks of Geometry Wars came to my mind.
The most important thing when you want to create such a neon look is that you don’t just draw some semi transparent PNGs to the canvas, but draw them with an additive blend mode. You can switch to the additive blend mode in the canvas API using ctx.globalCompositeOperation = 'lighter'. Now, when you drawn an image onto the canvas, the resulting color of each pixel will only be lighter, but never darker than the destination pixel. This is great for explosions, fire and all kinds of self illuminating effects. All the spaceships in Z-Type are drawn in this mode to give them the glowing look.
The background of the game consists of two layers: one is just a static gradient from black to blue, the other is a slightly tilted grid that constantly scrolls downwards to give a sense of movement and progress.
All fonts in the game are drawn from font bitmaps instead of using the canvas APIs .fillText() method. This is done for two reasons: it’s fast and it looks exactly the same in all browsers on all systems, regardless of the installed fonts or how .fillText() is implemented.
Technology
Z-Type is built on top of my JavaScript Game Engine. It solely relies on the Canvas element for drawing. This had some negative performance implications in the past, compared to using lot’s of HTML elements, but the Canvas drawing performance in the newest generation of browsers is really excellent. Also, from a game programming standpoint, drawing in a Canvas feels much more natural; it feels like the right thing to do.
The engine already provides much of the stuff any 2D game needs. That includes animations, background drawing, collision detection and response, pre-loading, timing, sound and input facilities and game entity management. With all this in place, the source for the game itself (minus the word list) clocks in at just 1100 lines of code.
All enemies are subclassed from a base enemy class that draws the label, manages targeting, health (remaining letters), being hit and spawning explosions on death. The actual enemy classes used in the game are only about 30 lines of code each, as their individual AI is very simple – deciding for a direction to fly to and (for some enemies) spawning a missile once in a while.
Gameplay
It’s the small details, the polish, that make or break a game.
The one thing I took special care of with Z-Type is that every shot you take, every keystroke, is as satisfactory as possible. It’s a lesson that is preached and lived by id software – the creators of the Doom and Quake series. The plasma bullet you shoot has to look awesome, it has to sound awesome and there has to be an explosion for every single hit. It is absolutely necessary that you feel powerful while playing the game even if you are not.
Consider this; what is more fun: shooting at an enemy twenty times with a pistol, or shooting at twenty enemies with a rocket launcher? Both might be equally challenging, but the latter is much more satisfactory because you get better feedback. Tweaking a game to feel right in this regard is hard work, but work that certainly pays of.
Z-Type also tries to be smart about which enemy you are targeting. If two enemies start with the same letter, it always chooses the one that is closer to you. Furthermore, the game tries to avoid making this decision in the first place: it tries to spawn enemies whose first letter is unique at the give moment.
Another important lesson I learned throughout my years of playing video games is to be forgiving to the player: Always decide in the players favor. There’s nothing more frustrating than a bullet hitting you that doesn’t look like it’s hitting you. On the other hand, nobody minds when it looks like a bullet hits you but doesn’t actually do any damage. Quite the contrary: you feel lucky. Thus, the collision boxes for the enemies and the player in Z-Type are a good deal smaller than their graphics. It doesn’t matter if the game is fair, as long as you are the one who is in favor.
This also means that if you are unsure if your game is too hard or too easy – which is often difficult to tell because you as the developer already know the game in an out – always err on the “too easy” side. That’s something I learned the hard way: I got it horribly wrong with my way too hard iPhone game Yuckfu a few years ago.
Sound
Similarly to some gameplay aspects, sound is an often overlooked topic. There are only 4 different sound effects in Z-Type, yet I spent more than a day to find the perfect set. The important thing here again was the feedback you get from these sounds. Your plasma bullets have to sound powerful, but not at the cost of being annoying when you type 90 words per minute.
I used the excellent Audacity sound editor to cut, combine and modify my sound files. The plasma sound for instance, was created from 3 different source files: An anti tank gun (from a sound CD), a bullet hitting a watermelon (from a YouTube video) and a “laser” sound (from an old PC game). Combining these was a tedious process, because I didn’t really know what I was doing. And even when it sounded good in Audacity it sometimes just felt wrong in the game when played in context. Nevertheless I’m quite happy with the result.
The Music was done by my good friend Andreas Lösch, who also provided the music for my previous games. I initially wanted something really ambient and unobtrusive, but decided for a slightly different direction after hearing one of his piano arrangements again. I asked him to make some modifications on it for the game – removing vocals, make it loop-able etc. I’m very happy with the result and the mood it creates in the game.
The state of HTML5 Audio support in browsers is sadly still okay-ish at best. You have to deal with pops and clicks (IE9, Opera, Safari), severe lag (IE9, Firefox 3.6 & 4b9), refusing to play short sounds at all after a few seconds (Chrome 9 & 11 dev) and downright broken implementations (Mobile Safari). And dont get me started on the fact that you have to provide your sound files in the Ogg Vorbis and MP3 codec, because Microsoft and Apple are too arrogant to support and open standard.
I hate to say it, but as good as the Canvas support in all browsers has come to be, as broken, ignored and unpleasant to work with is HTML5 Audio right now.
Release
Shortly after publishing Z-Type it exploded on Reddit, StumbleUpon and some other sites, bringing in hundreds of thousands of visitors. This really took me by surprise – I liked what I had achieved but I had no idea that a typing game would be this popular. My guess is that it has to do with the game’s accessibility – anyone who can type on a keyboard can play the game and be good at it, even if they never played a video game before.
Many complained that the game was too easy, or that the difficulty level doesn’t increase fast enough. And while I suspect that many others where happy with the difficulty, it really does plateau at a certain level. So this is something I still want to fix in the coming days.
All in all developing Z-Type has been a really fun and rewarding experience. My thanks go to Andreas Lösch for providing the music, everyone who voted for the game and of course the Mozilla Game On staff for organizing this contest. Thank you!