这个教程感谢烈林凤​ 提供解法2。

有很多同学遇到Bar 上面的thumb显示不正确的问题，thumb没有显示在滑块的中间。如下图所示：

这个问题要如何修改呢，下面介绍两种办法。

概念

bar 就是上面棕色的条。

thumb就是那个香蕉

第一种方法 PS

这个是我个人比较常用的，在前面的视频有介绍过

【Renpy】设置界面客制化教程一则

具体办法就是：

步骤1 在PS中让thumb和bar对齐。这个如果不会直接b站搜PS 对齐，很多教程。

步骤2 选中包括thumb和bar的图层。

步骤3 control + c 复制，control + n 新建文件（不要改大小），control + v粘贴

把背景图的眼睛关掉，会获得这样一张图。

然后把bar和thumb分别保存。bar一定要保留透明的边部分，这是最重要的！！！

一个写法的例子，如果把图片直接放在images文件夹，路径就可以不写images，像下面直接写"bar.png", 甚至可以直接写"bar"。 但是这不是推荐的写法，因为images文件夹里可能会重名。建议UI的素材还是放在gui文件夹里。

bar:

align (0.5, 0.5) xysize (743, 166) value Preference("music volume") left_bar "bar.png" right_bar "bar.png" thumb "thumb.png" thumb_offset 100

第二种方法 这个方法由烈林凤提供，直接写代码的办法

bar:

align (0.5, 0.5) xysize (743, 166) value Preference("music volume") left_bar Fixed(Frame("bar.png", style="test_bar_frame")) right_bar Fixed(Frame("bar.png", style="test_bar_frame")) thumb Fixed(Frame("bb.png", xysize=(210,166), align=(0.5, 0.5))) thumb_offset 40

style test_bar_frame:

ysize 77 align (0.5, 0.5)

请注意style是写在screen的外面，请参考screens.rpy 里的例子

也可以不用style，直接写

bar:

align (0.5, 0.5) xysize (743, 166) value Preference("music volume") left_bar Fixed(Frame("bar.png", ysize=77, align=(0.5, 0.5))) right_bar Fixed(Frame("bar.png", ysize=77, align=(0.5, 0.5))) thumb Fixed(Frame("bb.png", xysize=(210,166), align=(0.5, 0.5))) thumb_offset 40

这个办法要注意，xysize，一定要写包含thumb之后的那个大小，其实就是x是bar的长，y是thumb的y. 如果这个设置的不对，就会出现不在bar的部分的thumb不能交互。

如果写出来不太对，可以对比这个代码看看缺了什么。