[Phaser/ Arcade Slopes] Black Screen using the Phaser Arcade Slopes

[HugeBigAl]

Hi all,

I am working on this game with a friend. We are having an issue when using the phaser-arcade-slopes.min.js. At the point when we go to add the plugin in the create() function it starts loading with a black screen and will then further keep the black screen and nothing seems to happen. We have attempted different statements etc and nothing seems to have worked. If you remove all lines that are commented saying "//Arcade Slopes", the game works perfectly with collision but obviously without the slopes working. The error we get with it when the arcade slopes code is implemented is as follows;

Uncaught TypeError: Cannot read property 'x' of undefined(...)

It says that this is coming from the phaser.min.js:24. Now if I extend this it takes me further to my JavaScript code which is as follows;

var gameFunc = function() {};

var map;
var ground;
var player;
var direction = 'left';
var jumpTimer = 0;
var movement;
var jumpButton;
var bg;

gameFunc.prototype = {


    create: function() {
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.plugins.add(Phaser.Plugin.ArcadeSlopes); //Arcade Slopes
        game.physics.arcade.gravity.y = 250; //Arcade Slopes

        bg = game.add.tileSprite(0, 0, 800, 600, 'background');
        bg.fixedToCamera = true;

        map = game.add.tilemap('level1');
        map.addTilesetImage('snow_tiles_32', 'tiles');


        ground = map.createLayer('Tile Layer 1');

        ground.debug = true;

        ground.resizeWorld();

        //Arcade Slopes
        game.slopes.convertTilemapLayer(ground, {
            1:  'FULL',
            2:  'FULL',
            3:  'FULL',
            4:  'FULL',
            5:  'FULL',
            6:  'FULL',
            7:  'FULL',
            8:  'FULL',
            9:  'HALF_TOP',
            10: 'FULL',
            12: 'FULL',
            13: 'HALF_BOTTOM_LEFT',
            14: 'HALF_BOTTOM_RIGHT',
            15: 'HALF_BOTTOM_LEFT'
        });
        //End of Arcade Slopes

        map.setCollisionBetween(1, 34, true, 'Tile Layer 1');

        player = game.add.sprite(32, 32, 'penguin');
        game.physics.enable(player, Phaser.Physics.ARCADE);

        //Arcade Slopes
        game.physics.arcade.enable(ground);
        player.body.slopes = {sat: {response: 0}}; //workaround for a phaser bug
        game.slopes.enable(player);
        player.body.slopes.preferY = true; //stops the player sliding down slopes
        //End of Arcade Slopes

        player.body.bounce.y = 0.2;
        player.body.collideWorldBounds = true;
        player.body.setSize(20, 32, 5, 16);

        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('turn', [4], 20, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);

        game.slopes.enable(player); //Arcade Slopes

        game.camera.follow(player);

        movement = game.input.keyboard.createCursorKeys();
        jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    },

    update: function() {
        game.physics.arcade.collide(player, ground);

        player.body.velocity.x = 0;

        if (movement.left.isDown)
        {
            player.body.velocity.x = -150;

            if (direction != 'left')
            {
                player.animations.play('left');
                direction = 'left';
            }
        }
        else if (movement.right.isDown)
        {
            player.body.velocity.x = 150;

            if (direction != 'right')
            {
                player.animations.play('right');
                direction = 'right';
            }
        }
        else
        {
            if (direction != 'idle')
            {
                player.animations.stop();

                if (direction == 'left')
                {
                    player.frame = 0;
                }
                else
                {
                    player.frame = 5;
                }

                direction = 'idle';
            }
        }

        if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer)
        {
            player.body.velocity.y = -250;
            jumpTimer = game.time.now + 750;
        }
    },

    render: function() {
        game.debug.bodyInfo(player, 32, 32);
    }
};

Now once extended, it says the error is coming from my update function's first line;

game.physics.arcade.collide(player, ground);

I'm not entirely sure what can be the solution here, I have tried multiple different steps and just making it either worse or nothing at all happens. If anyone can be of any help that would be great! I have posted the HTML (index.html) and the preloadJS.js incase.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="JS/libraries/phaser.min.js"></script>
    <script type="text/javascript" src="JS/libraries/phaser-arcade-slopes.min.js"></script>
    <script type="text/javascript" src="JS/preloadJS.js"></script>
    <script type="text/javascript" src="JS/menuJS.js"></script>
    <script type="text/javascript" src="JS/level1JS.js"></script>
    <script>
        var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');
        game.state.add('preloadState', preloadFunc);
        game.state.add('menuState', menuFunc);
        game.state.add('gameState', gameFunc);
        game.state.start('preloadState');
    </script>

</head>
<body>

    <div id='game'></div>

</body>
</html>

preloadJS.js

var preloadFunc = function() {};

preloadFunc.prototype = {
    preload: function() {
        this.game.load.tilemap('level1', 'assets/tilemap/tiles.json', null, Phaser.Tilemap.TILED_JSON);
        this.game.load.image('tiles', 'assets/tiles/snow_tiles_32.png');
        this.game.load.spritesheet('penguin', 'assets/sprite/penguin.png', 32, 48, 9);
        this.game.load.image('ball', 'assets/sprite/ball.png', 30, 20);
        this.game.load.image('background', 'assets/background/blue.png', 800, 600);
    },

    create: function() {
        this.game.state.start('gameState'); //Temporary state for testing the game quickly
    }
}

Thanks for the help!