Separating Game and UI Resolution

We've started our first larger (but still small) game, titled "Aster Pebble and the Case of Bad Bureaucracy", which will be a point and click mystery game. We'll be sharing a lot more details and progress as we go, so make sure to follow for updates, but for now we'll leave most of it a mystery too.

Today, we just wanted to share a quick blog post on an important proof of concept we had to work through for this modern pixel art game. The game itself is currently planned to be 240x135 pixels, or 1/8th the size of a standard 1920x1080 game. This will work nicely for the pixel art aesthetic that we're working on. However, it would not work very nicely for things like a user interface, where we want to be able to easily read text, or see smaller visual elements.

So what we were looking to prove out was that the game can exist in a 240x135 SubViewport in a high res project.

If possible, it would be good to also be able to do different pixel resolutions like 480x270, in case we wanted to do a dramatic zoomed out shot, while using our existing pixel assets. With this being a point and click, we also had to be sure that we'd be able to click in that SubViewport and select items, since that's kind of the point (and click).

After a few trial and errors, we did end up getting this to work. The process was as follows:

1. Set the project resolution to the high-res value, in our case 1920x1080.
2. Ensure "Stretch > Mode" is set to "canvas_items".
3. Also set "Rendering > Textures > Default Texture Filter" to "Nearest" for better looking pixel art by default.
4. Set up a scene which will contain the pixel art sprites, at their native resolutions.
5. Set up a separate "Game" scene, and add a SubViewport to display game content, and a UI control node for our UI.
6. Right click on the SubViewport and click "Instantiate Child Scene" and pick your gameplay scene.
7. Set the SubViewport size to your pixel resolution, such as 240x135 in our case.
8. Set the "SubViewport > Canvas Items > Default Texture Filter" to "Nearest".

The SubViewport will now be ready to show your gameplay scene at the correct resolution, but we'll need to actually show it in our "Game" scene now. You could try to use a TextureRect with a SubViewport Texture, but we couldn't get interactions (a.k.a. clicking items) to work.

So we instead set up a SubViewportContainer, set it to cover the whole screen, and moved our SubViewport inside it. You'll also need to set the SubViewportContainer to have "Stretch" enabled, and "Stretch Shrink" to 8, since our pixel art is 1/8th the size of our full resolution. (So if we switch to a 480x270 scene, we'd have to update the "Stretch Shrink" to 4)

Here you can see an example of the 480x270 resolution. This uses the same pixel art of our little temporary asset guy, so he can appear smaller while still being true to form.

We still couldn't get input to work, but this ended up just being an issue where the SubViewport needed to have its "Physics > Object Picking" setting enabled. Also, make sure if your separate UI container is covering the whole screen as well, you set the containers "Mouse > Filter" to "Ignore" or else it will block all your clicks like it did for us :)

And with that, we were able to directly use our pixel art with their original sizes and interact with them, while still using a higher resolution UI!

---

Note that just like our game jam entries and other projects, this game will be open sourced upon release.

As this is a larger project, you will be able to purchase the game to get it pre-built and help support us and future open source work, or directly grab the source code and assets following their open source licenses.

💜 Love open source projects?

Here are ways you can support us making them!
https://wanderingdoorgames.obviousgain.ca/supportUs