Skip to content

Custom scroll bar implementation - #982

Open
stavrosfa wants to merge 1 commit into
C7-Game:Developmentfrom
stavrosfa:feature/custom-scroll-bar
Open

Custom scroll bar implementation#982
stavrosfa wants to merge 1 commit into
C7-Game:Developmentfrom
stavrosfa:feature/custom-scroll-bar

Conversation

@stavrosfa

Copy link
Copy Markdown
Contributor

This PR aims to solve some issues with the built-in Godot scroll bar.

Issues with the native scrollbar and screenshots with the corresponding affected need:

  1. We can't position the scroll wherever we want to. If it's vretical it always is on the right hand side, if horizontal is on the bottom. (img 1, img 2).
  2. We can't have the scroll be smaller or larger, or any custom size other than that of its container ( img 2).
  3. We can't have custom textures for the grabber, as the native one is a fixed size and is calculated based on its scroll container's contents. If we assign a 10x10 texture to the grabber (or any other texture that doesn't exactly fit the grabber size at the time) it will strech horribly.
Screenshot_235

img 1

Screenshot_234

img 2

I had tried to tackle this problem again some time in the past, with some minor success, but the grabber issue streching had remained unsolved. Now, this is partly a new a solution that I will try to explain as clearly as possible.

We want to have a scroll container that contains many items.
We create a regular scroll container, we give it a VBoxContainer or a HBoxContainer, and spawn items inside it.
This will automatically create the scrollbar controls we need.
We hide these controls (not hide in the sense of nodes, more like using a style to make them "invisible") and we create our custom scroll bar controls.
These are just visual controls, nothing more. When we move our custom scrollbar grabber or press the increment/decrement buttons, we actually control the "hidden" native scroll bar controls. So we just translate the custom controls movement and position to the the scroll bar that's actually scrolling.

The godot node hierarchy looks something like this

Control

├── ScrollContainer
│ └── VBoxContainer
│ ├── Item (HBoxContainer or whatever)
│ ├── Item
│ ├── Item
│ └── Item

├──Civ3ScrollBarControl
│ ├── ScrollBar (Civ3VScrollBar or Civ3HScrollBar)
│ └── Civ3ScrollHandle

I tried to export the Civ3ScrollBarControl as a scene to make it easier to add to other scenes, but we are losing some customization control like size, etc. I am no Godot expert, so for now or untill some improvement suggestions come in, I 'll leave it like this.

In this commimt I have intentionally left a horizontal scroll container with a few color rect items in the domestic advisor scene so it's easier to verify that it's working for both directions and sizes and also see that we can have stepped but also free scrolling. This container will be removed after testing.

To test this, open a game that has more than 10 cities or so, open the domestic advisor and the scroll bar will be available.

I have also opened a PR for the standalone art here C7-Game/Assets#13

Once again, I have to disclose I used a lot of chat gpt on this one, especially for debugging, and I had to also fight it a lot to get it to implement some things the way I wanted it to and not some stupid way it was suggesting to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant