Construct 2 and AirConsole

Psychokiller1888

6 favourites

Tagged

Stats

4,304 visits, 6,529 views

Tools

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 4 Jan, 2017. Last updated 19 Feb, 2019

THIS PLUGIN IS DEPRECATED AND WAS REPLACED WITH THE PLUGIN VERSION 2

AirConsole

Intro

Hey everyone!

Welcome to my first tutorial concerning Airconsole's plugin version 1!

What is AirConsole? Well, AirConsole is an online video game console! Your smartphones and/or tablets become the gamepads while your browser is the console!

Since there is a plugin for Construct 2 for AirConsole, I am going to teach you the very basics of making a game for AirConsole. At the end of this tutorial you won't have any game, but the fundamentals of how to use the plugin for all your existing great games!

How it works

- Your game loads up

- When loaded your game is going to message all connected controllers to tell them the game is ready

- The connected controllers answer back to let the game know they are connected

- The controllers can now be used to control your game in the browser

What's needed

- Construct 2

- AirConsole plugin: github.com/AirConsole/airconsole-construct2

- A webserver, local or distant for testing purposes

- Some basic html knowledge for this tutorial, but AirConsole does provide a tool to generate your controllers automagically

- - HTML

- - Javascript

- - CSS

Goal of this tutorial

We are going to make our game let our controllers connect and keep a trace of them. Informations are going to be printed in your browser debug console (press F12 in your browser, use the "Console" tab)

Let's go!

- Add the AirConsole plugin to your Construct 2 install

- For debugging and proofing, add the "Browser" plugin as well

- Since version 1.4.0 AirConsole can be configured to define the maximum allowed controlelrsfor your game. Head to the plugin's properties and make sure to set to your needs

- The first thing you need to make sure your game does is letting the controllers know that it has loaded and is ready. For that, we use "Broadcast game is ready" as soon as our loader layout is complete

- Devices, or controllers, upon connecting are given a device id. Where the SCREEN, your game in the browser in this exemple, always gets device id 0, your controller will get random ids. You cannot assume that the device id 1 is the player number 1.

- - To keep a track of them we add two global variables

- - We capture their connection using the trigger "(AirConsole).On device join"

- - We write some debug informations into the console using "(Browser).Log"

- - If our first global variable is still 0, weset it with the device id that triggered the condition using "AirConsole.DeviceIdJoin"

-- Else, if the second global is still 0 we set it with that same function

- That's all what is needed to setup the connection! Well, Construct 2's side... Export your game as "HTML 5 website" in your webserver, don't forget to untick "Minify script" as this tends to be problematic. Head where you exported your game and rename "index.html" to "screen.html" as this is what AirConsole is going to call when loading your game

- Time to create a default controller! Open your favorite html or text editor (don't have one? Try https://notepad-plus-plus.org). As I don't like to mix languages, I'm am going to segregate them into their own respective files in this exemple. This will help you keeping the html code within html files, the javascript code within .js files and same for CSS

- - Include jQuery

- - Include AirConsole latest API. At the time I'm writing this it is API version 1.6.0

- - Include your own javascript file

- - Do whatever you want inside the body. All you do there is going to be your controller's look and feel

- Save this file in your exported game folder, beside "screen.html". Name it "controller.html" as required by AirConsole to load up the controllers. Time to create the folder structure so...:

- - Under your exported game, create a folder named "controller_resources"

- - In this "controller_resources" create another folder named "js"

- Navigate to the above created "js" folder and create a new file named "main.js" and open it with your favorite text/javascript editor. This is where we are going to make the controllers communicate with our game

- - Make sure the document has finished loading using the ready function

- - Instanciate AirConsole. In this exemple I specify a "landscape" orientation

- - Create a "sendHandshake" function because we devs are lazy and we don't want to write twice the same.

- - Overwrite AirConsole.onReady function

- - Overwrite AirConsole.onMessage function

- - - onReady triggers when the controller has loaded and sends a handshake to the game

- - - onMessage is where you are going to capture the messages sent from your game to your controller. In this case, if the game is sending a handshake, we reply by a handshake too!

- - That all! Save the file

Testing your game

AirConsole does provide a simulator so you don't need to use your phones to develop.

- Open up http://www.airconsole.com/simulator/

- Specify your game url... Remember, you exported your game in your webserver, so technically, if you don't have a DNS or a dynDNS your game URL is going to be: your LAN IP/game folder/

- You might have noticed that we do not specify "screen.html" in the url, this is normal as the simulator will take care of that

- If everything's fine (problems? make sure your port 80 is forwarded, that skype is not blocking it, that your firewall accepts http connections) you should now see a page where you have your game on the left, and two fake controllers on the right

- Open up your browser's debug console by hitting F12 and you should see what we made the game say a few lines above: