How to connect Phaser with Cordova

Question

I am using Visual Studio 2015 to develop html5 games, and have downloaded Phaser 2.4.6 and am trying to get an apk out. I can able to take out but Phaser is not loading...

HTML

<body>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/src/Phaser.js"></script>
<script src="scripts/index.js"></script>
</body>

index.js

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

function onDeviceReady() 
{
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener('resume', onResume.bind(this), false);
    var game = new Phaser.GAMES(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
    alert("Phaser Going Called...");
};

I didn't get an alert message that I initiated Phaser.

Answer 1

I downloaded VS 2015 Update 1 and installed the necessary bits for Apache Cordova support in Visual Studio.

Using a new project template I ended up with the following index.html :

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>SimplePhaserTest</title>
    </head>
    <body>
        <div class="app">
            <p id="deviceready" class="event">Connecting to Device</p>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script src="scripts/phaser.min.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

index.js contains the following:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

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

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var element = document.getElementById("deviceready");
        element.innerHTML = 'Device Ready';
        element.className += ' ready';

        var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create })
        alert("Phaser Going Called ...");
    };

    function preload() {

    };

    function create() {

    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
})();

Running this locally and then running on an Android device (Galaxy S4) resulted in the alert message as expected.

Maybe there was just some issues with bringing this over as a question, but some issues I saw in your code are both in your game creation:

var game = new Phaser.GAMES(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

That should be new Phaser.Game( , and you're adding it to an existing div with an id of phaser-example which isn't present in your example HTML.

It should be choking on the new Phaser.GAMES code in the browser as well, so I'm confused why you wouldn't be seeing an issue there too.

If it helps, I also have a working example of the above code in a Git repo (linking to specific commit, in case I expand upon the repo in the future).

How to connect Phaser with Cordova

Question

1 answers

solution1
1 2016-03-08 02:58:15

How to connect Phaser with Cordova

Question

1 answers

solution1 1 2016-03-08 02:58:15

solution1
1 2016-03-08 02:58:15