Ren'Py 遊戲專案「密室逃脫」：二部曲－程式實作（含程式範例與線上試玩）
top of page
搜尋
  • 作家相片任性分析師 GT
    • 2023年5月5日
    • 讀畢需時 5 分鐘

Ren'Py 遊戲專案「密室逃脫」：二部曲－程式實作（含程式範例與線上試玩）｜教學

已更新：4月20日


renpy

這篇文章主要會分享 Ren'Py 遊戲開發實作上的幾個主要功能與程式碼，內容涵蓋：


另外，還沒看過首部曲的，可以右轉先了解一下專案背景 👉 遊戲專案背景

 

前言


往下看程式碼之前，建議可以先到遊戲網頁試玩後，再往下閱讀以利理解唷！


👉 直接到遊戲網頁試玩


試玩注意！礙於 Ren'Py 網頁版支援問題，若遇遊戲開啟失敗，請依照以下步驟嘗試：


  • PC 使用者

    • 以 Chrome 瀏覽器遊玩：需開啟開發人員工具（F12 或 Cmd+Alt+I）並重整頁面

    • Mac 使用者建議直接使用 Safari 瀏覽器試玩

  • 手機使用者（iOS / android）則無此限制


遊戲完整版載點：


補充：此遊戲非商用，禁止作為營利使用。來源與授權均有非商用之使用與編輯權限。



 

介紹開始前，因為這次內容會需要一些基礎 Ren'Py 能力。對 Ren'Py 有興趣但仍對於基礎 Ren'Py 不熟悉的朋友，可以參考之前寫過的入門文章。


如首部曲提到，這次專案是以：讓玩家和背景物件互動，作為遊戲體驗的主軸。


因此，以下介紹內容會重點放在程式的互動設計上。


程式範例：觸發劇情


觸發劇情在這次的專案中，指的是「玩家蒐集到特定線索後，會開放新的線索或是空間」。首部曲有針對觸發設計做簡單的示例，這裡就不再贅述。


因此，開發 Ren'Py 遊戲程式時，會需要這兩個步驟：

  1. 記錄線索是否被觸發（或是觸發幾次）

  2. 哪個線索觸發後，會開啟怎麼樣的劇情


首先，在程式碼中，必須有個地方去定義線索是不是被觸發。例如以下：



這邊除了以 `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 裡面進行設定。


由於我自己的專案中，設計的是游標移動到圖片時要有個「發亮」的效果。



所以圖片必須準備兩種型態：

  1. 游標「沒有」移動到圖片上方，原本的樣子（idle）

  2. 游標移動到圖片上方，「發亮」的樣子（hover）


準備好後，程式碼會自動在不同型態（idle, hover）下呈現對應圖檔。


同時，也必須指定圖片出現的位置（xpos, ypos），以及點擊後預期觸發的內容（action）。


範例：




如第 7 行範例，兩種型態（hover, idle）圖片建議在圖檔命名時就可以先做區分，並直接使用 auto 功能指定 hover 以及 idle 狀態下要取用的圖片路徑。這邊的圖片檔名分別是：


  1. room_1_scene_1_table_1_hover.png

  2. 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 的延伸。


renpy game demo
可切換場景的箭頭按鈕（於畫面下方）

但需要留意的地方在於，上面範例中，點擊相同物品都會被引導至同個劇情標籤（Label）。


然而，這裡的場景切換，點擊「左邊箭頭」後的行為 (action）則是會帶玩家到「目前畫面左邊」的場景，提供的是一個「相對場景」。


雖然原理上也是「點擊後觸發到同一個劇情標籤」，但在此前必須告訴程式碼，要移動到哪個場景。這邊則需要在 action 中一併使用 `ToggleVariable` 執行。


範例：




在 `ToggleVariable` 中可見若是點擊不同按鈕（往左或右），則會依據按鈕觸發 `start_scene` 變數的增減，藉此來控制呈現的場景。



🔗 完整程式碼請參考 Github


 

程式範例：可向下捲動的文字窗格


這裡為了要使用電腦呈現一部分劇情內容，因此必須在符合圖片邊界內呈現文字區塊。同時，考慮到文字內容較多，又不想分頁處理的話，可提供 Scroll Bar 供玩家自行下滑內容。


renpy text
紅框中的文字內容都是 Ren'Py 文字區塊

文字區塊除了純文字內容，也可以做文字按鈕（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 教學，也分享過整個遊戲專案的構思，對於非遊戲領域的新手而言非常有幫助！


 

最後，也謝謝看到這邊的朋友。如果上述內容有任何想交流、或是想協助報錯的，都很歡迎透過下方聯繫表單通知我唷！


bottom of page