Ren'Py教學【第八篇 #08】 完整的 GUI 從頭到尾製作 【下】

最近開始了在 Youtube 上上傳教學影片歡迎訂閱我的頻道~  

◆YT 連結◆

在 這 篇 我 會 繼 續 完 成 Help Screen 的 製 作

要 先 看 看 上 篇 可 以 點 這 裡

如 果 已 經 有 了 Keyboard 和 Mouse 的 位 置 那 就 可 以 開 始 定 位 下 面 help 文 字 的 位 置

首 先 要 在 screen keyboard_help(): / screen mouse_help(): 和 screen gamepad_help(): 下 面

加上    vbox:

            spacing # ( 一 格 之 間 的 距 離 - 範 例 15)

            xpos # ( 從 螢 幕 左 邊 到 文 字 的 距 離 - 範 例 500)

            ypos # ( 從 螢 幕 上 面 到 文 字 的 距 離 - 範 例 300)

            xmaximum # ( 文 字 最 長 可 以 到 達 的 距 離 - 範 例 1200)

            ymaximum # ( 文 字 離 最 上 面 可 以 到 達 的 距 離 - 範 例 700)

( 如 果 是 1280 x 720 的 畫 面 的 話 )

都 調 好 的 話 大 概 看 起 來 會 像 這 樣 :

定位 hotspot

# Keyboard 和 Mouse 沒 有 被 選 擇 時 普 通 的 文 字 顏 色 #c2bebe 是 淡 淡 的 白 色 / 灰 色

define gui.button_text_idle_color = "#c2bebe"  

# 把 滑 鼠 滑 到 Keyboard 和 Mouse 文 字 上 時 顯 示 的 顏 色 #171717 是 像 黑 色 那 樣

define gui.button_text_hover_color = "#171717"

# 選 擇 Keyboard 或 Mouse 後 文 字 顯 示 的 顏 色 #ffffff 是 白 色 搭

define gui.button_text_selected_color = "#ffffff"

如 果 跟 我 用 了 同 樣 的 顏 色 的 話 看 起 來 就 會 像 這 樣 - 預 覽 

醬 子 Help Screen 就 完 成 拉

Step 4 - Load / Save Screen

在 load 或 是 save Screen 我 會 用 一 樣 的 圖 片

需 要 一 張 Idle / 一 張 hover/ 一 張 selected/ 一 張 selected hover 的 圖 片

這 是 我 剛 做 好 的 screen

load 或 是 save 畫 面 大 概 可 以 看 起 來 像 這 樣

save / load 畫面

中 間 黑 色 的 框 框是 slot ( 裝 圖 片 / 存 檔 / 讀 檔 用 的)

下 面 的 數 字 ( 1 到 8 ) 是 不 同 的 頁 數 所 以 8 x 4 = 32 所 以 玩 家 總 共 最 多 可 以 存 / 讀 取 32 個 檔 案

有 了 圖 片 後 接 下 來 就 是 代 碼拉

打 開 screen.rpy 找 到 save 和 load screen 的 位 置 就 可 以 開 始 拉

把 這 2 個 screen 下 面 的 東 東 全 部 刪 掉 然 後

在 screen save(): 和 screen load(): 下 面 打 上

    tag menu

    imagemap:

        ground '圖 片 位 置 '

        idle '圖 片 位 置'

        hover '圖 片 位 置'

        selected_idle '圖 片 位 置'

        selected_hover '圖 片 位 置'

因 為 load 和 save 使用的是同樣的圖片所以可以直接複製上面那一段然後貼上到另 一 個 screen

都 放 好 正 確 的 圖 片 位 置 後 就 可 以 重 開 測 試 這 個 Project 拉

只 是 這 時 還 沒 不 能 使 用 - 因 為 還 沒 定 義 有 按 鍵 的 位 置 ( 先 測 試 看 看 是 為 了 確 認 圖 片 的 位 置 都 是 正 確 的 )

如 果 沒 有 跳 出 甚 麼 問 題 的 話 就 可 以 在 imagemap 下 面 放 上 正 確 的 hotspot

( 最 下 面 ) - 這 個 部 分

放上正確的 hotspot

在 About 和 Help 都使用過所以可以直接從那邊複製過來

讀 / 存 檔 的 位 置 可 以 透 過 下 面 的 代 碼 呈 現        

hotspot ( 正 確 的 hotspot 位 置 ) action FileAction(1):

            use load_save_slot(number=1)

讀檔 / 存檔位置

