How to separate an area of the screen for a HUD and another for gameplay?

[gusty crow]

Like in the image, you can see a black area below the gameplay area that is used for HUD elements.

[outer wind]

Those games don't really have a concept of HUD vs gameplay space. They just stop drawing the background at a certain Y coordinate and start drawing the UI.

You can simply have a UI element that covers the bottom of the screen and make sure you only work with the space above.

If you want to more reliably separate their drawing, you can use a CanvasLayer and place the UI as a child of that node.

[gusty crow]

thanks, what would be a good way to make sure I don't use the HUD space?

[exotic mason]

I'd advise you not to listen to Nancok. He's been spamming posts with nonsense for the past few days. Anyways...

You can actually use the SubViewport and SubViewportContainer nodes to achieve this effect. With a tree setup like in the image below. I'll also attach the whole scene for you to take a look at, and the link to the docs for viewport.
https://docs.godotengine.org/en/stable/tutorials/rendering/viewports.html

[gusty crow]

thanks, I'm going to check it

so, I don't know how to explain my question, does the viewport change the game world space? Like, in project settings, viewport height is set to Y, but the subviewport node height is set to a number lower than Y, so what happens to the game world and the camera I have on it?

what I mean is, what happens if my camera height is bigger than the subviewport height?

[exotic mason]

In this case, you're using a separate viewport. The project settings are for the viewport of the entire game. However it's using a vboxcontainer so it will scale properly if you changed the resolution of the game root viewport. It does not scale the world in any way, although it does change how much of the game you can see.

You can think of everything Godot renders by default as the root viewport, this is what changes when you set the resolution inside of the project settings

[gusty crow]

if the camera height is bigger, then the subviewport will clip the area in excess?

[exotic mason]

Yes, but I'm pretty sure the camera height is dynamic and is set to the viewport size

What the camera renders won't exceed the viewpoet's size. You can cause it to extend in excess by forcing the subviewport to have a size that you set

Although if it's a child of a SubViewportContainer that has the stretch property set to true, the size of the viewport will be set by the container

Nothing else can change it

[gusty crow]

so, all I have to worry about is that the camera will render an area the size of the viewport and I should design the levels accordingly?

[gusty crow]

@exotic mason I tried to create the same structure but the editor does not let me edit the sizes of some nodes, it won't let me position my camera either saying it is locked

actually, on your example I can't move the sprite2D either

[exotic mason]

Yes, you can't move them because they're under a container. If you want you can just have the camera under the container and use code to move it around where you need it.
Although the recommended approach is to create the UI and world as separate scenes, then place them under their appropriate sub viewport.

I've made some improvements to the example so I'll repost it.
You should also change the stretch settings inside the project settings. I'll post a screenshot of mine, which I think are what you're going for. You can instead set the Aspect to expand if you want the game to scale to the largest screen size.
Here are the docs for stretch settings:
https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html#stretch-settings

Press play and scale the window as you like.
With the mode on viewport, what the camera sees is scaled to the window's size which makes it more predictable for you to design around

[gusty crow]

I still cant move the sprite with your example

[exotic mason]

Yeah as I said, make a new scene for it. The UI and game should be separate scenes anyways

[gusty crow]

So I need to have a new scene to represent everything I would want to move?

or a scene for each level or something like that?

[gusty crow]

World here could be any level scene I have then?

[exotic mason]

Yup

[gusty crow]

ok thanks, I'm going to test

[exotic mason]

It makes it a little more annoying because you'd have to get the references from the world node to the UI

[gusty crow]

I don't know how references or signals will work now

[exotic mason]

You could also just reparent whatever UI you might have in the world to the UI SubViewport inside of enter_tree

or just instantiate the UI in the enter_tree function if you still want to keep it as separate nodes

Knowing that the tree will always look like "/root/Example/VBoxContainer/UI/SubViewport"

[outer wind]

lol, ok

[gusty crow]

@exotic mason so, I got it to work as expected, the only problem is that on the stage scene, the camera still draws a border around it that does not reflect the actual field of vision in-game, making it slightly more annoying to design levels

