1

I want to know how to integrate Phaser 3 with Apache Cordova, I was seeing a some documentation that showed a simple game with airplane into mobile app generated by Cordova.

This is de documentation: Creating Mobile Games with Phaser 3 and Cordova

But it tested on an old version of Cordova (2019). I tried with actual version and it shows a empty layout.

I tried generate the website version with Web Browser plugin for Cordova. But the console doesn't shows any response. So I think that Phasers library isn't loading by Cordova.

Is there some way for integrate Cordova with Phaser 3 or some documentation?

gabriel galindo rodriguez
  • 11
  • 1

1 Answers1

1

Well this is how I got it running (aka the minimal setup needed, for phaser):

  1. get the default cordova app to run. You can do that following this guide: https://cordova.apache.org/docs/en/11.x/guide/cli/index.html
    (It was a bit tricky for me, since I'm using windows, but following the guide should work fine)
  2. add the phaser.min.js file and any assets to the project (in my case game.js and logo.png).
  3. update the index.html:

    • add the javscript files, in may case phaser.min.js and game.js

    • Important I tripped over this on android, update the meta-tag Content-Security-Policy to include blob: for img-src:

      <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;">

And than it runs.

Here the relevant code:
(Information: this resizing and example is base on this question: https://stackoverflow.com/a/71302855/1679286)

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    orientation: Phaser.Scale.LANDSCAPE,
    autoRound: true,
    autoFocus: true,
    scale: {
        autoCenter: Phaser.Scale.CENTER_BOTH,
        mode: Phaser.Scale.RESIZE,
    },
    backgroundColor: '#000',
    scene: {
        preload() {
            this.load.image('logo', '/assets/logo.png');
        },
        create() {
            let {width, height} = this.sys.game.canvas;
            let logo = this.add.image(width/2, height/3, 'logo');
            this.tweens.add({
                targets: logo,
                y: (height*2)/3,
                duration: 2000,
                ease: 'Power2',
                yoyo: true,
                loop: -1,
            });
        }
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
            debug: true
        }
    },
};

window.addEventListener('load', async () => {
    game.scale.once('resize', function(gameSize, baseSize, displaySize){ 
        game.scene.scenes[0].physics.world.setBounds(0, 0, displaySize.width, displaySize.height);
    });
    game.scale.refresh();
});

document.addEventListener('deviceready', onDeviceReady, false);

let game;

function onDeviceReady() {
    game = new Phaser.Game(config);
}
 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
            content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';  media-src *; img-src 'self' data: content: blob:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css">
        <title>My FirstGame</title>
    </head>
    <body>
        <script src="cordova.js"></script>
        <script src="js/phaser.min.js"></script>
        <script src="js/game.js"></script>
    </body>
</html>
winner_joiner
  • 12,173
  • 4
  • 36
  • 61