top of page
作家相片任性分析師 GT

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 教學,也分享過整個遊戲專案的構思,對於非遊戲領域的新手而言非常有幫助!


 

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


2 Comments


Guest
Jun 07

感謝你 剛接觸Ren’py ,你的系統文章提供了很清晰的方向和細心的解釋,剛好都是我現階段想了解的細節和功能

Like
GT 商業分析師的隨筆記
GT 商業分析師的隨筆記
Jul 06
Replying to

謝謝你的留言,很開心有幫助到你 😄

Like
bottom of page