Ren'Py引擎从入门到放弃(8)——层叠式图像

BuErShen

Ren'Py引擎从入门到放弃(8)——层叠式图像

世上无难事，只要肯放弃。

这是入门介绍的第八篇，主要内容是 Layered Image —— 层叠式图像。

首先，我已经放弃抠图……抠图是不人道的！太蛋疼了！我特么……(省略800字)

所以，就在lemmasoft论坛借用了一点资源：ID为 leon 的某个同学发布的一个换装demo。原帖地址如下：
[tutorial] Dress up game - Lemma Soft Forums

这个帖子发布时间为2012年3月27日(sometimes, old way is good way)，当时还没有层叠式图像的功能。所以我借用了原帖的图片资源，讲解层叠式图像。原帖开头就有图片资源下载链接，有需要的请移步自行下载。

第一个问题：层叠式图像是什么？

答：层叠式图像(Layered Images)，是采用 图层(layer)设计思想的一种可视组件。重点是 —— 一种可视组件（displayable）。能使用其他可视组件的地方，也就可以用层叠式图像。

Ren'Py在7.0版新增的这个功能，主要是解决人物立绘可以灵活变化(但是脚本不能又臭又长)的需求。

一般来说，如果某个角色的多个立绘在主体基本相同，表情、服装、饰品等略有差异，有两个设计思路：

• 让画师生成所有搭配组合的静态图。举例来说，某个角色有4套服装、4种发型和6种表情，就总共有96种组合方式，也就是96张静态图片。这仅仅是一个角色……存储空间表示压力很大。但是，还真有不少游戏就是这样做的，比如废狗……(所以说DELiGHTWORKS到底会不会做游戏并不重要)
• 画师生成主干图和各种可更替的部件图，在程序中搭配组合，也就是“纸娃娃”系统。请注意，“纸娃娃”只是一个设计思路，不同厂商、不同引擎可能使用的是不同的方案实现类似效果。在Ren'Py推出层叠式图像之前，要实现类似效果，需要在脚本中写出所有搭配的组合方式。举例来说，某个角色有4套服装、4种发型和6种表情，就总共有96种组合方式，也就是定义96个image对象。emmmmmmm……
  

有了层叠式图像后，画师不用出那么多图，开发者不用写那么长脚本，可以说是非常便于开(tou)发(lan)的功能。

第二个问题：层叠式图像有哪些语法？

答：官方文档给出了语法的样例，这里抽取几个重点。

• always语句中图像通常是主干图，因为一直会显示。主干图可以是一张图片或者多张图片组合而成。但是！always语句中只可以放1个可视组件！所以，如果要多张图片组合拼接，可以使用Composite之类的函数先合成一个Image对象。
• group语句后面可以自定义对应图像的 特性(property)，比如位置、缩放、锚点等。但是不能使用 变换(transform)，就是说只能使用固定值。如果某个部件图需要有变换或动画效果，也需要在前面使用 ATL语言定义Image对象。
• 层叠式图像的绘制顺序与 group语句顺序相同，后定义的组覆盖在前面的组上。一般是先画主干图，接着表情和主要衣物，最后是饰品和其他东西。
  
• group语句里的 attribute跟我们定义 Image对象时的图像属性(attribute)类似。注意使用的时候同组的属性名不可以同时出现，因为各属性是冲突的，运行会报错。
• if - else语句后面的变量或者表达式使用的变量，需要在层叠式图像的定义前面定义。
• auto语句……注意图片文件的命名规则是使用下划线分隔，与其他 Image对象使用各个分隔符不同。另外，auto语句没有提高多少效率，根据文件名自动识别attribute并不怎么方便，优点是做完 default图之后，后续添加新图片不用改层叠式图像定义部分的代码。
• layeredimage定义的图像也可以加图像标签(tag)，官方称之为姿势(pose)。
• LayeredImagePorxy可以用作对话框头像。
  

第三个问题：实际效果是什么样的？

答：以开篇提到的图片资源，定义一个层叠式图像：

[RenPy] 纯文本查看 复制代码

# 图片文件名未修改过，不使用自动化属性
layeredimage someone:
    always:
        "base"

    group glasses:
        attribute glasses1 default:
            "glasses1"
        attribute glasses2:
            "glasses2"
        attribute glasses3:
            "glasses3"
        attribute glasses4:
            "glasses4"

    group hair:
        attribute hair1 default:
            "hair1"
        attribute hair2:
            "hair2"
        attribute hair3:
            "hair3"
        attribute hair4:
            "hair4"
        attribute hair5:
            "hair5"
        attribute hair6:
            "hair6"
        attribute hair7:
            "hair7"

    group shirt:
        attribute shirt1 default:
            "shirt1"
        attribute shirt2:
            "shirt2"
        attribute shirt3:
            "shirt3"

    group pants:
        attribute pants1 default:
            "pants1"
        attribute pants2:
            "pants2"
        attribute pants3:
            "pants3"

    group tie:
        attribute tie1:
            "tie1"
        attribute tie2:
            "tie2"
        attribute tie3:
            "tie3"

事实上，glasses1图片是多余的。图片是张完全透明的空图像(姑且还是用上)。可以使用下面脚本看看效果：

[RenPy] 纯文本查看 复制代码

show someone
pause

show someone glasses2 hair2 pants2 shirt2 tie2
pause

如果要使用对话框头像并头部更新的话，可以剪裁一块：

[RenPy] 纯文本查看 复制代码

image side someone = LayeredImageProxy("someone", Transform(crop=(91, 24, 251, 184)))

层叠式图像的要点就这些……

预告部分：下一篇是转场(transition)。

---

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

龙氏

里面提到的素材，网路不好，这里下载：
Dressup.rar (886.84 KB, 下载次数: 24)

2020-10-4 21:54 上传

点击文件名下载附件