Game screen design in Google Docs

Looked at Google Docs lately?

If you're like me you probably think you know pretty much what there is to know about Google Docs: its a web-based thing that tries to be like Microsoft Office, right?

Well its been getting better - a lot better.  There's a really good Draw app now.  Combining Google Docs Draw app with the Google Sites features allows you to create a real-time game screen-flow sharing/co-development tool.  The cost is $0 and there's not much you have to do without compared to some commercial apps.  Here's how I use it.

Quick note: these are mocked up development shots for this post, but based on real work from my private Google Docs/Sites - please don't make any judgements about this based on its current state - "Oh I saw the game from Sez and she's making this thing about a room with nothing in it...".  Examples only guys.  :-)

What I discovered is how awesome Googles suite of apps can be as a platform for doing game design, especially if you're an indie and trying to work with others who are not in the same location as yourself.    If you have mentors or friends you want to get reviews from same applies - its a great tool for sharing development ideas in a quick mock-up form before you spend ages coding them up or paying out for finished artwork.

When you work from your spare room, and need some who's remote, doing art-work or some other part of the game to be able to see your ideas, it can be a pain to try to get the latest version of your stuff and drag it into DropBox, or share it on some kind of paste-bin site.

The Draw application is not good enough in itself to do finished work, but its great for quick mockups of screens so that you can get the general proportions, colours and most importantly the flow or sequencing of screens right.  You can import artwork including sprites and backgrounds (like the room background below) and combine it with graphics created with Draw's basic vector tools.  It has a palette of predefined shapes you can use, and you can fill them with color, or make them transparent - even alpha blended, like the Map HUD above.

What is great about Google docs is that you can edit the document right in the web-page and who ever you're working with always gets the latest version when they open it.  In fact you can collaborate in almost real-time.

But even better with Google Sites you can then embed your Google Docs - graphs from the spreadsheet app, or in my case drawings from the draw app - right into the webpage, creating a flow of screens for different use-cases.

When you update the Draw doc, folks visiting the screen-flow page with your use-cases on it get the latest version - since its a live link, not an embedded render of the drawing.  This makes the Google Docs & Sites a very powerful way to collaborate.

Sites also has very good sharing features so you can make collaborators have writer levels of access, and provide others with read-only, all while keeping the whole thing private while you're still in development.

One other quick tip - if you want some great general icons that are good for doing development mock-ups and use as placeholders, but do not have the commercial limitations of some icon sets, have a look at the Tango project - I've used some of them in the above shots.  There's around 180 icons with standard sorts of things, like "Save" and "Quit" and so on.

The direct link to download the tar.gz of their icons is here:  http://tango.freedesktop.org/releases/tango-icon-theme-0.8.90.tar.gz - on Mac you  should be able to open that archive up without any problems, but on Windows you might need a special archive tool.

Have fun designing your screens!