用bar制作简单移动视差效果（renpy进阶学习经验五）

烈林凤

原本这篇打算在上一个月就发的，但因为种种事情导致精神有些不太好，一直拖到了现在……

然后我打算将这个系列更简洁化一些，之前的写法虽然详细，但是不太方便看，之后这个系列不会再重复讲之前教过的内容，并且会将每一期的学习重点标注在开头，先前写过的帖子我也会一点点更新的，感谢各位支持
此外，如果有UI绘制相关需求可以来找我，价格可以根据金主预算来进行调整，这是我爱发电和b站主页，谢谢大家了：
烈林凤正在创作视觉小说UI设计、LOGO设计、图案设计、renpy程序等 | 爱发电 (afdian.com)
烈林凤的个人空间-烈林凤个人主页-哔哩哔哩视频 (bilibili.com)
感谢@挽歌叁 提出的问题！本帖中所使用的图像均来源于网络或是自己个人制作，请勿转载或商用，仅可作为练习使用，谢谢！
如果需要转载本帖，请附上本人名称“烈林凤”，不可将本帖中的代码或本帖以任何形式进行售卖，其他的形式的使用无需通知本人或署名，直接使用就好。
关于本帖中有任何不理解的地方都可以留言，但请先尝试运行之后再提问，谢谢！
我所使用的是8.2.1版本的renpy，请尽量使用高版本，谢谢！
接下来进入正题——

（因为最大只能传500KB的图片，所以GIF已经糊成看不清的样子了）
本期的主题为“用bar制作简单移动视差效果（renpy进阶学习经验五）”
主要使用了“transform”和“bar”两个功能相关的代码
具体的使用方法请参考文档——
transform：界面和界面语言 — Ren'Py 中文文档 (renpy.cn)

bar：界面和界面语言 — Ren'Py 中文文档 (renpy.cn)



主要代码如下——

[RenPy] 纯文本查看 复制代码

# 定义一个变换样式，用于改变图像的各类属性
# 入参分别表示可移动的最大值，当前x坐标，当前y坐标，当前缩放值
transform slide(max_pos,xpos_n,ypos_n,zoom_n):
    xoffset int((im_mo_xpos-0.5)*max_pos*2)
    xpos xpos_n
    ypos ypos_n
    zoom zoom_n
    anchor (0.5,0.5)

# 定义一个变量，用于获取bar的当前值（图像相对与bar的值），默认是0.5（正中心）
default im_mo_xpos = 0.5

# 用于显示图像和bar的界面
screen Image_movement:
    fixed:
        xycenter(0.5,0.5)
        xysize(1920,1080)

        add "借来的素材_1":
            at slide(1920,0.5,0.5,0.8)

        add "阿米娅":
            at slide(3000,0.6,0.5,0.65)

        add "女仆绿":
            at slide(3500,0.35,0.5,0.7)

        bar:
            xycenter(0.5,0.5)
            xysize(1920,1080)
            value VariableValue("im_mo_xpos",range=1.0)
            released [If(im_mo_xpos<=0.2,SetVariable("im_mo_xpos",0.0),SetVariable("im_mo_xpos",0.5)),
                    If(im_mo_xpos>=0.8,SetVariable("im_mo_xpos",1.0),None)]
            bar_invert False
            bar_vertical False
            top_bar "#00000000"
            bottom_bar "#00000000"
        
        textbutton "复位":
            xycenter(0.5,0.9)
            text_size 50
            action SetVariable("im_mo_xpos",0.5)

接下来进行详解——
功能实现原理：利用renpy中关于图像定位相关的特性，即浮点数是相对坐标，整值是绝对坐标。
文档中的具体说明：
动画和变换语言 — Ren'Py 中文文档 (renpy.cn)

样式特性(property) — Ren'Py 中文文档 (renpy.cn)

position
position用于指定以左上角为原点的坐标系中的位置。(对position来说，可用区域由可视组件所在的图层给定，如果没有图层就是整个界面。对anchor来说，可用区域是其自身可视组件的大小。)

position值的表示结果与数据类型有关：

int (比如 0、1、37或42)
整数的表示结果为像素数，从可用区域最左边或顶边算起。

float (比如 0.0、0.5或1.0)
浮点数的表示结果为可用区域的一个比例。例如，0.5表示区域内某条边的中点，1.0表示右侧边或者底边。

这也就意味着，可以将图像的浮点数（相对坐标）经过计算后改为整值（绝对坐标），如果用一个浮点数变量来控制多个图像，同时使它们的计算过程不同，那么最后得出的整值将会不同，从而使每个图像的移动距离不同。
这就是本篇教程的核心逻辑，利用这一点可以制作出更多好用的动态效果，本帖仅仅是其中的一个“实例”。

代码讲解：
一、定义一个浮点数变量
二、定义一个变换样式：
很多人可能不知道，transform其实是可以入参的，这点可以去看文档中的说明：Python中的变换(transform)和转场(transition) — Ren'Py 中文文档 (renpy.cn)
填入四个临时变量：max_pos,xpos_n,ypos_n,zoom_n，分别表示表示可移动的最大值，当前x坐标，当前y坐标，当前缩放值（当然，可以定义更多用于更多地方，这里仅为演示）。
然后按照正常的图像属性填入（不知道这些pos、anchor有什么用的自己搜文档），还有为什么要在xoffset上使用公式？如果用在了xpos上，那么所有图像的起始点只能在一个地方，没办法更加灵活地变换。
xoffset上使用的公式表示的是“（滑块位置（0.0到1.0）-0.5）*可移动的最大距离*2”，后面的“可移动的最大距离*2”你们可以换成任意整值，但要注意的是，如果不*2即代表两侧的共同长度（-0.5到0.5），使用*2可以更方便计算。
三、设置界面，并应用变换样式
四、设置bar：
将bar的大小设置成和屏幕一样的大小，并且将所有底图调整成透明，将value绑定为改变im_mo_pos的值，这样滑动屏幕时就会拖动bar的滑块并改变变量的值。
这里还利用了bar的released方法，这一方法可以使滑块掉落时（不再拖动时）触发action行为，这也就意味着它可以像action一样在后面接行为。
我在released后面写了一个可以判断滑块位置从而进行吸附的功能，如果滑块在左边（0.0到0.2），就会直接向左移出屏幕，反之亦然，但要注意的是第二个If()中的最后需要填入None，不然会进行二次判定，导致即使是在左边也会回到正中。
关于If的文档：界面行为(action)、值(value)和函数 — Ren'Py 中文文档 (renpy.cn)
五、运行

[RenPy] 纯文本查看 复制代码

label start:
    call screen Image_movement

结束

我们下一篇帖子再见！

被诅咒的章鱼

看到这个效果想到：
好像可以用在一些类似ImageMap的界面上，让图片按钮也呈现出纵深感，比单纯的2D地图好看不少。

烈林凤

被诅咒的章鱼 发表于 2024-7-8 09:42
看到这个效果想到：
好像可以用在一些类似ImageMap的界面上，让图片按钮也呈现出纵深感，比单纯的2D地图好 ...

确实如此，原本这种效果可能得用3D去制作，这么做就能节省很多代码量了