如何在RenPy中做出高级一点的画廊？

立笔犊

RenPy文档中介绍了使用其自带的画廊的方法，定义图、定义锁条件、生成并添加按钮。
最终呈现的效果就是很多按钮，每个按钮点击之后全屏显示一张CG图，可选带有一些工具栏之类的。
这样是够用了的，但太普通了，太寻常了，所有学了RenPy画廊的人差不多都会这么写。
有没有高级一点的画廊呢？

比如一个这样的画廊，是我为《罗曼圣诞探案集》写的，临时拿一些占位图测试，理解效果即可。
展示视频：
演示视频.zip (466.86 KB, 下载次数: 237)

2020-3-3 20:27 上传

点击文件名下载附件

这个示例比较简单，完整版可以关注即将推出的《罗曼圣诞探案集》的画廊！

这个画廊分为三个区域
（1）缩略按钮区：展示CG的缩略图按钮，点击可以在大图区显示出预览大图。
（2）大图预览区：显示CG图的预览区，点击可放大全屏观看。
（3）文字描述区：可以写一些描述，回顾CG时的场景。

一、python部分代码

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

init python:
    import collections

    # 创建Gallery对象gallery
    gallery = Gallery()

    gallery.transition = Dissolve(1.0, alpha = True)

    # 对外接口，配置字典，可以修改这里的参数快速修改位置等参数
    gallery_config = {
        # 排列模式，水平horizontal，垂直vertical
        "mode":"vertical",

        # 外框frame
        # 缩略图缩放比例（缩略图由原图缩放所得，hover不会缩放）
        "thumb_scale":0.19,
        # 缩略图间隔
        "thumb_space":40.0,
        # 缩略图偏移，用来微调缩略图的位置
        "thumb_xoffset":31.0,
        "thumb_yoffset":7.0,

        # 没有解锁时显示的图像
        "thumb_locked":"locked_image.png",

        # 缩略图idle时的图像，1280×720
        "idle_image":"gui/button/slot_idle_background.png",
        # 缩略图hover时的图像，1280×720
        "hover_image":"gui/button/slot_hover_background.png",
    }

    # 关闭导航栏
    gallery.navigation = False

    # 运行时变量，用来标记图片名和描述
    gallery_list = None
    # 运行时变量，计算gallery尺寸
    gallery_size = (0,0)

    # 向gallery中注册图片
    def gallery_add_image(image_list):
        global gallery, gallery_list
        gallery_list = collections.OrderedDict()
        for i in image_list:
            gallery.button(i[0])
            gallery.unlock_image(i[0])
            gallery_list[i[0]] = i[1]

    # 获取gallery的长度，用于确定viewport的长度
    def gallery_get_size():
        global gallery, gallery_list, gallery_config, gallery_size
        image_size = renpy.image_size(gallery_config["hover_image"])

        # 缩略图宽、高、偏移、间隔
        thumb_width = 1280 * gallery_config["thumb_scale"]
        thumb_height = 720 * gallery_config["thumb_scale"]
        thumb_xoffset = gallery_config["thumb_xoffset"]
        thumb_yoffset = gallery_config["thumb_yoffset"]
        thumb_space = gallery_config["thumb_space"]

        # 根据模式设置行、列
        # 水平模式
        if gallery_config["mode"] == "horizontal":
            row = 1
            col = len(gallery_list)
            hover_len = image_size[0] - thumb_width
            gallery_size = (col * (thumb_width + thumb_space) + 100, 0)
        # 垂直模式
        else:
            row = len(gallery_list)
            col = 1
            hover_len = image_size[1] - thumb_height
            gallery_size = (0, row * (thumb_height + thumb_space) + 100)
        return gallery_size

    # 显示gallery中所有图片
    def gallery_show_thumb():
        global gallery, gallery_list, gallery_config, gallery_size
        image_size = renpy.image_size(gallery_config["hover_image"])

        # 缩略图宽、高、偏移
        thumb_width = 1280 * gallery_config["thumb_scale"]
        thumb_height = 720 * gallery_config["thumb_scale"]
        thumb_xoffset = gallery_config["thumb_xoffset"]
        thumb_yoffset = gallery_config["thumb_yoffset"]
        thumb_space = gallery_config["thumb_space"]

        # 实际按钮，即外框的尺寸
        idle_image = gallery_config["idle_image"]
        hover_image = gallery_config["hover_image"]
        hover_size = renpy.image_size(hover_image)

        # 根据模式设置行、列
        # 水平模式
        if gallery_config["mode"] == "horizontal":
            row = 1
            col = len(gallery_list)
            hover_space = thumb_space + thumb_width - hover_size[0] - 0.9
            gallery_size = (col * (thumb_width + thumb_space), 0)
        # 垂直模式
        else:
            row = len(gallery_list)
            col = 1
            hover_space = thumb_space + thumb_height - hover_size[1] - 0.9
            gallery_size = (0, row * (thumb_height + thumb_space))

        # 外框与按钮
        ui.grid(col, row, size=gallery_size, spacing = hover_space)
        for i in gallery_list.keys():
            if gallery.get_fraction(i)[0] != "0":
                ui.imagebutton(idle = idle_image, hover = hover_image, action = SetScreenVariable("now_image",i))
            else:
                ui.add(Null(width=thumb_width,height=thumb_height))
        ui.close()

        # 缩略图
        ui.grid(col, row, size=gallery_size, spacing = thumb_space)
        for i in gallery_list.keys():
            if gallery.get_fraction(i)[0] != "0":
                thumb_image = im.FactorScale(i+".png", gallery_config["thumb_scale"])
            else:
                thumb_image = im.FactorScale(gallery_config["thumb_locked"], gallery_config["thumb_scale"])
            ui.add(thumb_image, xoffset = thumb_xoffset, yoffset = thumb_yoffset)
        ui.close()


    # 名字不能重复，否则会覆盖
    gallery_add_image([
    ("bg street rain", _("描述1    空格测试") ),
    ("bg street afterrain", _("描述2\n换行测试") ),
    ("bg tianqian", _("描述3 过多文字测试过多文字测试过多文字测试过多文字测试过多文字测试过多文字测试过多文字测试") ) ,
    ("bg nightstreet2", _("描述") ),
    ("bg diningroom", _("描述") ),
    ("bg battle1", _("描述") ),
    ("bg battle2", _("描述") ),
    ("bg battle3", _("描述") ),
    ("bg battle4", _("描述") ),
    ])

