Game Development Update


It’s been a little while since my last update on the game dev process. I hadn’t really worked on it much over the last few months but had an inspirational burst over the last few days. I had hit a block with the 3D translations where models weren’t moving properly and it seemed to be moving some vertices in one direction while move the rest in another. This wasn’t ideal and it looked a bit like there was a rip in the fabric of the game’s universe.

After spending many hours trying to fix, I decided to cut the dead weight and completely rewrite how the 3D worked. There are still a few niggles which are annoying me but they’re purely with how the code’s currently working, they shouldn’t affect the final output so I’ve pushed them a bit lower down the priority list.

Now although the underlying code is all sparkly new, the output looks pretty much the same as the last video so I’m afraid there’s nothing new to actually see in this video. Hopefully I’ll have something more exciting in the next update.

What’s next

There are still a few pieces to be done on the 3D side of things, cleaning up & optimising but with the rewrite out of the way it lets me start coding some game functionality.

As you can see from the video I’ve already started by adding in a placeholder sprite for the main player. Next I need to add in some basic enemies, bullets and hit testing on everything. Another important addition is to add in touch interface controls. I had wanted to make this more like a classic point click style RPG but there doesn’t seem to be an easy method of capturing touch events on the 3D stage. I’m therefore changing it to be more of an action RPG style.

Wireframing Apps

In the run up to starting development of mobile apps I thought it to be a good idea to start planning ahead. My usual method is that I get an idea in my head & I run with it which I guess is a common programmers method.

My initial thought was to design some mockups on the iPad, I’ve recently replaced my iPad and have started using it again. Upon scouring the App Store I found a couple of wireframing app which caught my eye. The first was iMockup which is aimed at both app and web design which I thought was ideal, especially at the reasonable £5 price tag. The second app I saw was AppCooker and it looked a lot more polished but the price tag reflected this at £10, this however seems the be a beta price and apparently this will raise three fold once released. I did mull over both apps, iMockup was cheaper and would let me mock up for the web but AppCooker looked like it was made to do one task and that it could probably to it really well. In the end I splurged and bought AppCooker, shortly after I found out the iMockup price had been slashed to half so I bought that too.


Both apps have very well laid out interfaces for the main design view, each with pull-out drawer style elements which can be closed to give additional workspace. AppCooker has one at the top with grouping, arranging and transitioning options and iMockup has one on each side, the left with the pages and components on the right. Both apps have a small toolbar at the top with a few options and AppCooker has an additional bar at the bottom with preferences. The bottom bar on AppCooker is static so iMockups has the ability to have a slightly larger workspace but it really is negligible.

With the app pages, iMockup only really has three different pages, the projects page, the main design view and a preview mode. AppCooker has all these pages but with a few extras thrown in. First off in iMockup you select the different pages by just opening out the left drawer and clicking on the page you want, nice, quick and simple. AppCooker has an additional section for viewing a projects pages which is really quite useful.

Not only can you drag the pages around to organise them how you like, it also shows the relationships between the pages.

AppCooker is not only just a wireframing app, they’ve also crammed in a few extra pages like an icon editor and a potential profit calculator.


Both applications have a great set of components each. The AppCooker components are generally much more cosmetically appealing as they really do look like authentic iOS components. The components in iMockups are quite barebones in comparison and are more true to a classic wireframe style. iMockups has three sections which are web, iPhone / iPad and ‘markup’, markup is pretty much miscellaneous items like shapes, arrows and links. AppCooker has widgets, wireframe, misc, shapes and images. Wireframe components are pretty much identical to the main widgets but are lacking the colour and glossy feel of the main components. They say its so you can ignore the colour and concentrate on the design, essentially making it like iMockups.


You can use images within each app, AppCooker has an additional menu which gives you direct access to your images on your iPad. iMockups however has an image component which you need to add to the page and then go into the images preferences to select the desired image.

The components are customisable in both apps but this is handled very differently in each. In iMockups you select the component onscreen and select the info option. The customisable sections for the text of each component is purely text based, mainly comma separated. The following example shows the configuration for the footer iOS navigation.


The customisation options for AppCooker are much more advanced. Continuing of the example of the main app navigation, not only can you select the text but you can also select the icon from an inbuilt selection and enable a link to another page.


In iMockups you also have the option to select a link but not for individual navigation items, either you have to select a link for the whole navigation component or add a link component for each navigation option, align it up to the correct position and set the link.


The links brings us nicely to the previews as setting a link will allow us to navigate between the pages in the preview mode. The preview modes are exactly what you’d expect them to be, a demonstration mode to see the prototype in action. The preview in iMockups is simple & straight forward to use, you can swipe left and right to quickly skip through the pages, alternatively if you have links set on a component you can tap the component to go to the target page. The AppCooker preview works on the component links to navigate through to the other pages, it doesn’t have an option to slide between the pages. It does however have a really nice additional feature in the form of a separate app called AppTaster which is completely free. AppCooker allows you to save out a preview file which you can then email to your client, the client can install the AppTaster app on their device and preview the prototype remotely.



