Jump to content

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


HugeBigAl
 Share

Recommended Posts

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...