頁 碼 ( 1 到 8 ) 則 可 以 透 過 下 面 的 代 碼 呈 現

     -    hotspot ( 正 確 的 hotspot 位 置 ) action FilePage( 1 - 8 的 頁 碼 ) 

第 一 頁 的 話 就 是- hotspot ( 正 確 的 hotspot 位 置 ) action FilePage (1)

第 二 頁 的 話 就 是- hotspot ( 正 確 的 hotspot 位 置 ) action FilePage (2)

有 8 頁 所 以 會 有 8 行 這 樣 的 東 東

screen load_save_slot:

    $ file_text = "% s\n  %s" % (FileTime(number, empty=" "), FileSaveName(number))

    add FileScreenshot(number) xpos 截 圖 的 X 軸 位 置 ypos 截圖的 Y 軸 位置

    text file_text xpos 文 字 的 X 軸 位 置 ypos 文 字 的 Y 軸 位 置 size 文 字 的 大 小  color "# 文 字 的 顏 色"

之 後 還 會 需 要 這 段 代 碼:

init python:

    config.thumbnail_width = # 截 圖 的 寬 度

    config.thumbnail_height = # 截 圖 的 長 度

如 果 沒 有 任 何 錯 誤 的 話 看 起 來 就 會 像 這 樣 - 預 覽 

接 下 來 就 需 要 在 load 和 save 畫 面 上 加 上 load 和 save 的 字 樣 這 樣 玩 家 就 能 確 定 現 在 是 在 哪 個 screen 了

要 加 文 字 / 句 子 在 screen 裡，可 以 使 用 下 面 這 個 代 碼

        text _("Load Data") xpos 文 字 的 X 軸 位 置 ypos  文 字 的 Y 軸 位 置 

更 改 ("這裡 ") 的 文 字 就 可 以 改 變 實 際 在 遊 戲 裡 呈 現 的 字 了

所 以 save 畫 面 的 代 碼 就 是 - text _("Save Data") xpos 文 字 的 X 軸 位置 ypos  文 字 的 Y 軸 位 置 