可以在gallery_config中修改相关参数，快速修改画廊的位置、排列方向、缩放大小等等参数。
可以在gallery_add_image函数的调用中添加画廊图和相关描述，这里图的名字要用路径名，如果是声明的image需要图片名字与声明image名相同。

二、界面部分代码

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

screen gallery_screen():
    # 确保画廊界面替换主菜单。
    tag menu
    # 当前展示的图片
    default now_image = None

    # 按钮区，用来选择当前要游览的cg的缩略图和按钮
    viewport:
        pos (25, 50)

        # 根据模式判断往哪边滚
        if gallery_config["mode"] == "horizontal":
            mousewheel "horizontal"
        else:
            mousewheel True

        # 调用函数获取按钮区长度
        child_size gallery_get_size()

        # 显示所有按钮区缩略图
        python:
            gallery_show_thumb()

    # 大图区，实际是画廊按钮，点击后全屏
    if now_image != None:
        python:
                pre_image = im.FactorScale(now_image+".png", 0.7)
        add gallery.make_button(now_image,pre_image,align=(1.0,0.1))

    # 文字区
    python:
        describe = gallery_list.get(now_image)
    if describe != None:
        text "[describe]":
            align (0.7, 0.9)


    textbutton "返回" action Return()

今天写累了，不想细讲了，懂的自然懂。
然后……

这个东西还是我给制作《罗曼圣诞探案集》时做的，大概花了半天，推倒了上一个那种普通的版本。我是因为这个游戏才了解到的RenPy，主创也是我的好朋友。

打个小广告。

《罗曼圣诞探案集》，使用RenPy引擎制作，已上架steam，目前好评率97%，特别好评发售中！

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

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

BuErShen

视觉效果真心不错