马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
×
本帖最后由 立笔犊 于 2020-3-3 20:03 编辑
我们知道,要想在RenPy中做UI,要做得好看、定制化,主要是用imagebutton。 而imagebutton主要是通过提供idle和hover等属性的图片名,最终呈现出的效果是:鼠标没浮在按钮上(idle)时显示一张图,鼠标浮在按钮上(hover)时显示另一张图。 对于一般的游戏这差不多够了,但直接切换图片仍显得有些突兀,不够高级。
那么有没有什么办法做出一些高级一点的imagebutton呢? 比如如果不是直接从idle切换到hover,而是当鼠标悬浮在按钮上时hover的透明度逐渐提高,最终覆盖idle,而鼠标移开时hover透明度又逐渐下降,直至变成idle呢?那样就是一种逐渐过渡、与鼠标即时交互即时反馈的效果,比直接切图要高级很多。 具体效果可以看《罗曼圣诞探案集》中的演示:
演示视频.zip
(395.95 KB, 下载次数: 135)
那么这个是怎么做出来的呢? 因为解释起来太麻烦了,不仅涉及到部分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%,特别好评发售中!
|