X3M, sounds good. Would you mind taking a look at the stackoverflow thread I posted above?

I don't know if it is something that can be fixed in code (a weird CSS setting that could be overridden with javascript, maybe?), but it might be possible to make a fix in the C2 plugin. This wouldn't help the Phaser.io and Unity folks, of course.

cjbruce Do you have Skype so we can collaborate and resolve this problem ? I've got some fixes that I want you to try.

Your project won't get approved by Airconsole if that problem persists right ?

X3M,

We're pretty close to launching our game, so we don't want to make any big changes in the next few weeks. We're actually hardcoding the controller using jQuery and divs instead of HTML5 canvas/Construct 2.

For what it is worth, I also used the Phaser.io "Tanks" example to create a Phaser.io-based controller:

1. I renamed the "Tanks" game screen.html as controller.html. I used this because it has all of the appropriate working AirConsole code, but was not created using Construct 2.

2. I used the existing "Pong" example as my screen.html.

3. I loaded the resulting game in the AirConsole simulator.

Everything loaded fine in the simulator and on my Nexus 5, but the Phaser.io-generated controller screen shifted on my iOS devices, just like it does using the Construct 2 AirConsoleController plugin. Since the same problem occurs in controllers created with both Phaser.io and Construct 2, I suspect the fundamental issue is an interaction between the AirConsole code and canvas elements.

I would be happy to set up a Skype session. Can we work it out over PM?

Has anyone tried the capx of the driver I sent? Is it shown in full screen on iPhone? Psychokiller1888 Ustes shows an image of AirConsole Simulator. Have you tried your iPhone driver? Do you have iPhone screen capture? I do not think it's a cache issue. It's something more technical.

amariscal,

I am see the same issues that you are seeing. Here are photos and screenshots from various devices:

Nexus 5 - The square is correctly centered in the screen:

iPhone 7 Plus - The square is pushed partway down the screen:

iPad Air 2 - The square is also pushed partway down the screen:

A few days ago, I started the following thread on stack overflow:

http://stackoverflow.com/questions/4192 ... er-created

I think it might help if we had more people looking at the problem -- I'm stumped at the moment.

X3M,

Thank you for humoring me and putting in the User HTML elements = true/false capability. Unfortunately, this wasn't the fix. *feeling a little sheepish*

X3M and Psychokiller1888,

I finally had a chance to sit down with both the Nexus 5 and the iPhone 7 Plus running the "pong" example. I tested every combination that I could think of:

Scaling Modes:

None

Crop

Scale Inner

Scale Outer

Letterbox Scale

Letterbox Integer Scale

Plugins:

AirConsole Plugin + AirConsoleController Plugin

AirConsole Plugin Only

AirConsoleController Plugin Only

Neither Plugin

Phones:

iPhone 7 Plus

Nexus 5

Hi-DPI Mode On

Hi-DPI Mode Off

I found that in all cases, the Nexus 5 had no problems, and the iPhone 7 Plus failed to recognize scaling mode whenever either the AirConsole Plugin or the AirConsoleController Plugin were used. The problem went away when I removed both plugins.

From the above, I have concluded the problem with iOS failing to recognize scaling is most likely an adverse interaction between AirConsole's API and Construct 2, and has nothing to do with either plugin. Perhaps there is something in the AirConsole code that is overwriting the C2 scaling?

FraConsole,

Would it be possible to take a look at this within the airconsole API itself? I know this is probably asking a lot, but it would be nice to know if a fix is possible. We were really looking forward to using Construct 2 for our controllers, but understand if this isn't really a priority. I have posted the details on StackOverflow.

Thank you all for putting so much time and effort into getting this working!

cjbruce It can't be the DOM elements since they are laid on top of the C2 canvas in an absolute position, so they cannot affect the size of the canvas.

May I ask why are you using the Crop mode?

X3M,

I'm not using crop mode. I'm just exporting the example "pong" .capx provided in the download link at the beginning of this thread without changing anything. It is set to "letterbox scale", but I get the weird cropping effect on iOS.

