找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 833|回复: 3

[课堂] 【2023暑假界面】第三周 (设置界面)

[复制链接]
发表于 2023-7-31 09:15:59 | 显示全部楼层 |阅读模式

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

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

×
本帖最后由 blackpineapple 于 2023-8-12 09:16 编辑

2023年暑假界面班通知

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



第三周

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



本周我们来制作设置界面。


C56lmP.jpg


[RenPy] 纯文本查看 复制代码
# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

default dialogue_on = True
default music_on = True

# The game starts here.

label start:
    scene bg
    jump setting

    return

label setting():
    show screen setting()
    pause
    jump setting
    return

screen setting():
    frame:
        background "gui/setting/SettingsBackground.png"
        xysize (1564, 913)
        align (0.5, 0.5)

        has vbox
        xalign 0.5

        ## SETTINGS 字 
        text _("SETTINGS"):
            size 73
            color "#ebabd4"
            xalign 0.5
            font "fonts/theboldfont.ttf"
            ypos -30

        ## MASTER VOLUME 字 
        text _("MASTER VOLUME"):
            size 42
            color "#44527d"
            xalign 0.5
            font "fonts/theboldfont.ttf"  
        
        ## MASTER VOLUME bar
        frame:
            background "gui/setting/frame_s.png"
            xysize (750, 153)
            xalign 0.5

            has hbox
            spacing 20
            yalign 0.4
            xalign 0.5
            
            bar:
                value Preference("main volume")
                xysize (560, 51)
                align (0.5, 0.5)
                
                left_bar "gui/setting/full.png"
                right_bar "gui/setting/empty.png"
                thumb "gui/setting/VolumeKnob.png"
                thumb_offset 5

            ## 把文字包在frame里面,否则文字因为可能是0% - 100%就是2位或者4位
            ## 会导致bar移动
            frame:
                background Solid("#0ff0")
                xysize (90, 90)
                align (0.5, 0.5)
                text "{:d}%".format(int(_preferences.get_volume('main') * 100)):
                    size 28
                    color "#44527d"
                    align (0.5, 0.5)

        frame:
            background "gui/setting/frame_l.png"
            xysize (750, 508)
            xalign 0.5
            ypos 50

            has vbox
            spacing 30
            xalign 0.5

            ## SOUND SETTINGS 字 
            text _("SOUND SETTINGS"):
                size 42
                color "#44527d"
                xalign 0.5
                font "fonts/theboldfont.ttf"  
                ypos -30  

            hbox:
                align (0.5, 0.5)
                spacing 100
                vbox:
                    text _("Dialogue"):
                        size 25
                        color "#000"
                        xalign 0.5
                        ypos -5
                    
                    frame:
                        background "gui/setting/SwitchBackground.png"
                        xysize (149, 53)

                        has hbox
                        align (0.5, 0.5)

                        button:
                            background None
                            selected_background "gui/setting/Switch.png"
                            xysize (75, 53)
                            align (0.5, 0.5)

                            text _("ON"):
                                align (0.5, 0.5)
                                font "fonts/theboldfont.ttf"

                            selected dialogue_on
                            action [ToggleVariable('dialogue_on')]


                        button:
                            background None
                            selected_background "gui/setting/Switch.png"
                            xysize (75, 53)

                            text _("OFF"):
                                align (0.5, 0.5)
                                font "fonts/theboldfont.ttf"
                            selected not dialogue_on
                            action [ToggleVariable('dialogue_on')]

                vbox:
                    text _("Music"):
                        size 25
                        color "#000"
                        xalign 0.5
                        ypos -5
                    
                    frame:
                        background "gui/setting/SwitchBackground.png"
                        xysize (149, 53)

                        has hbox
                        align (0.5, 0.5)

                        button:
                            background None
                            selected_background "gui/setting/Switch.png"
                            xysize (75, 53)

                            text _("ON"):
                                align (0.5, 0.5)
                                font "fonts/theboldfont.ttf"
                            selected music_on
                            action [Preference("music mute", "toggle"), ToggleVariable('music_on')]


                        button:
                            background None
                            selected_background "gui/setting/Switch.png"
                            xysize (75, 53)

                            text _("OFF"):
                                align (0.5, 0.5)
                                font "fonts/theboldfont.ttf"
                            selected not music_on
                            action [Preference("music mute", "toggle"), ToggleVariable('music_on')]

            vbox:
                text "Sound Effectes Volume":
                        size 28
                        color "#44527d"
                        align (0.5, 0.5)
            
                hbox:
                    bar:
                        value Preference("sound volume")
                        xysize (560, 51)
                        align (0.5, 0.5)
                        
                        left_bar "gui/setting/full.png"
                        right_bar "gui/setting/empty.png"
                        thumb "gui/setting/VolumeKnob.png"
                        thumb_offset 5

                    frame:
                        background Solid("#0ff0")
                        xysize (90, 90)
                        align (0.5, 0.5)
                        text "{:d}%".format(int(_preferences.get_volume('sfx') * 100)):
                            size 28
                            color "#44527d"
                            align (0.5, 0.5)

            vbox:
                text "Music Volume":
                        size 28
                        color "#44527d"
                        align (0.5, 0.5)

                hbox:
                    bar:
                        value Preference("music volume")
                        xysize (560, 51)
                        align (0.5, 0.5)
                        
                        left_bar "gui/setting/full.png"
                        right_bar "gui/setting/empty.png"
                        thumb "gui/setting/VolumeKnob.png"
                        thumb_offset 5

                    frame:
                        background Solid("#0ff0")
                        xysize (90, 90)
                        align (0.5, 0.5)
                        text "{:d}%".format(int(_preferences.get_volume('music') * 100)):
                            size 28
                            color "#44527d"
                            align (0.5, 0.5)
         



