flan Posted February 11, 2016 Share Posted February 11, 2016 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> Link to comment Share on other sites More sharing options...
Zeterain Posted February 12, 2016 Share Posted February 12, 2016 In preload, you write: game.load.sprite('background', 'background.png'); Should be: game.load.image('background', 'background.png'); See if you can take it from there. Link to comment Share on other sites More sharing options...
drhayes Posted February 12, 2016 Share Posted February 12, 2016 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. flan 1 Link to comment Share on other sites More sharing options...
Recommended Posts