PRSoluções

Golandy game - Camera follow and see around the player

16 posts in this topic

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

Share this post


Link to post
Share on other sites

Can you explain your problem a bit more? It is not very clear yet to me, maybe an example game that has the same you want?

 

Share this post


Link to post
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;
    }

Share this post


Link to post
Share on other sites

You shouldn't have to do anything, camera should stop on world bounds. I expect you did something wrong regarding world dimensions

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

Ok, thanks. I will ty it. I think camera has a offset that can be setted to work with this problems. I read the source, but i didnt find.

 

 

Share this post


Link to post
Share on other sites

Hi,

Changed the code to:

var layerWidth = context.floorLayer.width;
var layerHeight = context.floorLayer.height;
game.world.setBounds(-layerWidth, -layerHeight, layerWidth, layerHeight);

 

But it cut the image. See the screenshot.

Thanks.

Screenshot 2017-05-22 17.03.26.png

Share this post


Link to post
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

Share this post


Link to post
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);

 

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Resize the layer separately, keep the world far bigger than your map, and you're all good.

See Phaser.TilemapLayer.resize().

The layer's "size" here is actually the size of the sprite it's being rendered to, like a TileSprite. So jpdev is spot on indeed, the layer is not the right size.

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

  • Recently Browsing   0 members

    No registered users viewing this page.