Jump to content

Arcade Physics/Debugging


flan
 Share

Recommended Posts

Greetings, I'm new to this "asking for help" thing, so this is my first post because I just can't do this alone anymore.  I'm working on a sidescroller with a simple background image, a player using player.animations for cursor movement, and physics.ARCADE.  I'm hopelessly stuck with a lot of code and a white page on the other end.  I'm using Brackets live preview via chrome but can anyone look at my code and possibly point me in the right direction?  I'm not sure how most people go about debugging, but JSLint hasn't helped.  Let me know if I'm abusing any sort of etiquette, code or otherwise, and thanks in advance.

 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>hello phaser!</title>
        <script src="phaser.min.js"></script>
    </head>
    <body>

    <script type="text/javascript">

   

        var game = new Phaser.Game(3500, 420, Phaser.AUTO, '', { preload: preload, create: create });

        function preload () {
            game.load.sprite('background', 'background.png');
            game.load.spritesheet('scottRunning', 'playerSpritesheet.png', 70, 70);
            }
        
        var player;
        var cursors;
        
        function create () {
            game.physics.startSystem(Phaser.Physics.ARCADE);
            
            game.add.image(0, 0, 'background');
            
            //origin point and dimensions of the background
            game.world.setBounds(0, 0, 3500, 420);

            player = game.add.sprite(92, game.world.centerY, 'scottRunning');
            game.physics.arcade.enable(player);
            player.body.bounce.y = 0.2;
            player.body.gravity.y = 300;
            player.body.collideWorldBounds = true;
            
            player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8], 8, true);
            player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16, 17], 8, true);
            player.animations.add('up', [18], 8, true);
            
            game.camera.follow(player);

            

        }

        function update () {
            
            // V collision parameters V
            //game.physics.arcade.collide(player, whatever);
            //game.physics.arcade.overlap(player, stars, collectStar, null, this);

            cursors = game.input.keyboard.createCursorKeys();
            
            player.body.velocity.x = 0;
            
            if (cursors.left.isDown) {
                    player.body.velocity.x = -150;
                    player.animations.play('left');
                }
            
            else if (cursors.right.isDown) {
                    player.body.velocity.x = 150;
                    player.animations.play('right');
                }
            
            else if (cursors.down.isDown) {
                    player.body.velocity.x = 0;
                    player.animations.play('up');
                }
            
            else {
                player.animations.stop();
                player.frame = 18;
                }
            
            if (cursors.up.isDown && player.body.touching.down) {
                player.body.velocity.y = -350;
                }
        }
        
        function render () {
            game.debug.cameraInfo(game.camera, 32, 32);
            game.debug.spriteCoords(player, 32, 500);
        }
        
    

    </script>
    </body>
</html>

 

background.png

playerSpritesheet.png

Link to comment
Share on other sites

I'm glad you asked for help!

JSLint wouldn't help you here. The code is well-formed, but there's not a method named "sprite" on "game.load". I've never used Brackets so I'm unfamiliar with its live preview feature, but in browsers there's a developer console that would've printed the error for you to see. When you call the JS function "console.log" it'll print messages out to that console as well.

In Chrome, you can use the statement "debugger;". If the developer tools are closed it is ignored. If the developer tools are open, it'll pause the execution of your program and highlight the line with "debugger;" on it. You can then use the console (it's a REPL) to inspect the values of local variables, test things out, etc.

That's a super-short overview of debugging JavaScript. Here's more documentation about Chrome's developer tools.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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