[SOLVED] PlayCanvas crash on Samsung S7 Edge

Niall_Taylor · January 19, 2018, 3:48pm

We’re currently using PlayCanvas to build for Facebook Instant Games, and are currently in the submission process. The game runs great on every android device we can test on except the Samsung S7 Edge.

After the playcanvas loading screen, the game only displays a black screen. This issue only occurs on the S7 Edge (not, for example, the regular S7) and only when running as a facebook instant game. It is possible it will occur on other android devices that we don’t have access to. The web builds, when accessed through the device, run perfectly fine. The game itself is still running - we can tell by the SFX that the game is playing, controls are working, high scores sent to the facebook SDK etc - it just won’t display anything but a black screen!

We’re tearing our hair out trying to find the source of the problem - its extremely difficult to get at a crash log from facebook messenger (especially considering the issue ISN’T a crash) - would anyone have any insight on the source of the problem? Its extremely bizarre. We thought it might have something to do with the “edge” screen resolutions, but it runs fine on an S8 edge.

EDIT: Its definitely an aspect ratio issue. Is there a reason that things would fail to render for this specific aspect ration? Seems to be an extremely bizarre bug!

Any help would be fantastic!

yaustar · January 19, 2018, 6:32pm

How did you find out it was an aspect ratio issue? Is it reproducible outside of Facebook Messenger?

Niall_Taylor · January 22, 2018, 2:11pm

Trial and error, destructive testing. We’re currently learning towards it being a device pixel density issue, alongside aspect ratio,

We can fix the issue by disabling device pixel ratio in the editor - however at that point it causes the game to look absolutely terrible on lower pixel-density devices (such as iPhone 6S). This obviously isn’t good enough, either for us or our clients.

Is there somewhere in the documentation we can find a control that checks the pixel density of a device and then programmatically sets the DPR setting? Are we even on the right track with this?

Cheers

yaustar · January 22, 2018, 4:33pm

This issue sounds familiar but I can’t remember where from. I don’t think you are on the wrong track and it might be due to the canvas resizing. Are you doing anything with the canvas directly in your game?

I believe you can change the pixel device ratio at runtime via device._maxPixelRatio https://github.com/playcanvas/engine/blob/d71de2d143dee4d39498950093b8037a2fe8fc6e/src/graphics/device.js#L2627

When running the Facebook Messenger game, is there a border around the game or is the window a different size to ‘normal’?

will · January 23, 2018, 1:26am

Well, the underscore indicates that’s a private property. You should really use this:

github.com

playcanvas/engine/blob/d71de2d143dee4d39498950093b8037a2fe8fc6e/src/graphics/device.js#L2728


                if (glExt) {
                    maxAniso = gl.getParameter(glExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
                }
            }


            return maxAniso;
        };
    } )()
});


Object.defineProperty(GraphicsDevice.prototype, 'maxPixelRatio', {
    get: function () { return this._maxPixelRatio; },
    set: function (ratio) {
        this._maxPixelRatio = ratio;
        this.resizeCanvas(this._width, this._height);
    }
});


return {
    UnsupportedBrowserError: UnsupportedBrowserError,
    ContextCreationError: ContextCreationError,

Have you tried just clamping this to something sensible - like between 1 and 2? Galaxy S7 Edge has a device pixel ratio of 4. In other words, do the following in an initialize function on startup:

this.app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 2);

Niall_Taylor · January 23, 2018, 10:51am

Have you tried just clamping this to something sensible - like between 1 and 2? Galaxy S7 Edge has a device pixel ratio of 4. In other words, do the following in an initialize function on startup:

this.app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 2);

This was the solution we came up with, albeit in a roundabout manner (we ended up editing the index.html to force this, which with trial and error gave us a similar outcome. This method of controlling it through code was exactly what we were looking for, however, and is a much more elegant solution so thankyou!

Its such an odd issue - as the problem didn’t replicate on other devices with that pixel ratio. The s7 edge was the only edge case we could find. Thank you for your assistance everyone!