Game size, camera size, and creating an off-camera area

[mthwl]

I've looked around a bit for an example of this and I'm probably missing it (sorry!). I would like to split my game into two areas, the first being the camera. The second would be used for input buttons and displaying some game information. Imagine a game size of 640x480, with a camera size of 480x480, leaving a 480x160 area at the bottom of the screen to hold buttons, stats, minimaps, or whatever the game may need.

The core problem that I'm finding in my game is that, on mobile devices, overlaying input controls on the game world is problematic. It detracts from the immersion (that's hopefully there!) and causes frustrations in certain parts of the game. The player ends up accommodating the reality that their thumbs and some transparent buttons are floating above the game world, rather than just playing.

There are probably a number of games that could benefit from, what I'll call, off-camera controls. I haven't come across a nice example of how to set this up using Phaser (again, maybe I'm just describing/searching for the wrong words).

I've included a crude mock up image. And a screenshot of an iOS game that uses this layout (Fairune).

Thanks for any help!

[TickleMeElmo]

http://phaser.io/examples/v2/camera/fixed-to-camera

[mthwl]

Thanks for the reply!

Fixed to camera definitely makes sense. I guess more specifically, I'm looking for how I can build this piece of the game and still work with tilemaps (with collisions and camera movement/following). Any ideas?

See this previous thread asking a similar question.

 

[TickleMeElmo]

Wouldn't fixed to camera method still be the case? Just make two main groups, playground group and GUI group I guess? Or maybe I still misunderstood what exactly you want to do there.