Reposition board to fill camera on zoom

Phaser 3
1

I’m building a board game with Phaser and it has two cameras, one for the menu and one for the board. I’d like for the board camera to zoom when the window is resized so that the board fills the camera, and I have it zoomed correctly but the problem now is that the board needs to be repositioned and I can’t figure out the math for determining the coordinates. Here’s a clipped version of the resize function:

onResize = () => {
  this.scale.resize(window.innerWidth, window.innerHeight);
  if (window.innerWidth < window.innerHeight) {
    this.menu.setSize(window.innerWidth, window.innerHeight / 4);
    this.boardCamera.setPosition(0, this.menu.height);
    this.boardCamera.zoom = window.innerWidth / boardArea;
    this.boardContainer.setPosition(0, 0);
  } else {
    this.menu.setSize(window.innerWidth / 4, window.innerHeight);
    this.boardCamera.setPosition(this.menu.width, 0);
    this.boardCamera.zoom = window.innerHeight / boardArea;
    this.boardContainer.setPosition(0, 0);
  }
  this.menuCamera.setSize(this.menu.width, this.menu.height);
  this.menuBox.setSize(this.menu.width, this.menu.height);
  this.menuBox.setPosition(this.menu.width / 2, this.menu.height / 2);
};

I’ve tried setting the board container position to different things using the board area and zoom as factors but haven’t had much luck. Any insights?

2

If you know the coordinates of the center of the board you can use

this.boardCamera.centerOn(x, y)

Or I would guess

// Assuming board bounds are (0, 0) to (boardArea, boardArea):
this.boardCamera.scrollX = (window.innerWidth - boardArea) / 2;
this.boardCamera.scrollY = (window.innerHeight - boardArea) / 2;
1 Like
3

I forgot to mention that the board is draggable and it seems like a good idea to put together a demo anyway: https://codepen.io/hmathers/pen/azdvWwv

The menu is the grey block on the left, and the idea is that when the window gets resized, the board should be flush with the menu as well as the edges of the window. The board might end up being a bit small on phones so the user will need to be able to zoom and drag

4

To me, what you’re trying to do in the code seems a little complicated. Is there a reason why you can’t make one scene for the game and one scene for the menu (with a fixed camera) and then overlay the menu? With semi-transparency on the menu, that would allow you to keep the game board centered at all times, plus you can just have a larger menu. Depending on how complex your game becomes, having the code all in this one class will become a nightmare. Better to split concerns IMO.

https://codepen.io/Tech-SimplicityOnline/pen/emJpVOx

Also, I don’t know if this was just for your example, but try putting your styles in CSS instead of JavaScript and put your game in a div instead of the body. That would give you flexibility if you ever need to add something to the webpage outside of the game.

1 Like
5

I would size boardCamera to its available size on the game canvas (not boardArea), then you can use centerOn() to scroll to the center of the board container.

https://codepen.io/samme/pen/QwyjRLm?editors=0010

1 Like
6

That’s perfect for what I need! Thanks so much, I was very blocked by this