RenPy中文空间

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 830|回复: 6

[教程] 好感度界面进阶版(对于我来说)名字,介绍,立绘。

[复制链接]
发表于 2022-1-28 21:15:21 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 雪团子 于 2022-2-1 18:03 编辑

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

                               
登录/注册后可看大图


                               
登录/注册后可看大图


                               
登录/注册后可看大图

于是,我就用最繁琐也最简单的方法实现了!
[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然后隐藏。
最终成果大概这样
好感度界面演示视频


                               
登录/注册后可看大图




                               
登录/注册后可看大图

想法最终.png
无标题gggg.png
无标题hhh.png
发表于 2022-2-3 13:37:00 | 显示全部楼层
基于楼主草稿,做了一点修改:
[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大概可以把所有角色信息都展开在一个组件中,翻页按钮实现平移的动效……等我想想再补充一个……

回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2022-1-28 21:16:49 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2022-1-28 22:35:10 | 显示全部楼层
勤勉的楼主……
略微吐槽一下,你那个图不叫“思维导图”,一般叫“UI设计(草)稿”,特点是——草。
有个草稿已经超过大多数入门者的观念和水平了。
注释很细,嗯,很细……

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

春节期间有空帮楼主补完一下这个……
回复 支持 反对

使用道具 举报

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

哇!谢谢!到时候可以学习一下啦!
回复 支持 反对

使用道具 举报

发表于 2022-5-3 20:21:18 | 显示全部楼层
大佬,这个好感度界面怎么打开嘞
回复 支持 反对

使用道具 举报

发表于 2022-9-5 17:51:23 | 显示全部楼层
萌新正在了解学习中......
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2022-10-3 00:26 , Processed in 0.033503 second(s), 15 queries , File On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

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