Golandy game - Camera follow and see around the player

[PRSoluções]

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.

 

[samid737]

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?

 

[PRSoluções]

Ok. I made a image manually to try explain better.

 

[samid737]

You could re-align the canvas via scalemanager to align vertically and horizontally if that helps. You can respecify the size of your map by adjusting the tilemap itself (the source).

[PRSoluções]

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;
    }

[Skeptron]

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

[PRSoluções]

Hi,

 

Yes, i dont want that camera stop on map dimensions. I want the player always on camera center, but i dont know how i can do it more. On early versions my old code works.

 

Today it is with the default behavior:

http://golandy.prsolucoes.com

 

Thanks.

[jpdev]

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.

 

[PRSoluções]

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.

 

 

[PRSoluções]

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.

[PRSoluções]

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.

 

[jpdev]

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);

 

[PRSoluções]

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:

 

[PRSoluções]

I have updated the code and to phaser 2.7.10 to anyone help me please.

http://golandy.prsolucoes.com/

 

The code of this part of game is here:

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

 

Thanks.

[jpdev]

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.

[hexus]

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.

[PRSoluções]

Hi,

I have changed the code and tested here on my monitors. Can you test on your device too?

Code:

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

Thanks.