RenPy中文空间

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 891|回复: 0

[转载] Ren'Py引擎从入门到放弃(12)——启用对话框头像

[复制链接]
发表于 2020-8-13 13:18:00 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 BuErShen 于 2020-8-13 13:16 编辑

Ren'Py引擎从入门到放弃(12)——启用对话框头像

世上无难事,只要肯放弃。
这是入门介绍的第十二篇,主要内容是如何启用对话框侧边栏头像。(没想到吧,我还没放弃更新这个坑!)

对话框侧边栏头像是很多游戏中剧情对话的画面常见要素。由于官方文档中说明较少,所以这里补充一下实际使用方法。

第一个问题:什么是侧边栏头像(Side Image)?

答:剧情对话中,用做发言者的指示性图片。比如……
P5剧情对话中的侧边栏头像.gif
P5剧情对话中的侧边栏头像

第二个问题:如何显示侧边栏头像?

答:头像图像的定义与角色图像定义类似,仅仅在图像定义时增加一个“side”属性即可。

举个栗子,我们有一张角色的普通完整立绘图片“nero normal.png”,用于显示在画面正中。然后我们从完整立绘中截取的一部分,另存为另一张图“side nero normal.png”,用作对话框的侧边栏头像。在script.rpy脚本中可以这样定义:
[RenPy] 纯文本查看 复制代码
define n = Character("尼禄", image="nero")

image nero = "character/nero normal.png"

image side nero = "character/side nero normal.png"

其他表情的立绘和头像也类似:
[RenPy] 纯文本查看 复制代码
image nero smile = "character/nero smile.png"

image side nero smile = "character/side nero smile.png"

脚本中不需要指定带side属性的图像,Ren'Py将自动在左下角显示头像:
[RenPy] 纯文本查看 复制代码
label start:

    show nero

    n "嗯唔嗯唔。"

    n smile "这样余的头像也显示出来了~"

2.jpg

3.jpg

第三个问题:如何自定义头像显示?

答:官方文档中介绍了几个预设的配置项,可以自定义头像的显示设置。

Side Images - Ren'Py Documentation

头像 — Ren'Py 中文文档

其中比较常用的可能是图像显示转场,又分为同角色不同头像转场和不同角色转场两个配置项:
[RenPy] 纯文本查看 复制代码
config.side_image_same_transform
config.side_image_change_transform

先自定义转场效果,再将对应的配置项写入到gui.rpy中即可(并不强制要求写在这个文件中,只是便于分类查找)。例如同角色不同表情图像转换时:
[RenPy] 纯文本查看 复制代码
transform same_transform(old, new):
    old
    new with Dissolve(0.2, alpha=True)

define config.side_image_same_transform = same_transform

头像将有淡入淡出效果。

此外还可以调整头像的图层顺序和位置,需要修改say界面(screen)。

在screen.rpy中搜索“screen say”可以查到以下内容:
[RenPy] 纯文本查看 复制代码
screen say(who, what):
    style_prefix "say"

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0

最后一行的 SideImage() 返回可显示的头像图像。

这段代码可以看出:默认的say界面中,对话内容和头像是分开显示的。角色名称和对话内容在一个window组件中,而window组件的特点是可以带背景图片,并使用固定布局显示内容。头像是在角色名称和对话内容后面,意味着如果头像过大,将覆盖对话的文本。官方文档的建议是将对话文本左侧预留一些空间,比如在“window”使用的样式中添加一行:
[RenPy] 纯文本查看 复制代码
style window:
    left_padding 150

但如果我们就是想要文本背景框一部分遮挡头像的效果(就想开头gif图中东乡头像的效果),应该怎么整呢?

其实很简单,把say界面中SideImage的代码移动到window组件前面就可以了:
[RenPy] 纯文本查看 复制代码
screen say(who, what):
    style_prefix "say"

    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

既然提到自定义UI了,我就顺便修改了一下Say界面的背景。用AE制作了两根丝带作为namebox的背景,做了花瓣粒子作为对话框的背景,更换了字体。效果如下:
此处使用的是png序列帧.gif
此处使用的是png序列帧,在脚本中使用有些繁琐。如何使用动态图像(DynamicImage)的方法会在后续讨论(也就是说,目前我也不清楚)。另外,替换过程中还发现了各类静态图片更换为动态图像过程中的几个坑,后面可能要进一步深入讲解下ATL的技巧。

总体而言,头像属于自定义GUI中非常简单的部分,只需要花时间做亿点点特效动画就行了~

预告部分再整一篇ATL的内容吧,大概……



“Ren'Py引擎从入门到放弃”系列教程

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

本版积分规则

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

GMT+8, 2020-11-30 01:05 , Processed in 0.033585 second(s), 13 queries , File On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

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