The one year game develpoment duel
Jun

30

2014

Multi-Device Support and HUD Elements

This post is a status update, which is how I track progress specific to my game. Check out my timeline to see what I've recently accomplished.

    Key Events
  • Added Multi-Device Support
  • Added Basic HUD
  • Tested Dynamic Image Scaling

This update was delayed by a week because I took a “vacation“, but I’m back in action and hard at work again. After the last update I had some concerns about making my game work across multiple devices, but I’m happy to say that Corona makes multi-device support pretty easy. It was actually so easy that I was not only able to make my prototype work across multiple devices, but I also had time to start adding some basic HUD elements to the game.

Multi Device Support

I plan on releasing my game to phone and tablet users running both the Android and iOS operating systems, so that means I’ll need to support a lot of mobile devices. iPads, iPhones, iTouches, Droids, Galaxy Phones and Tablets, Kindles, and even the Ouya all have different screen sizes and resolutions. I knew that Corona handles the porting of the game logic, but I didn’t know what type of work I’d have to do to the display elements.

My background is in web development and because of my experience with developing cross browser applications, I absolutely dreaded making my game prototype work across multiple platforms. Up to this point, I had been developing the game for the 1024 x 768 iPad and all of the design elements were displayed properly. Unfortunately, the design elements were not displayed properly in just about every other device.

iPad

iPad

iPad Retina

iPad-Retina

iPhone 5

iPhone5

Galaxy S3

GalaxyS3

Nook-Color

Nook-Color

Ouya

Ouya

As you can see, each device displays a different version of the game and most of them weren’t very playable. So I headed over to the Corona Docs expecting to find guidance on how to build some sort of master conversion file that would allow me to specify how things needed to look on each device. To my surprise, I didn’t need to do anything like that because Corona once again knew this would be an issue and made my life as a developer easier. As it turned out, the only code I needed to add to make my demo work on multiple devices was to add these lines:

Now when I view my updated demo in multiple devices, it looks like:

iPad

iPad

iPad Retina

iPad-Retina

iPhone 5

iPhone5

Galaxy S3

GalaxyS3

Nook-Color

Nook-Color

Ouya

Ouya

Not too bad! The game doesn’t look exactly the same, because the dimensions differ across devices, but the game is playable on all of the devices and the differences can be cleaned up by using expandable backgrounds and other device-specific artwork.

Corona also helps developers optimize their games through dynamic image scaling, which allows you to use hi-res images on hi-res devices and low-res images on low-res devices. During this update I did make sure that dynamic image scaling works for my game, but I didn’t fully implement it because of the tedious work involved with rebuilding all of my sprite assets. I’ll be replacing all of the artwork with custom art specific to my game, so there is no need to rebuild all of the prototype art.

Heads up Display (HUD)

Since I had some extra time after fooling around with multi-device support, I started working on the heads up display (HUD). I still don’t know exactly how my game is going to be played, but I do know that there will be some key HUD elements including indicating player turn, player actions, and a settings icon. With this general framework in mind, here is what I’ve come up with so far.

Player Turn
At the bottom-left of the screen you can whose turn it is and which characters are coming up in future turns. This can be expanded upon to show character health, abilities, defense, etc. I think Banner Saga did a good job with this type of functionality and I’d like to put my own spin on it.

Player Actions
Player actions can be seen at the bottom-right of the screen and this is where character specific actions will be located. I only added attack and next-turn actions for this update, but I expect this area to expand significantly as the game develops. The next turn icon does work, but the attack actions don’t actually do anything just yet.

What’s Next

I plan on building out the HUD a little bit more over the next couple of weeks. I’ll be adding functionality to the settings and attack icons and also adding some new action icons to the characters. Each character only has a base attack, but as any turn based rpg fan knows, any game worth buying has characters with super and even super duper attacks.

1 of you did not hold your tongue!
  1. Small hint here: don’t put effort into the Kindle stuff. Not really worth it as revenue is basically non existant compared to usual android stuff and iOS.


Speak freely