Jump to content

Updating, Camera-Following Text


Rollener
 Share

Recommended Posts

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

 Share

  • Recently Browsing   0 members

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