最后效果
Screenshot 2023-08-11 at 2.55.20 PM.png




发表于 2023-8-4 17:51:34 | 显示全部楼层
本帖最后由 kzcserin 于 2023-8-8 08:44 编辑

[RenPy] 纯文本查看 复制代码
## 设置界面 ########################################################################
##
## 设置界面允许用户配置游戏,使其更适合自己。
##
## [url=https://doc.renpy.cn/zh-CN/screen_special.html#preferences]https://doc.renpy.cn/zh-CN/screen_special.html#preferences[/url]
    #设置2023

screen preferences():

    tag menu
    imagebutton:
        idle "gui/button/btn4  copy.png"
        action Return()
        at topleft
    imagebutton:
        idle "gui/button/setbtn.png"
        action ShowMenu('preferences')
        at right
    frame:
        xysize (1500,1024)
        text "不够全的设置":
            pos (550,-30)
            color "#192cf6"
            size 60
        background "gui/bar/SettingsBackground.png"  at truecenter
        vbox:
            spacing 10
            align (0.5,0.3)
            xysize (750,200)
            text "御主音量":
                at truecenter
                color "#192cf6"
                size 60
            frame:
                xysize (755,164)
                background "gui/slider/2023/MasterVolumeContainer.png"
                vbox:
                    
                    xysize(560,30)
                    pos(60,50)
                    if config.has_music:
                        #style_prefix "slider"应该不会看出来我这儿为什么专门这样做吧。
                        bar value Preference("main volume"):
                            ysize gui.slider_size
                            left_bar Frame("gui/slider/2023/VolumeFill.png",gui.slider_borders, tile=gui.slider_tile)
                            right_bar Frame("gui/slider/2023/VolumeBarEmpty.png", gui.slider_borders, tile=gui.slider_tile)
                            thumb "gui/slider/2023/VolumeKnob.png"
                            thumb_offset -45#去滑块左右断点
                text str(int(preferences.get_mixer("main") * 100)):
                    color "#000"
                    size 50
                    pos(640,40)
            frame: 
                xysize (770,524)
                text "音量设置":
                    align(0.5,-0.1)
                    color "#3300ff"
                    size 60
                background ("gui/slider/2023/SoundSettingsContainer.png")
                vbox:
                    align (0.5,0.2)
                    hbox:
                        vbox:
                            text "对话":
                                at truecenter
                                color "#192cf6"
                            spacing -4
                            xysize(149,100)
                            
                            style_prefix "check"
                            button action Preference("skip", "toggle")#话说这个vbox的xysize大了的话,不用点击图片也能触发!
                        vbox:
                            text "音乐":
                                at truecenter
                                color "#192cf6"
                            xysize(149,100)
                            spacing -4
                            style_prefix "check"
                            button action Preference("after choices", "toggle")
                        spacing 80
                    spacing 50
                vbox:
                    spacing -30
                    style_prefix "slider"
                    xysize(325,180)
                    align (0.6, 0.5)
                    label _("音效音量") at top
                    if config.has_sound:    
                    
                        bar value Preference("sfx volume")
                text str(int(preferences.get_mixer("sfx") * 100)):
                    color "#000"
                    pos (665,250)
                        #本打算,如果做不出数值显示就用下面代替的哈哈,起码下面的能够显示数字,只不过无法改变音量之类的
                        #if config.has_sound:
                        # bar value VariableValue("falg",100,step = 1):
                        #     ysize gui.slider_size
                        #     left_bar Frame("gui/slider/2023/left.png",gui.slider_borders, tile=gui.slider_tile)
                        #     right_bar Frame("gui/slider/2023/VolumeBarEmpty.png", gui.slider_borders, tile=gui.slider_tile)
                        #     thumb "gui/slider/2023/VolumeKnob.png"
                        #     thumb_offset -45#去滑块左右断点
                    # text "[falg]%" 
                    #text "[sound volume]%"  
                    #if config.sample_sound:
                        #textbutton _("测试") action Play("sound", config.sample_sound)
                vbox:
                    spacing -30
                    style_prefix "slider"
                    xysize(325,180)
                    align (0.6, 0.9)
                    label _("语音音量") at top
                    if config.has_voice:
                        bar value Preference("voice volume")
                
                text str(int(preferences.get_mixer("voice") * 100)):
                    color "#000"
                    pos (665,380)
                        
