Background Alignment Issue in Portrait Mode 3D Game for Mobile and Tablet Devices

Help & Support
21

Yes @Albertos same result I got in my phone also.

22

I guess the technique needs some more work to solve those issues. Unfortunately I’ve got a busy week ahead so I won’t be able to investigate. But good luck with finding a solution.

23

Hi @Albertos , @Kulodo133
I used below code so this seems to be working fine. But I have one doubt whether I have to use window.resize so update fill mode whenever the user changes the device mode using desktop & also whether I have to attach the same script in all the scenes…? since it is project settings doesn’t it enough to attach this script in initial scene itself.

var FillMode = pc.createScript('fillMode');

FillMode.prototype.initialize = function () {
    // window.addEventListener('resize', this.resize.bind(this));

    console.log("FillMode init :", this.app.fillMode);
    this.resize();
};

FillMode.prototype.resize = function () {
    // this.app.setCanvasFillMode('FILL_WINDOW');
    var isTablet = window.devicePixelRatio == 2 && navigator.maxTouchPoints > 0;
    const canvas = this.app.graphicsDevice.canvas;
    if (pc.platform.mobile) {
        console.log('Mobile Device');
        // Portrait
        this.app.setCanvasFillMode('FILL_WINDOW');
        canvas.style.marginTop = '';
        console.log("Removed top margin")

    } else if (isTablet) {
        console.log('Tablet Device');
        // Portrait
        this.app.setCanvasFillMode('FILL_WINDOW');
        canvas.style.marginTop = '';
        console.log("Removed top margin")
    } else {
        console.log('Desktop / Laptop');
        // Landscape
        this.app.setCanvasFillMode('KEEP_ASPECT');
    }
    console.log("fill mode :", this.app.fillMode)
};

Build Link : Build-Portrait3D - PLAYCANVAS