這篇文章主要會分享 Ren'Py 遊戲開發實作上的幾個主要功能與程式碼,內容涵蓋:
另外,還沒看過首部曲的,可以右轉先了解一下專案背景 👉 遊戲專案背景
前言
往下看程式碼之前,建議可以先到遊戲網頁試玩後,再往下閱讀以利理解唷!
👉 直接到遊戲網頁試玩
試玩注意!礙於 Ren'Py 網頁版支援問題,若遇遊戲開啟失敗,請依照以下步驟嘗試:
PC 使用者
以 Chrome 瀏覽器遊玩:需開啟開發人員工具(F12 或 Cmd+Alt+I)並重整頁面
Mac 使用者建議直接使用 Safari 瀏覽器試玩
手機使用者(iOS / android)則無此限制
遊戲完整版載點:
補充:此遊戲非商用,禁止作為營利使用。來源與授權均有非商用之使用與編輯權限。
遊戲素材來源
介紹開始前,因為這次內容會需要一些基礎 Ren'Py 能力。對 Ren'Py 有興趣但仍對於基礎 Ren'Py 不熟悉的朋友,可以參考之前寫過的入門文章。
如首部曲提到,這次專案是以:讓玩家和背景物件互動,作為遊戲體驗的主軸。
因此,以下介紹內容會重點放在程式的互動設計上。
程式範例:觸發劇情
觸發劇情在這次的專案中,指的是「玩家蒐集到特定線索後,會開放新的線索或是空間」。首部曲有針對觸發設計做簡單的示例,這裡就不再贅述。
因此,開發 Ren'Py 遊戲程式時,會需要這兩個步驟:
記錄線索是否被觸發(或是觸發幾次)
哪個線索觸發後,會開啟怎麼樣的劇情
首先,在程式碼中,必須有個地方去定義線索是不是被觸發。例如以下:
這邊除了以 `define` 定義玩家起始的空間 `start_room` 與場景 `start_scene`,下半部則定義了遊戲中所有相關線索觸及次數,並將初始值都設定為 0。
第二步,則是針對對應行為,更新線索觸及次數,以及在觸及次數達到多少時,呈現新的內容。例如以下:
這裡指的是,若玩家進入到 girl_paint_highlight 此 Label 中,都會觸發 girl_paint_clicked_cnt 增加一次(23 行)。
而當觸發 girl_paint_clicked_cnt 一次以上後,再次進入到 girl_paint_highlight 此 Label 中,則會觸發新的劇情。
🔗 完整程式碼請參考 Github
程式範例:圖片物件互動(ImageButton)
一、入門:背景物件互動
要實現 ImageButton,則必須在 screen 裡面進行設定。
由於我自己的專案中,設計的是游標移動到圖片時要有個「發亮」的效果。
所以圖片必須準備兩種型態:
游標「沒有」移動到圖片上方,原本的樣子(idle)
游標移動到圖片上方,「發亮」的樣子(hover)
準備好後,程式碼會自動在不同型態(idle, hover)下呈現對應圖檔。
同時,也必須指定圖片出現的位置(xpos, ypos),以及點擊後預期觸發的內容(action)。
範例:
如第 7 行範例,兩種型態(hover, idle)圖片建議在圖檔命名時就可以先做區分,並直接使用 auto 功能指定 hover 以及 idle 狀態下要取用的圖片路徑。這邊的圖片檔名分別是:
room_1_scene_1_table_1_hover.png
room_1_scene_1_table_1_idle.png
因此,程式碼會自動在 hover 狀態下使用 `room_1_scene_1_table_1_hover.png` 圖片,idle 狀態下則呈現 `room_1_scene_1_table_1_idle.png` 圖片。
✏️ 補充知識
這邊也提供當初做 ImageButton 效果時,參考的 YouTube 教學:
🔗 完整程式碼請參考 Github
二、進階:畫面切換
在遊戲中,每個場景下方都有個左右箭頭,點擊後可進行場景切換。這個也是 ImageButton 的延伸。
但需要留意的地方在於,上面範例中,點擊相同物品都會被引導至同個劇情標籤(Label)。
然而,這裡的場景切換,點擊「左邊箭頭」後的行為 (action)則是會帶玩家到「目前畫面左邊」的場景,提供的是一個「相對場景」。
雖然原理上也是「點擊後觸發到同一個劇情標籤」,但在此前必須告訴程式碼,要移動到哪個場景。這邊則需要在 action 中一併使用 `ToggleVariable` 執行。
範例:
在 `ToggleVariable` 中可見若是點擊不同按鈕(往左或右),則會依據按鈕觸發 `start_scene` 變數的增減,藉此來控制呈現的場景。
✏️ 補充知識
🔗 完整程式碼請參考 Github
程式範例:可向下捲動的文字窗格
這裡為了要使用電腦呈現一部分劇情內容,因此必須在符合圖片邊界內呈現文字區塊。同時,考慮到文字內容較多,又不想分頁處理的話,可提供 Scroll Bar 供玩家自行下滑內容。
文字區塊除了純文字內容,也可以做文字按鈕(textbutton),如右上的「關閉」按鈕。
程式範例:
✏️ 補充知識
這邊也補充更多的 Ren'Py screen 功能的教學影片,當初參考了很多這個頻道的內容:
檔案打包注意:各種素材問題 & 網頁版問題
一、音樂
不同作業系統開發時可能會遇到格式相關的限制。
我自己是使用 Mac 電腦開發,OGG 檔案相較穩定,其他格式音樂很常發生沒聲音的狀況。
直接附上 Ren'Py 音樂檔案格式的相關討論供大家參考。
二、檔案壓縮
遊戲的音樂與圖片素材大小會影響遊戲輸出後,玩家下載所需時間。
建議輸出任何格式前都可以先檢查一下,看看能否有壓縮的空間。
三、網頁版問題
Ren'Py 現在最令人棘手的問題無疑就是網頁版遊戲的打包問題。
目前爬了文,大概狀況是 Chrome 更新後,Ren'Py 輸出的 Web 遊戲若在 Chrome 執行,就會出現以下問題:
Error: Uncaught RangeError: Maximum call stack size exceeded
然後現在 Ren'Py 還是沒修復這個問題,只能坐等修復的那天 ...
因此目前要提供最好的遊戲體驗,還是只能下載的電腦上來玩。這也是為什麼我另外做了試玩版放到 Heroku 上面,而不是直接放上完整版。
(2024-04-20 更新:目前此問題已經修復囉!)
Ren'Py 實作資源分享
我自己目前的學習方式,除了剛入門時,會非常常去官方網站看說明,但後期必須說!
最好的教材就是直接去看別人寫好的遊戲
因此,這邊推薦可以從這裡去找其他人寫好的 Ren'Py 遊戲:itch.io
另外,入門的話私心推薦這個 YouTube 頻道的介紹:Visual Novel Design。除了 Ren'Py 教學,也分享過整個遊戲專案的構思,對於非遊戲領域的新手而言非常有幫助!
最後,也謝謝看到這邊的朋友。如果上述內容有任何想交流、或是想協助報錯的,都很歡迎透過下方聯繫表單通知我唷!
感謝你 剛接觸Ren’py ,你的系統文章提供了很清晰的方向和細心的解釋,剛好都是我現階段想了解的細節和功能