熱血與青春同在的《街籃2》是如何煉成的？

球類遊戲在手遊市場中屬於小眾品類，七麥資料顯示，App Store遊戲暢銷榜Top100中，僅6款球類手遊，籃球、足球品類各佔3款。造成如此局面的原因，除了有球類手遊的受眾市場本身就小之外，還有一個重要原因——球類遊戲的風格單一，且操作感、競技感總是不盡如人意。

8月19日，成都樂曼多科技有限公司的體育競技類手遊《街籃2》全平臺首發，並於當日就登頂了App Store遊戲免費榜體育類榜首。《街籃2》保留了《街籃》手遊的精髓，獨樹一幟的嘻哈風、超越同類手遊的操作感和實時競技體驗，同時在畫面、動作的流暢度等細節進行了優化。《街籃2》還創造性地推出了球場DIY系統，大到球場場地、裝飾塗鴉，小到籃筐，籃網，籃板等，每個細節都能自己定製，為提高球類遊戲可玩性找到了新方向。



今天，Unity邀請到《街籃2》的創作團隊，讓他們從技術層面與我們分享該作的創作細節。

01、P1 工作室簡介

先給大家介紹下游戲工作室吧。

我們工作室代號是P1，其實沒有太多的梗，因為我們是整個樂曼多公司的第一個遊戲工作室。從17年發《街籃》到20年發《街籃2》，整個工作室在保有了核心開發人員的基礎上，也不斷在擴充和打磨團隊。整個工作室的定位非常清晰，我們將長期深耕競技體育遊戲這個細分品類，憑藉不斷的專案開發經驗的積累和對體育專業方向的熱愛，不斷讓工作室產出更加優質的作品。


02、UI顏色的搭配

街籃2中整個畫面風格給人一種熱血與青春的氣息，可以跟大家談談在遊戲設計中UI顏色的配色是如何與整個遊戲風格的進行搭配的？


《街籃2》是以《街籃》為基礎的昇華，作為《街籃》的續作有幾個非常重要的元素是本遊戲宗旨：街頭、熱血、青春、桀驁不馴、時尚、運動。所以我們無論是在角色設計和UI上都一直秉承這個宗旨，並以此為主線。

考慮到當下遊戲和年輕人審美的升級，所以在現在比較流行的扁平風的基礎上做融合設計，首先考慮的是造型方面的設計，例如一些UI的切割，必須要打破傳統扁平風的中規中矩，所以從切割上考慮如何增強動感（同時強烈的色彩對比起到了分割和引導作用）。


第二，動態背景和適量的UI特效。我們在球員簽約和登入介面大量的運用了動態視訊背景效果做為承託，一方面強調和帶動遊戲運動、開放、桀驁街頭籃球主題，同時畫面的快慢節奏轉換節奏來帶動玩家熱血的情緒（同時配上音樂）；為了讓畫面不至於單調，我們在純粹的背景後面也加入了動態的粒子擾動，讓玩家近看的時候也能看到細節。



03、百變換裝

遊戲的人物換裝已經成為了遊戲不可缺少的一部分，可以跟大家介紹下《街籃2》中是如何在Unity中實現人物的換裝？


因為《街籃2》的角色眾多，每個角色性格身材各異，最主要的還是部件拆分過多，拿到模型需求的時候，讓人頭痛，首先我們要解決的問題是，身體和套裝複用上的問題，我們要怎麼去在單部件上區分皮膚和肉呢？又要怎麼去最大限度的節約資源呢？最早是想採用貼圖控制，但是不得不面臨一個問題，貼圖控制的話，又不得不把身體歸納到部件裡面，UV浪費極大，之前討論的方式方法又回到了原點，況且每個部件多增加一張貼圖的資源量，光想想就讓人頭大。

經過諸多遊戲製作思路的對比，最後模型決定用多套UV，複合材質球。但是又有異於傳統的套用方式。模型決定採用頂點區分的方法去區分身體和部件。

多體形區分，採用多套標模，解決大部分體形的需要。


