cjbruce Can you please share an example of your method, just a simple capx demo alongside the instructions so I can update the thread with your post. Thanks in advance.
Sure! The key to building both the AirConsole screen and controller in Construct 2 isn't actually the .capx files, it is the correct directory structure and the manual addition of one line in the screen.html and controller.html files.
1. Create a new project folder. In this folder create 2 subfolders, screen/ and controller/.
2. Export your "screen" .capx into the screen/ subfolder.
3. Export your "controller" .capx into the controller/ subfolder.
4. Copy the index.html file from screen/ and paste it into the project's root folder. Rename this file as screen.html.
5. Copy the index.html file from controller/ and paste it into the project's root folder. Rename this file as controller.html.
You should now have a directory structure that looks like this:
6. Add the following line in the screen.html file's header to redirect all screen requests to the screen folder:
<base href="screen/">
7. Add the following line in the controller.html file's header to redirect all controller requests to the controller folder:
<base href="controller/">
From now on, you should be able to just continue exporting your screen's project to the screen/ subfolder and the controller's project to the controller/ subfolder. Unless you do something drastic that requires an additional <script src=""></script> line, or some other change to the html, you should not need to update your screen.html or controller.html files. If you do, just repeat steps #2-7. I have found that it takes about 30 seconds, not including the time it takes to export the projects.
Here is the html header for my screen.html:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Robot Rumble 2</title>
<base href="screen/">
<!-- Standardised web app manifest -->
<link rel="manifest" href="appmanifest.json" />
<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />
<!-- Chrome for Android web app tags -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
<!-- All margins and padding must be zero for the canvas to fill the screen. -->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
background: #000;
color: #fff;
overflow: hidden;
touch-action: none;
-ms-touch-action: none;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
</style>
</head>[/code:33gyi2ky]
...and the header for my controller.html:
[code:33gyi2ky]<head>
<base href="controller/">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
body {
background-color: #222;
}
button {
margin-bottom: 1px;
width: 100%;
height: 48%;
border: 0;
box-sizing: border-box;
font-size: 40px;
color: #FFFFFF;
background-color: #333333;
outline: none;
}
</style>
<link href="button.css" rel="stylesheet" type="text/css" />
<link href="dpad.css" rel="stylesheet" type="text/css" />
<link href="joystick.css" rel="stylesheet" type="text/css" />
</head>[/code:33gyi2ky]