找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 135|回复: 2

[教程] 用bar制作简单移动视差效果(renpy进阶学习经验五)

[复制链接]
发表于 2024-7-6 19:43:41 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
本帖最后由 烈林凤 于 2024-7-6 22:40 编辑

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

然后我打算将这个系列更简洁化一些,之前的写法虽然详细,但是不太方便看,之后这个系列不会再重复讲之前教过的内容,并且会将每一期的学习重点标注在开头,先前写过的帖子我也会一点点更新的,感谢各位支持
此外,如果有UI绘制相关需求可以来找我,价格可以根据金主预算来进行调整,这是我爱发电和b站主页,谢谢大家了:
烈林凤正在创作平面设计专业,接UI设计、LOGO设计、图案设计、renpy程序等 | 爱发电 (afdian.net)
烈林凤的个人空间-烈林凤个人主页-哔哩哔哩视频 (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


结束

我们下一篇帖子再见!

QQ202476-192224.gif

评分

参与人数 1活力 +300 干货 +3 收起 理由
被诅咒的章鱼 + 300 + 3 有趣的伪3D动效

查看全部评分

本帖被以下淘专辑推荐:

发表于 2024-7-8 09:42:00 | 显示全部楼层
看到这个效果想到:
好像可以用在一些类似ImageMap的界面上,让图片按钮也呈现出纵深感,比单纯的2D地图好看不少。
回复 支持 抱歉

使用道具 举报

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

确实如此,原本这种效果可能得用3D去制作,这么做就能节省很多代码量了
回复 支持 抱歉

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|RenPy中文空间 ( 苏ICP备17067825号|苏公网安备 32092302000068号 )

GMT+8, 2024-7-19 16:50 , Processed in 0.138326 second(s), 32 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表