Jump to content

Golandy game - Camera follow and see around the player


PRSoluções
 Share

Recommended Posts

Hi,

 

On my open-source game Golandy:

http://golandy.prsolucoes.com/

 

I want that the camera follow the player but see around the player and not the player move to top left corner and didnt see around the player or around the map.

Can anyone help me?

The source code of game state is here:

https://github.com/prsolucoes/golandy-web/blob/master/www/js/states/GameState.js

 

Thanks.

 

Screenshot 2017-05-19 20.54.07.png

Link to comment
Share on other sites

In the past, i only need change the camera. But it is not working more.

 

    var cameraX = Math.round((this.player.sprite.x) - (game.camera.width / 2));
    var cameraY = Math.round((this.player.sprite.y) - (game.camera.height / 2));

    if (cameraX != game.camera.X || cameraY != game.camera.Y) {
        game.camera.bounds = new Phaser.Rectangle(this.player.sprite.x + (game.camera.width / 2), this.player.sprite.y + (game.camera.height / 2), 0, 0);
        game.camera.x = cameraX;
        game.camera.y = cameraY;
    }
Link to comment
Share on other sites

Hi PRSolucoes,

Easy fix - this line sets the size of your world:

layer.resizeWorld();

But it resizes it to the tilemap layer, this is way the camera is "trapped" within the tilemap.

Instead of using the layer to resize your world do it yourself:

this.game.world.setBounds(-1000, -1000, 2000, 2000);

The map will still start at 0,0 but the camera will be able to show the space to the left and to the top of the map.

Adjust the world size as needed.

 

Link to comment
Share on other sites

Tried this code too:

 

var layerWidth = context.floorLayer.width * context.floorLayer.scale.x;
var layerHeight = context.floorLayer.height * context.floorLayer.scale.y;

game.world.setBounds(-(layerWidth/2), -(layerHeight/2), layerWidth * 2, layerHeight * 2);

 

And the result is near the same. Attached.

The camera show the out map area. But the map is cutted and the other objects no.

 

Screenshot 2017-05-22 17.10.50.png

Link to comment
Share on other sites

Hi, layerwidth/layerheight is only the visible (rendered) part of the tilemap - so that's not the way to go to size the word.

Layer.resizeWorld() resizes the world to exactly the tilemap size.

To make it bigger try this:

var layerWidth = context.floorLayer.layer.widthInPixels;
var layerHeight = context.floorLayer.layer.heightInPixels;
game.world.setBounds(-layerWidth, -layerHeight, layerWidth * 2, layerHeight * 2);

 

Link to comment
Share on other sites

I already tried it.

My current code:

var layerWidth = context.floorLayer.layer.widthInPixels * context.floorLayer.scale.x;
var layerHeight = context.floorLayer.layer.heightInPixels * context.floorLayer.scale.y;

game.world.setBounds(-(layerWidth/2), -(layerHeight/2), layerWidth * 2, layerHeight * 2);

 

And the result:

 

Screenshot 2017-05-22 20.05.32.png

Link to comment
Share on other sites

The problem now is, that while the world bounds are ok, the tilemap layer (context.floorLayer) only has a width of (in my debugging sesssion) 1280 pixels, while the game (on my browser) has a width of 1920.#

That's the reason it cuts of to the right.

For testing after creating it I set the width to 1920 (via breakpoint + console) and everything looks fine for that session.

I am not sure, why the layer is created with the wrong width - please try to add:

context.floorLayer.width = game.width;

after creating it, and see if this fixes anything for you.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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