Rollener Posted February 29, 2016 Share Posted February 29, 2016 Hi All, Recently I started developing a simple little platformer using phaser. The character jumps around on platforms, collecting stars and avoiding baddies. My problem is that of my score. By using phaser's render function, I can create a debug.text line that stays in a set position, anchored to the camera. However, for the "final product", I would like to use a game.add.text line to display the score. I've followed a couple of tutorials on both this forum, and the phaser site, however none seem to work. Either the game.add.text score does not increase upon collecting a star (I know the score variable is increasing because I still have the debug.text line showing on the screen), or the game freezes when the player sprite comes into contact with the star. I've been trying to fix this for a while now, but it's got me completely stumped. Any help would be greatly appreciated! I've copied the code below. If it's easier, I've also attached the file to this post. <!doctype html> <html lang="en"> <head> <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"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', 'assets/images/debug-grid-1920x1920.png'); game.load.image('sky', 'assets/images/sky.png'); game.load.image('ground', 'assets/images/platform.png'); game.load.image('star', 'assets/images/star.png'); game.load.spritesheet('dude', 'assets/images/dude.png', 32, 48); game.load.spritesheet('baddie', 'assets/images/baddie.png', 32, 32); game.load.image ('speedItem', 'assets/images/diamond.png'); game.load.image ('barrier', 'assets/images/barriers.png'); } var player; var playerVelocity = 300; var platforms; var movingPlatforms; var cursors; var ledgeCoords = []; var ledgeX; var ledgeY; var baddie = []; var stars; var score = 0; var scoreString = ""; var debugtext = "Null"; var gameOverTextValue = "no"; var number = 0; var deaths = 1; var gameOver = false; var playerIsHit = false; function create() { // Setting up the world game.add.tileSprite(0, 0, 1920, 1920, 'background'); game.world.setBounds(0, 0, 1920, 1920); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // The platforms group contains the ground and the 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 - 1384, '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; // Add a group for speed boosts speedBoost = game.add.group(); speedBoost.enableBody = true; speedItem = speedBoost.create(950, 200, 'speedItem') // speedItem = speedBoost.create(1050, 200, 'speedItem') // The baddie(s) and their settings baddies = game.add.group(); baddies.enableBody = true; barriers = game.add.group(); barriers.enableBody = true; stars = game.add.group(); // We will enable physics for any star that is created in this group stars.enableBody = true; // Define a function to store the x and y coordinates of each ledge as consecutive numbers in an array function storeCoordinate(x, y, array) { array.push(x); array.push(y); } storeCoordinate(-150, 250, ledgeCoords); storeCoordinate(400, 400, ledgeCoords); storeCoordinate(200, 80, ledgeCoords); storeCoordinate(915, 250, ledgeCoords); storeCoordinate(1000, 600, ledgeCoords); storeCoordinate(1450, 420, ledgeCoords); storeCoordinate(1450, 100, ledgeCoords); // Creating ledges, and then stars and baddies for (var i = 0; i < (ledgeCoords.length)/2; i++) { // The for loop conditions may seem strange, but it's smart I swear. // Two entries in the array refer to one ledge, so (ledgeCoords.length/2) is used to keep the for loop as // short as possible. // In the first iteration, i = 0, and the x and y coords we want are at positions 0 and 1 respectively. // The x coord will always be an even entry, and the y coord will always be odd. // As such, we multiply the iteration number (i) by 2 to find the x coord... var ledgeX = ledgeCoords[i * 2]; // And we add one to that multiplication to find the corresponding y value, as it is next in the array. var ledgeY = ledgeCoords[i * 2 +1]; // Create a ledge at the coordinates dictated by the array ledge = platforms.create(ledgeX, ledgeY, 'ground'); // Make each ledge immovable. ledge.body.immovable = true; // Create the barriers to keep the baddies on the platforms // These barriers as placed above, and to the left and right of the platform respectively. // This makes sure the baddies can access the full platform. barrier = barriers.create(ledgeX - 32, ledgeY - 32, 'barrier'); // Make the barriers immovable/un pushable barrier.body.immovable = true; barrier = barriers.create(ledgeX + 400, ledgeY - 32, 'barrier'); barrier.body.immovable = true; // Create one baddie per ledge // The baddies x position will be anywhere along the platform, so to keep things interesting. // And the y position will be so that they spawn 1 pixel above the platform. baddie = baddies.create(ledgeX + Math.floor(Math.random() * 200), ledgeY - 33, 'baddie'); // Add the left and right animations, set them to 7 frames/sec, and set the loop value to true. baddie.animations.add('left', [0, 1], 7, true); baddie.animations.add('right', [2, 3], 7, true); // Add some gravity for them, don't know why. baddie.body.gravity.y = 360; // Make them collide with the world bounds. baddie.body.collideWorldBounds = true; // Set the function that makes them reverse their movement along platforms. The 1 indicates // that the baddies keep 100% of their x velocity baddie.body.bounce.setTo(1,0) // Small bit of code to determine which way they will move upon spawn. // Speed stays the same regardless. var number = Math.random(); if (number > 0.5) { baddieSpeed = 70; baddie.animations.play('left'); } else { baddieSpeed = -70; baddie.animations.play('right'); }; baddie.body.velocity.x = (-1 * baddieSpeed); // Create a row of stars evenly spaced on the platform. for (var p = 0; p < 5; p++) { // Create a star inside of the 'stars' group var star = stars.create(90 * p + (ledgeX + 8), ledgeY - 50, '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; } } playerRespawn(); var gameOverText = game.add.text (32, 96, "Gameover: " + gameOverTextValue, {font: "20px Calibri", fill: "#fff", align: "center"}); gameOverText.fixedToCamera = true; //scoreString = "Score: "; var scoreText = game.add.text (32, 64, scoreString + score, {font: "20px Calibri", fill: "#fff", align: "center"}); scoreText.fixedToCamera = true; game.camera.follow(player); } function update() { // Collide the player and the stars with the platforms game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(player, movingPlatforms); game.physics.arcade.collide(stars, platforms); game.physics.arcade.collide(baddies, barriers); game.physics.arcade.collide(baddies, platforms); debugtext = playerIsHit ; // 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); // Checks to see if the player overlaps with any of the speed boosts. If he does, call the boostSpeed function game.physics.arcade.overlap(player, speedBoost, boostSpeed, null, this); // Checks to see if the player overlaps with any of the baddies. If he does, call the playerKill function game.physics.arcade.overlap(player, baddies, playerHit, null, this); for (a=0; a < baddie.length; a++) { if (baddie[a].body.velocity.x > 0) { baddie[a].animations.play('right'); } else { baddie[a].animations.play('left'); } } // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -1 * playerVelocity; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = playerVelocity; 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 endGame() { gameOverTextValue = "Yes"; gameOver = true; game.add.tileSprite(0, 0, 1920, 1920, 'sky'); //document.location.reload(); } function playerHit (player, baddie) { if (playerIsHit) { } else { playerMinimise(); } } function playerMinimise() { playerIsHit = true; score -= 50; deaths += 1; playerVelocity = 150; if (deaths > 6) { endGame(); } else { player.scale.setTo(playerScaleX * 0.9, playerScaleY * 0.9); playerNewScaleX = playerScaleX * 0.9; playerNewScaleY = playerScaleY * 0.9; setTimeout (hitReset, 2000); } } function hitReset() { playerIsHit = false; playerScaleX = playerNewScaleX; playerScaleY = playerNewScaleY; } function playerRespawn() { // The player and its settings player = game.add.sprite(915, 0, '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.gravity.y = 360; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [0, 1, 2, 3], 7, true); player.animations.add('right', [5, 6, 7, 8], 7, true); // Our controls. cursors = game.input.keyboard.createCursorKeys(); playerScaleX = 1 playerScaleY = 1 } function boostSpeed (player, speedBoost) { // Removes the star from the screen speedItemX = speedItem.position.x; speedItemY = speedItem.position.y; speedItem.kill(); playerVelocity = 300; setTimeout (speedReset, 10000); setTimeout (speedItemReset, 10000) } function speedReset() { playerVelocity = 150; } function speedItemReset() { speedItem = speedBoost.create(speedItemX, speedItemY, 'speedItem') } function collectStar () { // Removes the star from the screen star.kill(); // Add and update the score score += 10; } function render() { //game.debug.text("Gameover? " + gameOverTextValue, 32, 96); game.debug.text("Debug: " + debugtext, 32, 64); game.debug.text("Score " + score, 32, 32); game.debug.cameraInfo(game.camera, 32, 128); game.debug.spriteCoords(player, 32, 500); } </script> </body> </html> game.html Link to comment Share on other sites More sharing options...
WiLD11 Posted February 29, 2016 Share Posted February 29, 2016 You can update text like this: var txt; var score = 0; create { txt = game.add.text(x,y,text,blah); } update { score++; txt.text = score; txt.x = 0; txt.y = 0; } Link to comment Share on other sites More sharing options...
drhayes Posted February 29, 2016 Share Posted February 29, 2016 You want ".fixedToCamera = true;" for any text you want to "stick". You then have to position it by setting "cameraOffset" instead of "position". Link to comment Share on other sites More sharing options...
Recommended Posts