Azure Mobile Services for Unity3d

State of play

If you’ve followed my previous Unity3D Azure tutorials I’ve covered two well known Unity Azure plugins – Prime31 and Bitrave. Bitrave had better multi-platform support, however it required the ‘JSON.NET’ paid asset to support iOS and Android. But then there was issues with iOS AOT compiler. Because of this I decided to start a new Azure Mobile Services library for Unity3d to support multi-platforms like Unity3d – iOS, Android and Windows without need for paid plugins.

Using Azure Mobile Services in Unity3d

You can drop the Unity3dAzure library into your existing Unity project or try out the demo project to get started.

Getting started

  1. Download the Unity3d Azure demo project or use git to clone the project:
  2. Create a Mobile Service
    • Create ‘Highscores’ table for app data
    • Modify ‘Highscores’ table Insert node script to save userId
    • Create a custom API called ‘hello’
  3. In Unity3d open scene Scenes/HighscoresDemo.unity
    • Check the Demo UI script is attached to the Camera. (The script can be attached by dragging & dropping the Scripts/HighscoresDemoUI.cs script unto the Scene’s ‘Main Camera’ in the Hierarchy panel.)
  4. Paste Azure Mobile Service app’s connection strings into Unity Editor Inspector fields (or else directly into script Scripts/HighscoresDemoUI.cs)
    • Mobile Service URL
    • Mobile Service Application Key
  5. If you want to save score with userId then create Facebook app
    • Fill in Azure Mobile Service’s Identity > Facebook settings (App Id & App Secret)
    • Paste Facebook access user token into Unity Editor Inspector field (or else directly into Scripts/HighscoresDemoUI.cs)
      Play in UnityEditor

Credits

Special thanks to Jason Fox and Bret Bentzinger who put together the UnityRestClient library using the JsonFX plugin.

Ember-CLI ToDo example app with Azure Mobile Services

Background

When you create an Azure Mobile Service you can download a ToDo sample app to help you get started on a number of platforms including Windows, iOS and Android. There are also cross platform options available with Xamarin or web app development using PhoneGap or HTML/Javascript. Recently I came across a pretty neat Javascript framework called Ember for creating web apps. While you can go ahead and quickly download the Ember Starter Kit to try out some of the introductory snippets listed on the Emberjs homepage, the better option for serious development of Ember apps is to use Ember-CLI. The Ember Command Line Interface gets you up and running with a full MVC framework and helps install project dependencies using NPM (Node Package Manager) and Bower. Having just started learning Ember-CLI myself I thought it might be useful to do a getting started tutorial showing how to hook it up with Azure Mobile Services to create a ToDo app with same functionality as the other offerings already available on the Mobile Services quick-start page.

Prerequisites

Before you can start using Ember-CLI you will need Node.js installed.

How to install Node.js on Windows

Alternatively you can manage multiple node versions using the latest nvm-setup Windows installer.

See nvm-windows for more commands.

How to install Node.js on Mac

If you’re using a Mac its better to install Node.js using NVM (Node Version Manager) rather than install as admin/sudo user. Run the following commands in Terminal:

NB: In new Terminal sessions you may need to run nvm use default. If you want to you can add this to your bash profile to setup automatically.

Or for a specific node version:

Once you have node installed you can check its working by getting the version:

Installing Ember-CLI and bower

Install ember-cli, bower and phantomjs globally using the -g switch.

