THIS PLUGIN IS DEPRECATED AND WAS REPLACED WITH THE PLUGIN VERSION 2
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
- 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
- - 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)
- 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
- - Include jQuery
- - Include AirConsole latest API. At the time I'm writing this it is API version 1.6.0
- - 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"
- - 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:
Once you have completed your game, make sure to submit it to AirConsole so that players around the world can enjoy it!
I will write other tutorials for more specific AirConsole functions
Very usefull links
AirConsole developer: https://developers.airconsole.com
AirConsole controller generator: https://developers.airconsole.com/tools/airconsole-controller-generator/app/index.html#/
AirConsole testing: https://developers.airconsole.com/#!/guides/simulator
AirConsole pong exemple: https://developers.airconsole.com/#!/guides/construct2