Phaser game in Ionic app

Question

I have a phaser game that I want to kinda implement in a ionic app. My ideia is to run the phaser game from a external link and create a button inside the ionic app that links to the game and launches from the InAppBrowser or the Cordova web view as explained here.

I have no problems running the phaser game in the mobile browser (chrome), but when it launches from the app with either the InAppBrowser or the Cordova web view the game is small.

Also, I can't click on the buttons.

Any ideia what the problem might be? In the phaser game, or in the app...

It runs well in the browser.

Link to the game: works on firefox and on mobile.

(function() {
   var game = new Phaser.Game(JOGO.area.width, JOGO.area.height, Phaser.CANVAS, 'game');     

           // -- gamestates
           game.state.add('loading', JOGO.loading);
           game.state.add('preload', JOGO.preload);
           game.state.add('menu', JOGO.menu);
           game.state.add('levelSelect', JOGO.levelSelect);
           game.state.add('jogo', JOGO.jogo);
           game.state.add('fim', JOGO.fim);

           game.state.start('loading');
})();

Play button:

var jogar = this.game.add.button(this.game.width / 2, this.game.height - this.game.height/4, "jogar");
        jogar.anchor.set(0.5);
        menuGroup.add(jogar);
        jogar.state = "levelSelect";
        jogar.events.onInputDown.add(this.onSpriteDown, this);
        jogar.events.onInputOver.add(this.onSpriteOver, this);

L Balsdon L Balsdon · Accepted Answer · 2017-04-22T21:54:32

Edit

When I first loaded the game in the browser It gave me an error in menu.js here:

onSpriteOver : function (sprite, pointer) {
    JOGO.somButton.play(); //Error on this line!!!!!
    var xpos = sprite.x;
    if(!animate)
    var tween = this.game.add.tween(sprite)
            .to({ x: xpos + 6 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos - 5 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos + 4 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos - 3 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos }, 100, Phaser.Easing.Linear.None)
            .start();
},

I think somButton was undefined. I reloaded and it work OK in the browser and on mobile. It doesn't always give the error. It only had the error on first load in the browser and on mobile.

Original

Does your phaser game have a fixed width and height or does it fill the viewport like this:

game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.CANVAS, 'gameArea');

This is taken from here:

https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/

Phaser game in Ionic app

1 Answers