Monthly Archives: February 2017

Jetboard Joust Devlog #58 – Music, Maestro!

Well, the background music’s finally done and it’s taken what seems to be an indeterminable amount of time.

It’s partly because I had to put a proposal together for some contract work in the middle of it – which made the process seem to drag on longer than it should, but also because I decided I had to sort out the ridiculous mess of cabling (of various varieties) that had overtaken my studio and was making it difficult to work. Each of those tasks took at least two days.

I guess 8.5 days total dev time isn’t too bad for the amount of background audio that’s in there but, even accounting for the aforementioned increased in elapsed time, it still seems to have been a rather lengthy and unnecessarily painful process. Here’s how it went down (and sorry for the crackling in some of this audio – seems to be problem with running Windows on a Mac)…

1. Main Theme
I knew from the get go that I was going to utilise the same approach for the background music that I had for the in-game FX, ie all analog synths for the sounds and as few software plug-ins as possible when mixing. I needed to have a rough idea of the style of music I was going for though so started by playing the game alongside a few different tracks to see what worked best. I tried a number of different electronic artists, eventually settling on the ‘Detrimentalist’ album by Venetian Snares as my favourite, with particular reference to the tracks ‘Kyokushin’ and ‘Bebikukorica Nigiri’, the latter featuring a bunch of ‘chiptune’ type sounds which seemed particularly appropriate.

Once I had a general ‘vibe’ in mind I started creating some drum patches and banging out some beats on The DSI Tempest trying to get something that worked, using a combo of the Moog Sub 37 and Mother 32 for bass and lead duties. As often as possible I’d try and listen to what I was creating alongside a recording of the in-game fx so I could try and create sounds that weren’t going to mask and/or fight against each other to much. I found this pretty difficult to be honest.

After about a day I had a simple loop that I was generally happy with and began to work up some variations on it. I probably spent a couple of days playing around with different variations, whilst running into various technical difficulties syncing up all my gear in the process (ah – the joys of MIDI and analog)!

Then I started trying to combine all these variations into a single cohesive piece of music and this is where I started to run into problems. It didn’t work. I think this was partly because my variations were all too different and didn’t ‘flow’ together, and partly because I was trying too hard (and with too little talent) to ape Venetian Snares and the result was too full-on and tuneless.

I was getting pretty frustrated by this point. Four days in and I still didn’t have anything resembling a main theme. Then I remembered a piece of music I’d written ages ago for a J2ME game called ‘Battle Snake’ that I had always been rather fond of. I decided to dust this off and see if it would work for Jetboard Joust – fortunately it seemed like it might!

The (as it stands) final theme is a mash-up of ‘Battle Snake’ (with new sounds) and some of the variations I originally created for ‘Jetboard Joust’. I’m still not entirely happy with all the sounds here, particularly some of the more distorted ‘guitary’ type synth sounds which seem to conflict too much with the in-game fx. I may well replace these with something less harmonically rich.

Thankfully I could also use some of my original variations for the other sections of game audio so that time wasn’t entirely wasted…

2. Baiter Theme
The player has approximately two minutes and twenty seconds to complete each level in Jetboard Joust before the pace is upped and the ‘Bastard’ enemies (equivalent to the Baiters in Defender) start to attack. I thought my original (rather full-on) loop would work better for this section of the game and so created a separate piece of music for this that’s more ‘high-tension’.

3. Lost Life / Level Complete
These are short sections based on the repeated section of ‘Battle Snake’ that now forms the ‘hook’ of the main theme. An ascending progression for ‘level complete’ and a descending progression for ‘lost life’.

4. Planet Ambience
OK so this isn’t a piece of music as such but I wanted some kind of background audio during the ‘quiet’ periods of the game such as at the start of each level before enemies attack and at the end of each level once all enemies are destroyed. I’ve gone for a sort of retro sci-fi spooky ambience here with analog wind effects and vintage ‘sample and hold’ type noises that trigger seemingly randomly. I also added a weird interference loop which was the sound of some of my gear accidentally wired up incorrectly that I kind of liked. I think the planet ambience gives a nice contrast to the more full-on background music.