引入膚色概念解決膚色及其特殊體形和其他體形的模型的共用。


部件拆分的露肉接縫，採用焊死頂點法線的方式解決。


最後在通過公配檔案，解決不同部件的穿插，就可以看到遊戲裡的效果了。

04、華麗的街球動作

變向過人是籃球運動中最華麗的動作之一，《街籃2》中也對這個動作進行了完美的實現，可以跟大家介紹下在遊戲實際的開發中遊戲中人物的動作的製作是如何聯絡現實中人物的動作這一流程？

帶球過人，籃球中最炫酷的技巧之一，這種籃球運動的招牌動作極具美感也非常具有代表性，由此延伸出來的技能操作也極具手感。

製作前期需要了解的東西：

1）總的來說規則適應性不一樣，技能表現方式也不一樣，動作設計及製作上也兼具不同的技巧；



2）需要明確最基本的邏輯規則；


3）再就是需要了解動畫播放的機制；哪些動畫使用過渡銜接？哪些需要作融合處理？


4）在動作表現和策劃需求上是為客戶端表現讓步還是為規則讓步？


5）最終落實到動作風格的認知上。


05、人物創作技巧

可以跟大家簡單分享下《街籃2》中的花樣扣將橋沐百合的模型與貼圖製作流程嗎？

首先，橋木百合這個角色的設計理念就是運動、活潑可愛、熱辣；針對這些關鍵詞我們做了原畫上的設定：


經過多個方案設定後（其實在確定這個方案的時候我們做了好幾個版本的設計），最終確定這套設計，兼顧了以上設計要素，然後進行模型製作。

第二步是中模的製作：


第三步根據我們中模型完成後，就進行下一步的高模雕刻。


然後匯出法線貼圖。

第四步：在PS軟體和其他工具裡進行貼圖繪製和材質設定調整。


第五步，匯入Unity裡面進行材質引數詳細設定（不過這個引數設定我們的TA小哥花費好多精力做了優化生成Unity能直接讀取的引數材質球）。



06、細節，讓整體更亮眼

街籃中角色酷炫的時裝搭配是遊戲一道亮麗的風景線，可以跟大家介紹下維蒂妮的服飾與頭髮的擺動是如何在Unity中實現的呢？


《街籃2》的服飾與髮飾擺動都是基於Asset Store中的動態骨骼外掛DynamicBone來實現的，根據根骨骼帶動尾骨骼的原理從而實現動畫中最基本的跟隨運動，DynamicBone是一個簡單的基於模擬彈簧振子的演算法實現樹狀柔體的物理模擬外掛。雖然基於模擬彈簧振子運動的演算法實現，但是DynamicBone各節點之間的距離實際上不會發生變化， 比起彈簧，父子節點之間的相對運動更接近簡諧運動中的單擺。通過來設定碰撞球體來控制骨骼搖擺的範圍.讓飄帶不易穿插。從而來模擬 相對真實的物理碰撞效果。


07、球場也要夠酷炫

在《街籃2》中有許多優秀的球場，可以跟大家介紹下在黃金海岸場景的搭建的流程嗎？


黃金海岸的球場的設計主題是一個熱鬧、色彩鮮明海濱之邊的一個場景，首先需要突出的色彩鮮明，同時需要依稀能看到大海，給人一個想象發散的空間（海邊熱帶元素肯定是必然需要的）。

第一步：原畫繪製，當然我們也繪製了很多版本（甚至為了透視的準確性，還用到了3D白模搭建來構圖）。



第二步：根據原畫進行3D模型分個的製作，並在3D軟體裡進行場景結構搭建，主要目的是從立體構成基本概念出發，嘗試搭配的高度和體積大小來判斷場景是否好看。


結構調整完畢。

第三步：貼圖繪製和細化。


在這個過程中需要大量的時間去優化貼圖的色彩、大小、以及色彩飽和度等等。

第四步：放入Unity引擎，並燈光烘培。


嘗試各種燈光亮度、範圍的大小來烘托海邊球場的氣氛。（然後設定上阻擋就可以用到遊戲裡面了）。