好感度界面进阶版（对于我来说）名字，介绍，立绘。

雪团子

我在昨晚做完另一个好感度界面后信心大增，决定挑战一个！比较高难度的好感度界面（并不是，依旧很小白。）是一个框架一样的存在，大家也可以学习一下菜鸡的超多的代码的思路，我把我写代码的方式称之为 啰哩巴嗦 流。首先，我向大家展示一下思维导图，大概想要弄成这种感觉。不知道大家看不看的出来。
                       名字
〈 人物立绘 〉  信息
                      好感条
这样的布局的感觉。〈〉这两个是换页面的按钮。

                               
登录/注册后可看大图

                               
登录/注册后可看大图

                               
登录/注册后可看大图

于是，我就用最繁琐也最简单的方法实现了!

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

screen love:#人物一的界面，每个人物都要弄一个。

    tag menu

    add "gui/game_menu.png"#背景图

    imagebutton:#返回按钮，是一个图片按钮
        idle "gui/button/closeidle.png"#要替换成自己的图片，这里是一个叉叉图案，默认状态。
        hover "gui/button/closehover.png"#选中状态。
        action Return()#重点是这个action，里面的名字是screen的名字。
        xalign 0.99#按钮的位置
        yalign 1#按钮的位置
    hbox:
        xalign 0.2#位置
        spacing 30
        textbutton "<" action ShowTransient("no") yalign 0.5
        add "l.png"
        textbutton ">" action Show("love1") yalign 0.5
        vbox:#vbox的意思就是制作一个竖着的框架，也就是说里面的物品会竖着放，我用这个让爱心的条一个接着另一个排下去。
            xalign 0.65#位置
            yalign 0.5#位置
            spacing 20#物品之间的空隙，越高空隙越大。

            text "名字"
            text "介绍，把啦扒拉扒拉吧啦，好多字。"
            bar:#数值条。
                value baitelove#这个是数值，也就是好感度，是需要先定义的。
                range 100#这个是说范围，一百好感度条就满了。
                left_bar "gui/bar/love.png"#条默认状态，空条。
                right_bar "gui/bar/loveb.png"#条满了的状态。
                xysize(425,109)#条大小，一般设置成原本素材的大小就好，不过也可以调整的。
screen love1:#人物二的界面
    tag menu
    add "gui/game_menu.png"#背景图
    
    imagebutton:#返回按钮，是一个图片按钮
        idle "gui/button/closeidle.png"#要替换成自己的图片，这里是一个叉叉图案，默认状态。
        hover "gui/button/closehover.png"#选中状态。
        action Return()#重点是这个action，里面的名字是screen的名字。
        xalign 0.99#按钮的位置
        yalign 1#按钮的位置
    hbox:
        xalign 0.2#位置
        spacing 30

        textbutton "<" action Show("love") yalign 0.5
        add "k.png"
        textbutton ">" action ShowTransient("no") yalign 0.5
        vbox:#vbox的意思就是制作一个竖着的框架，也就是说里面的物品会竖着放，我用这个让爱心的条一个接着另一个排下去。
            xalign 0.65#位置
            yalign 0.5#位置
            spacing 20#物品之间的空隙，越高空隙越大。
            text "名字"
            text "介绍，把啦扒拉扒拉吧啦，好多字。"
            bar:#数值条。
                value baitelove#这个是数值，也就是好感度，是需要先定义的。
                range 100#这个是说范围，一百好感度条就满了。
                left_bar "gui/bar/love.png"#条默认状态，空条。
                right_bar "gui/bar/loveb.png"#条满了的状态。
                xysize(425,109)#条大小，一般设置成原本素材的大小就好，不过也可以调整的。

screen no():#提示界面。
    frame:
        xalign 0.5#位置
        yalign 0.5#位置
        xsize 400 #框架大小（游戏初设定我设定的是1920，请按照自己游戏大小调整）
        ysize 100 #框
        vbox:
            xalign .5
            yalign .5
            spacing 45
            text "没有更多人物了。"
        timer 1.0 action Hide("no")#这个还挺重要的，意思是显示1.0然后隐藏。

最终成果大概这样
好感度界面演示视频

                               
登录/注册后可看大图

                               
登录/注册后可看大图

被诅咒的章鱼

基于楼主草稿，做了一点修改：

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

