Construct 2 and AirConsole - Plugin version 1

Favourite 5 favourites
Tutorial written by Psychokiller1888Originally published on 4th, January 2017 - 4 revisions

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: https://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: http://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:

What's next?

Once you have completed your game, make sure to submit it to AirConsole so that players around the world can enjoy it!

https://developers.airconsole.com/#!/guides/publish

I will write other tutorials for more specific AirConsole functions

Very usefull links

AirConsole: http://www.airconsole.com
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

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

3
jatin1726 6,153 rep

THanks. It was much awaited tutorial for me. Can you plz let me know how to create multiplayer zombie killing game using air console?

Friday, January 06, 2017 at 5:48:42 AM
2
cjbruce 18.4k rep

@Physcokiller1888,

Thanks for putting together the tutorial! AirConsole is an awesome platform, and a great fit for Construct 2. Being able to play against a roomful of friends with smartphones is, to my mind, the most fun way to play!

@jatin1726,

I believe what you have requested is available for purchase on the Scirra store, called "Zombie Annihilation".

Saturday, January 07, 2017 at 10:55:50 AM
1
Psychokiller1888 4,557 rep

@all glad you like it! Thanks!

@jatin1726 Well, I can, but you would need to be more specific in what you don't understand in airconsole for your game

Sunday, January 08, 2017 at 8:38:41 PM
0
cjbruce 18.4k rep

@Psychokiller1888,

Is there any chance that we could update this tutorial for the V2 controller generator? I think a lot of people would be interested to see how it pairs with the current version of the AirConsole plugin.

Thanks for all of the great work!

Tuesday, February 07, 2017 at 11:37:30 AM
0
Psychokiller1888 4,557 rep

@cjbruce

I had that in mind yes, but dropped the idea as I'm bringing the plugin version 2 out soon, so I'll write all tuts then

Tuesday, February 07, 2017 at 2:21:27 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.