Sign in to follow this  

Camera problem - following player

Recommended Posts

Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player



this is how it looks following the player...


(the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this.


here's my code :

scenes.scene3 = function(){};

//Player speed
var link, vel = 150;

var map;

//Tiled Layers
var floor, water,walls;

//Object Tiled Layers
var rocks
var bushes1, bushes2, bushes3, bushes4;

scenes.scene3.prototype = {
    preload: function (){
        game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png');
        music ='openWorld');
        music.addMarker('openWorld', 0, 16, true);
        game.renderer.resize( 1216/2, 800/2);
    create: function (){
        //Game itself
       ,0, 1216, 800);
        map = game.add.tilemap('level_01');
        floor = map.createLayer('ground');
        walls = map.createLayer('walls');
        water = map.createLayer('water');
        map.setCollisionBetween(0, 100, true, 'walls');
        map.setCollisionBetween(0, 100, true, 'water');
        //Objects layer related
        rocks = game.add.physicsGroup();
        map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks);
        rocks.forEach(function(rocks){rocks.body.immovable = true;});  
        bushes = game.add.physicsGroup();
        map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes);
        map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes);
        map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes);
        map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes);
        bushes.forEach(function(bushes){bushes.body.immovable = true;});  
       //'openWorld', 0,1,true);
        // Player
        link = game.add.sprite((centerX-500), 100, 'LinkMovement');
        link.scale.setTo(0.25, 0.25);
        link.animations.add('walkHorizontalRight', [6,7,8]);
        link.animations.add('walkHorizontalLeft', [9,10,11]);
        link.animations.add('walkVerticalDown', [0,1,2]);
        link.animations.add('walkVerticalUp', [3,4,5]);
        //Life bar
        life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar');
        life.scale.setTo(0.15, 0.15);
        life.animations.add('fullHP', [0]);
        life.animations.add('twoHP', [1]);
        life.animations.add('oneHP', [2]);
        life.animations.add('Dead', [3]);
        cursors = game.input.keyboard.createCursorKeys();
        var b1 = game.add.button(900,300, 'buttonFire', function() {fire();});
        = (608,400);;
    update: function (){
        game.physics.arcade.collide(link, walls);
        game.physics.arcade.collide(link, water);
        game.physics.arcade.collide(link, rocks);
        game.physics.arcade.collide(link, bushes);
              link.body.velocity.y = -vel;
    'walkVerticalUp', 9, true);
        else if(cursors.down.isDown){
              link.body.velocity.y = vel;
    'walkVerticalDown', 9, true);
              link.body.velocity.y = 0;
              link.body.velocity.x = -vel;
    'walkHorizontalLeft', 9, true);
        else if(cursors.right.isDown){
              link.body.velocity.x = vel;
    'walkHorizontalRight', 9, true);
              link.body.velocity.x = 0;
    fire: function(){
        var bullet = bullets.getFirstDead();
        bullet.reset(link.x, link.y);
   drawHealthBar: function(){
       if (hitPoints === 3)
        else if
            (hitPoints === 2)
        else if
            (hitPoints === 1)
        else if
            (hitPoints === 0)


Share this post

Link to post
Share on other sites

Manage to Fix part of the camera had to be more "specific" with my parameters


and I notice that the (I believe is the dead zone) starts like this:

is there a way to place it in the center? (I'll be checking camera documentation meanwhile if someone could help it would be amazing) and last but not less important, how to we add bounds to the camera? I add some but obvs not working (or maybe I'm doing it wrong but here :

would like to show only the red part and not all the way to the blue part



Share this post

Link to post
Share on other sites

Remove all the camera statements.

Keep only,0, 1216, 800);
// […];
// […]

Then verify that the none of the Bounds: … values are undefined.

If you need to change the camera bounds, it should be done with camera.bounds.setTo(…), but it's unlikely that you do. The camera bounds default to the world bounds and can't be resized smaller than them.

If you want to clip the visible area around the player, then you need to use a mask. There's a thread on that here somewhere.

Share this post

Link to post
Share on other sites

I don't know what you mean with clip the visible area.

I already have my game world set to 1216x800 but I do after that game.renderer.resize( 1216/2, 800/2); to make it look like the picture above (very close instead of super far), this is how it looks without the resize AND setting the bounds to 1216x800 as you said


now this is how it looks with bounds in 608x400 WITHOUT setting up all the info I had (just like the one above)Capture.thumb.PNG.17e2ed69bd869f5a74dae6a46ba66a90.PNG

but if I add all the info back...




I can actually move my character without loosing him only problem is the black screen to the left which is what I'm trying to fix, that stills comes up if I don't resize my game:




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.