How to make tree with incremental options

Help
1

If you create a Theme in Godot, you are presented with some UI to see the theme:

image
image997×458 27.2 KB

This revealed to me that It’s possible to create a Tree, with an incremental/decrement option. In the Image, there is a Tree with a Sub-tree where I can chance the value “8.8” by clicking up or down.

But I can’t find out how to make that myself ? I searched everywhere…

Would love your help!!

2

You presumably want a spinner control as a child of the tree control.

3

Based on the engine C++ code I’d say the tree item is set to CELL_MODE_RANGE

sub_tree->set_text(0, TTR("Subtree"));
item = test_tree->create_item(sub_tree);
item->set_cell_mode(0, TreeItem::CELL_MODE_CHECK);
item->set_editable(0, true);
item->set_text(0, "Check Item");
item = test_tree->create_item(sub_tree); // created tree item
item->set_cell_mode(0, TreeItem::CELL_MODE_RANGE); // set to range
item->set_editable(0, true);
item->set_range_config(0, 0, 20, 0.1);
item->set_range(0, 2);
item = test_tree->create_item(sub_tree);
item->set_cell_mode(0, TreeItem::CELL_MODE_RANGE);
item->set_editable(0, true);
item->set_text(0, TTR("Has,Many,Options"));
item->set_range(0, 2);

In GDScript you would use the same set_cell_mode function on your TreeItem

4

Thanks everyone for the suggestions. And thanks for looking it up @gertkeno

Can this be done without code? I’m wondering if I can just add a Tree and then add some elements as children and set the mode to CELL_MODE_RANGE as you point out.

5

No, the Tree node is (so far) intended to be filled out by code, not in the editor like ItemList or container types.

6

thanks I’ll post an update here when I figure out how to do it with GDSCRIPT :slight_smile:

7

Okay I would love some more help. I made a new clean project to test it out.

I have a new scene with a Tree instance:

image
image1051×456 19.8 KB

Attached is the following script:

extends Node2D

func _ready():
extends Node2D

func _ready():
	# get the tree
	var quest_tree = $Tree
	
	# create root and rename it
	var root = quest_tree.create_item()
	root.set_text(0, "Settings")
	
	# create some sections and rename them
	var section1 = quest_tree.create_item(root)
	section1.set_text(0, "Speed")
	var section2 = quest_tree.create_item(root)
	section2.set_text(0, "Loudness")

This creates the following tree, very nice:

image
image552×293 8.59 KB

But I have some issues I would love you help with.

  • I have to manually adjust the height of window. How can I make this window expand and contract when clicking the settings arrow?
  • I still am not able to create this incrementer og decrementer. I have tried with section1.set_cell_mode(0, 2), but this just does nothing…

Any ideas?

8

Okay I managed to fix the issue of expanding the Tree automatically when mouse enters the tree. (Pointer was not recorded, so it looks a bit confusing)

Now I would really really love your help on how to make that set_cell_mode with range. PLEASE :smiley:

Just to clarify, it’s the increment/decrement in the subtree showed in this example:

image

9

Use the rest of the options too

var section3 = quest_tree.create_item(root)
section3.set_cell_mode(0, TreeItem.CELL_MODE_RANGE)
section3.set_editable(0, true)
section3.set_range_config(0, 0, 20, 1)
section3.set_range(0, 2)

Ranges do not seem to support text in addition to the number.

11

works like a charm. THANK YOU