Porting to AirConsole: A quick start

During the development of our upcoming game Basher Beatdown we discovered AirConsole, a new and awesome platform where you play games in your browser and use your smartphones as controllers. After having a quick look at their API I was quickly triggered to test how hard it is to port our game to AirConsole, which turned out to be surprisingly easy. Within a day I was able to play Basher Beatdown with my mobile phone! I you haven’t played the game on AirConsole yet, you can play it here!

So how easy is it to get AirConsole running in Unity? Let me show you!

1. Importing the API

Head over to the assetstore to download and import the AirConsole package into your project. They’ve set it up nicely, so it shouldn’t conflict with anything else in your project but I do suggest you make a backup before importing. Better safe than sorry!

Open up a new scene and make sure that it contains a gameobject with the AirConsole script on it. You can do this yourself or to make it easy, you can just right click in the hierarchy view and got to Create other -> Air Console.

2. Setting up the controller

The most important thing that you probably want to try to get working with AirConsole is using your mobile phone as input and seeing that input within Unity, so let’s try to achieve that! If you just want to get started and try out your game on AirConsole the hardest part is probably creating a functional controller using HTML and javascript, which you might not be familiar with. To make getting started even easier the nice folks at AirConsole created this nice and interactive way for you to make a controller, try it here! For our example I’ve recreated the basic controller that was needed to play Basher Beatdown, which looks like this:

ss-2017-01-10-at-08-07-47

<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/><link rel="stylesheet" href="airconsole-controls/button/button.css">
<link rel="stylesheet" href="airconsole-controls/dpad/dpad.css">
<link rel="stylesheet" href="airconsole-controls/joystick/joystick.css">
<link rel="stylesheet" href="airconsole-controls/ctrl-generator/controller.css">
</head>
<body>

    <div class="gamepad_container">
      <div id="left" class="left"></div>
      <div id="middle" class="middle"></div>
      <div id="right" class="right"></div>
    </div>
  

    <div style="display: none;">
      <div id="template-DPad">
        <div>
          <div class="dpad-arrow dpad-arrow-up"></div>
          <div class="dpad-arrow dpad-arrow-down"></div>
          <div class="dpad-arrow dpad-arrow-left"></div>
          <div class="dpad-arrow dpad-arrow-right"></div>
        </div>
      </div>

      <div id="template-DPadRelative">
        <div>
          <div class="dpad-instructions">SWIPE</div>
          <div class="dpad-arrow dpad-arrow-up"></div>
          <div class="dpad-arrow dpad-arrow-down"></div>
          <div class="dpad-arrow dpad-arrow-left"></div>
          <div class="dpad-arrow dpad-arrow-right"></div>
        </div>
      </div>

      <div id="template-Joystick" class="joystick">
        <div class="joystick-relative">
          <div class="joystick-relative-stick"></div>
        </div>
      </div>

      <div id="template-SwipeDigital" class="button-300-300 swipe-area">
        <div class="button-text">SWIPE</div>
      </div>
      <div id="template-SwipeAnalog" class="button-300-300 swipe-area">
        <div class="button-text">SWIPE</div>
      </div>

      <div id="template-SwipePattern" class="swipe-pattern-container"></div>

      <div id="template-ButtonVertical" class="button-300-150"><div class="button-text"></div></div>

      <div id="template-ButtonMiddle" class="button-80"><div class="button-text">START</div></div>
    </div>
  
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.3.0.js"></script>
<script type="text/javascript" src="airconsole-controls/rate-limiter/rate-limiter.js"></script>
<script type="text/javascript" src="airconsole-controls/dpad/dpad.js"></script>
<script type="text/javascript" src="airconsole-controls/joystick/joystick.js"></script>
<script type="text/javascript" src="airconsole-controls/button/button.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-digital/swipe-digital.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-analog/swipe-analog.js"></script>
<script type="text/javascript" src="airconsole-controls/swipe-pattern/swipe-pattern.js"></script>
<script type="text/javascript" src="airconsole-controls/ctrl-generator/ctrl-generator.js"></script>
<script type="text/javascript">
var airconsole = new AirConsole({orientation: AirConsole.ORIENTATION_LANDSCAPE});
CtrlGenerator.setAirConsole(airconsole);
CtrlGenerator.generate({"left":{"type":{"label":"Joystick","class_name":"Joystick"}},"middle":[{"label":"start","key":"start"}],"right":[{"type":{"label":"ButtonVertical","class_name":"Button"},"label":"Grab","key":"grab","on_up_message":false},{"type":{"label":"ButtonVertical","class_name":"Button"},"label":"Jump","key":"jump","on_up_message":false}]});
</script></body></html>

Create a new .html file within your Unity project and put the contents of the HTML there. After you’ve saved the file it needs to be added to the AirConsole gameobject in the scene to tell AirConsole which controller you’d like to use. In order for this controller to work these files need to be placed in the Assets/WebGLTemplates/AirConsole/airconsole-controls/ within the unity project as well.

ss (2017-01-12 at 10.43.21)

3. Getting the input

Getting the input is quite easy, lets create a new c# script in the unity folder called AirConsoleInput and all that’s needed to get the input is the following code:


using UnityEngine;
using System.Collections;
using NDream.AirConsole;
using Newtonsoft.Json.Linq;

public class AirConsoleInput : MonoBehaviour
{
    public Text debugText;

    void OnEnable()
    {
        AirConsole.instance.onMessage += OnMessage;
    }

    void OnDisable ()
    {
        AirConsole.instance.onMessage -= OnMessage;
    }

    void OnMessage(int from, JToken data)
    {
        Debug.Log("input from " + from + ": " + data.ToString());
        debugText.text = data.ToString();
    }
}

That’s it! If you run the scene AirConsole will open in a browser and you’ll be able to connect with your smartphone or use the onscreen controllers!

4. Playing the game

Due to the way we had set up the player with an InputController, MoveController & AnimationController all I had to do was changing the InputController to the following, after which I was able to play our game via AirConsole for the first time!


void InputHandler (JToken data)
{
    moveController.moveVector = new Vector2(data["joystick-left"]["message"]["x"].Value<float>("y"), data["joystick-left"]["message"]["y"].Value<float>("y"));

    if (data.Value<bool>("jump"))
    {
        moveController.Jump();
    }

    if (data.Value<bool>("grab"))
    {
        moveController.Grab();
    }
}

It’s as easy as that! Stay tuned for the next blog, in which I will go through creating a custom controller.

4 Comments

  • Jane January 26, 2017 Reply

    I could not resist commenting. Well written!

  • Andrew February 13, 2017 Reply

    Hey there! Thanks for sharing the info! I was wondering if you could shed some light on how you transition between different controllers? Thanks:)

  • Andrew February 18, 2017 Reply

    You’re the man! Thanks!

Leave a Reply