Ren'Py教學 【第七篇 #07】 完整的 GUI 從頭到尾製作 【上】

    imagemap:

        ground "gui/idle.png"

        idle "gui/idle.png"

        hover "gui/hover.png"

這 些 東 東 後 加 上 下 面 這 一 串

hotspot 是 為 了 後 面 的 數 字 ( 讓 renpy 知 道 一 個 範 圍 )

然 後 action 後 面 要 接 的 是 這 個 案 件 連 接 到 甚 麼 畫 面

像 是 action ShowMenu("load" ) 就 是 連 接 到 讀 檔 案

如 果 位 置 都 對 看 起 來 就 會 像 這 樣 預 覽

如 果 不 想 要 標 題 在 封 面 上 的 話

移除title標題名字

 可 以 把 下 面 這 一 串 刪 掉

   if gui.show_name:

        vbox:

            style "main_menu_vbox"

            text "[config.name!t]":

                style "main_menu_title"

            text "[config.version]":

                style "main_menu_version"

Step 2 - Preferences Screen ( 自 訂 設 定 畫 面 )

自製 Renpy設定畫面

做 好 之 後 回 到 screen.rpy 然 後 刪 掉 screen preferences(): 下 的 這 段 代 碼

     use game_menu(_("Preferences"), scroll="viewport"):

        vbox:

            hbox:

                box_wrap True

                if renpy.variant("pc") or renpy.variant("web"):

                    vbox:

                        style_prefix "radio"

                        label _("Display")

                        textbutton _("Window") action Preference("display", "window")

                        textbutton _("Fullscreen") action Preference("display", "fullscreen")

                vbox:

                    style_prefix "radio"

                    label _("Rollback Side")

                    textbutton _("Disable") action Preference("rollback side", "disable")

                    textbutton _("Left") action Preference("rollback side", "left")

                    textbutton _("Right") action Preference("rollback side", "right")

                vbox:

                    style_prefix "check"

                    label _("Skip")

                    textbutton _("Unseen Text") action Preference("skip", "toggle")

                    textbutton _("After Choices") action Preference("after choices", "toggle")

                    textbutton _("Transitions") action InvertSelected(Preference("transitions", "toggle"))

            null height (4 * gui.pref_spacing)

            hbox:

                style_prefix "slider"

                box_wrap True

                vbox:

                    label _("Text Speed")

                    bar value Preference("text speed")

                    label _("Auto-Forward Time")

                    bar value Preference("auto-forward time")

                vbox:

                    if config.has_music:

                        label _("Music Volume")

                        hbox:

                            bar value Preference("music volume")

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:

                            bar value Preference("sound volume")

                            if config.sample_sound:

                                textbutton _("Test") action Play("sound", config.sample_sound)

                    if config.has_voice:

                        label _("Voice Volume")

                        hbox:

                            bar value Preference("voice volume")

                            if config.sample_voice:

                                textbutton _("Test") action Play("voice", config.sample_voice)

                    if config.has_music or config.has_sound or config.has_voice:

                        null height gui.pref_spacing

                        textbutton _("Mute All"):

                            action Preference("all mute", "toggle")

                            style "mute_all_button"

然 後 打 上

    imagemap:

        ground '圖 片 的 路 徑 '

        idle '圖 片 的 路 徑 '

        hover '圖 片 的 路 徑 '

        selected_idle '圖 片 的 路 徑'

        selected_hover '圖 片 的 路 徑 '

( 我 的 ground 和 idle 用 的 是 一 樣 的 圖 圖 )

然 後 跟 Title 的 畫 面 一 樣 可 以 使 用 Image Location Picker 來 找 到 每 個 按 鍵 對 應 的 區 域

有 對 應 的 位 置 後 把 數 字 放 到 hotspot 後 面

範 例: hotspot (100, 200, 300, 400) action Preference('display', 'fullscreen') 

這 樣 的 話 renpy 就 知 道 (100, 200, 300, 400) 這 個 範 圍 點 下 去 的 話 ， 畫 面就 要 進 入 全 屏

下 面 是 我 常 用 的 action

Display 的 選 項 ( 全 屏 模 式 和 window 模 式 ) 

action Preference('display', 'fullscreen')

action Preference('display', 'window')

Skip 的 選 項 ( 跳 過 看 過 的 句 子 / 跳 過 選 像 / 全 部 跳 過 ) 

action Preference('skip', 'seen')

action Preference("after choices", "toggle")

action Preference('skip', 'all')

下 面 是 畫 面 的 這 個 地 方 ( 用 黑 線 框 起 來 的 地 方 )

自訂 Renpy Preferences 畫面

        bar pos (XXX, XXX) value Preference("text speed") 

        bar pos (XXX, XXX) value Preference("sound volume")

        bar pos  (XXX, XXX)  value Preference("music volume")

        bar pos  (XXX, XXX)  value Preference("auto-forward time")

更 多 的 action 可 以 看 這 裡 ( 官 方 的 文 檔 )

如 果 位 置  /  代 碼 都 很 正 確 的 話 看 起 來 就 會 像 這 樣 - Preference Screen 預 覽

Step 3 - About & Help Screen ( 關 於 和 幫 助 畫 面 )