【2023暑假界面】第四周 （通讯录界面）

blackpineapple

2023年暑假界面班通知

https://www.renpy.cn/forum.php?mod=viewthread&tid=1389&extra=page%3D1


第四周

界面美术文件请见暑假班通知，或者群下载。

本周我们来制作通讯录界面。

不需要制作功能，只做界面即可。

                               
登录/注册后可看大图

kzcserin

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

screen txl():
    frame:
        add "gui/HomeScreenBackground.jpg"
        add "images/MessagingBackground.png" at center
        add "images/NextBtn.png" pos(1300,950)
        vbox at top:
            
            spacing -60
            imagebutton at center:
                idle "images/justice.png"
                hover "images/justice_pressed.png"
                action NullAction()
            imagebutton at center:
                idle "images/touxindadao.png"
            imagebutton at center:
                idle "images/NoMoney.png"
            imagebutton at center:
                idle "images/qufangdawu.png"
            imagebutton at center:
                idle "images/pad.png" 

label main_menu:
    return
label start:
    show screen txl
    pause
    jump start
    return

                               
登录/注册后可看大图

差不多就是这个样子吧。
不是说会越来越难吗？怎么这次这么杂鱼呀♡~
还是说我哪里做的不对，又或是作业简化啦？毕竟已经到了开学季。

kzcserin

kzcserin 发表于 2023-8-25 09:24
差不多就是这个样子吧。
不是说会越来越难吗？怎么这次这么杂鱼呀♡~
还是说我哪里做的不对，又或是 ...

感觉也就是换了个图，未查看消息时显示消息一条，点击按钮后显示对号。所以就懒得做啦（才不是我也要开学没时间了）

arik

emmmm也许这个通讯录不止5人，需要滑动界面...所以我照着[Ren'Py 进阶教程] 手机教程1 通讯录部分 - 哔哩哔哩 (bilibili.com)试着写了，但只能勉强做到以下的效果了
啊...如果通讯录有消息的话，图片会错位，不知道啥原因
好像这个界面的每个人物栏需要显示最新的一条消息，而不是一个固定的签名...感觉好复杂

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

################################################################################
## messages screen
################################################################################
screen messages():
    tag menu
    add "gui/DatingGameUI/Exports/Background.jpg"
    add "gui/DatingGameUI/Exports/Messaging/MessagingBackground.png":
        xalign 0.5
    vpgrid:
        cols 1
        spacing -38
        pos(525,45) xysize(939,990)
        mousewheel True
        draggable True
        for idx,npc in enumerate(contact):
            hbox:
                pos (50,50)
                ysize 230
                spacing 25
                add npc.img
                if npc.has_new_message():
                    button:
                        pos(-80,80)
                        background "gui/DatingGameUI/Exports/Messaging/NotificationBackground.png"
                        text (str(npc.has_new_message())):
                            color "#f6fbfb"
                            size 38
                            pos(0.5,0.1)
                            font "gui/DatingGameUI/theboldfont.ttf"
                        action NullAction()
                vbox:
                    ypos 15
                    vbox:
                        spacing 10
                        text npc.name:
                            color "#44527d"
                            size 40
                            font "gui/DatingGameUI/theboldfont.ttf"
                    text npc.bio:
                        color "#088191ff"
                        font "SourceHanSansLite.ttf"
                        size 25


    imagebutton:
        pos(0.85,0.85)
        idle "gui/DatingGameUI/Exports/GreenBtn.png"
        foreground "setting_icon"
        hover"gui/DatingGameUI/Exports/GreenBtnPressed.png"
        action ShowMenu("mySettings")
    button:
        background "gui/DatingGameUI/Exports/ExitPopup/BlueBtn.png"
        hover_background "gui/DatingGameUI/Exports/ExitPopup/BlueBtnPressed.png"
        pos (0,0)
        xysize (286,161)
        add "gui/DatingGameUI/Exports/Icons/BackArrow.png":
            xysize (64, 64)
            align (0.5, 0.5)
        action Return()

init -1 python:
    class NPC(object):
        def __init__(self,name,bio="",texting_default="texting_default"):
            self.name =name
            self.img = Composite((128,128),(0,0),"gui/DatingGameUI/Exports/Messaging/CharacterContainer.png",
(0,0),"gui/DatingGameUI/Exports/Messaging/CharacterImage.png")#CharaterImage.png为人物头像,由ps导出
            self.bio =bio
            self.texting_send = []
            self.texting_recieved = []
            self.texting_default = texting_default
        def has_new_message(self):
            return len(self.texting_send) 

define ros = NPC('ROSALINE',"Hello")
define kat = NPC("KATE","Hey")
define chri = NPC("CHRIS","emmmmmmmmmmmmmmm")
define aaa = NPC("npc1","I am a NPC")
define bbb = NPC("npc2","I am a NPC,too")
define ccc = NPC("npc3","We all are NPCs")
define contact = [ros,kat,chri,aaa,bbb,ccc]  

init python:
    ros.texting_send.append("sssssss")

    aaa.texting_send.append("sssssss")
    aaa.texting_send.append("sssssss")
    aaa.texting_send.append("sssssss")

    kat.texting_send.append("sssssss")

被诅咒的章鱼

arik 发表于 2023-8-27 17:05
emmmm也许这个通讯录不止5人，需要滑动界面...所以我照着[Ren'Py 进阶教程] 手机教程1 通讯录部分 - 哔哩哔 ...

整体完成度挺好。

有未读消息时，文本内容往右偏移的原因在：if npc.has_new_message() 这部分，应该放在hbox之外，建议跟hbox某个位置对齐。

消息的数据结构可以用字典，也可以自定义消息类对象，便于区分出“已读”和“未读”，并加入到NPC类中作为成员变量。同时添加几个消息对象相关的增加和查询方法即可。这部分属于数据模型设计的范围，看黑凤梨老师怎么说……