CODEWITHSUNDEEP
construct-2airconsole
CBruce
CBruce

Reputation: 13

Inability to correctly scale canvas on iOS for an AirConsole controller created in Construct 2

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.

Upvotes: 0

Views: 215

Answers (1)

Zeus
Zeus

Reputation: 874

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;
}

Upvotes: 0

Related Questions