Creating the Todo example app using Ember-CLI and Azure Mobile Services

  1. Create an Azure Mobile Service
  2. Create example TodoItem table.
    CreateTable-TodoItem
  3. Create a new Ember-CLI app
  4. Run in ember client in Browser.
  5. Open http://localhost:4200/ in new Browser window to see web app.

    welcome-to-emberjs

  6. Save Azure Mobile Services javascript files into /vendor folder.
  7. Update the Broccoli file Brocfile.js to import /vendor javascripts
  8. Update the js hint file .jshintrc to recognise the WindowsAzure global namespace.
  9. Generate TodoItem model, index controller and route. (Generating a route will also generate a Handlebars index.hbs template by default).

  10. Create azure service. (Generating a service will also generate an azure-service.js initalizer)

  11. Update the services/azure.js script with your own Mobile Service connection strings (on lines 61-62):

    When the app first loads we will need to read a table. In this case we will read the TodoItem table to get a list of TodoItems. When a user needs to add a Todo item we will call the insert method to add an item into a table and update our Ember model for display. The del method will work the same way except the item will be deleted. Finally the update method will be used to save changes to an item, which in this case will be when the TodoItem is completed (stroked out).

  12. Edit models/todo-item.js to handle todo text string and a completed boolean so tasks can be marked off:

    The TodoItem model consists of a string property for the Todo text and a boolean property to say if the Todo item has been completed.

  13. Edit routes/index.js and set model to read TodoItems table:
  14. As ember serve auto updates as you save changes you should see some activity in your Browser’s console log.

  15. In the Browser’s console log you might get a refused to connect error “because it violates the following Content Security Policy directive: connect-src ‘self'” that means we need to update our environment config. To fix this add the following contentSecurityPolicy settings to the ENV var in config/environment.js to allow connections to *.azure-mobile.net:
  16. Update the templates/index.hbs which will be used to display the user interface.

    NB: You will get an uncaught error if you try to add, update or delete items as we still need to handle user actions with a controller.

  17. Update the controllers/index.js to handle actions from user interface and delegate them to our Azure service.

    To allow access to the service from the controller we need to inject the azureService in the initializers/azure-service.js service initializer.

    ember-cli-todo-app
    TodoItem-table

  18. Finally add some styles to grey out and strike through completed items styles/app.css:

    ember-cli-todo-app-style

Download finished Todo ember-cli project on GitHub

Unity3D Leaderboard demo using BitRave Azure plugin

This is a quick Unity3D game developer tutorial showing how to save, update and query high scores stored in the Cloud using a Mobile Service and the BitRave Azure plugin.

Watch how to create a Leaderboard in the cloud using the Unity3D BitRave plugin.

  1. To save scores in the Leaderboard table you will need to create a Mobile Service.

    If you don’t have an Azure account there is a special Cloud GameDev Offer for game developers.

  2. Get the BitRave plugin with Leaderboard scripts on my GitHub fork.

    There are two new scripts I’ve added for the Leaderboard demo:

    Unity3D BitRave Fork with Leaderboard script demo
  3. Create new Unity project.

    Unity3D BitRave Fork with Leaderboard script demo
  4. Copy contents of the BitRave Universal Plugin Assets folder into your Unity3D project’s Assets folder.

    Unity3D BitRave Fork with Leaderboard script demo
  5. Import JSON.NET dependancy from Unity Asset Store.

    Unity3D BitRave Fork with Leaderboard script demo
  6. Open the TestAzure scene.

    Unity3D BitRave Fork with Leaderboard script demo

    Select Main Camera and remove Script in the Inspector panel. (This will be replaced later.)

    Unity3D BitRave Fork with Leaderboard script demo
  7. Create ‘Leaderboard’ table in Azure Mobile Services.

    Unity3D BitRave Fork with Leaderboard script demo
  8. Open AzureUILeaderboard.cs script and replace Azure Mobile Service connection strings.

    Unity3D BitRave Fork with Leaderboard script demo
  9. Drag & drop AzureUILeaderboard.cs script to attach it to the Main Camera.

    Unity3D BitRave Fork with Leaderboard script demo
  10. Now you’re ready to play in Unity Editor add post some high scores!

    Unity3D BitRave Fork with Leaderboard script demo
    Unity3D BitRave Fork with Leaderboard script demo

In this demo project you can submit new scores, return list of all scores and update them. You can also query to show only high scores or get list of a user’s scores.

Check it out!

Karma Labs on Azure Mobile Services and BitRave plugin in their Unity3D game development.

If you are also looking to handle user identity with Mobile Services and configure build settings for iOS and Android development I touch on this in my first getting started with BitRave Azure plugin tutorial.

Share your Unity3D #GameDev with @deadlyfingers

Unity3D game dev with Azure Mobile Services using BitRave plugin

