iT邦幫忙

2023 iThome 鐵人賽

DAY 28
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 28

[Day 28] 射飛鏢實作篇-設置排行榜、優化遊戲、製作/發布成品

  • 分享至 

  • xImage
  •  

繼昨天我們完成了計時、計分系統以後,整個遊戲大致上算是完成了,但我們最後還必須建立一個排行榜,將玩家得到的分數上傳上去才行。

設置分數組、上傳分數

詳細的過程我們在 [Day 13] 為自己的遊戲添加排行榜吧! 已經教過了,就讓我們直接開始吧!

首先先到專案中的資料庫,由於我們這次新增專案時沒有順道加載 Server,所以來到這裡時會呈現如上圖的樣子,這時很簡單,只要點擊下方藍色按鈕的 安裝 Server 函式庫,專案就會自動安裝 Server 模組。

接著依照我們先前介紹的那樣,新增一個分數組,主要設定內容如下:

分數代碼:score
分數標題:射飛鏢分數
分數排名長度:20

然後回到事件表中,在新增動作前,先打開事件表上方的 伺服器設定,然後儲存一次該設定,讓預設的伺服器相關的設定可以正確的加載進來。

接著找到事件 時間到結束遊戲,新增動作 上傳玩家分數,主要設定內容如下:

上傳分數的玩家ID:{me.id}
分數代碼:score
玩家的分數:{score}

將此動作拉到觸發事件 顯示倒數文字 的動作下方,讓時間到的動畫結束後就上傳玩家分數。

這樣子,在遊戲結束之後,就能夠幫玩家上傳自己的分數啦~

優化飛鏢投擲機制

在我測試了這麼無數多次以後,我發現了一些問題,首先是按住飛鏢的判定太嚴格了,一定要鼠標從飛鏢處按下才行,我大概每 10 次就會有 1 次沒有按到,所以我們來改變一下原本的判定方式。

之前我們是利用檢查 滑鼠懸浮於 飛鏢之上,這一次我們改用距離來做判斷,因此將該檢查刪除或停用,並新增 比較數字,還記得距離怎麼算嗎?這一次我們是要算鼠標到飛鏢之間的距離是否小於等於 150,因此公式如下:

sqrt(pow({mouse.x} - {dart.x}, 2) + pow({mouse.y} - {dart.y}, 2)) <= 150

這樣子的設計我覺得對於玩家來說會比較舒服,除了瞄準標靶投擲以外,就不太需要注意有沒有真的按住飛鏢。

另外還有一個關於飛鏢的問題,那就是投擲的力道似乎過小,去找到讓飛鏢飛出的補間動畫,就可以看到我們之前將倍率設定為 2.5,我自認為我的滑鼠靈敏度滿高的,但還是常常投不到標靶處,所以我把倍率改成了 4,玩起來就舒服多了,當然這是我個人的感受,或許其他人玩起來就不一樣了,所以這個部分可以斟酌一下。

調整計分機制

接著我覺得現在的計分方式有點普通,我只要無腦的朝標靶扔出飛鏢就好,不管會不會中,這麼多飛鏢中總會有射中的飛鏢,就這樣持續 30 秒好像有點無聊,所以我決定稍微改變一下計分的標準。

那就是每次投擲飛鏢時,都會扣 1 分,擊中時增加 2 分,怎麼樣,這樣是不是就不能瘋狂亂投了呢,可以稍微增加一點玩家的專注力在遊戲上,馬上就來調整吧!

第一步當然就是去 擊中標靶 的事件,將原本加 1 分的動作,改變成加 2 分。

第二步就是去 放開飛鏢 的事件,新增一個同樣觸發 更新分數 事件動作,並使 value = {score} - 1,這樣每次放開飛鏢,也就是投擲飛鏢時,就會讓玩家的分數減 1 了。

製作、公開成品

關於公開成品的步驟,我們在 [Day 11] 在 CG 上公開自己的作品[Day 12] 設定專案封面、將成品發布到 Gamelet.online 也提過了完整的流程,所以這次我們也加快腳步吧!

第一步,我們先來準備一個 遊戲封面 用的圖片,我決定直接以遊戲中的標題來當作封面,因此我直接到遊戲中截圖,並裁切成適合的大小後如上圖,將封面圖片上傳到專案之中,就可以將該資源設定成封面圖片了。

第二步,設定好封面之後,我們要來設定 專案名稱,並撰寫 遊戲介紹 的檔案,我的介紹內容如上圖,包含了一些遊戲說明、操作玩法,以及遊戲中的素材來源等,各位只要根據自己的專案內容來撰寫就好了。

第三步,最後再 測試 一下遊戲本身有沒有什麼問題,說不定又會發現什麼之前沒發現的 BUG 等等。

第四步,就是 製作成品 拉,詳細的設定依然是看各位自己的專案內容如何,例如我就是 應用程式/遊戲版次 設定為 1.0.0,其他都保持原樣。

第五步,製作完成品之後,就要來撰寫 更新日誌,我就簡短的寫「首次發布遊戲」,類似這樣。

第六步,公開成品,製作成品並不等於公開成品喔!只是製作了一個版本出來,還要記得去將該版本的成品,設定為 設定為穩定版本 才行。

最後一步,將成品 發佈到 gamelet.online 上面,這個步驟就可以因人而異了,如果遊戲屬於還在測試階段的話,就可以考慮暫時先不要發布,等到正式完成之後再將遊戲發佈到上面也可以。

CG 範例事件表

成品演示影片

Yes

正式的射飛鏢遊戲網址:https://ironman2023_cook_2.gamelet.online

總結

我們今天將最後的排行榜加入到了遊戲之中,並稍微改變了一下遊戲的計分規則,也將遊戲製作成了成品公開出去,如此一來,我們這次的實作之旅就算是到此結束了。

其實原本我計畫的實作項目並不是射飛鏢,而是繼續以光暈戰記為核心,實作一個可以多人參與的兩陣營奪寶遊戲,但後來考慮到我們的系列主題,似乎不應該著重在這上面,由於光暈本身就具備足夠完整的遊戲機制,所以動作與動作之間的關聯性並不是很大,每個動作都可以有直接的作用,但如果是從零開始,連遊戲機制都得自己建構的情況之下,動作、檢查,甚至事件之間的關聯性就很重要了,所以我後來決定以最單純的事件表模組,帶各位從零開始實作一個簡單的成品出來,除了介紹一些新動作、檢查、觸發時,也能夠讓各位了解到它們之間互相關聯的重要性。


上一篇
[Day 27] 射飛鏢實作篇-計時、計分系統
下一篇
[Day 29] 什麼!在網頁上也可以寫視覺小說?
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言