0

I have been playing around with creating AirConsole controllers using Construct 2. Construct 2 comes with several scaling modes to ensure that the canvas scales as desired. I have tested every possible combination, and found that the simulator (running in Safari, Edge, Chrome, and Firefox) works correctly, the Nexus 5 works correctly, but the iPhone 7 Plus and iPad (running the iPhone AirConsole app) both do not obey the scaling I have set in Construct 2.

At 1280x720, this means a portion of the controller is always offscreen. I have used both the "AirConsole" and "AirConsoleController" plugins on the screen side, and both have the same issue. When I remove both plugins from my Construct 2 project and load the page using airconsole.com/#[SERVER_URL]/pong, the scaling problem goes away, but I lose the ability to call AirConsole API methods (set orientation to landscape, handshake, messaging, etc.).

I fully understand that this probably not high on the priority list, as the AirConsole team has done a great job putting together the controller generator, but would it be possible to take a look into this problem on iOS devices? Is there something happening on the AirConsole side that would overwrite the Construct 2 screen scaling rules for iOS controllers?

One of our team's goals is to create a controller minigame that a user would play on their device while the main game was in progress on screen.html. It would much simpler to do this in Construct 2, rather than coding it by hand.

Edit:

I reran a quick test of the Pong example using the Phaser.io tank screen as a controller, instead of the pong buttons. In this test, I would expect to see the tank screen loading onto the controller. This is what I see on the simulator and on my Nexus 5. On my iPhone, half of the tank screen is off of the edge of the phone.

Since a similar behavior occurs in both the Construct 2 and Phaser.io projects, I have a hunch that the problem might occur whenever a canvas element is placed on iOS screens for AirConsole controllers.

CBruce
  • 13
  • 1
  • 4
  • For what I know is that AirConsole has pretty many rules to make the controller be not scrollable, not zoomable, not movable etc etc. I might sound repetitive I know, but have you tried using, on IOS, the new controller generator? https://developers.airconsole.com/tools/airconsole-controller-generator/app/index.html#/ – Psychokiller1888 Jan 30 '17 at 08:29
  • @Psychokiller1888, thank you for putting up the link to the new version of the controller generator. It is WAY improved over the old one! Have you used it? I assume that to do different/larger buttons, it is just a matter of swapping out images and changing button sizes in CSS? – CBruce Jan 30 '17 at 11:19
  • Can you also try to set setup_document to false in the AirConsole options? Like: new AirConsole({ setup_document: false }); on the controller – Zeus Jan 30 '17 at 21:02
  • Yes, with the new controller generator styling gets way easier. Every element has now an id or css class and you can write your own css or overwrite css – Zeus Jan 30 '17 at 21:03
  • @Zeus, Thank you for the suggestion! I tried setup_document:false, but that didn't seem to work either. – CBruce Jan 30 '17 at 22:11
  • @Zeus As I have reported per mail, the new generator is very cool. But you guys are missing a list of usable css classes to display to the user generating his controller. How do we create a round button if we don't know the css classes? – Psychokiller1888 Jan 31 '17 at 09:04
  • ok - is your code somewhere online? @Psychokiller1888: thats true, although that list of styles we offer is very tiny. We rather want to encourage devs to create their own styles. Here is basically the doc: https://github.com/AirConsole/airconsole-controls – Zeus Jan 31 '17 at 10:40
  • Can you try to run it in a non AirConsole context? Just a controller.html with the game and then load it with your smartphone? Could also be an iPhone7 rendering problem – Zeus Jan 31 '17 at 10:42
  • @Zeus, no luck. If I run it without AirConsole, it displays fine. If I run it inside of AirConsole, but don't create a new airconsole object, it displays fine. As soon as I create a new airconsole object, the problem appears. Here is a link: [link]https://www.airconsole.com/simulator/#https://dl.dropboxusercontent.com/u/55106174/pong/ – CBruce Jan 31 '17 at 11:01
  • Hm ok, because setup_document is the only thing which alters the document style. Btw you have the airconsole-1.6.0.js included twice. Can you upload a version which works? It seem the canvas container width is set to 1280px and the canvas to 2560px. Somehow it does not resize and the parent iframe gets also wider. – Zeus Jan 31 '17 at 12:50
  • Weird. That version should work fine -- just disconnect the second controller and come in with an iPhone as a controller instead. – CBruce Jan 31 '17 at 15:06
  • @Psychokiller1888, per your suggestion above, I have been playing with the V2 Controller Generator using the official AirConsole Construct2 plugin version 1.4.8.1, and have been unable to receive messages in C2. "OnDeviceJoin" works fine, but I can't get "OnMessageFromAnyController" to trigger, and when I check for "AirConsole.Message", I don't see anything. I have tried each of the message formats ("Default Data Structure", "Key-Value", and "JSON String") with no luck. Example message sent from controller.html: {"element":"attackbrown","data":{"pressed":true}} Any suggestions? – CBruce Feb 08 '17 at 11:18
  • @Zeus, on the Construct 2 forums I posted a few more screenshots and photographs showing what I am seeing on Nexus 5, iPhone 7 Plus, and iPad Air 2: https://www.scirra.com/forum/viewtopic.php?f=153&t=186227&p=1099055&sid=d09d8e34423f54f9d04a45e4bf2c6972#p1099055 – CBruce Feb 08 '17 at 12:07
  • @CBruce You need to use OnMessageKey functions for that, check my guide on expressions – Psychokiller1888 Feb 08 '17 at 14:13
  • Since AirConsole loads the game in an iframe, it seem there is a bug on iOS: https://www.scirra.com/forum/canvas-resize-issue-on-ipad-app-inside-div-iframe_t93903 .The proposed fix did not work though. Gonna try more – Zeus Feb 22 '17 at 09:17

1 Answers1

0

There seems to be a bug on iOS with iframes.

Applying this CSS to the controller.html fixed it for some developers:

html, body {
    height: 100%;
    overflow: hidden;
}
Zeus
  • 746
  • 4
  • 18