Building Browsergames

Diary a Browsergame: building prototypes

As discussed in Working Title’s design document, we are going to be using Ajax to dynamically update the screen. Ideally, it will look as if a user has entered an IRC chat-room - except instead of chatting, they’ll be playing a game.

I always like to prototype my projects before I start them - I start with the template, and then start building quick mockups of functionality I plan to have. Usually, the code that I used to build my prototype can be cleaned up and used to build whatever I’m building anyways, so I’m still writing code towards my goal - with the benefit of having something to show for it a little faster.

With that in mind, I set out to build a simple tester page that shows off some of the Javascript that will be behind Working Title’s ‘play’ page - while it doesn’t do any posting back, it demonstrates what the functionality is supposed to look and feel like(albeit a little faster than it would be in the actual game). Here’s the Working Title test page, which will let you see how I’m planning on having the game behave.

Cool Stuff: javascript 3d starmap prototype

As you’re building your own browsergame, you will stumble across a variety of technologies and approaches that you can use to set your game apart. Some creators use Javascript to achieve this through enhanced interfaces, and others build interesting gameplay mechanics.

One interesting element that has recently come into play in the realm of Javascript is the canvas element - it allows a user to draw whatever they want to inside of it, using nothing but Javascript. The canvas element is still in it’s infancy at the moment - and therefore, not supported 100% across every browser. However, that doesn’t mean that you can’t do cool things with it(and Firefox 3 supports it, so there’s no reason not to encourage your users to upgrade).

Sebastian Schaetz, a Building Browsergames reader, has recently created something using the canvas element that I thought was pretty cool: a 3D starmap prototype.

You can take a look at the prototype itself here, and read Sebastian’s blog post about it here. It’s important to note that the code to create the starmap is open source, under an MIT license - which means that as long as you preserve the licensing information, you are free to do whatever you want to with the code.

Now, if you’re building a browsergame based around the mafia or a medieval-styled RPG, this might not be all that useful to you - but if you’re planning on building a game that’s space-oriented, you might want to keep this in mind.

Hey, have you built something cool that you think other browsergame creators could benefit from? Send me an e-mail about it at buildingbrowsergames@gmail.com!

Making your forms auto-focus

One of the small, hard to notice features that I’ve encountered on a few games and grown to love is that of the auto-focusing form field. When you go to login or register, as long as your web browser has Javascript enabled, you’ll automatically be able to type into the first textbox that you need to - which makes signing up or logging in much easier.

It’s actually a very simple feature to add - all you need is three lines of Javascript:

1
2
3

window.onload = function() {
	document.getElementById('username').focus();	
}

The HTML you need to use looks like this:

<input type='text' id='username' />

And as long as you have both of those pieces, whenever a user visits the page the username input box will automatically get focused into. It’s a small and easy change to implement, and it makes a huge difference to how easy it is to use your game’s forms. For example, visit Urban Dead and Kingdom of Loathing and start typing the moment the page loads up - as you can see, on Kingdom of Loathing you’ve been focused into the text box, and can therefore just start typing to log in. On Urban Dead, you need to find the textbox, and then move your mouse over to it and click on it. It’s just not quite as nice and easy as having the field auto-selected for you.