#Need help making UI

74 messages · Page 1 of 1 (latest)

upbeat shell
#

Can anyone help me with how i could go by creating a list of units for my game? The image is for a unit overview where you can see their exp, portrait, name etc. I want to make it so that each time you get a new unit it adds another one of the boxes into a list, showing each specific units data. I could probably get everything except making each box unique to a separate unit to work. Can give more details if needed

shell crest
#

do you have a Resourece to hold your units data?

#

that is how I would do

upbeat shell
# shell crest do you have a Resourece to hold your units data?

Sorry for the late reply, was trying to get it to work but cant figure it out. I kinda do but im not sure how i should do it properly, do i make one individual resource for each unit type i want to use and then just put them in the folder? Or do i have to make like a JSON file to store them in? (i have no idea how that works).

My biggest issue rn tbh is to just get the overview window to appear on the VBox when i add a new unit (which i do through a button for testing purposes). I would like it to go something like Add unit -> new overview box for that specific unit gets created -> Name and whatever get imported from the base unit resource -> you can interact with the unit however you want. But i just cant get it to work

shell crest
#

for the UI updates I use an auto-load with signals. So you can connect your UI to a signal like unit_spawned and pass the data to feed the window

upbeat shell
#

Alright, just got off work so im gonna try to get something like that to work. Since im planning on having around 20 units i would be reasonable to just from them all into a dictionary right? Im not planning on having any differences in base stats for each unit and the only difference is gonna be icon, name and skills i think

upbeat shell
# shell crest yes, you create one Resource script and then one resource file for each unit. Or...

Alright, just got off work so im gonna try to get something like that to work. Since im planning on having around 20 units i would be reasonable to just from them all into a dictionary right? Im not planning on having any differences in base stats for each unit and the only difference is gonna be icon, name and skills i think. So it wouldn't be that much to put into a dictionary (i assume, although i simply dont know how 90% of this shit works still)

shell crest
#

not sure if you need a dictionary. A simple array might be enough

#

unless you want to assign each unit to another specific value

upbeat shell
#

hmm, i see. As for making the display work, how would i go about making the actual overview window itself get added to the list whenever i create a new unit? From what i have understood i should instantiate it but im not sure how i do that

shell crest
#

if you have a scene saved you can just instantiate a new one

upbeat shell
#

Ok so i would have my main scene, a vboxcontainer in a seperate scene and the unit display in another scene?

#

or would i have the vbox in the main scene

shell crest
#

something like:

const MY_SCENE:PackedScene = preload("path_to_scene")

func spawn_new_scene():
  var new_scene = MY_SCENE.instantiate()
  add_chidl(new_scene)
#

the only thing that needs to be saved as a scene is what you are instantiating

upbeat shell
#

ok, i see so the VBox, Buttons etc can all just sit in the main scene

#

Would the add_child lead to the vbox itself?

shell crest
#

if there is where you are adding, yes

#

v_box.add_child...

upbeat shell
#

What is the "var new_scene? do i need to preload the scene with the unit display the same way i do with the main scene?

#

or wait no im lost lol

#

is "MY_SCENE" main scene or the scene with the display?

shell crest
#

so, MY_SCENE is like the scene in a ZIP file. When you instantiate it you "unzip" it

#

MY_SCENE should point to the .tscn file in your files folder

#

the scene you want to instantiate

upbeat shell
#

ok so this should be correct then right. Thats the scene with just the display and the buttons on the display etc
const MY_SCENE:PackedScene = preload("res://Scenes/Unit_Display.tscn")

shell crest
#

now you need to pass the data to it and populate with the unit information

#

I have to go now. Leave any question and I can reply later

upbeat shell
#

Ok, so it is not supposed to be working yet right? as in creating a display for each click

shell crest
#

I don't know the rest of code. There is more involved for sure

upbeat shell
#

one sec, i will send you what i've got so far

#

This is what i've got. i have no idea why the button for opening/closing the inventory isn't working tho

#

nvm fixed it, dumb wording :p

upbeat shell
#

'extends Node

@onready var unit_list_panel : Panel = $Camera2D/UnitListPanel
@onready var spawn_button : Button = $Camera2D/SpawnButton
@onready var unit_list_button : Button = $Camera2D/UnitListButton
@onready var unit_list : VBoxContainer = $Camera2D/UnitListPanel/UnitList

const Display_Scene:PackedScene = preload("res://Scenes/Unit_Display.tscn")
var is_unit_list_panel_visible : bool = false

func _ready():
spawn_button.pressed.connect(_on_spawn_button_pressed)
unit_list_button.pressed.connect(_on_unit_list_button_pressed)
unit_list_panel.connect("visibility_changed", Callable(self, "_on_unit_list_panel_visibility_changed"))

func _on_unit_list_button_pressed():
unit_list_panel.visible = !unit_list_panel.visible

func _on_unit_list_panel_visibility_changed():
is_unit_list_panel_visible = unit_list_panel.visible

func _on_spawn_button_pressed():
if is_unit_list_panel_visible:
var new_scene = Display_Scene.instantiate()
unit_list.add_child(new_scene)'

#

This is working, but it makes them on top of eachother like this

#

Fixed it but got new problem :p

upbeat shell
shell crest
turbid gustBOT
#
Embedding code in discord messages
Inline Code

When you surround some words with single backticks like `this`, it will be formatted as code.

Code Blocks

You can also include code blocks by surrounding the code with three backticks. If you add "swift" then you will also get basic syntax highlighting:
```swift
print("hello world")
```
Discord will then show it as a code block like this:

print("hello world")
Upload

If your code snippet is rather long, you can upload it to a text paste site. One option that supports syntax highlighting for GDScript is https://bpa.st/

shell crest
#

Use this when posting code

upbeat shell
#

Alright ty

upbeat shell
#

@shell crest Hey, sry for ping. Are you available for help? Its fine if not ofc

I have made some stuff with the display but I'm having a problem with getting an "InspectButton" to work. The purpose of the button is to open a window which contains more details on that specific unit. I tried making it work by doing the same thing as i did with the Unit Display by creating a scene with just the InspectButton and then inside the display script i try to instantiate that Button scene to create a unique button for that specific display. I then add_child it to a container to get it to the correct location inside the display.

But this isn't working and I'm not sure if it is because of the way I call the function ( _ready), if i simply cannot instantiate something as a child to an already instantiated node.

As I'm writing this I realized that if I just add the button to the unit_display scene and scripted it to use the data within the unit_display script it would be instantiated alongside the display and therefore any functions within that button would only affect the data used in that display (such as changing where you access data from etc) right?

Im unclear as always, if you need clarification on anything just ask, i will try to explain asap

shell crest
#

sorry, where does this button go?

#

in the same window you instantiated?

#

if so, why not just make it a part of the window scene?

#

yeah

#

your last sentence makes sense

upbeat shell
#

Yeah so just make it part of the display scene which im already instantiating and it should work?

#

ok fantastic

shell crest
#

yeah

#

and you pass the data you already have

upbeat shell
#

Great

upbeat shell
#

@shell crest Hey i need some help again, and is it fine if i ping you btw? I feel like i might be annoying :p

When i instantiate the scene with the unit display and also the inspect UI they are both added as childs to a ScrollContainer through this code:

func _on_spawn_button_pressed(): if is_unit_list_panel_visible: var UnitDisplay: = Display_Scene.instantiate() var class_data = ClassData.new() var basic_class_data = class_data.get_class_data("Basic") UnitDisplay.call("set_class_data", basic_class_data) unit_list.add_child(UnitDisplay)

This makes it so that the inspect menu will only show if it is inside that container. Is there a way for me to remove_child it from that container or do i have to do something else to make it show up. Example images below (the ui is ofc just for testing :p)

#

ok i fixed it but now i have the problem of them being spaced out

shell crest
#

you can ping me, no problem

#

you can change this UnitDisplay.call("set_class_data", basic_class_data) to
UnitDisplay.set_class_data(basic_class_data)

#

the spacing can be set in the VBox theme

upbeat shell
# shell crest the spacing can be set in the VBox theme

I put the inspect menu inside a canvas layer and turned off "clip_contents" on the ScrollContainer so now it works. But now i need to make it so there can only be 1 of these interfaces showing at once so you cant stack them and make it confusing. I can think of 3 alternatives on how to do it,

either you make it so you cannot press any of the unit display buttons when a ui such as the inspect menu is showing,

you could also just add an "if" thingy with a variable that tracks how many are open and if >0 are open you cannt open more,

lastly you could make it so whenever you press one of the inspect buttons you turn of visibilty on all the other inspect menus but i have no idea how to do that

Any suggestion on which one would be best/easiest to implement?

shell crest
#

I guess I would close the rest one a new one is open

upbeat shell
#

Mhm, so i would have to do something along the lines of whenever i press the inspect button i first send a signal which tells all inspect menus to set visible to off and then i would open just the one i clicked right?

shell crest
#

you can have a manager script that keeps track of the current visible menu

#

and the manager takes care of showing/hiding them

#

btw, since your original issue is solved, you could mark this thread as solved and used the help channels or even DM me if you need

upbeat shell
#

No clue how manager scripts work lol but i can try to figure it out

#

oh yeah, true lol

shell crest
#

is just a script that is the parent of your menus

#

and have a reference to them

#

so when you open/close a menu you do through the manager

upbeat shell
#

ok, how would i make it parent to the menus?

shell crest
#

don't you have a node where all your menus are inside?

#

a parent is simply the node where the children are inside

upbeat shell
#

ok just add it to the control node in the display scene thingy then

#

alright i will close this, i will try to only dm you when i cant get help elsewhere so i dont bother you to much. Tyvm again for all the help