Phaser + Phonegap

Endrocil · February 5, 2016

Trying to just get the basic tutorial game (http://phaser.io/tutorials/making-your-first-phaser-game) loaded in the iOS simulator in XCode using PhoneGap. I followed the steps in this tutorial (http://www.emanueleferonato.com/2015/04/29/from-html5-to-ios-native-game-with-phonegap-step-by-step-guide/) but the device screen is just showing up blank.

I know people have gotten PhoneGap and Phaser to work together so I must be missing something critical that isn't really explained anywhere. Any of you that have gotten it working have any ideas?

o0Corps0o · February 5, 2016

I've only used Phonegap and Phaser for an android build, but can confirm that it worked. I did however use the Phonegap Cloud builder rather than the download.
I guess make sure you have all the config.xml set up correctly? make sure there are no bugs in the code? take out all console.logs (if applicable)?

Gob0 · February 5, 2016

Hi,

i use Phaser with Cordova (99% PhoneGap) and iOs apps works fine. Using ios simulator, you can get error messages and may be error will show.

In config.xml, don't forget to set version on widget tag: ios-CFBundleVersion="1.0.0"

bymafmaf · February 5, 2016

Here are steps that I can confirm works with xcode 7.2 and cordova 6.0.0/5.4.1

1. Install nodejs.

2. Install cordova by entering this into terminal:

sudo npm install -g cordova

3. Then install these packages.

sudo npm -g install ios-sim
sudo npm -g install ios-deploy

4. Create an app with terminal and ios platform

cordova create MyApp
cordova platform add ios

5. Copy all of your data to www folder in your project folder that cordova created.

6. You need to make some changes in index. html.

Add this in the header before everything else:

<script src="cordova.js"></script>

You just need to add this, don't copy a cordova.js to your www folder. Cordova will provide it.

Then body of index.html should look like this. Cordova initializes the device api, then callbacks onDeviceReady function. So, all of your code should be inside that function.

<script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);
        

        function onDeviceReady(){
//your game code will be here.


}
</script>

6. Run this to build the project.

cordova build ios

7. Then enter platform/ios folder. There you see a .xcodeproj file. Open it and run it.

Endrocil · February 6, 2016

Hey guys, thanks for all the help. I've followed the steps exactly, except I did require one extra step because this came up:

WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING: `--unsafe-perm=true` flag when running `npm install`
!!!! WARNING: or else it will fail.
!!!! WARNING: link:
!!!! WARNING: https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan

I have it compiling and running and I've gotten it to show the "Apache PhoneGap" "Device Ready" screen but as soon as I replace my files with it the program that's built is just blank. All my files are just the tutorial files from that tutorial I linked but with the changes from Step 5. above made to the index.html file.

I'm running OS X El Capitan, XCode 7.2.1, and whatever Cordova is installed from the latest stable node.js.

Gob0 · February 6, 2016

So PhoneGap works. Check in config.xml for the name of first HTML page for your game. If config.xml says "index.html" (the default value), then your game should be started with index.html file.

Then, you can use Safari in developer mode to get JS error messages from the simulator (tutorial here).

Endrocil · February 9, 2016

Config.xml doesn't say any html file. I tried just replacing everything with a simple "Hello World" and that shows up fine so it's definitely opening and using the index.html file.

I'm really not sure where the issue is, but the screen just shows up blank when I try to have the canvas elements in it. Here are the index.html and config.xml files. Don't see anything wrong with them.

index.html

<!doctype html> 
<html lang="en"> 
<head>
    <script type="text/javascript" src="cordova.js"></script>
	<meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 9</title>
	<script type="text/javascript" src="js/phaser.min.js"></script>
	
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript">
<!--
    document.addEventListener("deviceready", onDeviceReady, false);
    
    function onDeviceReady() {
        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    }
function preload() {
    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
var score = 0;
var scoreText;
function create() {
    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);
    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');
    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();
    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;
    // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');
    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);
    //  This stops it from falling away when you jump on it
    ground.body.immovable = true;
    //  Now let's create two ledges
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
    ledge = platforms.create(-150, 250, 'ground');
    ledge.body.immovable = true;
    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');
    //  We need to enable physics on the player
    game.physics.arcade.enable(player);
    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;
    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    //  Finally some stars to collect
    stars = game.add.group();
    //  We will enable physics for any star that is created in this group
    stars.enableBody = true;
    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 12; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');
        //  Let gravity do its thing
        star.body.gravity.y = 300;
        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }
    //  The score
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
    //  Our controls.
    cursors = game.input.keyboard.createCursorKeys();
    
}
function update() {
    //  Collide the player and the stars with the platforms
    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(stars, platforms);
    //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
    game.physics.arcade.overlap(player, stars, collectStar, null, this);
    //  Reset the players velocity (movement)
    player.body.velocity.x = 0;
    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;
        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;
        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();
        player.frame = 4;
    }
    
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }
}
function collectStar (player, star) {
    
    // Removes the star from the screen
    star.kill();
    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;
}
</script>
</body>
</html>

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" ios-CFBundleVersion = "1.0.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

falicon · March 15, 2016

Try changing Phaser.AUTO to Phaser.CANVAS

Sign In

Phaser + Phonegap

Recommended Posts

Endrocil

Link to comment

Share on other sites

o0Corps0o

Link to comment

Share on other sites

Gob0

Link to comment

Share on other sites

bymafmaf

Link to comment

Share on other sites

Endrocil

Link to comment

Share on other sites

Gob0

Link to comment

Share on other sites

Endrocil

Link to comment

Share on other sites

falicon

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity