大家好,我是貓狗喵
有別以往直接的作品發表,這次要帶來的是一系列的製作紀錄這樣隨時棄坑都不用怕心血白費了
主題就如標題所說的是楓之谷,而且是 BB 大改前的楓之谷(一切都是情懷啊)
這個系列之前在動畫名條教學的文章就有提到過了,到了現在也已經有不少的製作進度。本來是想做一點東西就發一下紀錄的,不過發文什麼的很花時間,所以還是決定先把進度趕到一個段落到現在才發文了
如果對這系列有興趣的可以到我的 YT 頻道,會有比較即時的內容更新喔
喔對忘了一件很重要的事,由於我的專長是在指令系統,但是要還原楓之谷還需要很多場景跟怪物(或NPC)模型,因此如果有相關專長而且對這計畫有興趣的人,歡迎附上相關作品連結寄站內信來詢問喔
那麼廢話不多說,開始這次的主題吧!
目錄 (待更新的主題可能異動)
第一步:熟悉的數字最對味 ------------------------------------------(本篇)第二步:血條會動才生動 ---------------------------------------------(二樓連結)第三步:做出流暢的攻擊吧 (上) ------------------------------------(三樓連結)第四步:做出流暢的攻擊吧 (下) ------------------------------------(四樓連結)第五步:讓子彈飛一會 ------------------------------------------------(五樓連結)第六步:殭屍菇菇動起來 ---------------------------------------------(六樓連結)第七步:忽聞技能聲,BUFF有多少? ----------------------------(七樓連結)天龍八部(?):然後他就死掉了 --------------------------------------(八樓連結)第九步:在原版麥塊尋求UI是否搞錯了什麼 ---------------------(九樓連結)番外:今晚,我想來點 ... 版本升級加優化 -----------------------(十樓連結)第十步:黏在玩家頭上的血條 ---------------------------------------(十一樓連結)第十一步:戳箱子與楓幣丟丟樂 ------------------------------------(十二樓連結)第十二步:打開 Shader 的大門 - 怪物淡入 ----------------------(十三樓連結)番外二:移動速度大解密 ---------------------------------------------(十四樓連結)第十三步:拒絕霸凌,從怪物 AI 做起 ----------------------------(十五樓連結)第十四步:進階 shader - 楓谷式的受傷效果 --------------------(十六樓連結)
第十五步:進階 shader - 自訂血條顯示高度 --------------------(十七樓連結)
第十六步:objmc,參戰! -------------------------------------------(十八樓連結)
第十七步:你有多猛?找出打我的怪物等級與命中率 ---------(十九樓連結)
第十八步:玩轉 damage 新世界 -----------------------------------(二十樓連結)
第十九步:來點互動吧 - interaction 的相關應用 ----------------(二十一樓連結)
第二十步:讓藥水雲退休吧!1.19.4 的效能優化 ---------------(二十二樓連結)
第二十一步:做出椅子與特效綁定 - ride 的妙用 ----------------(二十三樓連結)
番外三:BUFF 顯示超進化 -------------------------------------------(二十四樓連結)
第二十二步:為模型道具建立獨立的 ICON ----------------------(二十五樓連結)
第一步:熟悉的數字最對味
每款戰鬥遊戲幾乎都有自己的一套傷害數字顯示系統,而講到楓之谷大家腦中第一個浮現的肯定就是那個橘黃色的傷害數字了,那麼第一步就來還原那個數字顯示系統吧!
在 Minecraft 中顯示傷害數字的方式有幾種,而當前版本最簡單效果又好的就是用實體名條搭配 json 設定記分板數字了,不知道我在說什麼的可以去參考這篇:【密技】告示牌即時解譯JSON的應用
而在 1.16 新增自訂字體以後,要做出花俏的傷害數字更方便了。只要設定各個數字在自訂字體中的圖片,就可以單純的用一個顯示記分板分數的 json 來顯示特殊字型的傷害數字
然而問題出現了,如果單純把楓谷各個數字的圖片直接搬進來用,會發現成品長得像下面這個樣子
這時候搬出 Youtube 時光機來看看正版的數字長怎樣
(圖片擷取自 ayumilove8 的影片)
從這張圖可以看出兩個很明顯的特徵
- 每位數字之間是有重疊的
- 數字會有規律一上一下的偏移
當年大部分小遊戲都沒有特別處理這些問題,即使有也只有增加數字重疊效果而已,印象中不曾看過哪款小遊戲有把數字高低差做出來的
好了以上都是題外話,現在讓我們來把數字變得更逼真吧!
首先來讓數字有重疊效果,為了達成這個效果,是時候把超級方便的倒退字符搬出來用了 (一樣有人對這個功能有興趣的話留言跟我說,我再考慮要不要開一篇教學)
不過這時候遇到一個小問題,那就是顯示計分板的 json 是一個不可分割的字串,我們沒辦法在每一位數之間安插倒退字符。這裡我採用的作法是重複把記分板分數除 10 取餘數,藉此取得每一位數的數字,再把數字跟倒退字符照順序排好存在隨便一個虛擬 nbt list 中,之後再利用 nbt 顯示的 json 來顯示這串東西即可。比較可惜的是這個做法每一位數都要自己在最後顯示 nbt 的 json 中指定,也就是說最大能顯示的位數是固定的。不過舊楓谷頂傷也不過 99999,考慮進去光速神弩的頂傷突破也不會超過六位數,因此設定好六位數的顯示就可以包含所有舊楓谷的傷害數字了
下一步就是把數字的高低差做出來了,數字的高低非常規律,最左邊是高的,往右依序就是一低一高一直排下去,在上一步的基礎下要達成這個效果也很簡單,只要特定位數的字體套用另外一套有高低偏移的字體就好了
到這裡看起來已經有模有樣了呢,不過眼尖的人應該已經注意到還是有一點違和感,而違和感的來源就是開頭那個數字,看起來好像有點萎縮?
其實當初收集數字圖片的素材時就有注意到,不知道為什麼同樣的數字都有兩個版本,而且另一個版本除了大了一點看不太出來有什麼差異。做到這邊我才理解那個比較大的字體的用途,果然把第一位數字的字體換成比較大的版本感覺就對了
至於實體名條背景那條灰灰的海帶用倒退字符就能輕鬆解決,這裡就不再多做贅述
處理完傷害數字後,回血的藍色數字與玩家受傷的紫色數字也用相同邏輯就能解決
比較特別的爆擊數字也只要在前面加上爆擊符號,並且增加數字重疊的寬度也能完美還原
MISS 則是另外顯示 MISS 圖片的字體就行
最後給數字實體加上 NoGravity 與往上飄的 Motion 就大功告成了,要注意的是最省資源的藥水雲實體是不會被 Motion 影響的,這邊我是用道具實體來取代,還能設定讓他自己過一段時間就消失
文章的結尾就來看看這套數字顯示系統的效果吧
我是貓狗喵,我們下篇主題見