[exotic mason]

Could you explain it further or provide a screenshot? I can't think of anything like that

[wild stirrup]

A panel container would do it. Check out this video on UI. https://youtu.be/1_OFJLyqlXI?si=mxqciAEt5nMoLQza

[gusty crow]

this is the stage scene, I added the white colorRect at the bottom to show the space that is not visible in-game, but notice that the screen borders in the editor still consider that part visible

it's just a nitpick, but I like details

[exotic mason]

Do you have a camera in your scene? Because that rect is the rectangle of the whole game, however a camera is more representative of what will actually render in your stage scene

[gusty crow]

the camera borders are the same as the screen

in the editor

@exotic mason

[exotic mason]

does the world overrun the screen?

when you put it in the exaple scene

[gusty crow]

I dont understand what you mean

[exotic mason]

is there excess

does that part of the world clip under the bottom UI

[gusty crow]

yes as expected

[exotic mason]

oh yeah I see what you're talking about...

[gusty crow]

also, I just now noticed that the top part is hidden, so the size of the bottom UI is probably being distributed to top and bottom

[exotic mason]

yeah what's happening is that the camera you have in the scene isn't the size of the sub viewport in the other scene

[gusty crow]

where do I change the camera size to begin with? I find no options for that

[sweet haven]

I use the camera Node which is tied to my Character Node. I'm not sure if thats optimal or not. It's just what I've been doing

lemme screenshot my tree

[exotic mason]

it's a bigger problem... I'll need to figure out how to actually solve it, I'm a bit too busy right now

[gusty crow]

why are simple things so annoying to make work ?

[sweet haven]

you can control the size of the camera here

The problem with the camera node that I have set up is its tied to the character2D node so it follows the character

Maybe if you add the Camera2D node into the Node2D so it doesn't follow the character?

[exotic mason]

I think you should design the maps for feel and gameplay instead, not paying much attention to the camera

If there's anything you do need to align to the size of the camera, there are most likely nodes that can do that

[sweet haven]

Something like this?

on the zoom you have to click the chain icon so you can change the Y to 1.1

[exotic mason]

the thing is they don't know what the zoom is supposed to be, because it's supposed to align to a sub viewport

the size of the camera is not matching the size of their sub viewport

[sweet haven]

Is this better?

You can adjust it on the right if you need to

Oh!

[gusty crow]

for a precision pixel game, it's important to play with the spacing and the timing of when things become visible

[gusty crow]

what nodes?

[exotic mason]

I was thinking more about things like background... but the level itself you need to match the camera size to the sub viewport which is tricky

[sweet haven]

Is it because were looking for a specific Value of the size of the viewport? I agree narrowing the size value down will be tricky.

[exotic mason]

yeah, usually having the camera as a child of the viewport will adjust it's size automatically, but since the viewport is in another scene it doesn't

[sweet haven]

What does the Viewport scene look like by itself? I understand that its basically just the bottom of the Orignal image, But what nodes does the scene have?

Also what does the 2D view look like?

[exotic mason]

if you scroll up you'll find the scene file and screenshots above that i posed

[gusty crow]

I can just use some sprites in the editor to mark where the screen will be, but that's so janky, plus, I would like to design levels where the camera travels diagonally or vertically

[gusty crow]

btw, I think this is a 2002 game made in Multimedia Fusion, I feel like in 2024 this should have become easier to do

[sweet haven]

Misclicks my bad

Why is the camera centered on the sprite only?

I can't seem to move it around either

[exotic mason]

because it's under a container, it's size and position is determined by the container

[sweet haven]

I can try to do some voodo to make the camera match the white area tho

[gusty crow]

I think this might be part of a bigger problem, because the screen borders don't render infinitely towards the distance

so actually, forget about the viewport problem, I want to know how to mark the borders of the level in the editor for convenience

[exotic mason]

what do you mean? what borders?

[sweet haven]

Here's the right image. Did I do this right? I just moved the camera scene to the World container. then back to the Sub viewport container to let me fine tune the camera

Fixed it. It Was still in the world container my bad

