2d橫版自由射擊遊戲中的角色頭和武器跟隨滑鼠移動而旋轉是如何實現的？

這個做法的核心是分clip，並且每個frame下的不同clip組用對應的邏輯去控制，具體的要看專案的美術製作要求的精度，然後來決定切割方法。這裡我就用最簡單（要求最低）的例子來說這個問題了。

首先是分Clip的概念

無論是傳統的序列幀做法還是後來的骨骼動畫做法，都會用到這個技術，就是把角色身上的零件切塊，然後在每一幀（frame）利用旋轉、拉伸、位置（transform）關係來組合到一起，就形成了一幀的動畫：


當然上面的圖只是一個範例，還是那句話——要做多精緻，看專案，比如我們這裡舉例，就只分上半身和下半身即可。

你可以“偷換”一下概念，更容易理解這個問題

之前我們說的是經典做法，是每一幀為單位，把clip拼到一起，原理上骨骼動畫是類似的，只是骨骼動畫還會動uv做一些shader的效果，所以相比序列幀，只能說他比較獨特，當然這不是這裡的重點。

重點是，我們可以把概念反過來理解——每個角色的其實是有若干個部件組成的， 每個部件都有自己的動畫和自己的transform，這樣理解起來就更unity一些，也更好理解一些。


上面是我現場在用unity做一個例子，只是沒有現成動畫，所以上半身就用一個方塊，下半身就用一個三角來了。這裡有幾個細節要注意：

最外層的Character只是一個座標和邏輯載體，所以他除了transform就只有一個character元件來證明（並且管理）他是一個角色，在概念裡，他是一個點——也就是玩家看到的角色的腳下中心座標，當然這個做法是偷懶的，畢竟問題本意是旋轉，所以這裡就不說關於移動的事情，就偷個懶。

Upper和Lower是空GameObject，他們作為父類吃transform parent的關係，而Part0則是實際貼圖，因為這裡的範例很簡單，所以貼圖只有一個，UpperPart0是方塊，LowerPart0是三角。值得注意的是，Upper和Lower的座標：


Upper的座標其實就是上半身轉動的點，也就是問題的關鍵所在。而裡面的貼圖，是基於這個點展開的，根據實際美術製作進行：


另外一說的是weapon，雖然我們的例子中武器沒有複雜的玩法，也不會自己轉動，但是還是最最最基本的考慮了換武器的需求。weapon同樣應該是個空盒子（Prefab的第一層是空的GameObject帶一個Weapon的Component），下面都是weapon貼圖，比如槍身、槍托、彈匣這樣就可以有組槍玩法，當然這也不是這個問題的內容就不多說了。

Character Component

首先是加入Upper和Lower的引用，拿到他們：



這個Character應該負責很多事情，包括管理它的行動、動畫之類的，但是在這個問題下，我們就只關心他的跟槍口旋轉，所以就只要這麼點的東西，然後要做的事情也很簡單——

給一個基準點，這個基準點是用來跟滑鼠對的，因為我們的座標在腳下，滑鼠位置如果跟腳下得出向量和玩家想法基本不符合，所以我們要用upper的座標去和滑鼠位置對，當然你也可以用槍的位置，但是手感要比用腰部（就是upper座標，旋轉用的點）差一些。有了基準點就可以來控制角色上半身旋轉了：


值得注意的是，旋轉不是[0.000f, 360.000f)度的旋轉，因為橫版遊戲角色上半身“看向”滑鼠才是對的，所以會左右轉，所以實際上角色的旋轉是-90到90度的，也就是程式碼裡的bodyDegree。

旋轉不是角色自己定的，而是遊戲給的

跟角色移動一樣，這不歸角色自己管理，而是Scene或者Game層進行管理，所以我們還需要一個Game的指令碼，或者你直接GameManager也可以，但是GameManager為了singleton做了特殊處理（核心玩法必須是唯一的嗎？同一時間執行多個就不行？這是一個有意思的問題，但不在這裡討論）：


僅針對這個問題，所以用更好湊效果的update，而不是自己維護一個輸入快取

可以看到這個問題下要做的事情很簡單，先把角色座標轉螢幕座標，然後滑鼠（螢幕座標）減去角色座標傳遞進去就好了。效果麼……

湊合看吧，反正自己吧程式碼貼進去一樣的。

一些trick

值得注意的是一些有意思的trick：

武器的發射彈道最好跟“腰”重疊

這其實也是個手感問題，因為對於玩家來說，最直觀的是滑鼠指哪兒打哪兒，當然並不是說非要100%精準飛向你那裡，在玩家心目中是有一條“彈道”的，也就是子彈順著旋轉中心向滑鼠飛就對了。

所以，儘可能讓“彈道”和“腰”到滑鼠這條向量重疊，如果只是平行的話會瞄不準，如果從槍口向著滑鼠去，更會出現“歪把子”。

上面程式碼裡的角度可以作為引數用

上面程式碼裡的bodyDegree的寫法並不是絕對的，因為我假設的是q版遊戲，所以可以這麼轉，但如果你畫風偏寫實，多少得有些“IK”對吧？往正上方（其實可以說是一個80-100度的範圍）不是旋轉的，是換一個動畫也是正常的需求，所以它需要的是一個結構，這個結構體包含的是動畫貼圖，角度，得到這個結構體可以是f(bodyDegree)。

簡單地說，就是要靈活運用所有的值，千萬別死腦筋什麼“只有這些角度，我動畫做不了了”，要做動畫前，分析一個你驅動動畫所需要的資料，把這些資料包裝到一個struct，走已有的資料返回即可。

所以

用骨骼動畫、序列幀動畫都可，關鍵是怎麼切clip，以及美術做動畫的時候注意以clip為單位去做動畫（也就是這個範例裡面upper和lower各做一套），其實簡單的理解就是上下半身融合的做法即可。


來源：千猴馬的遊戲設計之道
原文：https://mp.weixin.qq.com/s/lwIoxBh5sMcn2vWKtvjMIw