2D Game board is bigger then view area. How do i add scroll bars or click and drag to move around the board.

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By PopeScooby
:warning: Old Version Published before Godot 3 was released.

I am very new to Godot and this scripting language. I am building a computer version of a board game. The problem is the board will need to be bigger then the view area. How can I add scroll bars or allow the user to click and drag so they can move the board around. I see the the scroll container and HScrollBar & VScrollBar but am not sure how to utilize them. Currently the “Board” is made up of a Panel that contains several Texture Frame children. If I have picked the wrong node types for this let me know.

4
:bust_in_silhouette: Reply From: VitaZheltyakov

Use node “Camera2D”.

5
:bust_in_silhouette: Reply From: eons

You may need to manipulate the camera as the other answer said, but start playing on another project for testing, do some test to move the camera, then do some tests using scrollbars (they are not easy to understand at first, as many other Controls), finally try to use both.

Slowly try to apply any successful experiment on your game.

Other option could be to avoid Controls, put some pickable Area2Ds on an upper CanvasLayer and use these to move the camera, with their position and relation of viewport and the visible zone sizes (some of this you will need to do using scrollbars too).

Instead of scrollbars, using mouse drag to move the camera may feel better (will need scrollbars for reference anyway), but that is a design decision.

6
:bust_in_silhouette: Reply From: Aaron

I find ScrollContainers poorly explained in the documentation, but as far as I can tell this is how it works:

In your scene put the control you want scrolled, like your game board, inside a ScrollContainer. You don’t need to add HScrollBars or VScrollBars separately; just enable the ScrollContainer’s Horizontal and Vertical properties as necessary.

But, the crucial next step is to set the minimum size of the control inside your ScrollContainer, either in the inspector or by using the control’s set_custom_minimum_size method.