This quick-start tutorial is for Unity3D game developers who would like to get a cloud backend that runs across multiple platforms (including the Unity Editor for quick testing). One of the big advantages for game devs using Unity3D is that it supports so many platforms. It’s fair to say more people own more than one device that connects to the internet and a lot of them can run apps and games. While the platforms and ecosystems may differ as a gamer I would like to play the same game across any device (and on any platform) and expect things to sync. Azure Mobile Services is a ‘Backend as a Service’ which supports multi-platform app development. In Unity the BitRave plugin for Azure Mobile Services is designed to just work on any platform that Unity supports.

Watch getting started with Unity BitRave Azure plugin running on iOS and Android

  1. To kick off with create a Mobile Service in Azure management portal. If you don’t have an Azure account yet game developers can register for the Cloud GameDev Offer.

    NB: A Mobile Service will only take a minute to setup and just a couple of minutes more to become active and ready to use.

  2. Download BitRave plugin.

  3. Create new Unity3D project.

  4. Copy BitRave’s AzureMobileServicesUniversalPlugin/Assets into Unity3D project’s ‘Assets’ folder.

  5. Get JSON.NET Unity asset to enable cross platform support.

  6. Open TestAzure Scene.

  7. Open AzureUI.cs script and replace the connection strings with your own Mobile Service URL & API Key.

  8. The BitRave demo uses Authentication with Facebook. You will need to create a Facebook app for your Mobile Service and copy & paste the App Id and App Secret into your Mobile Service’s IDENTITY Facebook section. Then generate the Facebook Access Token under Facebook’s Tools > Access Tokens.

    Copy the Access Token and paste into AzureUI.cs script’s Access Token value.

    NB: Remember to save changes.

  9. In Unity select the Main Camera and remove the Script in the Inspector panel.

    Reattach the AzureUI.cs script. (Drag & drop the script onto the Camera.)

  10. Add the demo TodoItem table (in Azure Mobile Service’s get started section).

  11. Run in Unity Editor and connect to Mobile Service.

    Once logged in you can add a TodoItem.

    You can query or list all items.

    Items can be selected to updated.

  12. In Unity Build Settings switch platform to build for iOS. I’ve selected Development Build and Symlink Unity Libraries for smaller/faster builds.

    To run on the iOS Simulator edit Player Settings and under Target iOS Version menu select Simulator SDK

  13. Open Xcode project to build & run. Rotate iOS simulator to landscape to display UI.

    Connect to Mobile Services by logging in to add some items.

  14. In Unity Build Settings switch platform to build for Android. I’ve selected Development Build and Google Android Project.

    Edit Player Settings to change the Bundle Identifier. (This is in reverse domain name notation – for example net.deadlyfingers.DemoApp)

  15. Import Android project into Android Studio.

    Edit the AndroidManifest.xml and change the installLocation attribute to auto.

    Build & run app. (I find the Nexus 7 tablet API 21 ARM emulator works best with Unity builds.)

    Rotate Android emulator to landscape to display UI.

    Connect to Mobile Services by logging in to add some items.

One more thing to todo!

You can also record the userId by adding one line of code on the server-side.

TodoItem-Insert-userId

Edit TodoItem table Script > Insert

Score bonus points!

Check out my Leaderboard BitRave tutorial showing how to save, update and query high scores stored in the Cloud using a Mobile Service.

Share your Unity3D #GameDev with @deadlyfingers

Unity3D and Cloud backend using Azure Mobile Services and Prime31 plugin

Unity game developers looking to publish their games on Windows Store might want to add global/local high-score leaderboards, record user achievements and level progress. For example the ability to save level progress is usually important as users tend to own more than one device and won’t really like the idea of starting over again. With Azure Mobile Services it’s really easy to setup a cloud backend for apps so why not use an Azure Mobile Service to provide a backend for your game? The best part is it will only take a couple of minutes to setup!

