Unity3d and Airconsole!

gamepreview-quiz.jpgRecently I’ve been playing on Unity with airConsole API which is super cool, go check it out! So basically this API let you build games for the browser that uses cellphone as controller, and since everyone has a cell phone, it’s really easy to gather people around, It’s a nice platform that brings people together, but since we’re programmers, why not make our own game on this platform? The real question on this platform is, do we have enough documentation? And the real answer is not really, there’s a lack of information on how do we do certain things, and the community is not that big, but still, it’s not that hard if you get it. So let’s see how we do it!

  1. create a new Unity Project
  2. import from the asset store the air console API
  3. create an HTML file for the controller

controller.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″/>
        <meta name=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0″/>
        <title>test airconsole</title>
        < script type=”text/javascript” src=”https: //www.airconsole.com/api/airconsole-1.7.0.js”>< /script>
        < script>
                var airconsole = new AirConsole ({orientation:AirConsole.ORIENTATION_LANDSCAPE});
        < /script>
    </head>
    <body>
        <button ontouchstart=”move(1)” ontouchend=”move(0)” onmousedown=”move(1)” onmouseup=”move(0)>test</button>
        < script>
            airconsole.onMessage = function(from, data) {}
            airconsole.onActivePlayersChange = function(player_number) {}
airconsole.onReady = function() {}
            function click(active) {
              airconsole.message(AirConsole.SCREEN, {move: active})
            }
        < /script>
    </body>
</html>

To make things a bit clearer, AirConsole.SCREEN is the device number for the controller, each controller has a different device number, and air console is declared with one JSON parameter to indicate how the device should rotate the screen for the controller to fit. This should give you a controller with a button that sends a value named move to the computer. Let’s get on to the next steps!

4. Add in your scene a new airconsole element by right clicking in the hierarchy
hierarchy > other > AirConsole
5. Drag your controller.html into your new airconsole gameObject as parameter
6. Assign a new C# script to your AirConsole element

AirConsoleInit.cs

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

public class AirConsoleInputController : MonoBehaviour {
    public Text testUI;

#if !DISABLE_AIRCONSOLE
    void Awake () {
        AirConsole.instance.onMessage += OnMessage;
        AirConsole.instance.onConnect += OnConnect;
        AirConsole.instance.onDisconnect += OnDisconnect;
    }
        
    void OnConnect (int device_id) {
            int countOfPlayer = AirConsole.instance.GetControllerDeviceIds ().Count;
            SetCountOfPlayerForConnection (countOfPlayer);
    }
        
    void OnDisconnect (int device_id) {
        int active_player = AirConsole.instance.ConvertDeviceIdToPlayerNumber (device_id);
        if (active_player != -1) {
            //if (AirConsole.instance.GetControllerDeviceIds ().Count >= 2) {

                countOfPlayer = AirConsole.instance.GetControllerDeviceIds ().Count;
                SetCountOfPlayerForConnection ();
        }
    }
        
    void OnMessage (int device_id, JToken data) {
        int active_player = AirConsole.instance.ConvertDeviceIdToPlayerNumber (device_id);
        if (active_player != -1) {
            testUI.text = “player ” + active_player + ” with device ” + device_id + ” pressed button”;
            if((int)data[“move”] == 1){//this is the value we sent in controller.html
Debug.Log(“the user sent value 1”);
}
        }
    }

    void SetCountOfPlayerForConnection () {
        AirConsole.instance.SetActivePlayers (countOfPlayer);
    }

    void OnDestroy () {
        // unregister airconsole events on scene change
        if (AirConsole.instance != null) {
            AirConsole.instance.onMessage -= OnMessage;
        }
    }
#endif
}

So now that we’re done scripting, let’s see what we did! On awake, we do call all instance between our console (the PC) and our controller, then we’ve created an OnConnect method that is declared in our instance of airconsole to setup every new controller that connect. The SetCountOfPlayerForConnection void is used to tell the computer how many connections must be held while playing. Disconnect is pretty straight forward but the onMessage connection is a bit more complex, it’s passing in parameter a device ID like we did on the controller side, plus a JToken variable which is a JSON token so here goes our JSON from the controller.html

And ….. nope we’re not done yet!

7. Add in the hierarchy a UI text element, set it in the middle of the screen
8. Give your UItext as a parameter to your C# script component in AirConsole object

now just press play and everything should work just fine! yeah!

I hope I gave you something useful to learn, and that you’ll create your own game on the airConsole store. If you found this post useful leave a like or a comment if you have any question, I might post more about airConsole

index

Check out our games at https://totemastudio.com/#/games/zombiotik

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: