Dynamic Roads & Picking

It’s been a slow couple of weeks on the game development front which has mainly been down to trying to get ‘picking’ to work. I was thinking about the game play style and think that I’d prefer it to be more strategic than action and decided to change it to a point & click style game. This would also be a better choice as its mainly been aimed for mobile devices.

The main issue with this decision is that because I’m using a 3D environment now, I need to use a process called picking. Picking is the process when you click on a position of the screen and it calculates which object in the 3D environment has been clicked. This is all new to me and left me feeling quite out of my depth. I did manage to find an example of picking but it didn’t play nicely with my current workings when trying to add the methods to my code. After a full week of free time hours try to getting this working, I admitted defeat which doesn’t happen too often. The decision was made to take a look into a premade 3D engine so I started looking at Away3D.

Away3D

Looking at the examples on the Away3D shows that picking is alive & kicking and having a quick go at creating a testbed seems like a quick & easy solution to creating a 3D environment. My first issue was that there’s not really a great number of tutorials and the genreal help seems to be lacking, that is unless you want to pay for their support or purchase a book. At this revelation, the tenacious side of me kicked in again and I’ve decided to take another look at getting my own version working but in the mean time, take a break & make progress in other areas.

Dynamic Roads

While looking into the picking, I came to the realisation that the different sections of roads being used could be generated from just one tile. Being that the 3D models use triangulation, I could create a tile which would contain two different elements which could be manipulated to the correct road layout.

road

When applying the texture to the mesh, I have control over which part of the texture gets applied to which corner of the triangle. Therefore, with the image above I can create a straight section of road with the left triangle of the image twice or a crossroad using the right triangle in the same method. This in theory means that less textures are required and should help improve performance. The short video below shows this method in action.

It’s not the greatest looking piece of work but it’s functional and can be updated later on.

What’s Next?

There are a few pieces which are next on the list, I still need to get the picking working but I’ve pushed this to the back-burner for now so I can make some progress on other sections.

I really need to optimise the transition from one city area to another, currently there’s a lag when creating the new area which I really want to reduce or remove.

The other two sections are the pieces I really want to get my teeth into, that’s the enemies with basic reactions. The other is to make each city block more unique, I want there to be different building types and searchable items (crashed cars, bodies, containers, etc)

Seamless city generation progress

I’ve made the decision to change the loading of levels in the game. Originally the plan was to load each piece of the city at a time when you exited and entered a new area. In more recent games, gamers are more accustom for levels loading in the background making it a seamless experience, therefore, this is what I’ve attempted to go for.

To show how I’ve implemented this, I’ve zoomed right out to give  you an idea of the process being performed.

As you can see there’s still a little left to do, the buildings at the edge of each section is still full length which will lead to long buildings so I just need to half the width of these. There’s also a slight lag while each block is being generated. All in all, it’s not too far off what I was hoping to achieve, just needs a few tweaks.

Game Development (April 2013)

Once again, it’s been a while since I’ve posted anything but enthusiasm dwindled a bit a few months ago. A few changes have been made since the last update but nothing substantial. They pretty much cover what I was wanting to get done in the next stint but it hasn’t progressed much further than that. The main reason of the lack of progress is that I tried running the game on an Android Nexus and by the version of AIR available doesn’t support the 3D stage which is a bit of a major blow for trying to create a 3D game for AIR to be used on Android devices =P

Zombies!

I’ve added in basic randomised zombie sprites which are currently spawning on each road tile. At this point in time, it was mainly to get a sprite on stage with a randomly picked texture. They’re also shootable but hit-testing is a little hit & miss and needs tweaking. The next step for them is to be randomly spawning based on the player’s location and being destroyed once too far from the player. They also need to move (as zombies do), randomly at first but react to the player by noise and viewing angle.

Besides the zombies, I’ve also added in a slight camera chase so the camera movement is a little more fluid. I’ve tried to capture this in the video by starting & stopping but this may just end up being annoying. I’ve also added in a slight improvement on how the roads are being drawn on stage, now I’ve just got to replicate this on all the other models.

I’ve been trying again to get the 3D stage working on the Android but there’s been a security update which is causing problems so I can’t currently export onto the device. Hopefully I’ll crack it soon.

Update (2 minutes later)

Welllllll……. although I spent a couple of hours the other day fighting with AIR and Android and gave up in a sulk, I’ve just tried it again and it worked straight off the bat. Seriously, no changes to any configuration, literally plugged in the device & clicked debug.

Now this is working, I’m feeling a second wind coming on.

Game Development Update

Updates

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.

Interface

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.

20121127-211948.jpg
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.

Components

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.

20121124-102315.jpg

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.

20121127-232949.jpg

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.

20121127-234434.jpg

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.

Preview

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.

.

Conclusion

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.