Adding some Real Artwork

So the story so far is that I decided to code an iPhone game on my iPhone, after working out that this was technically feasible and coming up with a concept I had a basic game.

My basic game in fact was very basic - it didn't look very good and it wasn't very playable. At this point I reached out to my friend Fred Mangan who was is an experienced games artist. Okay so I got a bit lucky having Fred as a friend, but for anyone writing their first game I cannot recommend highly enough finding an artist to collaborate with. Fred had a quick play of the game on my phone and got to work on a design. A few weeks later Fred emailed me the following design concept as a PDF.

MapMan Design Concept

Fred's design was a revelation. All at once I could see the potential of integrating Fred's design with my game engine. Fred also made a key suggestion to change to tilt controls (the initial prototype relied upon the user tapping the screen). I was a little uncomfortable with this change at first because my original Amstrad CPC game had used keyboard controls, however I went with Fred's suggestion trusting his opinion.

Fred also suggested we adopt Slack to make our collaboration easier. This was another great suggestion and really sat well with the idea of coding a game on a phone. I was able to to exchange ideas and receive art work files from Fred using a combination of Slack and DropBox. Pretty soon I had upgraded my prototype to use Fred's initial graphics and things were looking a lot better.

Early version of MapMan with Fred's graphics

There was still a long way to go - MapMan was a static image with no animation (not even any legs), no music or fx and only very basic menus. I also only had a handful of levels, so lots of work to do. Nonetheless there were enough encouraging signs and every chance got, either standing in a queue or waiting in an airport (or both), I got out my phone and chipped away and creating my game.

The next key milestone was a summer BBQ with some friends which I hijacked for some user feedback, but more on this next time.

Download MapMan for iOS

@MapManGame

So, what type of game will I code on my phone (Amstrad Inspiration)?

Having established that there was a feasible strategy to develop an Apple App Store game by coding on an iPhone, I needed to decide what type of game I was going to make. Fortunately I had an idea at the back of my mind which was at this point already 15 years old!

Back in 2002 my friend Dave invited a few folks round for a meet up at his place to watch the group stages of the World Cup. Between games Dave went up to his attic and brought down his old Amstrad CPC (retro even back in 2002). After playing a few games I picked up a dusty manual for the Amstrad BASIC programming language. I started playing around with some of the graphics commands and soon ended up drawing a few squares on the screen, as faithfully recreated below.

Basic shapes drawn in Amstrad Basic (recreation)

The squares kind of reminded me of a map so I wondered if I could turn my graphics into some sort of game. I was a bit short of time so I looked through the BASIC manual for a quick way to add a player to my game. To my good fortune I came across a character set table which conveniently contained a character of a man.

J

The Amstrad BASIC charset that inspired MapMan (man character appears in bottom row)

A few minutes later I had added my man to my map, things were looking pretty good (or at the very least not bad for an Amstrad BASIC newbie)!

First Pass version of iPhone MapMan

G

Recreation of original MapMan written in Amstrad Basic

I then wanted to add some controls and tried to code it so that the arrow keys moved the man between tiles. At this point I had a moment of great serendipity, I accidentally got the code the wrong way round such the right arrow key moved the man left, the up key moved him down and vice versa. This was pretty confusing, but also strangely fun, so instead of correctly it as a bug I realised it would make a great feature! To add a bit of tension I made it so if the man stepped off the map you went back to the beginning (blue tile). I then made the red tile the exit and timed how long it took to complete the map. To negotiate the map you had to remember that the controls were reversed, which was easy to forget when trying to go quickly, especially when going round the corners. To finish off the game I added a high score table and even managed to push my Amstrad BASIC skills to saving the best scores to disk. The game was ready so I released it to my friends at Daves. We happily played until the next World Cup game started and returned at half time to try and beat the best score.

Basic to 2017 I started trying to re-code MapMan in Pythonista. I found an old sprite map from a game call JetPack to use as place-holding graphics and pretty soon got a basic game up and running.

I wanted to recreate the reversed controls feature of the original game, but in order make it a bit move dynamic I added a special tile which would flip the controls. To give the user some feedback that the controls were reversed I changed the background colour. Finally, taking some inspiration from the Pythonista examples I added a high score table.



So I had a basic game, but things were a long way off looking professional! I needed some better graphics and I had a lot of coding to do. Fortunately for me one of the people at Dave’s house on that day back in 2002 was my friend Fred who just happens to be a gifted game artist! I reached out to Fred and his fond memories of MapMan meant he was happy to join my project, more on this next time!

Download MapMan for iOS

@MapManGame

How to write an App Store Game on an iPhone?

Download MapMan for iOSAs I said in my first post, I got a crazy notion that it would be fun to try and make an App Store iPhone game by coding it an iPhone, but how does one actually go about doing this?

When I started out the first step was to figure out a way to write code on my iPhone that could actually be used for an Apple App store submission. I did a fair bit of Googling and after a few of dead ends I came across Pythonista - a fully fledged Python IDE for iPhone (also works on an iPad, but I haven't got one). I already knew the Python language so this looked like a good fit for me. The big question was whether or not there was a way to use code written in Pythonista for an Apple App Store submission. A few Google searches later I discovered that Pythonista has an Xcode App Template which allows you to run Python code written on your phone within a Pythonista Python interpreter running within Xcode (you need a Mac to use this). This basically means that you can write all your code on your phone, transfer the code to your Mac, build it in Xcode and then submit to the App store*. I also found that you could sync Pythonista to DropBox so moving code from my phone to my Mac would be easy.

*Note: if you are think of trying this is that to submit your app to the Apple App store you need to join the Apple Developer Program which is $99 (USD) per year. You don't need to do this right away (I brought my game to a pretty decent prototype before signing up), but you should keep it in mind.

This looked very promising. I asked myself 'has anyone actually got an app successfully into the app store in this way?'. I went back to Google and found this list of people who had done just that. I decided to download one of the Apps to check it out, looking down the list I picked WormyDraw because I liked the title. A few minutes later I was using WormyDraw to draw some wormy looking drawings which was enough to convince me that the development strategy was feasible.

The next step was to figure out how to actually write a game in Pythonista. Thankfully Pythonista comes with some great tutorials and examples. The Game Tutorial turned out to be exactly what I needed - through a series of 7 progressively more detailed scripts it built up a simple (but very nice) space-invaders type game:

The 7 python scripts that make up the  Pythonista game tutorial. Each script progressively adds more game elements to build up a full featured space invaders game.

The finished tutorial game (Tutorial Part 7), the man moves with tilt controls.

Building on my pre-existing knowledge of python, by the time I got to the end of the tutorial, I had an outline understanding of how to write an iPhone game on an iPhone. My crazy notion of writing an iPhone game on an iPhone was suddenly looking doable...

@MapManGame

Why write a game on a Phone?

If you are reading this I suppose the first question you might be asking is 'why would anyone want to write a game on a phone?'. Well to be honest I'm not totally sure: the notion hit me, I wanted to see if it could be done and things just went from there.

What I can say is that writing a game on a phone has got certain advantages. Firstly if like me you lead a busy life, have a demanding day job and want to develop your an app in your spare time, then time is a scarce commodity. Coding on a phone allows to daisy-chain a few minutes here to a few minutes there, and this can rally add up.  Secondly coding on a phone means you are continually testing on a phone which means (hopefully) your game ends up well-tailored to your target devices.

This blog tells the story of MapMan, a fun little game I wrote on my iPhone 6, which is now available for download. If you want to know more about MapMan then visit the MapMan website or follow @MapManGame on twitter.