Watch getting started with Unity Prime31 Azure plugin running on Windows

  1. Sign-in to Azure portal. If you don’t have an Azure account yet game developers can register for the Cloud GameDev Offer.
  2. Create Azure Mobile Service
    Create Mobile Service
    Create Mobile Service
    Create Mobile Service
  3. Create Demo TodoItem Table
    Create Mobile Service
  4. Get Prime31 “Microsoft Azure Plugin” for Windows 8 Store. (free until July 2015)
    Create Mobile Service

    When you click on the “Download Now” button, it will prompt you for your name/email. Submit the form to get the download link to the Unity plugin sent to your email.

  5. Download & install Microsoft Azure Mobile Services SDK.
    Install Azure Mobile Services SDK
  6. Create new Unity3D project
    Unity3D New Project
  7. Download Prime31 plugin from email link and then open the ‘MetroAzure.unitypackage’ package
    Open Prime31 plugin package
  8. Import the Prime31 plugin package.
    Unity3D import plugin package
  9. Open “MetroAzure” Scene
    Unity3D open MetroAzure Scene
  10. Open “MetroAzureDemoUI.cs” Script
    Unity3D open MetroAzureDemoUI script
  11. Copy & Paste Azure Mobile Services Connection Strings (from Azure Mobile Service portal)
    Unity3D open MetroAzureDemoUI script

    Remember to save changes!

  12. Select File > Build Settings and target Windows Store platform.
    Unity3D Build Settings
    • “Add Current” scene
    • Select “Windows Store” and “Switch Platform”
    • Select C# Solution and SDK “8.1”
  13. Select Player Settings
    Unity3D Player Settings

    Under “Metro Unprocessed Plugins” set:
    Size: 1
    Element 0: P31MetroAzure.dll
    Click Build

  14. Open Windows Store build in Visual Studio
    Windows Store build
  15. Open ‘Package.appxmanifest’ manifest to add Internet capabilities.
    Windows app manifest capabilities
  16. If necessary open ‘Configuration Manager’ to target current PC hardware.
    Windows Configuration Manager
    Windows Configuration Manager x86
  17. Build and run!
    Visual Studio
    Unity demo

    ‘Connect Azure Service’ first, then try adding some items.

    Azure Mobile Services Demo Table

    You will see the items appear in your Azure Mobile Service ‘TodoItem’ table.

Ready for the next level?

Check out these links which will show you how to make a leaderboard using Azure Mobile Services & Prime31:

Additional Resources:

One more thing…

Now is a great time to publish Unity games for Windows!

  • Lifetime dev centre means no more recurring annual developer fees!
  • Take advantage of the Unity Offer Program for Windows apps to qualify for developer device, Unity Asset Store Voucher, Unity3D Pro License, ID@XBox priority and more!

Share your Unity3D #GameDev with @deadlyfingers

Send GCM Push Notifications using Azure Mobile Services

  • Difficulty Rating***
  • Time Estimate15 minutes

Tutorial requirements:


  1. First install Google Play Services package in the Android SDK Manager.

    NB: If using an Android Virtual Device then ensure your Target is set to Google APIs to allow Push Notifications to work.

  2. Create a new project in Google Developers Console.

    Turn on Google Cloud Messaging for Android.

    Create a new Public API access key.

    Create a new Server key.


  3. Copy the public API key

    Paste API key into Mobile Service’s Push > Google Cloud Messaging settings

    Save changes.

  4. Copy google-play-services.jar (from Android SDK libs) and notifications.jar (from Azure Mobiles Services SDK for Android) into the Android project’s libs folder.

  5. Add Push Notification permissions to the project’s AndroidManifest.xml.

    NB: Replace all occurrences of **my_app_package** with the manifest’s package name attribute.

    Add the receiver block just before the application closing tag.
    eg. … </application>

    NB: Replace **my_app_package** with the manifest’s package name attribute.

    NB: If you get a red text error on receiver notifications.NotificationsBroadcastReceiver then add dependencies to the build.gradle file and sync project libraries.

  6. Copy Google Project Number in overview section.

    Paste value into ToDoActivity.java as a String constant.

    In the onCreate method of ToDoActivity.java add a Notifications Manager handler.

  7. Create a Channel class

  8. Create MyPushNotificationsHandler class

    Tip: To auto import classes in Android Studio enable Add umabiguous imports on the fly

  9. Create new Channel table in Azure Mobile Services.

  10. Edit TodoItem table Script > Insert


    This will send a push notification upon successful insert of a Todo item.

  11. Edit Channel table Script > Insert


    This will prevent duplicate registrations of user and device handles.

  12. In the app add a Todo item to trigger a Push Notification

    The Push Notification will appear with the Todo item text.

