Shadow overlapping problem on scroll bar

[yoyuchi]

Hello, everyone
I replaced default scroll bar with a custom bar.

emptybar.jpg (11.3 KiB) Viewed 233 times

fullbar.jpg (12.65 KiB) Viewed 233 times

fullbar_hover.jpg (12.51 KiB) Viewed 233 times

Use this scroll bar, it appears a black piece at the bottom of the bar as shown below.

It seems to be caused by overlapping the bottom shadows of the scrollbar image. How can I get remove this piece?
Maybe it's the click highlight range of the mouse...
When the mouse is clicked on the bar, Can the end of the mouse pointer match the edge of bar ?

[Imperf3kt]

edit your thumb.png file to remove the shadow

[yoyuchi]

edit your thumb.png file to remove the shadow

Thanks for the advice.
Here is my preference script.

Code: Select all

           vbox:
                style_group "prefs"
                vbox:              
                    bar value Preference("music volume") 
                    pos(10, 117)
                    
                vbox:
                    bar value Preference("voice volume") 
                    pos(10, 180)

                vbox:
                    bar value Preference("sound volume") 
                    pos(10, 248)
              
                vbox:
                    bar value FieldValue(persistent, "dialogueBoxOpacity", range=1.0, style="slider")
                    pos(10, 310)          

style quick_button_text size 18
style quick_window left_padding 2
style quick_window right_padding 2
style gm_root background None

style pref_label is gui_label
style pref_label_text is gui_label_text
style pref_vbox is vbox

style radio_label is pref_label
style radio_label_text is pref_label_text
style radio_button is gui_button
style radio_button_text is gui_button_text
style radio_vbox is pref_vbox

style check_label is pref_label
style check_label_text is pref_label_text
style check_button is gui_button
style check_button_text is gui_button_text
style check_vbox is pref_vbox

style mute_all_button is check_button
style mute_all_button_text is check_button_text

style pref_label:
    top_margin gui.pref_spacing
    bottom_margin 2

style pref_label_text:
    yalign 1.0

style pref_vbox:
    xsize 570
    


style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/check_[prefix_]foreground.png"

style radio_button_text:
    properties gui.button_text_properties("radio_button")

style check_vbox:
    spacing gui.pref_button_spacing

style check_button:
    properties gui.button_properties("check_button")
    foreground "gui/button/check_[prefix_]foreground.png"

style check_button_text:
    properties gui.button_text_properties("check_button")

style slider_slider:
    xsize 50

style slider_button:
    properties gui.button_properties("slider_button")
    yalign 0.5
    left_margin 10

style slider_button_text:
    properties gui.button_text_properties("slider_button")

style slider_vbox:
    xsize 450

init python:
    style.prefs_slider.right_bar = "gui/bar/emptybar.png" 
    style.prefs_slider.hover_right_bar = 'gui/bar/emptybar_hover.png' 
    style.prefs_slider.left_bar = 'gui/bar/fullbar.png' 
    style.prefs_slider.hover_left_bar = 'gui/bar/fullbar_hover.png' 
    style.prefs_slider.thumb = None 
    style.prefs_slider.xminimum = .1

    style.prefs_window.background = Frame("window.png", 15, 15) 
    style.prefs_window.align = (0, 0) 
    style.prefs_window.pos = (25, 30)
    style.prefs_window.xmaximum = 400 
    style.prefs_window.ymaximum = 580 
    style.prefs_window.xpadding = 1 
    style.prefs_window.ypadding = 1 

Thumb for bar adjustment is not used.
It was only used three images, emptybar, fullbar, and fullbar_hover.
How do you mean to modify the thumb?

[Alex]

...

Try to add

Code: Select all

style.prefs_slider.thumb_shadow = None

https://www.renpy.org/doc/html/style_pr ... umb_shadow

[yoyuchi]

...

Try to add

Code: Select all

style.prefs_slider.thumb_shadow = None

https://www.renpy.org/doc/html/style_pr ... umb_shadow

Thank you, but the problem is not solved.
It seems not a matter of thumb.
The shadows at the bottom of the scrollbar image seem to overlap.
Can't I adjust the section where each scroll bar image overlaps? Is there a way?

[Alex]

...The shadows at the bottom of the scrollbar image seem to overlap.
Can't I adjust the section where each scroll bar image overlaps? Is there a way?

Well, then try to play with 'thumb_offset' (next property in the link above).

[yoyuchi]

...The shadows at the bottom of the scrollbar image seem to overlap.
Can't I adjust the section where each scroll bar image overlaps? Is there a way?

Well, then try to play with 'thumb_offset' (next property in the link above).

style.prefs_slider.thumb_offset = 0

This phrase resolved the situation.
Thank you so much for your help!