The outcome of using both apps is that it’s quite clear a case of getting what you pay for. AppCooker does have a lot more features and is far more polished than iMockups but when the discount ends it will be six times more expensive.

At this point in time AppCooker is currently twice the price of iMockup but what you get in terms of quality can be seen throughout the app. I’m glad I got it but the question remains, would I purchase it when it reaches the full price? I’d say it’d be doubtful but it really does depend on what these ‘top secret’ future changes are going to be and if they’re as spectacular as they’re making out, in my opinion it’d have to be pretty spectacular to be worthy for a £30 price tag.

I feel that although they are both wireframing apps, they both ultimately serve very different purposes. I think the iMockup is mainly intended as a barebones tool to create quite simple layouts very quickly. If you have an idea for a design it allows you to churn out a few pages effortlessly.

AppCooker however comes across as nearly the next stage of the process. I could quite happily spend a few hours tweaking a design, customising the components to look nearly like the real thing. I’d say that with the additional feature of AppTaster where you can send a copy of the prototype and for it to be previewed remotely is an excellent idea. It really does allow you to get a real feel for the app without touching a line of code and is ideal for remote clients to get their say before any real development takes place.

Mobile projects

It’s been a little while since I’ve written anything about development and that’s down to yet another project. I seem to have quite a short attention span when it comes to my own projects so I seem to bounce between old & new things I’m working on.

One thing I’ve been wanting to do for a little while is take a look into mobile app development. I was on the verge of venturing out to teach myself iOS & android development until I learnt that Flash Builder can now export to both platforms. This means that I get to be somewhat lazy, I only have to build one application to work on multiple devices and I get to use ActionScript 3 which I’m already proficient in. There were plans for this before but I the last I heard Apple had pretty much put a stop to it. Luckily now they seem to have made a U- turn.

I’ve been looking through the available components and although some key pieces are there, that’s about it…. it feels very barebones. I guess this does allow you to be more creative in having to build the components you need but that’s half the fun (from a programmers point of view at least). Hopefully once I’ve gotten something worth publishing on the matter I can divulge further.

Ipad mini

The insurance money from the burglary came in the other day and being that my iPad was stolen it was decision time.

The first decision was to even replace it at all, over the last coupe of months I’d not been using my old iPad as much since I had just bought myself a new MacBook to work on. If I was to replace it, did I want to upgrade to the latest model with retina? Alternatively I could abandon iPad altogether and buy myself an android tablet.

I was very tempted to buy a Google Nexus but the main reason I decided to stick Apple was due to the fact that I had already bought into it. If I was to buy an android tablet, I’d have to rebuy all the apps I had already paid for which wasn’t overly appealing.

In the end I decided to go with the brand spanking new iPad mini and actually went to the store on the day of release to pick one up. I’ve gotta say, I’m pretty impressed with it and already prefer it over my old tablet. There’s no really much difference between the old and the new, the key difference is the size. Although the standard iPad isn’t exactly gigantic, I did on occasion find it cumbersome for my usage.

The next improvement is purely a side effect of the smaller size and that’s the image does look sharper, not as sharp as the retina display but sharper than my old iPad.

The final key difference has to be the new ‘lightning’ power adaptor, purely as you can now plug the cable in either way.

In all honesty there’s not too much more you can say than that, the rest of the specs are exactly the same as the iPad2 so is there even any regurgitating what’s already been said? All in all, I’m really happy with the iPad mini.

Textured 3D

Just an update of progress, I’ve been elbow deep in vectors and texturing trying to redo the 3D buildings shown in the previous progress post. The reason I redid things was because the texturing doesn’t allow repeats so to avoid having to create many textures for the different building sizes, I’ve written it so the 3D models are dynamically created.

Explain yourself!

Basically, in the old version the buildings all consisted for twelve triangles, two for each side and were given a scale to resize according to the city plan. Unfortunately to use textures correctly I’d have to break the models up into multiple squares per side. For example, a five by four sized building will be five by four to a scale of one, previously it was a one by one sized building scaled by five on the x axis and four on the y.

Okay, admittedly that explanation was pretty damn poor, I’ll write up something covering the ins & outs of 3D in Actionscript 3 when I find the time & enthusiasm.

More exciting than squares
While looking into the hows of 3D models in AS3, I found a script for Blender to export models to vector coordinates unleashing the possibility of creating some complex models. The script can be found here

Burgled & data safety

I was out of town last week for a few days where I received a phonecall no one wants,  the key-phrase being “you’ve had a little bit of a break in”. They had a good rummage through everything and managed to get away with a relatively good swag including two iPads, an old PS3 and about thirty games. The PS3 didn’t even have a hard-drive in which is a minor win (yay?). The week before we had purchased a new PS3 for a newer slim model which is much more energy efficient and we had taken that with us as we had some recorded TV programmes.

They obviously weren’t too tech savvy as they left the Drobo and fortunately I had the Macbook with me. This did get me thinking about offsite backups and the safety of my files. I’ve got Time Machine setup on my laptop which is saving to two locations, there’s a Micro SD card plugged in most of the time and the Drobo’s Time Machine share. This works fine as if my laptop is stolen while I’m out, I know that there’s a backup waiting for me at home, but what if someone brakes in & steals both the laptop AND the Drobo backup? For the web work I do, the majority is in subversion but all the other work files are just kept locally. The current main issue with subversion is that it doesn’t have my latest changes. Sometime I could work on something for a couple of months before committing my changes and that would be lost if the worst were to occur.

I’ve also started using Google Drive to keep everything synced online. There are plenty of alternatives but I purely went with Google as it’s half the price of Dropbox. I’m quite aware that Dropbox have a lot more features and is more widely supported but I can always change later if I need to. Anyhow, all this means is that if the worst was to happen (again), I could just link back up to Google Drive and download the latest copied of my files.

Moving to true 3D

The more I worked with the pseudo 3D I created, the more imperfections started to grate on me. The glaring one being that the wall perspective just wouldn’t work as I wanted with different sized buildings. I had started working on texturing the walls as shown in the following video but the last ten or so seconds of the video you’ll be able to see the gaping imperfection I speak of.

Not being happy with this, I’ve started looking into a true 3D setup. I’ve started playing around with a few basics and have integrated the random city generator into it. So far I’ve got a load of 3D boxes which will be the buildings and the gaps between will be the roads.  You’ll have to excuse the texture, it was a quick example. =)

Like I said, a very basic example but once I’ve fixed the textures, added a simple player sprite and added in some hit-testing it’ll be about the same stage as the pseudo version, give or take a few tweaks.

Admittedly it’s looking very much old GTA stylee which is the visual effect I was going for, but the gameplay in mind will be completely different. I’ll divulge more information of that in the future.

Random city generator with pseudo 3D

If you’ve read the previous posts you probably saw this one coming from a mile away. I’ve combined the random city generator with the pseudo 3D buildings to give a classic GTA style.

I’ve made a few tweaks to how the building perspective works and it looks much nicer than it did but it’s still not perfect. The scale of the walls is still generated by the dimensions of the building, for this to work correctly it should really be based by the building position from the player. This will probably be tackled another day as this makes a good starting point.

What next?
Now where do we go from here? Well the last piece of the level generation puzzle is to make the random level generation seeded. This is essential for the player to be able to revisit previous sections of the city and for the structure to remain intact.

Once the seeding is in place, we can move onto the graphics and some actual gameplay elements.

Pseudo 3D

I actually wrote the code for this way back in 2008, it was my self assigned learning exercise to teach myself ActionScript 3. I hadn’t intended to create this effect but was intrigued on how transformation matrices works and my tests evolved into he beginnings of a game.

The way it works is pretty simple, each building consists of five sprites, the roof and the four sides. The sides all have a translation matrix enabled which affect the scale and skew based on the distance the building is from the centre of the screen. The roof position is just keeping aligned with top & left sides.

I did want to continue developing this as a game but enthusiasm fizzled out, hopefully soon I’ll be able to revive this work. From the video you’ll be able to see some enemies and the ability to shot a few different guns but it ends there, it really is just a proof of concept.

Random City Generator

UPDATE: I’ve released the source for this HERE

I’ve recently developed a random city generator and thought my method might be helpful to someone else in the future.

The Problem
The plan is to randomly create a portion of an unlimited sized city. This will work by having a set sized grid with multiple exit points and the buildings & road structure will be randomly generated. Each portion of the city will be created upon entry and the exit points should match up to appear that the player is moving seamlessly between sections of the city. We therefore need to seed the sections so if an area is revisited, it’s the same as before.

The solution
To start with, we’re going to create a multidimensional array of grid city segments to give a 2D map of the whole city. The whole map will be empty to start with but will end with each tile being assigned to a road or a building. We need to determine if there should be any existing exit points on each side of the section based on neighbouring sections. These exit points are essentially roads so the cells between each exit point is a building. The starting point buildings will have to be generated between the roads but they can be of any length. The exits should have the option to be predetermined to allow matching up with neighbouring blocks or if there are no predetermined neighbours the exits will be dynamically generated.

With all of the exits in position we can start filling in our buildings. The buildings are generated in a spiral manner, starting from the top and working clockwise inwards towards the centre. As an example, the first building starts at point 1,1. We start looking right until we find road and this gives us our width, we then look down in the same manner to get our height. We check each square during this process to make sure each square is empty, if it is, we can create a building here. I set a maximum length for the buildings so if we hit this limit without hitting a road, we can randomly pick a length to use.Spiralling  clockwise toward the centre allows us to make sure that all of the area is covered and should reduce an exact grid type look.

Here’s what the final generator is currently producing. It’s not perfect but it makes a good starting point & will work for what I”ve got planned:

Randomly generated City example