I have seen similar problems before when I have attempted to create things in C2 for iOS. HTML elements render inconsistently across browsers, sometimes pushing the canvas around on iOS, but appearing fine on my Nexus 5. Since I primarily target iOS devices for my work, I have stopped using HTML elements entirely.

Just to be sure, I removed the AirConsoleController object from the "pongcontroller" project, and the problem went away.

Would it be possible to modify the plugin so that you can create a "global" object, without having to load HTML elements onto the page? This would work exactly the same as the AirConsole plugin itself.

X3M,

I've done a fair amount of testing, and can't seem to isolate the section in code that is causing the screen to be scaled incorrectly. On my iPhone and iPad, the screen is effectively in "crop" mode. I have a hunch that it is because of the way iOS deals with HTML elements overlaid upon a C2 canvas, but I can't test my hypothesis unless I can create an instance of AirConsoleController without creating an HTML element ("button", "dpad", "swipe area", "joystick", etc.) as well.

When I run the "pong" example .capx on my iphone, this is what I see:

Notice that the bottom portion of the controller, including the text with my nickname, is cut off, along with a chunk of the right portion of the controller. This is the same as what I see when I run the pong example on my iPad using the iPhone version of the AirConsole app.

Would it be possible to rework the AirConsoleController plugin such that it is a global object, like the AirConsole object? That way we wouldn't have to worry about instantiating any of the HTML elements, but could still have access to the controller methods?

X3M,

It works! I haven't tried sending custom messages yet, but it should just be a matter of parsing through a JSON string now...

I just tested on my iPad, and I'm still seeing the scaling issue:

I don't have my iPhone or Nexus 5 handy, but I will test those as soon as I can.

Could you add accelerometer options? For example, as the occlusions of the Touch object. Thank you, and your plugin is amazing!

amariscal,

You should now be able to get accelerometer data by including a Touch object, and sending a message to the screen.

Psychokiller1888,

Thank you for taking a look at this! I just think you saved my sanity.

X3M,

Nice work! I'll try it out today as soon as I get a chance. You rock!

cjbruce You surely are doing something wrong , does the Pong example work for you ? I recommend that you go from there and examine the event sheet, remember that you need to allow the devices to connect first so that OnDeviceJoin and OnDeviceLeft can work.

X3M

The pong example works fine, but it does not include an example of sending a message to the controllers other than a handshake.

I'm porting an existing project that has been working for months now, and trying to remake the controllers in C2, instead of by hand.

cjbruce Yep that's the issue, there should be only one handshake per controller, I'll update later.

Edit: That is weird because it is working fine with the pong demo. Have you tried testing on an Android device?

Edit: Add this line :

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>[/code:3n1l9htq] To the <head> of controller.html and tell me if it fixes the problem.

X3M,

No luck with the scaling problem. I wonder if it is a javascript issue. My existing code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />[/code:3n1l9htq]

The not receiving messages from the screen.html is driving me crazy.  I've spent several hours adding alerts in different spots in c2runtimectrl.js and/or in the event sheet.  All of the alerts I place directly into the code fire properly, but whenever I try to trigger an alert based on an AirConsole condition (OnDeviceJoin, OnMessage, etc.), I get nothing.  I've even tried to fiddle with the ExecJS() expression in Construct 2 to get the status of the message directly, but no luck so far.  Maybe I can create a variable at the beginning of the controller.html called "airconsoleMessageFromTheScreen", and set its value directly?

Also, I still can't get the OnDeviceJoin and OnDeviceLeft conditions to work.

I'm getting really flumoxed, and running out of ideas...

Findings after more testing:

1. When using a controller created in C2 with the two plugins, OnDeviceJoin is not called in screen.html.

2. The screen doesn't seem to be resizing correctly on my phone (iPhone 7 plus) or iPad. The screen is resizing correctly in the simulator (Nexus 5).