5. Upgrade Theme
One of the variations on my original theme was a type of minimal ‘spooky’ loop with bell-like synth effects and a lot of vintage delay. In the end this didn’t work as part of the main theme (it was too downbeat) but it seemed to work really well over the upgrade screens. I also added the wind noises from the planet ambience in here too.

6. Title Theme
I quite liked this being underplayed as well so stuck to just using the ‘planet ambience’ here with a bunch of samples of the ‘bell’ sounds from the ‘upgrade theme’ triggered randomly (all part of the same minor scale though so not entirely random). Again this has a kind of ‘vintage sci-fi’ feel which I liked. I also added spot fx for ui actions on the menu.

Now that I’ve written all that up it seems like rather a lot of work so I don’t feel quite so bad about it taking eight days or so to complete – bearing in mind I had to code all these into the game as well and managed to fix a couple of other bugs whilst I was at it. I’m bloody glad to be moving on from it though…

Dev Time: 8.5 days
Total Dev Time: approx 109 days

previous | next

mockup_3x
And This Is After I Sorted Things Out…

mockup_3x
The Original Loop – Way Too Loud For The FX!

mockup_3x
Main Theme – Jetboard Joust / Battle Snake Mash Up

mockup_3x
The Baiter Theme – High Tension Using Original Loop

mockup_3x
Upgrade Theme – Minimal And Spooky

mockup_3x
Main Menu And Planet Ambience
Advertisements

How To Use Google Maps In Xamarin.Forms

Recently I’ve been putting together an app development proposal for a potential client. It’s the sort of app that I think would suit Xamarin.Forms very well, only it has a large mapping component for which the client wants to use Google Maps on both Android and iOS.

At the time of writing the ‘built in’ Xamarin.Forms Map view has limited functionality and defaults to using Apple Maps on iOS. This makes it unsuitable for this project which meant I had to find and (roughly) test out an alternative before I could put a proposal together with any degree of confidence.

I managed to get it working in the end, but not without hitting all sorts of snags which I’ll document here in the hope it might make the process easier for someone else. Most of this information is scattered about the web but it’s difficult to find it all in one place.

1. Find A Suitable Library
Fortunately there’s a third-party open source Google Maps API in development for Xamarin forms which you can access here. Xamarin.Forms.GoogleMaps seems to be pretty full-featured so, rather than trying to reinvent the wheel, this is what I decided to use. Thanks very much to GitHub user amay077 for making this available.

2. Get It To Compile
Once downloaded from GitHub the next step is to get the Xamarin.Forms.GoogleMaps sample project to compile. This was pretty straightforward apart from a few error messages – you may run into the following on iOS:

This version of Xamarin.iOS requires the iOS 10.2 SDK (shipped with Xcode 8.2) when the managed linker is disabled. Either upgrade Xcode, or enable the managed linker. (MT0091) (XFGoogleMapSample.iOS)

To get round this either upgrade Xcode (groan) or do what I did and go to Project Options->Build->iOS Build and set linker behaviour to ‘Link Framework SDKs only’ which should fix it (you may have to clean and rebuild).

On Android you may get something like the following:

Could not find android.jar for API Level 23. This means the Android SDK platform for API Level 23 is not installed. Either install it in the Android SDK Manager (Tools > Open Android SDK Manager…), or change your Xamarin.Android project to target an API version that is installed.

A rare helpful error message this – to fix either do as the message says and go to Tools->SDK Manager and install the appropriate level SDK or go to Project Options->Build->General and select an SDK that you do have installed (I set it to Android 5.0 and it worked fine).