That’s all there is to it! If you wanted to take it to the next level you could use this backend Mobile Service and roll it out across other platforms like Windows Store, Windows Phone, iOS, or use cross platform tools like Xamerin or Phonegap.

For latest platform support, how to connect to other identities and push notification services check out the Azure online docs.

Setup Mobile Service table permissions and authentication

  • Difficulty Rating**
  • Time Estimate15 minutes

Tutorial requirements:


This article builds on top of the previous tutorial where an Android Todo app was created with Azure Mobile Services. However most steps can be adapted for any Mobile Services Android app.

  1. Edit TodoItem table insert permissions to Only Authenticated Users.

  2. Create twitter app.

    Copy Mobile Service URL from Azure Mobile Service Dashboard

    Paste the Azure Mobile Service URL into Twitter app’s Website and Callback URL fields and save. Then in Settings tab tick the ‘Allow this application to be used Sign in with Twitter’ checkbox.

  3. In Twitter app’s API Keys tab copy the API key & API secret.

    And paste them into Identity > Twitter settings.

  4. In Android Studio ToDoActivity cut the code block under the new Mobile Service client.

    And paste into a new method createTable().

  5. Replace the code block with a new authenticate() method.

    Then build and run

  6. Sign-in with Twitter.

  7. You can record the userId on the server-side. Edit table Script > Insert

  8. Add another Todo item in the app.

    Refresh the ToDoItem table to see the new item with userId.

  9. Now change Script > Read so app shows only the authenticated user’s items.

  10. Refresh app to see changes.

    The list should only show ToDo items that belong to that user now.

Impressive — with just a couple of lines of code the app is updated to enable user authentication and handle identity requests.

Azure Mobile Services also allows you to send Push Notifications which is covered in the next tutorial.

Create a Mobile Service in Azure

  • Difficulty Rating*
  • Time Estimate10 minutes

Tutorial requirements:


  1. Create a new Mobile Service in Azure.



    The wizard will take you through this process in a couple of steps. Once the mobile service is created it will only take a couple of minutes to start up before its ready to use.

  2. Create Todo Table.

  3. Download Todo App.

  4. Extract the Eclipse project archive and Import Project in Android Studio.


    The project may take a while to import while Gradle syncs the libraries.

  5. Build and run!

  6. Add ToDo item and then browse the TodoItem Table in Azure Mobile Services.


Cool – you just built an Android app with a cloud backend in minutes!

Now you can add table permissions and setup authentication using Twitter in the next tutorial.

Create an Android app with a cloud backend in minutes

These days it’s probably a good idea to have cloud backend for your apps. There are a greater number of connected devices in comparison to individuals, which means your apps may be expected to work as well as sync across multiple platforms as a rule.

The number of connected devices more than number of people.

The number of connected devices is more than number of people since 2008. Source: Cisco

This tutorial will show you how to create a cloud backend for an Android app, but the bigger picture would be the ability to roll this out to the other platforms as well. The idea that all the connected devices of an individual user (perhaps an iPhone, iPad, WindowsPhone and Windows device) could all tap into the same shared resources and server-side business logic in the cloud. Of course managing a cloud infrastructure or server isn’t something that most app developers want to get burdened with, never mind the cost and time implications. Azure Mobile Services takes care of all that, enabling developers to focus on developing the app – making the best possible user experience.

I have arranged this tutorial as a three part series. Each part features a 10-15 minute video screencast to allow inclusion of additional titbits that I hope will prove useful. Please note these tutorials are recorded using Android Studio on a Mac, so bear in mind that some steps may differ slightly if you are using Android Studio for Windows or Eclipse.

How to create an Android app using Azure Mobile Services tutorial parts:

  1. Create Mobile Service in Azure
  2. Setup database table permissions and Twitter authentication
  3. Send push notifications with Google Cloud Messenger (GCM)