Airconsole controller maker

StillSarah,

Thanks for finding the fix! We are reworking our controller over the next few weeks using the new plugin, so I'll let you know if I see any issues on iOS.

cjbruce

I did find a fix for the iPhone reconnect issue in case anyone else comes across it. Several days ago I tried copying in the handshake code directly into the controller.html hoping that would solve the problem, and it had no effect. However, now it is suddenly working. Just copy:

> <script type="text/javascript">
  var air_console = new AirConsole();

  var sendHandshake = function() {
    air_console.message(AirConsole.SCREEN, {
      handshake: true
    });
  };

  air_console.onReady = function() {
    sendHandshake();
  };

  // Let the screen know we are here
  air_console.onMessage = function(device_id, data) {
    if (data.handshake) {
      sendHandshake();
    }
  };
</script>
[/code:v0qkbmm6]
into the controller.html file and it fixes this issue now.  Hopefully this helps others who run into this.  
Thanks,
Happy Game Designing!

I don't understand, this is the default JS code for a standard connection...

Double post because totally different topic.

X3M The plugin updated to AC API 1.7.0, don't forget to update this one for the controllers to use 1.7.0

All this is also for all of you, don't forget to update your controller AC API link in the header

Double post because totally different topic.

X3M The plugin updated to AC API 1.7.0, don't forget to update this one for the controllers to use 1.7.0

All this is also for all of you, don't forget to update your controller AC API link in the header

Thanks for the heads up. What happens if you don't update the api? Will it still work?

> cjbruce

> I did find a fix for the iPhone reconnect issue in case anyone else comes across it. Several days ago I tried copying in the handshake code directly into the controller.html hoping that would solve the problem, and it had no effect. However, now it is suddenly working. Just copy:

>

> > <script type="text/javascript">
>   var air_console = new AirConsole();
> 
>   var sendHandshake = function() {
>     air_console.message(AirConsole.SCREEN, {
>       handshake: true
>     });
>   };
> 
>   air_console.onReady = function() {
>     sendHandshake();
>   };
> 
>   // Let the screen know we are here
>   air_console.onMessage = function(device_id, data) {
>     if (data.handshake) {
>       sendHandshake();
>     }
>   };
> </script>
> [/code:1ngo76fc]
> into the controller.html file and it fixes this issue now.  Hopefully this helps others who run into this.  
> Thanks,
> Happy Game Designing!
> 

I don't understand, this is the default JS code for a standard connection...

Yes, it is the default connection code. However, the controller plugin doesn't automatically put this into the controller.html file for you. So anyone using the controller plugin just needs to add it in manually. Android devices were connecting no problem without that code in the html file, but iOS devices seem to need it to be there to reconnect after disconnecting. This is just what I've observed in my own testing. It's possible that this was only an issue with my game and no one else will run into this, but from what I could tell, the on device join event wasn't getting triggered when iOS devices were trying to reconnect in, and copying the connect code right into the controller.html file fixed it for me.

Psychokiller1888 Will projects that use 1.6 stop working ?

> Double post because totally different topic.

>

> X3M The plugin updated to AC API 1.7.0, don't forget to update this one for the controllers to use 1.7.0

>

> All this is also for all of you, don't forget to update your controller AC API link in the header

>

Thanks for the heads up. What happens if you don't update the api? Will it still work?

Yes it does still work, no problem. But deprecated APIs might get deleted in the future, who knows...

X3M no, they won't

StillSarah Hmmm, ok. That code IS needed for any devices to connect, not only IOS. Anyway, the onConnect method of the plugin is bad, I'm working today on finishing the AirConsole plugin version 2. So far, I did not encounter any onConnect / on Disconnect failure, looks promising.

Follow the dev here: https://github.com/Psychokiller1888/c2airconsole but be aware it is not finished / ready for use until I release a version on Github

Psychokiller1888 Nice to hear that and fantastic work o nthe plugin. Much appreciated

Psychokiller1888 - yeah, the connect code right now is included somewhere in one of the controller's js files that is exported. I haven't had a chance to dig through and find it, but I'm sure it's there, like I said Android devices were connecting and even the iOS devices were connecting in initially too. Anyway, thanks for your thoughts on this. I don't know why copying the code into the controller.html file worked for me, I just know that it did. I've run several tests and gotten the same results each time. Thanks for all the work you've put into the airconsole plugin. Looking forward to trying out V2!

The new plugin is ready for an early release: https://github.com/Psychokiller1888/c2airconsole

Documentation should follow shortly, but technically the big changes are:

• Better connection support
• Better/easier message Controller <-> Screen support
• Dropped deprecated conditions/actions/expressions

This is a 95% done job, but bugs are to be expected (unless I'm very very good at it, which I doubt)

The plugin will be the official new AC plugin sometimes in the next two weeks. Support and documentation directly on Github.

Appreciating any feedbacks, reports, requests

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

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.

i have:

X:\mygame\screen\index.html (My C2 game)
X:\mygame\controller\index.html (My C2 controller)
[/code:158svguk]

and

[code:158svguk]X:\mygame\controller.html
X:\mygame\screen.html
[/code:158svguk] 

[b]screen.html[/b]
[code:158svguk]
<!DOCTYPE html>
<html>
          <meta http-equiv="refresh" content="0; URL=screen/index.html">
</html> 
[/code:158svguk]

it is a good solution ?
someone good have example? (capx game & capx controller)

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.

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]