Woodland Run: Making mobile game wireframes and character designs

This game is coming together at an amazing speed and we're discovering loads of new tricks everyday.

01-Wireframe

Pregnancy fetish

I was talking to Abban about productivity. He works better from the pub while I work better in my studio with the wifi turned off. It’s all about relaxing.

He doesn’t agree that it’s easy to solve problems while sitting on an airplane. I draw like a lunatic when I fly. The constant supply of oxygen, the ‘white noise’ sound and the enforced immobility makes me zone out and churn out page after page.

This week I attended a prenatal course (in Spanish) and thanks to the wonderful Powerpoint about vaginal mucous and vulva dilation widths I willed myself to zone out and think about the Woodland Run characters.

We agreed that the baddies would be “hunters” and I drew these fellahs.

02-Sketches

The expecting mothers then began to exercise on mats about 2 metres on front of me and to avoid eye/bum contact I fiddled with my phone and looked at the characters I drew. And in my zoned out state it struck me.

The hunters don’t work...the baddies need to be trolls/goblins. It fits the tone better, they’re easier to adapt to new characters and they will reproduce better at small sizes.

I searched for “redcap goblin” and found a great painting. I placed my fingers on the power and home screen button, poised to take a screenshot to send to Abban.

I looked up and saw a row of strangers on all fours, presenting their lycra rumps. I had to scan the line twice to find my wife. I’m sure they were equally conscious of the strange man watching them. I was the only bloke there.

Imagine the sharp sound of a perverted iPhone camera click. Piercing the calming music with that digital hiccup noise.

I didn’t take the screenshot but it was a close call. Try explaining that one...in Spanish!

“Ugh I wasn’t taking a photo of all your arses...I was taking a screenie of a goblin, I swear!”

I’ll try work that scenario into Big Bad Spanish. Loads of the levels in BBS are based on my real life social goofs.

Refined Mobile Game Wireframes

Abban played a blinder this week, he made the above wireframes and nailed the entire UI. Notice how he used the directional arrows between the Artboards to show the flow, it’s actually a faster way to prototype than my beloved Marvel method.

Giphy

Here’s me showing AD’s Constraints tool on a button. This is becoming my favourite tool now: you can resize individual elements without distorting the child objects like the PLAY button above. Or even pull in the entire Artboard and the UI layout will respond/constrain. It’s lunacy.

Mobile game UI design: Lessons learned this week

There’s loads of wanky terminology in the design industry and a lot of the time you instinctively do things without knowing it’s a “thing”. There’s a process called ‘card sorting’ whereby you prioritise the structure of information. Putting the Settings and About on title screen and then Achievments and Scoreboard in the Character Select screen makes much more sense.

Then the in-game Paws menu is just for Audio settings.

We’re working on an ‘animated comic’ game intro too. There’s a Unity tool called Panoply which looks perfect for this but it’s a little pricey to take a gamble on.

Down with the kids

The whole Bear’s Black Heart thing has been a massive eye opener for me in terms of seeing how the ‘yoof’ discover and process games. Seeing people use the product you created gives you amazing insight.

I never really got “Let’s Play Videos” before and definitely never watched Twitch before all of this. 
I recently watched a girl working in Zbrush and I was amazed that the real-time commenters gave such useful and constructive advice and not just pointless chatter. So I might give streaming the design process on Twitch a go.

All in all it was a productive week. We are both saddled down with the lamest of the lamest freelance gigs right now so making progress on anything really is a victory.

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