style pref_label is gui_label
style pref_label_text is gui_label_text
style pref_vbox is vbox

style radio_label is pref_label
style radio_label_text is pref_label_text
style radio_button is gui_button
style radio_button_text is gui_button_text
style radio_vbox is pref_vbox

style check_label is pref_label
style check_label_text is pref_label_text
style check_button is gui_button
style check_button_text is gui_button_text
style check_vbox is pref_vbox

style slider_label is pref_label
style slider_label_text is pref_label_text
style slider_slider is gui_slider
style slider_button is gui_button
style slider_button_text is gui_button_text
style slider_pref_vbox is pref_vbox

style mute_all_button is check_button
style mute_all_button_text is check_button_text

style pref_label:
    top_margin gui.pref_spacing
    bottom_margin 3

style pref_label_text:
    yalign 1.0

style pref_vbox:
    xsize 338

style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/radio_[prefix_]foreground.png"

style radio_button_text:
    properties gui.button_text_properties("radio_button")

style check_vbox:
    spacing gui.pref_button_spacing

style check_button:
    properties gui.button_properties("check_button")
    foreground "gui/slider/2023/Switch_[prefix_]foreground.png"

style check_button_text:
    properties gui.button_text_properties("check_button")

style slider_slider:
    xsize 525

style slider_button:
    properties gui.button_properties("slider_button")
    yalign 0.5
    left_margin 15

style slider_button_text:
    properties gui.button_text_properties("slider_button")

style slider_vbox:
    xsize 675
###调整位置的时候感觉跟吃了块茎拼盘一样(虽说用到的食指远不只有食指)
##################
style slider:
    ysize gui.slider_size
    #base_bar Frame("gui/slider/horizontal_[prefix_]bar.png", gui.slider_borders, tile=gui.slider_tile)
    left_bar Frame("gui/slider/2023/VolumeFill.png",gui.slider_borders, tile=gui.slider_tile)
    right_bar Frame("gui/slider/2023/VolumeBarEmpty.png", gui.slider_borders, tile=gui.slider_tile)
    thumb "gui/slider/2023/VolumeKnob.png"
    #thumb "gui/slider/horizontal_[prefix_]thumb.png"
    thumb_offset -45#去滑块左右断点
    ###为什么我学英语就是没有学到slider这个词呢?





                               
登录/注册后可看大图

这次没有添加私货()



链接: https://pan.baidu.com/s/1SDTA5fPMitpR6ncbkhBmQA 提取码: 1234 复制这段内容后打开百度网盘手机App,操作差不多哦





不够贴合的地方,细节的,一定是素材图片的问题,绝不是我的错

不够贴合的地方,细节的,一定是素材图片的问题,绝不是我的错

点评

“没有私货”  发表于 2023-8-7 10:05

评分

参与人数 1干货 +3 收起 理由
blackpineapple + 3 感谢分享!

查看全部评分

回复 支持 抱歉

使用道具 举报