[exotic mason]

it's a different camera not that one

it's supposed to be a camera from another scene, to match the sub viewport of the example scene

[sweet haven]

let me find the recent one you posted then

Scrollin up

Ok. So His current scene is supposed to match the hud right? Can't you just add the hud scene to his level 1 scene?

Also you just meant how to extend the Pink area which is the default camera right?

[exotic mason]

They're supposed to be separate scenes because you can't actually edit and move things around when they're under a sub viewport

[gusty crow]

I think I may have created a problem that shouldn't need to exist

[gusty crow]

what I mean is, just have a guideline in the editor so it reminds me of what will be visible to the player for placement

it does not have to do with the subviewport thing after thinking more about it

sorry for being dumb

[exotic mason]

so it scales correctly without cutting off the bottom and top?

[gusty crow]

that would help too I think

maybe that's a dumb problem, I wont have guidelines when I decide to make a diagonal scrolling level anyway

[sweet haven]

You mean this pink line right? To the left of that is where its visible to the player.

[gusty crow]

yeah, that was the thing I was referencing about the screen borders on the editor

[sweet haven]

I guess if you have the Objects throwing into that view area that you have to dodge. then have the player move up and down/forward to avoid those obstacles. then just have there be a kill box when the objects hit the 5 centimeters left of the Visible screen. You should get that effect of a Gradius-like

[gusty crow]

I dont think thats what I mean

I mean to have a tool in the editor to know what will be visible

all the time

would help a bit

I will just use some node to mark it I think

and disable it for release

[sweet haven]

Oh you just want to extend whats visible for the player?*

Oh you mean what will be eventually visible for the player? Which is why you left the white line there?

Basically have this Pink line move all the way to the right? As much as you can?

[gusty crow]

I just want a visual tool to know what will be visible, like a ruler

[sweet haven]

It's Built in

Thats the area which is what is visible to the scene

[gusty crow]

I didn't mean a literal ruler, it was just an example

other way of phrasing it, how do I draw lines in the editor to guide building?

like when sketching a drawing?

[sweet haven]

Have you made a sprite yet?

Or Character2D?

[gusty crow]

I have

[sweet haven]

Place it inside that box I just mentioned. Then Click run. everything in the window that pops up is whats visible

[sweet haven]

Also what I use to visualize that by drawing a line

Is a tilemap

I use a tile map to draw the borders of the screen for me in editor

[gusty crow]

can you show an example?

[sweet haven]

yeah give me a moment

Installing Screentogif so you can see better.

[gusty crow]

I think just a print for it is enough

[sweet haven]

I press shift before I click. Then I can click and drag to make a line

Each tile is 16x16. I know you can change the default pixels size for the tiles in its settings tho

[gusty crow]

I understand, not the cleanest solution I think, but its fine

I will just stop over engineering now and continue creating

[sweet haven]

Also I just thought of this...

[gusty crow]

thanks

[sweet haven]

wait

You can abuse the Character2D Collosion shapes to make an invisible line and is only visible editor only

However things get messy when you make your character collide with the shapes

[sweet haven]

Good luck!🫡

[exotic mason]

@gusty crow I mean you can add two color rects on the top and bottom of the screen with a control node and disable them when the game starts. It feels odd, but usually I think such precision isn't really needed

Nevermind actually you have to use MeshInstance2Ds instead

[exotic mason]

Nevermind x2 I'm making a nice script for you that'll do it for you

[gusty crow]

thanks, I want to know how to write a tool for the editor

[exotic mason]

That's exactly what I've made 🙂

Sorry I forgot to enable the original camera lines when you remove this node. Here's the new one

You can add it as a child of a camera, or just have it in the scene

[gusty crow]

thanks so much, I will test it

that's exactly what I needed, and I can even make it go vertically if I want to make a vertical section

[exotic mason]

🙂 I'm glad it worked out

[gusty crow]

https://tenor.com/view/fumo-fumo-meme-fumo-dance-touhou-touhou-meme-gif-25935984

[exotic mason]

You don't seem too optimistic haha