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

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...