Black areas in game when resizing on a few Android Chrome versions

[istvan89]

This issue is about resizing the game. Tested it on Android 6.0.1 with Chrome 58.0.3029.83. I guess the problem is with PIXI, because when antialiasing is enabled in WEBGL mode and the new size of the game is bigger than the old size, the new size has black areas by the amount exactly how much it is bigger than the old size. Tried a workaround to create a bigger initial game size (so the new dimension can only be smaller), but after resizing the game screen starts to blink on the affected browser. When the antialiasing is disabled there is no issue. The problem appeared on Android 6.0.1 with Chrome 58, on other browsers it worked fine (Windows Phone Edge browser, IOS Safari, Andoid 5 with Chrome).

Phaser versions affected: all! Tested from 2.4.6 up to 2.7.9 Live example with antialising on: http://icedevel.com/phaser-bug/antialias-yes/index.html Antialiasing off: http://icedevel.com/phaser-bug/antialias-no/index.html In the example a simple image is stretched on the screen. Turn the orientation on mobile to see the resizing. Here is the simple test code:

var game;
var imgTest;

function preload() {

    game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    window.addEventListener("resize", function(){
        game.scale.setGameSize(window.innerWidth, window.innerHeight);
        game.scale.refresh();
    });
    game.load.image("testimage", "test.png");
}
function create() {
    imgTest = game.add.image(game.width / 2, game.height / 2, 'testimage');
    imgTest.anchor.setTo(0.5, 0.5);
    imgTest.width = game.width;
    imgTest.height = game.height;
}

function update() {
    imgTest.x = game.width / 2;
    imgTest.y = game.height / 2;
    imgTest.width = game.width;
    imgTest.height = game.height;
}

window.onload = function(){
    var config = {
        width: 400,
        height: 400,
        renderer: Phaser.WEBGL,
        antialias: true,
        state: {
            preload: preload,
            create: create,
            update: update
        }
    }

    game = new Phaser.Game(config);
};

[samme]

Can you also reproduce it without a resize handler (and window resizing)?

[istvan89]

Yes, the same thing happens... I have made a new example available here: http://icedevel.com/phaser-bug/no-resize-handler/index.html Here the game starts with a 300x300 dimension, and after 5 seconds it switches to the window dimensions. I'm not turning the phone this time, so no window resizing occurs, still Phaser fails to create the new dimension which is obviously bigger than 300x300 (the initial size).

Here is the code:

var game;
var imgTest;

function preload() {
    game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;

    game.load.image('testimage', 'test.png');
}

function create() {
    imgTest = game.add.image(game.width / 2, game.height / 2, 'testimage');
    imgTest.anchor.setTo(0.5, 0.5);
    imgTest.width = game.width;
    imgTest.height = game.height;

    this.game.time.events.add(5000, changeSize);
}

function changeSize(){
    game.scale.setGameSize(window.innerWidth, window.innerHeight);
    game.scale.refresh();
}

function update() {
    imgTest.x = game.width / 2;
    imgTest.y = game.height / 2;
    imgTest.width = game.width;
    imgTest.height = game.height;
}

window.onload = function(){
    var config = {
        width: 300,
        height: 300,
        renderer: Phaser.WEBGL,
        antialias: true,
        state: {
            preload: preload,
            create: create,
            update: update
        }
    }
    game = new Phaser.Game(config);
};