RenPy中文空间

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3976|回复: 1

[教程] 如何在RenPy中做出更加灵活生动的imagebutton?

[复制链接]
发表于 2020-3-3 19:30:10 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 立笔犊 于 2020-3-3 20:03 编辑

      我们知道,要想在RenPy中做UI,要做得好看、定制化,主要是用imagebutton。
      而imagebutton主要是通过提供idle和hover等属性的图片名,最终呈现出的效果是:鼠标没浮在按钮上(idle)时显示一张图,鼠标浮在按钮上(hover)时显示另一张图。
      对于一般的游戏这差不多够了,但直接切换图片仍显得有些突兀,不够高级。

     那么有没有什么办法做出一些高级一点的imagebutton呢?
     比如如果不是直接从idle切换到hover,而是当鼠标悬浮在按钮上时hover的透明度逐渐提高,最终覆盖idle,而鼠标移开时hover透明度又逐渐下降,直至变成idle呢?那样就是一种逐渐过渡、与鼠标即时交互即时反馈的效果,比直接切图要高级很多。
    具体效果可以看《罗曼圣诞探案集》中的演示:
    演示视频.zip (395.95 KB, 下载次数: 99)

    那么这个是怎么做出来的呢?
    因为解释起来太麻烦了,不仅涉及到部分python语法、一些程序设计的基础抽象技巧,还有涉及到renpy的一些限制。真要解释起来完全解释不清楚,所以我就直说步骤了。

0、思路
(1)把imagebutton现在的background属性设为原来的idle属性
(2)把imagebutton的idle设为名叫hover_off的transfrom,hover设为名叫hover_on的transform
(3)在hover_off中调用名叫func_hover_off的函数,在hover_on中调用func_hover_on的函数
到了这里,就可以用python语法编写imagebutton的图像变化了。
(4)在init python中编写函数,transform中function语句调用的函数需要三个入参,具体可以看文档。
func_hover_on:鼠标浮在imagebutton上时触发,提高hover透明度
func_hover_off:鼠标不在imagebutton上时触发,降低hover透明度
总之:用transform替换imagebutton的属性,在transform中调用function,在init python中写function,最终转换为用python代码中的变量和条件判断来控制透明度。

接下来我们以三个按钮为例,给出关键代码,考虑到需要设置多个按钮的情况会有一定的抽象。
1、把imagebutton现在的background属性设为原来的idle属性
把imagebutton的idle设为名叫hover_off的transfrom,hover设为名叫hover_on的transform
[RenPy] 纯文本查看 复制代码
        imagebutton:# start
            idle hover_off(0)
            hover hover_on(0)
            background "gui/launch_page/button.png"
            foreground Text(_("开始游戏"))
            action Start()
[RenPy] 纯文本查看 复制代码
        imagebutton:# load
            idle hover_off(1)
            hover hover_on(1)
            background "gui/launch_page/button.png"
            foreground Text(_("读取存档"))
            action ShowMenu("load")
[RenPy] 纯文本查看 复制代码
        imagebutton:# language
            idle hover_off(2)
            hover hover_on(2)
            background "gui/launch_page/button.png"
            foreground Text(_("Language"))
            action ShowMenu("lan")
2、在hover_off中调用名叫func_hover_off的函数,在hover_on中调用func_hover_on的函数
[RenPy] 纯文本查看 复制代码
transform hover_on(pos):
    function eval("func_hover_on_"+str(pos))
    0.1
    repeat

transform hover_off(pos):
    function eval("func_hover_off_"+str(pos))
    0.1
    repeat
这里用到了一点点抽象,因为每个按钮都需要单独的变量控制,那么每个按钮都要写一个transform、一个function,也就太麻烦了。所以通过设置参数和eval解析来做一点抽象,统一不同的transform,减少重复的代码。

3、在init python中编写函数
[RenPy] 纯文本查看 复制代码
init python:
    persistent.complete_all = True
    time_show = 0.5         # 展示的总时间
    flame = 20              # 每秒帧率

    # 每帧变化程度
    every_degree = 1.0 / time_show / flame
    # 每帧时间
    every_flame_time = 1.0 / flame
    button_alpha = [0, 0, 0]

    def func_hover_on(trans, st, at, index, state):
        global button_alpha, every_degree, every_flame_time

        trans.child = button_hover
        # 上升且透明度不为1,下降且透明度不为0
        if (state == 1 and button_alpha[index] < 1.0) or (state == -1 and button_alpha[index] > 0):
            # 一次变换0.05/time_show,帧率相同,展示总时间越长,每次变换程度越低
            button_alpha[index] += every_degree * state
            trans.alpha = button_alpha[index]
            return every_flame_time
        else:
            trans.alpha = 0.5 + 0.5 * state
            return None

    def func_hover_on_0(trans, st, at):
        return func_hover_on(trans, st, at, 0, 1)
    def func_hover_off_0(trans, st, at):
        return func_hover_on(trans, st, at, 0, -1)

    def func_hover_on_1(trans, st, at):
        return func_hover_on(trans, st, at, 1, 1)
    def func_hover_off_1(trans, st, at):
        return func_hover_on(trans, st, at, 1, -1)

    def func_hover_on_2(trans, st, at):
        return func_hover_on(trans, st, at, 2, 1)
    def func_hover_off_2(trans, st, at):
        return func_hover_on(trans, st, at, 2, -1)

具体的就是python基础语法和renpy的文档中讲过的一些语法,看得懂就看得懂,看不懂也讲不清楚(x
通过以上这些步骤,就可以把这三个imagebutton变成前面演示中所展现的“鼠标悬浮在按钮上时hover的透明度逐渐提高,鼠标移开时hover透明度逐渐下降”的动态效果。
这一部分并不难,但如果没有自己摸索实践过或者缺乏基础可能完全看不懂啥意思。



动态UI即使是在成熟的通用引擎中也是需要一定的操作或者代码量的东西,但因为RenPy隐藏了控件的面向对象特性的接口、没有成熟的动画系统,所以这方面要实现起来还是需要摸索,并且有些复杂。
希望这个帖子可以帮到想做这方面工作的人。

另外,这个东西也是我在制作《罗曼圣诞探案集》时摸索出来的,忘了花了多久,好像尝试了好几个版本,前几个版本总存在各种微小的bug让我不太满意,最终做出的现在这个版本虽然实现很绕很笨拙,但效果的确是完全实现了。我是因为这个游戏才了解到的RenPy,主创也是我的好朋友。
打个小广告。
《罗曼圣诞探案集》,使用RenPy引擎制作,已上架steam,目前好评率97%,特别好评发售中!

评分

参与人数 1干货 +1 收起 理由
BuErShen + 1 楼主辛苦了!

查看全部评分

发表于 2020-3-10 16:25:58 | 显示全部楼层
感觉你可以找斗鱼主机区的寅子和杨树他们推广下,最近游戏荒都没什么玩的
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2022-5-25 14:25 , Processed in 0.062179 second(s), 14 queries , File On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

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