Airconsole controller maker

Post your completed addons to share with the community

Post » Sat Apr 29, 2017 10:35 pm

Can i build controller.html in C2? or only screen.html?
B
8
S
3
Posts: 22
Reputation: 700

Post » Sun Apr 30, 2017 12:30 am

Kazmierczak wrote:Can i build controller.html in C2? or only screen.html?


Yup! This plugin is for the controller.html.

Recently I have been experimenting with moving most of my game onto the controller itself.

Here's my setup:

1. In the root directory create a screen/ folder and a controller/ folder.
2. Export your screen game into the screen/ subfolder and your controller game into the controller/ subfolder.
3. Copy/paste your screen's index.html file into the root directory, and rename it screen.html
4. Copy/paste your controller 's index.html file into the root directory, and rename it controller.html
5. Add a line to your screen.html in the header to load all URLs to the screen/ subfolder.
6. Add a line to your controller.html in the header to load all URLs to the controller/ subfolder.

With this setup, you only need to replace your screen.html or controller.html when you add a new type of plugin. Otherwise, you can just export your projects to the screen/ or controller/ sub folders, as appropriate.
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
47
S
13
G
20
Posts: 371
Reputation: 14,445

Post » Sun Apr 30, 2017 12:17 pm

i have:

Code: Select all
X:\mygame\screen\index.html (My C2 game)
X:\mygame\controller\index.html (My C2 controller)


and

Code: Select all
X:\mygame\controller.html
X:\mygame\screen.html


screen.html
Code: Select all
<!DOCTYPE html>
<html>
          <meta http-equiv="refresh" content="0; URL=screen/index.html">
</html>


it is a good solution ?
someone good have example? (capx game & capx controller)
B
8
S
3
Posts: 22
Reputation: 700

Post » Sun Apr 30, 2017 7:57 pm

@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.
Banned User
B
17
S
7
G
23
Posts: 388
Reputation: 13,994

Post » Sun Apr 30, 2017 8:54 pm

X3M wrote:@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:

Image

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:

Code: Select all
<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>


...and the header for my controller.html:

Code: Select all
<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>
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
47
S
13
G
20
Posts: 371
Reputation: 14,445

Post » Sun Apr 30, 2017 9:04 pm

@cjbruce Got it, I'll make the necessary changes to the magicWand.cmd file which will do all the work for you.
Banned User
B
17
S
7
G
23
Posts: 388
Reputation: 13,994

Post » Mon May 01, 2017 8:07 am

@cjbruce good example! This should be described officially airconsole site!
B
8
S
3
Posts: 22
Reputation: 700

Post » Mon May 01, 2017 10:47 am

Kazmierczak wrote:@cjbruce good example! This should be described officially airconsole site!


Thanks! I cross-posted this to the official AirConsole plugin thread, so hopefully people who are looking to make AirConsole games see it.
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
47
S
13
G
20
Posts: 371
Reputation: 14,445

Post » Mon May 01, 2017 5:52 pm

@cjbruce How change orientation controiller in construct 2 ? i have portrait ;/ I would like landscpae, how ?
B
8
S
3
Posts: 22
Reputation: 700

Post » Mon May 01, 2017 6:57 pm

Kazmierczak wrote:@cjbruce How change orientation controiller in construct 2 ? i have portrait ;/ I would like landscpae, how ?


When you place an "AirConsole Controller" object in a layout, be sure to change the "Orientation" property to "Landscape".

I also recommend changing the "Use HTML elements" property to "False".
www.simbucket.com - HTML5 Science Simulations / https://www.airconsole.com/#!play=com.n ... obotrumble - Robot Rumble on AirConsole
B
47
S
13
G
20
Posts: 371
Reputation: 14,445

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: zenox98 and 2 guests