改 變 字 體 的 顏 色 - {color=#顏 色 代 碼} 文 字 {/color}

改 變 字 體 的 大 小 - {size= 字 體 大 小(像是 20，12，32...)} 文 字 {/size}

畫 線 - {u} 文 字 {/u}

範 例:

        text _("{u}{size=42}{b}Save Data{/b}{/size}{/u}") xpos 500 ypos 8

文字可以來就會像這樣:

顯示文字

如 果 沒 有 任 何 問 題 看 起 來 就 會 像 這 樣 - 預 覽

這 樣 save 和 load screen 就 完 成 了

剩 下 需 要 的 就 是 遊 戲 裡 平 常 / 大 部 分 玩 家 看 著 的 畫 面 了

Step 5 - 對 話 框 & 名 字 框

通 常 我 會 把 對 話 的 框 框 和 放 名 字 的 框 框 一 起 編 輯 

製作對話框 & 名字框

製作對話框

預覽對話框

define gui.name_xpos = 名 字 出 現 的 X 軸

define gui.name_ypos = 名 字 出 現 的 Y 軸 - 因 為 我 要 讓 名 字 更 上 去 一 點 所 以 數 字 是 負 的 ( -10 )

如 果 要 讓 名 字 下 去 一 點 數 字 就 要 是 正 的 ( 像 是 10 )

改 變 文 字 的 位 置:

define gui.dialogue_xpos = 文 字 出 現 的 X 軸

define gui.dialogue_ypos = 文 字 出 現 的 Y 軸

也 可 以 到 screen.rpy 上 更 改，只 要 找 到 screen say 之 後 在 style window / style namebox: 

- 在 這 裡

改變造型

你可能會感興趣的文章:

• 【自製Renpy GUI 】 007【免費/付費素材】
• 【自製視覺小說GUI 】013 【古風界面】
• 【自製Renpy GUI 】 005【免費/付費素材

改 變 xpos 和 ypos 後 的 數 字 - 我 調 完 後 的 樣 子:

改變文字造型

位 置 都 正 確 後 就 需 要 正 確 的 大 小 ，顏 色 和 文 字 能 出 現 的 範 圍

下 面 的 代 碼 都 是 在 gui.rpy 裡 面

define gui.text_size = 一 個 數 字 - 可 以 更 改 文 字 的 大 小

define gui.name_text_size = 一 個 數 字 - 可 以 更 改 角 色 名 字 的 大 小

define gui.dialogue_width = 文 字 最 遠 可 以 到 達 的 位 置 ( 我 的 話 是 950 (( 我 使 用 了 1280 x 720 的 畫 面)

要 改 變 名 字 的 顏 色 ，可 以 打 開 script.rpy 然 後 在 角 色 的 名 字 後 面 加 上 color="#顏 色 代 碼"

像 是 這 樣 - define e = Character("Eileen", color="#000000")

這 樣 的 話 Eileen 這 個 名 字 就 會 變 成 黑 色 的

要 改 變 文 字 的 顏 色 - 也 是 要 更 改 script.rpy 裡 的 代 碼 

在 style say_dialogue: 下 面 加 上 color "顏 色 代 碼" 就 可 以 了

在 這 裡:

改變文字顏色

都 改 完 後 看 起 來 就 會 像 這 樣:

改變文字顏色 - 範例

現 在 只 要 在 改 一 個 小 地 方 就 好 - 就 是 字 型 (( 總 覺 得 這 個 字 型 不 太 適 合 這 個 GUI 

字 型 要 在 gui.rpy 裡 面 更 改 - 原 始 的 代 碼 應 該 要 長 這 樣 :

## The font used for in-game text.

define gui.text_font = "DejaVuSans.ttf"

## The font used for character names.

define gui.name_text_font = "DejaVuSans.ttf"

## The font used for out-of-game text.

define gui.interface_text_font = "DejaVuSans.ttf"

把 = 後 的 文 字 改 掉 就 可 以 了 但 是 在 改 之 前 要 先 把 要 用 到 的 字 型 放 到 renpy Project 文 件 夾 裡

改 完 後 對 話 框 框 的 部 分 就 結 束 拉 - 對 話 框 框 預 覽

Step 6 - 選像 (Choice Button)

基 本 上 只 需 要 準 備 好 Idle 和 hover 的 圖 片 然 後 用 做 好 的 圖 片 取 代 原 本 的 Idle 和 hover 的 圖 片 就 行

- 這 2 個 ( 都在gui / button裡面 )

1. choice_idle_background

2. choice_hover_background

這 是 我 的 button 的 idle 和 hover 圖

自製選相框

替 代 原 本 的 圖 片 後 ，看 起 來 會 像 這 樣 :

選像框 - 範例

也 可 以 把 選 項 改 成 圓 形 的 像 這 樣

圓形選像框

改 成 圓 形 的 話 就 要 改 變 一 些 代 碼

修改代碼

根 據 圖 片 的 大 小 和 希 望 字 體 的 顏 色 都 可 以 在 上 面 這 串 代 碼 上 更 改 ( 在 gui.rpy 裡 )

(( 因 為 基 本 上 都 是 重 複 的 東 西 所 以 我 就 放 個 圖 圖 在 這 裡 ，有 不 懂 的 地 方 可 以 看 上 面 的 教 學 或 留 言

要 改 變 圖 片 出 現 的 位 置 則 要 換 到 screen.rpy

在 screen choice ( items ) 下 面 可 以 找 到 style choice_vbox is vbox 如 果 要 讓 圓 形 橫 著 並 排( 左 右 ) 而 不 是 直 的 並 排 ( 上 下 ) 的 話 可 以 把 vbox 改 成 hbox ，如 果 對 上 下 並 排 很 滿 意 的 話 就 不 需 要 更 改 這 裡 的 代 碼

- style choice_vbox is hbox - 上 下 並 排

- style choice_vbox is hbox - 左 右 並 排

下 面 可 以 找 到 這 一 串 代 碼

style choice_vbox:

    xalign 0.5 ( 讓 圖 圖 出 現 在 中 間 - 可 以 配 合 圖 片 做 更 改 )

    ypos 450 ( 也 是 讓 圖 圖 出 現 在 中 間 - 可 以 配 合 圖 片 做 更 改 )

  spacing gui.choice_spacing ( 可 以 更 改 圖 片 選 項 之 間 的 間 隔 )

- gui.choice_spacing 是在 gui.rpy 裡 窩 - 這 段 define gui.choice_spacing = 選 項 之 間 的 間 隔

然 後 我 的 圓 圓 選 項 看 起 來 是 這 樣 的 :

自定義選像框

Step 7 - Quick_menu

快速選單

快速選單 - 按鈕

----------------- 分 隔 線  -----------------

在 離 開 之 前 如 果 可 以 的 話 幫 我 拍 個 手 吧 ~!