I have this node in my code in where I dynamically add child objects, Those get spread around the screen evenly with a bit of code, but when they go to low, and head off screen, I want to be able to drag downwards to see those.
Currently the screen looks something like this
As I said, I want to drag down, so I can see the rest of the images that get made below the screen height.
All the dynamic nodes are currently stored in a Node2D node called images_node.
How do I make this dragable, or which node do I replace it with?
It is important that I can drag, since I’m making this for my phone.
( side question, how do I add a minimum and maximum value to the dragging, so I can’t drag above or below the first and last image? I have a variable that keeps count of how low the position is already )
You can use a Control-node the size of your node. Use the control-nodes gui_input-signal to determine when its dragged and then calculate the direction of the drag from the even.position and set it to the node2d. you can constrain the position by checking if its bigger then boundaries in an if-clause
This works correctly, however I want to be able to press the images and execute code on them.
What makes this work I have already written, but layering either makes it impossible to scroll when you start on an image, or makes the images uninteractable.
how do I layer these so that I can both scroll and click on an image?
Is there a reason not to use ScrollContainer for this?
I feel like it looks ugly.
It doesn’t divide the screen into 2 even parts, since it will have a bar at the side.
Also again, I’m making this for my phone, therefore using a scrollbar is less useful then dragging.
Theoretically could I use a mouse_click event on the same control node, and calculate which image should be clicked through position measurements and the integer hat keeps count of how far I’ve scrolled that way.
Or can I simply put them on different interaction layers?
I believe the scroll bar can be hidden while still having scrolling enabled. Take a look at the ScrollMode enum, the last option should hide the bar without disabling scroll.
You could combine it with a GridContainer to automatically space out the images.
Idk, I just think if you’re making something that behaves like UI, using the built-in UI nodes could give you a lot of free functionality.
1 Like
This makes scrolling on my computer happen, but it does not enable scrolling by dragging on my phone.
How do I connect those?
It’s probably to do with mouse filters (buttons will need to be set to Pass).
Seems I can’t upload a .tscn file, but you should just be able to save this as a .tscn and do what you need:
[gd_scene load_steps=4 format=3 uid="uid://cjsd8elxyebap"]
[sub_resource type="GDScript" id="GDScript_autam"]
script/source = "extends Control
func _ready():
var id = 0
for child in $ScrollContainer/GridContainer.get_children():
child.connect('pressed',_on_texture_button_pressed.bind(id))
id+=1
func _on_texture_button_pressed(extra_arg_0):
print(\"Button pressed: \" + str(extra_arg_0))
"
[sub_resource type="Gradient" id="Gradient_nbi4y"]
offsets = PackedFloat32Array(1)
colors = PackedColorArray(1, 1, 1, 1)
[sub_resource type="GradientTexture2D" id="GradientTexture2D_ws21l"]
gradient = SubResource("Gradient_nbi4y")
width = 250
height = 250
[node name="Control" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
offset_right = -640.0
offset_bottom = -136.0
grow_horizontal = 2
grow_vertical = 2
script = SubResource("GDScript_autam")
[node name="ColorRect" type="ColorRect" parent="."]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
color = Color(0, 0.188235, 1, 1)
[node name="ScrollContainer" type="ScrollContainer" parent="."]
custom_minimum_size = Vector2(500, 500)
layout_mode = 1
anchors_preset = 8
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
anchor_bottom = 0.5
offset_left = -250.0
offset_top = -250.0
offset_right = 250.0
offset_bottom = 250.0
grow_horizontal = 2
grow_vertical = 2
horizontal_scroll_mode = 3
vertical_scroll_mode = 3
scroll_deadzone = 50
[node name="GridContainer" type="GridContainer" parent="ScrollContainer"]
layout_mode = 2
mouse_filter = 2
theme_override_constants/h_separation = 10
theme_override_constants/v_separation = 10
columns = 2
[node name="TextureButton1" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
[node name="TextureButton2" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
[node name="TextureButton3" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
[node name="TextureButton4" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
[node name="TextureButton5" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
[node name="TextureButton6" type="TextureButton" parent="ScrollContainer/GridContainer"]
process_priority = 1
process_physics_priority = 1
layout_mode = 2
mouse_filter = 1
texture_normal = SubResource("GradientTexture2D_ws21l")
1 Like