3. Install Google Maps On A GenyMotion Device
OK – I’m going to assume that a) you want to use an emulator for development and b) you are using GenyMotion as it’s by far the fastest. If you try and run the Xamarin.Forms.GoogleMaps sample project as is you will probably see a grey square where the map should be with ‘Xamarin.Forms.GoogleMaps’ in black text. This is because Google Play Services (which includes Google Maps) is not installed on GenyMotion by default. To do this I followed the instructions here (scroll down the page to where it says ‘Setup Google Play Services’). I was using an Android 5.0 GenyMotion device and did not need to do the first step (ARM Translation Installer).

Once you have flashed your virtual device you will get all sorts of irritating popup messages saying ‘Google Play Services Has Stopped’ and the like but if you just soldier on through this and update google play services and google maps via Google Play you should be OK. If you can get the standard Google Maps app running on the device you are sorted.

4. Create An Android API Key
So, assuming you have Google Maps running OK on your GenyMotion emulator, if you now try and run the Xamarin.Forms.GoogleMaps sample project you will just get what looks like a blank map (or a ‘barren featureless desert’ for Black Adder fans). This is because you haven’t supplied a valid API key – if you look through the Application Output of the app in Xamarin Studio you will see something like the following:

Authorization failure. Please see https://developers.google.com/maps/documentation/android-api/start for how to correctly set up the map.
In the Google Developer Console (https://console.developers.google.com)
Ensure that the “Google Maps Android API v2” is enabled.
Ensure that the following Android Key exists:
API Key: your_google_maps_android_api_v2_api_key
Android Application (;): FF:4B:77:38:AB:3A:F3:A8:42:CC:03:27:74:AA:CB:5F:66:A1:5F:D0;net.amay077.xfgooglemapsample

Copy the long hex string (SHA-1 certificate) and package name from this error message as this will save you faffing around with keystore commands later.

Now go to your Google Developer Console. On your Dashboard click ‘Enable API’ and select the Google Maps Android SDK. Now go to ‘Credentials’, click on ‘Create Credentials’ and select ‘API Key’ followed by ‘Restrict Key’.

You should now get a list of restriction options. Select ‘Android apps’ and enter the package name and SHA-1 certificate from the error message I told you to note down earlier. The API key can now be saved.

Note that you will have to enable access for both the ‘Debug’ and ‘Release’ versions of your app as they are signed differently and therefore have a different SHA-1 certificate. Simply run the app in both configurations and grab the application output as above to get the appropriate SHA-1 key for each.

Whilst you’re at it you may want to create an iOS API key (see step 5). It takes a few minutes for these to take effect so, once done, I suggest you go and make yourself a well-earned cup of coffee.

Now you need to embed your API key in your app. The way I suggest doing this is consistent with all the documentation on the matter – go to your AndroidManifest file and enter the following inside the tag:

<meta-data android:name=”com.google.android.geo.API_KEY” android:value=”YOUR_API_KEY” />
<meta-data android:name=”com.google.android.gms.version” android:value=”@integer/google_play_services_version” />

Replace ‘YOUR_API_KEY’ with your actual API key of course. Now your manifest file should look something like this:

<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221; android:versionCode=”1″ android:versionName=”1.0″ package=”net.amay077.xfgooglemapsample”>
<uses-sdk android:minSdkVersion=”15″ />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_CHECKIN_PROPERTIES” />
<uses-permission android:name=”android.permission.ACCESS_WIFI_STATE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.ACCESS_MOCK_LOCATION” />
<uses-permission android:name=”android.permission.INTERNET” />
<application android:label=”OpenHouse”>
<meta-data android:name=”com.google.android.geo.API_KEY” android:value=”AIzaSyDJ7qxHOOh_4A1PodKyU0MlkhFIsyZsNJ7″ />
<meta-data android:name=”com.google.android.gms.version” android:value=”@integer/google_play_services_version” />
</application>
</manifest>

Just one more step – in the Xamarin.Forms.GoogleMaps sample project the API key isn’t entered in this way so you will need to delete the ‘dummy’ API key that been placed there. Do do this simply open MyApp.cs and remove the following line:

[MetaData(“com.google.android.maps.v2.API_KEY”,
Value = Variables.GOOGLE_MAPS_ANDROID_API_KEY)]

Hopefully if you now rebuild and run the Android project, and you’ve waited long enough for your API key to activate, you should now be able to see Google Maps correctly displayed in the GenyMotion emulator. Well done – it’s not the simplest process in the world!

5. Create An iOs API Key
This is pretty much the same process as creating your Android API key. Go to your Google Developer Console. On your Dashboard click ‘Enable API’ and this time select the Google Maps iOS SDK. Again go to ‘Credentials’, click on ‘Create Credentials’ and select ‘API Key’ followed by ‘Restrict Key’. This time choose iOS app restriction and enter the bundle identifier from your Info.plist file. For the Xamarin.Forms.GoogleMaps sample project it’s ‘net.amay077.xfgooglemapsample’.

To embed the API key into your iOS application open AppDelegate.cs and pass the API key as a string in the call to Xamarin.FormsGoogleMaps.Init(). This should be all you need to get the app running on iOS.

6. Embed The Xamarin.Forms.GoogleMaps API In Your Own Projects
Assuming you’ve managed to run the sample project successfully it should be fairly simple to get the API working in your own Xamarin.Forms projects. Xamarin.Forms.GoogleMaps is in NuGet so, in a new Xamarin.Forms solution, right-clicking on the ‘packages’ folder and selecting ‘Add Package’ will allow you to add references to the Xamarin.Forms.GoogleMaps packages. Remember to add them to every project in your solution. You may need to enable ‘show pre-release packages’ in the NuGet browser in order to download versions that are consistent with the sample projects.

If you run into strange issues, such as XAML errors when setting properties on a Xamarin.Forms.GoogleMaps.Map view or ‘Could Not Resolve Type’ and ‘BadImageFormatException’ errors when trying to position the map then you most likely have an incompatible version of the various packages somewhere. Check that all your package references (both to Xamarin.Forms and Xamarin.Forms.GoogleMaps) are consistent in all of your projects and ideally the same as the sample project.

I hope this article saves you some of the pain and grief I endured whilst trying to get all the stuff to work. If it does I always appreciate more followers on Twitter here!

mockup_3x
FAIL – Google Maps Not Installed On GenyMotion Emulator

mockup_3x
FAIL – No Valid Google Maps API Key

mockup_3x
SUCCESS – Xamarin.Forms.GoogleMaps Working on GenyMotion Emulator

Jetboard Joust Devlog #57 – Title Deeds

Another fairly quick entry today – I now have a title screen!

This didn’t take too long to put together once I’d designed the logo – most of the time was spent messing around with different motion types. I knew I wanted the logo to move, and each word to move separately, but it took a while to get something I was happy with.

My first attempt had each word moving parallel to the ‘slant’ of the logo but for some reason I found this a bit disturbing, like the words were scraping against each other or something. There was something almost sexual about it and not in a good way. yes, I know that probably makes me weird. maybe it’s too extreme but I found it the visual equivalent of hearing nails scrape down a blackboard (if any of you are young enough to remember blackboards).

My second attempt had each word moving in a less uniform elliptical motion. I preferred this so have stuck with it for now. I did also have to separate each word on the logo and also separate the actual letters from the background which took some pixel-pushing (there’s actually four sprites here).

Adding the parallax was easy as I could pretty much just use the classes that handle this in-game with a few minor tweaks. I’m pretty pleased with the end result and think it’s certainly presentable enough for the alpha version.

Dev Time: 0.5 days
Total Dev Time: approx 100.5 days

previous | next

mockup_3x
This Is The Motion That I found Weirdly Disturbing

mockup_3x
The Final (for now!) Title Screen