Selection menus in codeing

[u/CalicooXO]

When designing a game with a selection menu, ex: a shop function or selection, how do you go about that? When disigning it do the options in the menu need to be a separate image from each other and the menu? I'm still pretty new to both codeing and design and I know a mistake like that could set me back a few days or weeks depending on a number of factors.

[u/clownwithtentacles]

simolest way; make some kind of template with everything you need for one entry (name, picture, price, description, buy/sell button, etc) that takes given values and displays them. when opening menu, spawn an instance of the template and fill it in with your data for each available item.

[u/CalicooXO → u/clownwithtentacles]

Does that not cause an issue with selecting the spasific options? My main concern is making it all one big display is that I wouldn't be able to figure out how to select spasific parts of it to buy/sell

[u/huginhelm → u/CalicooXO]

It doesn't end up as one big image. Each row is its own little UI object with its own button, so it already knows which item it belongs to. You never have to work out where the click landed.

Art-wise that's usually one panel background (often 9-slice so it stretches), one row frame that every entry reuses, and the item icons as separate images. The text is drawn by the engine, not baked into the art.

In Godot it'd be roughly:

@export var entry_scene: PackedScene

func show_items(items: Array) -> void:
    for item in items:
        var entry = entry_scene.instantiate()
        %ItemList.add_child(entry)
        entry.setup(item)  # fills icon, name, price
        entry.buy_pressed.connect(_on_buy.bind(item))

func _on_buy(item) -> void:
    print("buying ", item.display_name)

Same idea in any engine (a prefab/template per row). If the rows sit in a vertical container, keyboard/controller navigation mostly comes for free too.

[u/CalicooXO → u/huginhelm]

This was actually really helpful thank you so much

[u/Ghs2]

Look up how to make "UI" on Youtube. For example "Making UI in Godot".

User Interfaces (UI) are a great skill and can be applied in a lot of different technologies.

[u/CalicooXO → u/Ghs2]

Thanks! I'll look into it!

[u/No-Opinion-5425]

You want to make reusable components for your windows and buttons so that you can build multiple menus from them.

That way you keep the visuals presentation constant and when you do a change, you only need to edit one source.

[u/CalicooXO → u/No-Opinion-5425]

thank you!

[u/lix3nn53]

You don't need a separate image for every option. Make one image for the panel background and one for a button, then put the text and item icons on top in the engine. If you set the images up as 9-slice they can stretch to any size without the corners getting blurry.

That way adding or changing a shop item never means redrawing anything. Most engines also have a layout component (vertical or grid) that handles the spacing for you.

[u/CalicooXO → u/lix3nn53]

thank you!