init python:

    ##预定义角色信息
    ##角色1
    name_1 = "name1"
    intro_1 = "introduction1"
    loveness_1 = 0
    sprite_1 = "sprite_1.png"
    ##角色2
    name_2 = "name2"
    intro_2 = "introduction2"
    loveness_2 = 0
    sprite_2 = "sprite_2.png"
    ##角色3
    name_3 = "name3"
    intro_3 = "introduction3"
    loveness_3 = 0
    sprite_3 = "sprite_3.png"

    ##好感度条图片
    loveness_bar_l = "gui/bar/love.png"
    loveness_bar_r = "gui/bar/loveb.png"
    loveness_bar_size = (425,109)

    ##关闭按钮图片
    close_button = "gui/button/close_%s.png"

    class CharacterStatus:

        def __init__(self, name, intro, loveness, sprite, **kwargs):
            self.name = name
            self.intro = intro
            self.loveness = loveness
            self.sprite = sprite

        def improve(self, n):
            self.loveness = min(100, self.loveness+n)

        def deteriorate(self, n):
            self.loveness = max(0, self.loveness-n)

    #新建角色状态对象
    chara_1 = CharacterStatus(name_1, intro_1, loveness_1, sprite_1)
    chara_2 = CharacterStatus(name_2, intro_2, loveness_2, sprite_2)
    chara_3 = CharacterStatus(name_3, intro_3, loveness_3, sprite_3)
    chara_list = [chara_1, chara_2, chara_3]

    character_counter = len(chara_list)
    character_index = 0


image bg grey = "#505050"

screen chara_status:
    tag menu

    add "bg grey"

    hbox:
        xalign 0.3
        spacing 30

        add chara_list[character_index].sprite

        vbox:
            xalign 0.65
            yalign 0.5
            spacing 20
            text chara_list[character_index].name xalign 0.5 yalign 0.5
            text chara_list[character_index].intro xalign 0.5 yalign 0.5
            ## str(chara_list[character_index].loveness) xalign 0.5 yalign 0.5
            bar:
                value chara_list[character_index].loveness
                range 100
                left_bar loveness_bar_l
                right_bar loveness_bar_r
                xysize loveness_bar_size
    textbutton "<" xalign 0.1 yalign 0.5 action SetVariable("character_index", (character_index+character_counter-1)%character_counter)
    textbutton ">" xalign 0.9 yalign 0.5 action SetVariable("character_index", (character_index+1)%character_counter)

    imagebutton:
        auto close_button
        action Return()
        xalign 0.9
        yalign 0.1

解释一下几个要点：
1. 定义一个角色状态类(CharacterStatus)的好处是扩展性好，后续可以加很多东西进去。
2. 脚本中定义可视组件的顺序是实际渲染的顺序，先定义的底层。所以关闭和翻页按钮要写在角色的立绘和文本信息后面，防止按钮被图片盖住。
3. 角色信息的样式和布局还是需要再改改才行……

另外，用vpgrid大概可以把所有角色信息都展开在一个组件中，翻页按钮实现平移的动效……等我想想再补充一个……

雪团子

https://drive.google.com/file/d/ ... jN/view?usp=sharing

被诅咒的章鱼

勤勉的楼主……
略微吐槽一下，你那个图不叫“思维导图”，一般叫“UI设计(草)稿”，特点是——草。
有个草稿已经超过大多数入门者的观念和水平了。
注释很细，嗯，很细……

每个角色一个界面，在设计层面是比较“生疏”的表现。角色数据设计成列表或者字典，用for循环填到对应组件是最方便的。两个翻页按钮的功能做点修改就行。

春节期间有空帮楼主补完一下这个……

雪团子

被诅咒的章鱼 发表于 2022-1-28 22:35
勤勉的楼主……
略微吐槽一下，你那个图不叫“思维导图”，一般叫“UI设计(草)稿”，特点是——草。
有个草 ...

哇!谢谢！到时候可以学习一下啦！

bbk

大佬，这个好感度界面怎么打开嘞

596068363

萌新正在了解学习中......

雪团子

被诅咒的章鱼 发表于 2022-2-3 13:37
基于楼主草稿，做了一点修改：
[mw_shl_code=renpy,true]init python:

厉害！！！

雪团子

bbk 发表于 2022-5-3 20:21
大佬，这个好感度界面怎么打开嘞

要先学习在菜单界面添加一个新的界面,我不太记得哪里学的了，有空了会写个教程的

coolpeng

谢谢分享啊！学习一下！