How to shift play area down to make room for GUI

Hi there,

I’ve made a “toy” game so far where the play area is 1200x1200 px, but I want to shift all that down a bit to make room for a new bar at the top to display score and a Menu button. One way to do this would be to add 50px to the y value of every object I add to the scene, but this seems silly.

What’s my best option here?

Options I’ve considered:

  • Moving the main camera down (using setPosition(0, 50)) and placing the score above the play area with a Y offset, but this causes the text to be clipped through the middle
  • Putting the entire play area in a Container and offsetting that by 50px, but it sounds like that might have negative performance implications.

Anything obvious I’m missing that would solve this?

Thanks!

Note that there’s a difference between a Camera’s physical position (which is what setPosition changes) and its scroll. Changing the position of a Camera moves the actual window that you see your game’s world through, which is why your text is getting clipped - its negative position puts it outside the Camera’s bounds. This is akin to moving it past the top edge of the canvas when you have a full-screen camera.

Changing the Camera’s position sounds like a sane solution, it just needs some tweaking. Apart from moving the Camera downwards, you should also set its size so it doesn’t extend beyond the screen’s bottom edge. This will cleanly shift everything down without requiring changes to any of your logic (unless part of it relies on canvas coordinates, which I doubt).

As for the GUI, the cleanest solution is to put it on another Scene, which you can run in parallel with your current Scene. Using a separate Scene for the GUI requires you to exchange data between the two Scenes, but it will be easier in the long run, since your game and your GUI won’t interfere with each other. You could also add a second Camera to your existing Scene, which seems easier at first, but parallel Cameras aren’t really meant for this type of effect and you’ll have to manually specify what should go to each Camera, for each Game Object you have.

2 Likes

Thanks @Telinc1 for the thorough response. I ended up creating a custom Score GameObject subclass that keeps track of the game score and emits events when the score is modified. My main scene then instantiates a Score and a new HUD scene and passes the Score object to the HUD scene on construction. The HUD scene subscribes to changes on the score and the main scene calls methods on Score directly.

unless part of it relies on canvas coordinates, which I doubt

Heh, actually, it’s a 2048-ish game and the tiles are determined by canvas size / 4. I ended up just making the canvas taller by the same height as the top bar. No need to change the size of the camera.

Thanks again. Glad to see there’s a helpful community here.

1 Like