I’ve written about how the design process should be filled with quickly testing theories. Videogames are complex and their constituent parts rarely interact in the ways you expect, so getting something working (or not working) quickly let’s you test your design and fix it. Prototyping, therefor, is one of the greatest tricks in a game designer’s box. Whilst paper prototyping for card or board style games is very accessible, other games often rely art or code skills.
Techniques & Tools
Whilst I can muddle my way through coding in Unity and know Photoshop well, I’ve hit upon a quick and cheap technique for prototyping 2D games using some really simple and cheap tool available on Mac OS. The workflow requires no coding knowledge or art skills and only two packages: GameSalad and OmniGraffle. It’s super fast and easy, as demonstrated by Super Block, a game I made in two hours on a plane.
GameSalad is a well known and free codeless game creation tool that lets you spit to web and mobile devices, even submit to the App Store and add in IAPs. To build games you simply drag and drop “actors” in to scenes and then add “behaviors” and “rules” to them. These behaviors and rules use lots of game logic which actually helps you to code better (without ever seeing a line of syntax). It uses lots of UI and conventions that will be familiar to those of you who have used Adobe packages, especially Flash, and any spreadsheet. Additional GameSalad features a basic physics engine, so you can get lots of cool interactions going on relatively quickly.
OmniGraffle however is actually a package for creating diagrams (in fact all the diagrams in my book were created in OmniGraffle) and not intended for make game assets, but is perfect for the job. It is set up a lot like an iWorks package, using lots of common Apple UI conventions such as the colour picker. It’s real strength is how objects snap and style simply and quickly, making it idea for front ends and HUD, but also for making basic constructs out of blocks and circles. Whilst costing around $100, there’s a good 30 trial.
Creating a game using these packages is pretty simple. First open OmniGraffle, hit File > New and select “Blank” then “New Diagram”.
Now navigate to Stencils and expand the Software folder from the Stencil Library and scroll down to Kongi Wireframes and find the iPhone. Drag it to the diagram, click on the UI you’ll find here and delete, then make the background black and hit cmd+L to lock the stencil and save the file. It should look like the below:
Alternatively you can download the doc from here.
Now open GameSalad and choose File > New. Input a title and choose platform: iPhone Portrait from the drop down. It should like the below.
Hit File > Save and you’re ready to go.
Go back to OmniGraffle. This is a pixel-perfect template and allows you to start building up your game elements. Drop the stencils and shapes you want on this template, arranging them and envisioning how the game will play.
You now need to get these out of OmniGraffle and in to GameSalad. Select everything you want to export as a single asset and click File > Export… (or hit cmd+alt+E). From the export dialogue you need to ensure that you choose the following options:
Format: PNG bitmap image
Export Area: Current selection
Include non-printing layers and include margin: Unchecked.
Bitmap resolution: 72
Transparent Background: Checked
Choose a name and hit Save. You now have clean PNG image with transparency, ready to bring in to GameSalad.
Go back to GameSalad and choose Scenes and double click Initial Scene. In the bottom left you’ll find your Library. Click the Images tab and then the + button (see below image) and then navigate and choose the PNG you exported from GameSalad and click Open.
Now drag to Actors, double click add behaviors, drag to the scene and do whatever you need to to build your game. There’s some really easy to follow tutorials on GameSalad Cookbook, but you should find that once you’ve got the basics trial, error and Google will get you the rest of the way.
Whilst this process is unlikely to build something you want to release, it is considerably quicker and easier than using Unity and Photoshop, so perfect for testing your ideas. If you have any feedback or questions, drop me a line.