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

BuErShen

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

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

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

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

答：剧情对话中，用做发言者的指示性图片。比如……

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 "这样余的头像也显示出来了～"

第三个问题：如何自定义头像显示？

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

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序列帧，在脚本中使用有些繁琐。如何使用动态图像(DynamicImage)的方法会在后续讨论(也就是说，目前我也不清楚)。另外，替换过程中还发现了各类静态图片更换为动态图像过程中的几个坑，后面可能要进一步深入讲解下ATL的技巧。

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

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

---

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