如何在RenPy中做出更加灵活生动的imagebutton？

立笔犊

      我们知道，要想在RenPy中做UI，要做得好看、定制化，主要是用imagebutton。

      而imagebutton主要是通过提供idle和hover等属性的图片名，最终呈现出的效果是：鼠标没浮在按钮上（idle）时显示一张图，鼠标浮在按钮上（hover）时显示另一张图。

      对于一般的游戏这差不多够了，但直接切换图片仍显得有些突兀，不够高级。

     那么有没有什么办法做出一些高级一点的imagebutton呢？

     比如如果不是直接从idle切换到hover，而是当鼠标悬浮在按钮上时hover的透明度逐渐提高，最终覆盖idle，而鼠标移开时hover透明度又逐渐下降，直至变成idle呢？那样就是一种逐渐过渡、与鼠标即时交互即时反馈的效果，比直接切图要高级很多。

    具体效果可以看《罗曼圣诞探案集》中的演示：

    演示视频.zip (395.95 KB, 下载次数: 120)

2020-3-3 19:45 上传

点击文件名下载附件

    那么这个是怎么做出来的呢？

    因为解释起来太麻烦了，不仅涉及到部分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%，特别好评发售中！

steam链接：https://store.steampowered.com/app/926340/_Romans_Christmas/

官博：https://weibo.com/ROMANSCHRISTMAS

老司机飞飞飞

感觉你可以找斗鱼主机区的寅子和杨树他们推广下，最近游戏荒都没什么玩的