How do I reserve a portion of the screen for UI?

Hello,

I am working on a game that looks like a little gameboy console in the viewport, with controls at the bottom and the game window at the top.

I have created a non-parallaxing UI, but I'm not sure how to get the game working within a smaller portion of the viewport with respect to behaviors like ScrollTo, etc which use the full viewport size when deciding when to scroll.

Is there a way to create the playable game portion in a small square viewport, and then add the console frame and controls outside of it without expanding the actual game's viewport? I guess I need like a viewport within a viewport, if that makes sense...

I imagine this might be possible by exporting the game in the small square viewport and then adding the control frame around the game in HTML or something, but I'm not sure if that is the best route for testing and development etc.

Any suggestions or tips are welcome.

You can cheat the scroll to plugin by attaching it to a dummy sprite A that will be screen centered and then position according to this sprite A the sprite B you want to be centered to your window.

Have a look at this example. 1drv.ms/u/s!AkmrWgxeuxlKhJwIhgnAkuJzA6YOZw

Essentially your game world just exists under the UI layer and is hidden when outside of the false screen area you have created.

If you are making another game that is static, like pong for example, you need to define the coordinates of the false screen and apply that to your game code.

Try this

https://www.dropbox.com/s/f3356cicerr6uch/CheatScollTo.c3p?dl=0