iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
3
Modern Web

用 Three.js 來當個創世神系列 第 26

用 Three.js 來當個創世神 (25):專案實作#14 - 遊戲內容設計

  • 分享至 

  • xImage
  •  

在前面專案規劃內容中,已經在昨天完成了人物模型及物理射擊兩大部分,終於要來到最後的整合階段了,但其中的遊戲內容當初並沒有深入設計,所以今天花了一整天在做企劃與實驗開發,本篇就先來聊聊遊戲玩法的發想吧。

25_front

Photo by Pietro De Grandi on Unsplash


這是本系列第 25 篇,如果還沒看過第 24 篇可以點以下連結前往:

用 Three.js 來當個創世神 (24):專案實作#13 - 子彈射擊效果


版本一:豪華旗艦版

25_gameflow

第一版畫的遊戲流程及內容發想就是典型的把夢做大,可以做各種遊戲模式與難易度的選擇,做是做得到,但可能一個人做出來是幾個月後了。

其實當初一開始筆者想像中的玩法是「百殺模式」,就是場景中會隨機生成一堆苦力怕,然後玩家要盡可能地在時間內狩獵苦力怕賺取分數,當苦力怕在一定距離內沒有及時被消滅時就會引爆造成玩家損血,最後統計玩家分數做排行榜。

但後來考慮到目前程式碼的寫法,最快能產出一套遊戲模式的做法是推王模式,就是前幾天在實作時,意外發現推倒巨人苦力怕好像也蠻好玩的,而且只要管理一隻最大隻的苦力怕就好,非常簡單,所以簡化後選擇其中的推王模式簡易版來做。

 

版本二:推王模式

基本遊戲內容

  • 苦力怕血量:2000 hp
  • 苦力怕攻擊模式
    • 衝刺:套用追蹤鏡頭動畫並調整速度
    • 自爆:玩家距離苦力怕距離 10 會在 5 秒後引爆(套用爆炸特效)
  • 玩家血量與扣血機制
    • 玩家血量:10 命
    • 扣血機制:受到爆炸波及或碰到苦力怕會扣 1 命
  • 玩家武器傷害:100 hp / 發
  • 畫面上顯示目前使用子彈數量
  • 畫面上顯示目前經過時間
  • 結束條件
    • 苦力怕血量歸零:苦力怕倒地動畫後,跳至結束畫面
    • 玩家血量歸零:Game Over 畫面後,跳至結束畫面
  • 遊戲結束畫面
    • 分數統計(花費時間、子彈使用量)

進階遊戲內容

  • 打到苦力怕頭部傷害較高(武器傷害 * 2 之類)
  • 苦力怕回血機制
  • 苦力怕剩十分之一血量時會加速衝刺
  • 苦力怕遠程攻擊
  • 子彈數量限制
  • 撿拾小道具(獲得更多加分、獲得子彈、獲得加一命、獲得更強大武器)

雖然版本二看起來已經可以開始進行整合了,但在實作時馬上就遇到了一個問題,就是目前在 Cannon.js 中的碰撞偵測都是交給函式庫預設做的,一時找不太到「子彈碰撞到苦力怕」的屬性來做扣血的邏輯,而 Cannon.js 的文件、教學、討論又是少之又少(好像選錯物理引擎了),只好另外想一個更簡化的版本。

 

版本三:擊倒挑戰模式

筆者想到代替「子彈碰撞到苦力怕的血量計算」的方案就是,偵測「苦力怕頭部是否著地」,也就是在時間限制內盡可能地利用子彈擊倒苦力怕,擊倒後苦力怕會爆炸,並隨機重生在場景中任一地方,擊倒越多隻分數越高,就類似一些射擊小遊戲的玩法。

25_gameflow

重新畫了最後定案的遊戲流程圖,雖然遊戲內容看起來可能有點小無聊,但至少把整個遊戲流程串起來應是短期內可以完成的目標。

 

專案整合需求

  • 遊戲開始畫面:操作說明及進入遊戲
  • 遊戲內容
    • 苦力怕套用追蹤鏡頭動畫走動
    • 苦力怕被擊倒後套用爆炸特效
    • 場景優化:雪景、草地、光源
    • 背景音樂及射擊、爆炸音效設定
    • 畫面上顯示剩餘時間
    • 畫面上顯示分數
    • 結束條件:時間結束
  • 遊戲結束畫面:根據擊倒苦力怕統計分數

 

今日小結

今天決定了最後的遊戲內容及流程,並確認整合上還需要實作哪些功能來完成整個遊戲的進行。剩下幾天的時間會盡可能將整合需求完成,我們明天見!


上一篇
用 Three.js 來當個創世神 (24):專案實作#13 - 子彈射擊效果
下一篇
用 Three.js 來當個創世神 (26):專案實作#15 - 計分機制
系列文
用 Three.js 來當個創世神31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言