Make a clickable prototype of your game with Affinity Designer and Marvel.

Making clickable prototypes of your games and apps is getting increasingly easier. I’m going to show you how I make mine and let you in on the ground floor as me and Abban make a new mobile game from scratch over the next month.

The year is already off to a good start as just we launched the very first Demo of Big Bad Spanish for Mac, Windows and Linux.

Very basic but we’ve nailed the fiddly stuff.

So while the Demo simmers away and we gather feedback (be sure to take the exit survey after playing) we have a few weeks to spare. Believe it or not Big Bad Spanish is very complex so after the fun of making The Bear’s Black Heart we decided to make a new, smaller iOS game for a goof.

Last Saturday one of the big YouTubers made a video of our Bear game and it racked up over 1 million views in 24hrs. Wowzers.

Here is a video of how I use Affinity Designer and Marvel to rapidly make usable tile sheets for Unity and clickable mockups.

Here is the link to the Marvel I made.

I’ll flesh out my Affinity Designer game mockup template and add the source file here soon.

Woodland Run is a casual one finger tapping game where our little bear must save/gobble campfire marshmallows as a forest fire creeps up from the bottom.

Abban is leading this project so to be honest I’m not 100% sure of all the game mechanics just yet but I can make start on the basics.

Right now all we have is the temporary tile sheet you saw in the video but I’ll try a few different textured and painted styles in Affinity Photo.

You gotta be sheeting me

I know, I know….I´m detracting from the power of Affinity Designer by harping on about Symbols all the time but for game sprites and tilesets you just can’t beat it.

I can get a much better feel for the game’s look and feel by starting with a tileset test.

Giphy

The barebones UI

Credits Screen: Where our company logo and the ´Made in Unity´ will go. In Marvel you can set some screens to appear for x amount of seconds before moving directly to the next screen.

Splash Screen: When an iOS app first loads you need to specify an image which loads straight away presumably to smooth out the flow. In comics a ¨Splash page¨ is when one image covers the entire page. We´ll use the Title Screen image.

Title Screen: Here we see the game title logo and Play button. I presume it´ll be Mr. Bear flanked by his Woodland pals running towards us being chased by flames. Obviously it's best to use icons instead of text on the buttons as it makes localising much easier.

Settings and Help: Here´s a tip for first time app developers...include a Restore Purchases link (for In-App Purchases) as the first menu item. I´ve had a couple of apps rejected for not including this function AND it will cut down on a lot of customer support mails by being so prominent.

Game Over Screen: In these casual games the 'game over' is the probably the most lucrative in terms of selling in-app purchases and serving third party ads. That give me a good idea for my Mobile Game Affinity Designer Template...include all the different ad types and banner sizes!

The vertical pause drop down menu thing: Bleh...already not a fan of it...especially on Title Screen, I realised we just need a mute there. I hate when you open an app and you are left scrambling to mute the corny music.

But even this small realisation makes this set of wireframes worthwhile.

Why create mobile prototypes?

I’ll cover the whys in the next post but besides the obvious immediacy of the whole thing they serve many functions, not just UX. I use them extensively to get much more accurate price quotes from freelance developers.

The app prototyping biz has really exploded over the past 3 years with many players vying for top spot much like the Design App Wars (which exist in my head mostly).

We’ll try share as much of the game making process and also the marketing side as we go along.

Next up: Creating the Icon and Title Screen, keyword research, making sprites in Affinity for Spine and a look at setting up Unity Analytics and in-app purchases.

Cheers,
Bob 
@clamnuts

Like this post? Try our game!

Woodland Run is now available on iOS and Android.

Woodland Run Available on the App Store Woodland Run Available on the Play Store