Quick Start
For Unity games, please refer to our Unity tutorial.
General idea
- Create a new directory with two files screen.html and controller.html.
2. Include the AirConsole JS API and use it to communicate between devices.
3. Host your files (local/remote) and call: airconsole.com/#http://YOUR_GAME_URL/
Step by step guide
Create files:
Create a new directory for your game (E.g. game) and create two files in it:
/game
- screen.html
- controller.html
The screen.html is for the gameconsole's screen. The controller.html are for the gameconsole's controllers (gamepads).
Make sure both files can be accessed by: http://your-local-webserver/screen.html (or /controller.html)
If you don't want to create your own screen.html and controller.html right now and just play around, you can use our pong example (pong.zip) from the Classic Pong walkthrough.
Include AirConsole Javascript API file:
Include the AirConsole Javascript API in both files /screen.html and /controller.html
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.11.0.js"></script>Send a message:
Here is a simple example where the controller sends "How are you?" to the screen and the screen replies with "Full of pixels!"
/controller.html
<button id="btn-msg">Send Message</button>
<script type="text/javascript">
var airconsole = new AirConsole();
// When we press our button, we send a message to the screen
document.getElementById('btn-msg').addEventListener("click", function() {
airconsole.message(AirConsole.SCREEN, "How are you?");
});
// Listen for messages
airconsole.onMessage = function(from, data) {
// Show message on device screen
var info = document.createElement('DIV');
info.textContent = data;
document.body.appendChild(info);
};
</script> /screen.html
<script type="text/javascript">
var airconsole = new AirConsole();
// Listen for messages from other devices
airconsole.onMessage = function(from, data) {
// We receive a message -> Send message back to the device
airconsole.message(from, "Full of pixels!");
// Show message on device screen
var info = document.createElement('DIV');
info.textContent = data;
document.body.appendChild(info);
};
</script>Test your game:
You need to start a local webserver in your /game folder to serve the screen.html and controller.html
In this example we will host the two files on:
To run the game, go with the browser that should act as the screen to:
NOTE: there is NO screen.html at the end!
there are problems with certain browsers like chrome not allowing access like this with http and https mixed. Alternatively you can use: http://http.airconsole.com/?http=1&#http://192.168.0.1:8080/ or use the simulator like desribed below
Game controllers (your smartphone) can join as usual over www.airconsole.com. Enter the code you see on the screen.
When accessing the game with a separate device make sure the content (controller.html) is also accessible for that device under the url in the link ( in our example http://192.168.0.1:8080/controller.html )
The devices should now exchange the messages.
Simulator:
If you append /simulator in the URL, then you will get a split view of the screen and two controllers:
This makes testing and developing a lot easier
If you run into issue with HTTPS (mixed content issues), refer to the tunneling guide.
Device Ids - Important warning:
Make sure you do not assume that the controllers have device_ids 1, 2, 3 ... We strongly recommend you read the device ids and states guide!
Next steps:
Checkout the guide about our pong example or the API to learn more about how to build games for AirConsole.
To getting started with uploading your game to AirConsole, you can log in here: https://www.airconsole.com/developers