切換
舊版
前往
大廳
主題

【遊戲製作】在D3D11環境匯入Live2D框架到自己引擎

SamChu | 2020-09-30 10:00:51 | 巴幣 8 | 人氣 423

前言 :
首先這篇文章較適合已經擁有使用d3d11的C++引擎,至少要能夠讀取貼圖、能夠寫入頂點位置到GPU並用讀取index方式取得位置,這篇文章算是紀錄我自己在匯入live2d到自己引擎所遇到的一些問題,所以並不會詳述每個步驟,因為每個人的引擎架構不太一樣。

開發環境 :
Visual Studio 2019
D3D11


首先要先取得live2d的SDK - Cubism SDK for Native
裡面有live2d的framework,以及各個環境下的demo,這邊就不贅述怎麼build出demo,網路上就有很多參考。

當第一次啟動demo應該會長類似這樣

確定官方demo可以build之後就可以開始搬框架了
首先先把demo目錄下的 CubismSdkForNative-4-r.1\Framework\src
以及 CubismSdkForNative-4-r.1\Core
裡面全部檔案複製到自己的引擎

之後到打開自己的引擎把剛剛的檔案全部引入到project裡面

之後還需要匯入lib才能正常載入live2d的框架
所以對Project右鍵選properties,選擇Linker -> Input找到Additional Dependencies
把CubismSdkForNative-4-r.1\Core\lib\windows\x86_64\142
裡面的lib引入到專案,不加入的話會有link error
!注意,最後一個資料夾"142"是要照你Visual Studio的版本選擇
以下為對應版本的lib位置
| 120 | Visual Studio 2013 |
| 140 | Visual Studio 2015 |
| 141 | Visual Studio 2017 |
| 142 | Visual Studio 2019 |
這時候先build起來試試看,沒意外的話會有一些include error,去到每個程式上把全部的include位置指到正確的位置,之後就可以再build一次試試看。
到第一次成功build起來已經花了我2天的時間...一直有Link Error到快崩潰,網路上關於live2d的C++資訊又很少,只能自己慢慢試。

在我自己的引擎除了框架以外我還使用了官方demo裡面的LAppModel、LAppPal、LAllocator這三個class,LAppModel掌管lve2d模型的讀取以及渲染,LAppPal就只是一些輔助function如果自己的引擎足夠完整這個其實也可以不要用他的,LAllocator是一個分配器,其他的東西就看自己的需求決定拿不拿,因為我的引擎已經有自己的讀取貼圖以及渲染等,所以大部分都不需要。

當基本的class都匯入之後,要先初始化Cubism,去到官方demo的LAppDelegate裡面找到InitializeCubism的function並複製到自己的Renderer下面
m_device就放入自己renderer的ID3D11Device就可以了

build成功之後,先試著在自己的引擎讀取一下模型 (這個模型是我網路上找的)

下個中斷點看一下model有沒有成功讀取進去

當成功之後,開始看一下demo整個架構
大概架構就是LAppLive2DManager去讀取所有模型資訊
在LAppLive2DManager::ChangeScene裡面有讀取模型的參考
然後在LAppView裡面去渲染模型以及其他一些貼圖,按鈕之類的
先試著在自己的引擎跑一次model的draw
這個在LAppLive2DManager::OnUpdate()裡面

不需要全部都照著他的寫
基本上就是先呼叫StartFrame然後model呼叫update之後呼叫draw
最後再EndFrame這幾行就好了
這邊的projectioni就拿自己引擎的projection矩陣就好了
矩陣的架構都大同小異,直接把4x4的float給到他的CubismMatrix44就可以轉成他的矩陣了

這時候先跑跑看,畫面上可能會有奇怪的顏色或是根本沒東西
這邊我透過RenderDoc來觀看程式的渲染狀況
可以注意到已經有正確的把頂點位置都畫出來了


官方的主要渲染函數都寫在CubismRenderer_D3D11裡面
因為我的引擎本身就有Renderer了,所以不需要用他的Renderer
接下來的基本思路就是
1. 刪掉所有CubismRenderer_D3D11裡面初始化Renderer的function
2. 在CubismRenderer_D3D11裡面找到寫入頂點位置、index以及UV
3. 把CubismRenderer_D3D11原本渲染的函式全部替換成自己引擎的渲染函式
4. 上面提到的StartFrame到EndFrame全部換成自己引擎的渲染呼叫方式

主要的渲染函式都在CubismRenderer_D3D11::DrawMeshDX11底下
這是我自己引擎整理之後的呼叫方式

首先先說頂點位置等資訊
我的UpdateMesh函式參考
m_mesh是我的引擎裡面寫入頂點跟index到GPU的class

回到DrawMeshDX11,再來m_textures裡面是在讀取model的時候就存好的貼圖
在LAppModel::SetupTextures()裡面就存好貼圖資訊了

之後Shader在我引擎有預設的Shader所以這邊我直接用我預設的Shader沒有做其他的tint
我這邊在引擎不做任何模型位移以及縮放的計算,我全部都寫在shader裡面並給上一個矩陣讓shader自己去算位移跟縮放,這樣會比較不吃資源
之後都綁好之後就能渲染了

這邊是畫在之前學校作業寫毀滅戰士的控制台的背景XD
到這一步基本上整個匯入live2d框架都算是完成了
接下來就可以開始試試其他的功能像是模型盯著滑鼠位置

控制模型轉頭的參數在LAppModel底下的Update
透過給滑鼠座標的相對位置進_dragX以及_dragY就能讓模型看向滑鼠了

官方demo預設視窗中心是滑鼠相對位置的原點(0, 0)右上角是(1, 1) 左下角是(-1, -1)
而且自己的引擎平常都是用左下角當作滑鼠相對位置的原點右上角是(1, 1)
所以需要做一些轉換以及因為模型有位移,所以位移之後的相對位置也要考慮進去
把模型的正中心的當作新的dragX跟Y的原點去計算
像是我的模型X位移了35個單位,Y沒有位移
然後依照滑鼠的相對座標與新的坐標系去轉換


這邊放上我自己的轉換方式當參考,寫得有點亂,也還沒有花時間去簡化QQ
只要拿張紙畫個圖就能有大概的轉換方向了


之後live2d還有可以換表情、動作等等,我都還沒有試
因為這些就花了我好幾天的時間研究,之後還有作業要寫...
等之後有空再來優化整個架構

創作回應

樂小呈
2020-09-30 10:14:05
SamChu
過獎了,一開始不停地跑出Link錯誤都快崩潰了QQ,還好後面比較順利
2020-09-30 10:46:14

更多創作