发表于 2023-8-9 08:42:19 | 显示全部楼层
技术不够...只能做到这样了

[RenPy] 纯文本查看 复制代码
################################################################################
## 自己添加的设置界面
################################################################################
screen mySettings():
    tag menu
    add "gui/DatingGameUI/Exports/Background.jpg"
    add "gui/DatingGameUI/Exports/Settings/SettingsBackground.png":
        align (0.5,0.5)
    text "SETTINGS":
        xalign 0.5
        ypos 60
        color "#ebabd4"
        size 60
    text "MASTER VOLUME":
        xalign 0.5
        ypos 180
        color "#44527d"
        size 50
    text "SOUND SETTINGS":
        xalign 0.5
        ypos 380
        color "#44527d"
        size 50
    vbox:
        xalign 0.5
        frame:
            xysize(755,164)
            ypos 206
            background "gui/DatingGameUI/Exports/Settings/MasterVolumeContainer.png"
        frame:
            xysize(770,524)
            ypos 237
            background "gui/DatingGameUI/Exports/Settings/SoundSettingsContainer.png"
    bar value Preference("main volume"):
        xysize (552,30)
        ypos 270
        xpos 640
        left_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeFill.png")
        right_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeBarEmpty.png")
        thumb "gui/DatingGameUI/Exports/Settings/myVolumeKnob.png" 
        thumb_offset 30
    bar value Preference("music volume"):
        xysize (552,30)
        xpos 645
        ypos 795
        left_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeFill.png")
        right_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeBarEmpty.png")
        thumb "gui/DatingGameUI/Exports/Settings/myVolumeKnob.png" 
        thumb_offset 30
    bar value Preference("sfx volume"):
        xysize (552,30)
        xpos 645
        ypos 650
        left_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeFill.png")
        right_bar Frame("gui/DatingGameUI/Exports/Settings/VolumeBarEmpty.png")
        thumb "gui/DatingGameUI/Exports/Settings/myVolumeKnob.png" 
        thumb_offset 30        
    text (str(int(preferences.get_mixer("main")*100))+"%"):
        color  "#a285af"
        size 35
        pos (1210,265)   
        font "SourceHanSansLite.ttf"
    text (str(int(preferences.get_mixer("sfx")*100))+"%"):
        color  "#a285af"
        size 35
        pos (1210,640)   
        font "SourceHanSansLite.ttf"
    text (str(int(preferences.get_mixer("music")*100))+"%"):
        color  "#a285af"
        size 35
        pos (1210,785)   
        font "SourceHanSansLite.ttf"
    hbox:
        ypos 480
        spacing 170
        text "Dialogue":
            font "SourceHanSansLite.ttf"
            size 30   
            xpos 750
            color  "#a285af"
        text "Music":
            font "SourceHanSansLite.ttf"
            size 30   
            xpos 750
            color  "#a285af"            

    text "Sound Effects Volume":
            font "SourceHanSansLite.ttf"
            size 30   
            xalign 0.5
            ypos 600
            color  "#a285af" 
    text "Music Volume":
            font "SourceHanSansLite.ttf"
            size 30   
            xalign 0.5
            ypos 745
            color  "#a285af" 
    imagebutton:
        align(1.0, 1.0)
        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()    

    textbutton "ON":
        ypos 520
        xysize (149,53)
        xpos 1000
        background "gui/DatingGameUI/Exports/Settings/SwitchBackground.png"
        action SetMute("music",False)

    textbutton "OFF":
        ypos 520
        xysize (149,53)
        xpos 1070
        action SetMute("music",True)
    textbutton "ON":#做不下去了(
        ypos 520
        xysize (149,53)
        xpos 730
        background "gui/DatingGameUI/Exports/Settings/SwitchBackground.png"
        action SetMute("music",False)
    textbutton "OFF":
        ypos 520
        xysize (149,53)
        xpos 800
        action SetMute("music",True)
#不会单独设置某个按钮的字体及颜色,只能这样了...
define gui.button_text_font = "gui/DatingGameUI/theboldfont.ttf"
define gui.button_text_idle_color = "#44527d"


`(9932L5_E_A~_RP}R6149E.png

评分

参与人数 1干货 +3 收起 理由
blackpineapple + 3 感谢分享!

查看全部评分

回复 支持 抱歉

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-12-4 01:21 , Processed in 0.126216 second(s), 29 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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