The AirConsole controller — handling views

A quick guide about how to make and switch between different views on your AirConsole controller.

For those of you who haven’t heard of AirConsole: It’s an online gaming platform where you can play local multiplayer games, which you control with your smartphone. AirConsole also provides a service with an API and plugins, which developers can use to create their own local multiplayer games.

I frequently get asked the question about how to build different views, mostly from people who create games with an AirConsole plugin such as Unity or Construct2. Because there is no way to do it with the plugin itself.

Controller.html — It’s a website

An AirConsole controller is not part of the AirConsole Unity or Construct2 plugin. It has to be seen as a normal website. If you have ever written a website in html, css and javascript then you basically already know how to create a controller for an AirConsole game. The only difference is that your website runs on a mobile device and you have to learn how to use the AirConsole Javascript API.

Use different views to improve the user experience

We encourage developers to display different views or “states” instead of packing everything into one.

Silly Run Valley — Controller when game is loading

For example, if a player starts your game and it is still loading on the screen, then show a “Game is loading …” text on the controller, instead of already showing in-game buttons or a game-menu. This way the player always knows thats going on and the game is not broken.

Switching between different views

The easiest way to switch between different controller views, is simply to have a <div>-container for each view and handle their visibility with javascript and css.

Let’s say we have 3 different views:

• Loading (Show some loading spinner)
• Menu (could have game options, menu, character selection)
• In-game (Show your in-game controller)

For each view we create a <div> container with a unique id and a class “view”. The id helps us later to identify the view.

// Controller html
<div id="loading_view" class="view">Loading ...</div>
<div id="menu_view" class="view">Your menu</div>
<div id="ingame_view" class="view">Controller ...</div>

The css .view class helps us to define a general style for all containers. In the beginning, every container is invisible:

// CSS style
.view {
  display:none;
}

Now, when we open the controller.html we would see nothing, because every container is set to display:none.

To handle views and show/hide them we will write some Javascript. The main procedure to show one view is:

• Hide all containers (By class .view)
• Show the container by id

<script type="text/javascript>
var showView = function(id) {
  var view = document.getElementById(id);
  var all_views = document.querySelectorAll('view');
  // Hide all containers
  for (var i=0; i<all_views.length; i++) {
    all_views[i].style.display = 'none';
  }
  
  // Show container
  view.style.display = 'block';
};
// Show the view with the id 'loading_view':
showView('loading_view');
// A button to switch to the ingame view
var my_button = document.getElementById('go_to_game');
my_button.addEventListener('touchstart', function() {
  showView('ingame_view');
});
</script>

This is of course a really primitive way of handling controller views.

If you want to have a bit more power, I recommend you to use at least a library such as jQuery, handlebars or even AngularJS.

Let the screen switch the view

Of course you also want to let the screen decide when a view should change on one or more devices. For example when the game has ended, we want to show a ‘Game-End-View’ on every controller.

To communicate between a screen and it’s controllers we use the AirConsole.message and AirConsole.onMessage methods.

// On your screen (or corresponding Construct2 / Unity methods)
// Code to send a message to all controllers
airconsole.broadcast({
  view: 'game_end_view'
});
// In the controller.html
airconsole.onMessage(device_id, data) = function() {
  // Check if the data, we sent, contains view
  if (data.view) {
    showView(data.view);
  }
});

In Construct2 you would use the Send data or Broadcast data actions. But because you are limited to sending just a string in Construct2, you would have to send something like “game_end_view” and then check in the onMessage() method which string was sent and then call the showView accordingly.

If you want to know more about what we have learned about making controllers for AirConsole, then check out the post: AirConsole Dev Diary: Smartphones as Controllers.