The Godot Q&A is currently undergoing maintenance!

Your ability to ask and answer questions is temporarily disabled. You can browse existing threads in read-only mode.

We are working on bringing this community platform back to its full functionality, stay tuned for updates.

godotengine.org | Twitter

0 votes

I am currently working on a project where I use a layer-based system (similar to e.g. photoshop). For this purpose I set up a UI representing those layers. I figured that using an ItemList, this job would be relatively easy. However when initially designing this part, I felt that the ItemList offers very narrow functionality compared to simply working with V/HBoxContainers.
For instance, it is not possible to have more than one icon in an ItemList. So instead of refactoring to use such a list, I wanted to ask if their is any elegant, or maybe even engine-built-in way to visualize a currently selected part of the UI.
More specifically, I am aware that there is information about which part of the UI is currently focussed; is there a possibility to visualize this focus?

How it currently looks like:
This is what it looks like ingame
This is what the node-structure looks like:
This is what the node-structure looks like
Searching for similar visualization like:
Searching for similar visualization

Godot version 3.2.3
in Engine by (45 points)

2 Answers

+1 vote

A simple hack is probably to use a control that has a explicit stylebox for the focused state, for example a button. here's an example using a LinkButton

enter image description here

by (41 points)

The cleanest solution is probably to attach a script to your item and add a custom StyleBox for focus to a theme. and then in the _draw() method, check for focus and render the focus box.

similar to what godot does, for example in the button:

https://github.com/godotengine/godot/blob/cdfd3ffe15dbf6f41bdade308d69a75f3d4eb3a7/scene/gui/link_button.cpp#L187-L190

        if (has_focus()) {
            Ref<StyleBox> style = get_theme_stylebox("focus");
            style->draw(ci, Rect2(Point2(), size));
        }

Thank you so much for your response. After working around trying out some things for a while, I finally got there.

Gonna post the solution for my own answer, since I stumbled into a few confusions and maybe other persons might stumble across the same. Credits to you though!

+1 vote

As @tripod mentioned, there is a rather simple workaround, however I disliked another hacky approach like things I did before. So i decided to use his second idea which (after some trial and error) worked perfectly: Using themes themselves.

First off, I had to create a new special theme for one of the entries in the LayerContainer. Note here that an inherited theme (from a node aboce) could not be found here. Explicitly set the a theme into this entry-node.

In this theme, as stated by tripod "add a custom StyleBox for focus", in my case i called it "FocusedBox". Then "in the _draw() method, check for focus and render the focus box" like this:

func _draw(): if has_focus(): var focussed = theme.get_stylebox("FocusedBox", "BoxContainer") draw_style_box(focussed, Rect2(Vector2(0,0), rect_size))

by (45 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.