#Help on User Interface

25 messages · Page 1 of 1 (latest)

woven pendant
#

  • Are you completely new to Godot?

  • Have you chosen a game or app to replicate?

wheat swift
#

Im kinda new to godot ( i only made two games wich is "Pong and Plappy bird")

Well i wanted to be Monument Valley (the game)

woven pendant
#

I looked up Monument Valley and found a full playthrough - the only interface I can see throughout the whole game is this barebones menu here, with an options menu and an exit button. Is this what you want to recreate?

image.png
wheat swift
#

i will need to search the icons and then the image of the midle right?

woven pendant
#

Depends if you want to just meet the requirements of the project, or actually challenge yourself/go above and beyond with a recreation that is nearly identical with the art.

wheat swift
#

just the requirements of this

Visual Similarity (4V): I want to make sure that my interfaces look really close to the original ones.

Resizability and Adjustability (3V): interfaces can adapt seamlessly to different screen sizes.

Animated Elements (6V): Adding multiple animated elements into the interfaces

Particle Systems (4V): Adding particle systems into the design.

woven pendant
#

Okay, then I wouldn't worry about getting the exact images from the game, or even similar ones. (Don't focus on the art, just the interface)

You can find icons on the internet pretty easily, sites like http://flaticon.com to get things like the options and exit icons.

As far as making the interface, you'll need to learn a basic understanding of Godot's Control nodes and the container system. I can write up a short guide for you within an hour or so. (I have a few distractions right now)

wheat swift
#

okay thanks, ill see how containers and controls works but ill wait for your guide.

woven pendant
#

Alright so firstly. Before you get into animations or particles, or opening and closing menus, you need to learn how to get the UI elements on the screen where you want them.

Here is a simple tree of nodes which work together to create the UI.

1.png
#

"How do the nodes work together?"

  • Based on how they are arranged in the tree (which node is a child of which?)
  • Based on their settings/properties (usually found in the inspector)

For example:
If you make a VBoxContainer, put a few PanelContainers as child of it, then set the PanelContainers layout settings to expand... then the PanelContainers will automatically arrange themselves vertically, and stretch to fill the container. I suggest experimenting with the settings and trying things out.

#
  • Main node: This is a PanelContainer node with its anchor setting set to Full Rect so that it stretches to take up the entire screen.
2.png
#
  • Background: This is a TextureRect node which holds the background image. Its expand mode is set to Ignore Size because the image is bigger than the game screen, and we want the image to squish to fit inside of it.
3.png
#
  • VBoxContainer: Not much to worry about here, we just need a VBoxContainer to add children to, so that they arrange vertically.

PanelContainer nodes: these are the three "sections" of the screen. We have a top, middle, and bottom, with the bottom being empty, so that the middle is squished to the center.

4.gif
#
  • TopPanelContainer: We give this panel a minimum Y size of 75 pixels. And there is no need to Expand, since we want it to only take up a small part of the screen which we define.
5.png
#
  • MiddlePanelContainer: We give this panel the Expand setting so that it stretches to take up as much space as possible in the middle of the screen.
6.png
#
  • BottomPanelContainer: Same as the top, just without any children buttons.
#

If you really want to learn how it all works I suggest trying to recreate all that yourself.

wheat swift
#

okay thanks

#

ill learn it do i close the chat?

woven pendant
#

You can approach this however you want, no need to close the chat. I'm just trying to introduce you to the different container nodes, and how they work.

I learned by taking a look at other people's projects and then recreating those projects myself. So that's sort of what I'm doing here, I'm showing you a simple way to set this kind of UI up, and if you are able to recreate it yourself, you will gain an understanding of how the nodes work and be able to mess around with it and change things how you like.

wheat swift
#

okay ill try but im gonna close the chat

woven pendant
#

Feel free to ask any questions, I'll be on for another hour or so, then I'm off for 6-8 hours.

#
  • How to make PanelContainers invisible? Give them an Empty StyleBox theme override.
image.png