這是一款“特效升級版的爐石”。

《爐石傳說》盛行之后,TCG游戲在手游領域的市場也逐漸被打開。而長久以來,卻遲遲沒有一款成功產品占據日本TCG手游市場。事實上TCG的玩法在日本非常受歡迎,早年便已經推出《游戲王》《戰斗之魂》等成功作品,同一類型的小眾作品、同人作品也不在少數。

雖然《爐石傳說》在2015年進入日本市場,也曾沖到比較高的位置,但由于風格和表現難以滿足當地用戶,現在它的成績也不溫不火,長期徘徊在日本暢銷榜120名前后。

隨后,日本Cygames研發了一款更加風格化的TCG游戲《暗影之詩》,盡管玩法方面的創新不多,但美術品質和特效表現等方面,做了大幅度的強化,甚至被玩家稱為“特效升級版的日本爐石”。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

《暗影之詩》的美術風格相較爐石而言,的確更加的日式,但由于Cygames過去在卡牌美術方面的積累和定調,使得這種風格即便放在日本也屬于獨樹一幟的種類。既帶有日式線條和形體上的柔美,也融入了歐美暗黑風格的硬朗和恢宏,可以理解為它是將傳統暗黑風格,結合日式甚至二次元式的技巧,形成的一種更年輕的表達方式。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

這種處理不僅讓《暗影之詩》成功的超過了之前已經上架的日版爐石,也讓這款產品在日本占據了TCG手游的領先地位?,F在這款產品也借助網易代理、Steam版,開始向全球市場輻射。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

在此前舉辦的Unite 2017東京開發者大會上,Cygames的客戶端主程大道賢人、3DCG美術設計師島村亜空進行了干貨分享,詳細闡述了他們是如何高效制作卡牌,并在保證高品質美術設計的同時,最大化展現TCG對局中卡牌特效的經驗和總結(以下內容編譯自SGI)。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

大道賢人(右)與島村亜空(左)

截至目前,《暗影之詩》已經上架一年整,其中卡牌部分使用的是Cygames之前的作品,《神擊的巴哈姆特》中超過1萬張的卡牌資源,來進行制作的。截至目前,游戲已經獲得900萬次下載,DAU已經超過1000萬。并登陸了App Store、Google Play、DMM.com、Steam這四個游戲平臺。

制作流程:讓策劃設計有臨場感的卡牌

《暗影之詩》的開發團隊主要分為五個部分,策劃、程序、音效、特效美術、TCG策劃。策劃負責架構游戲的整體框架和核心數據;特效美術主要負責制作高階卡牌的特效和演出;TCG策劃則是負責設計所有的卡牌。

制作時,項目組并沒有直接使用Unity來設計卡牌,而是特意在現實的模擬對戰環境下進行設計,這樣做的理由有兩方面。

第一,他們希望《暗影之詩》帶來的游戲體驗能更加接近桌游的感覺;第二,項目組里負責TCG策劃的員工有很多資深桌游玩家,這樣的工作模式更能發揮他們的制作實力。

所以TCG策劃會使用印刷好的卡片來進行游戲,并在這個體驗的過程中,去思考和挖掘新的卡片。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

在制作流程方面,首先,TCG策劃會設計好卡牌,并由美術來完成高階卡面和特效的制作;其次,卡牌設計好后會由策劃繼續完成卡牌的后續制作,并進入音效制作和程序實現的環節。同時,程序還需要實現由美術設計好的高階卡牌特效。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

單個版本的內容制作流程

需要注意的是,TCG策劃和美術設計都是《暗影之詩》制作中非常重要的職位,再加上卡牌設計和制作非常耗時,所以在這兩個環節,上一個版本的內容剛做好,就需要立刻進入下一個版本的制作流程中。

事實上,項目組在實現當前版本的程序功能后,TCG策劃和美術就已經做好另外兩個版本的內容了。比如目前《暗影之詩》已經推出了第四個卡包,但項目組已經在著手第六個卡包的制作了。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

高階卡牌的制作:shader對2D動畫也有奇效

在《暗影之詩》中,高階卡牌雖然與同名通??ㄅ朴兄嗤男Ч繌埜唠A卡牌都有其獨特的原生動作和特效。屬于游戲中的特殊卡牌,通俗來說就是閃卡。截至目前,游戲中已經推出的1000種卡牌都存在閃卡。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

在制作這類卡牌時,存在三個需要解決的難題:

制作成本、繪制時的顧慮、美術品質。

1.制作成本。由于每隔三個月,游戲就會更新200張以上的卡牌,所以需要一個能在短期內完成高階卡牌制作的流程。

2.繪制時的顧慮。當每張卡牌在畫面上做出移動、旋轉等激烈動作的時候,如果使用了粒子特效來制作高階卡牌,那么特效就可能嵌入卡牌的反面,外觀就有可能崩了。必須設法讓特效從在所有位置、從所有角度看上去都能正常顯示。

3.畫面品質。在壓縮成本的同時,還需要給玩家提供從未見過的,品質優良的內容。所以必須構建一套能夠展現高品質畫面的技術手段。

從這幾點要求出發,項目組得到的解決方案是僅利用shader來制作演出特效,于是他們開發了專門制作高階卡牌的、具備特殊功能的shader。這樣做有三點好處:

1.制作流程簡單。不需要3D工具和動畫工具,只用Unity和Painter就可能完成制作,可以控制成本。

2.能實現豐富的演出效果。在質量方面,功能簡單但也五臟俱全,能表現出多彩的效果。通過使用shader還能讓畫面產生扭曲感,做出臨場感更高的效果。

3.繪制順序不會亂。因為特效演出完全在平面中進行,物件在畫面上方移動、旋轉,都不會影響卡面內的繪制順序,不用擔心被打亂。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

項目組使用的專用shader稱為“卡牌shader”,是通過Unity標準的shader語言ShaderLab制作的,制作后僅有一個shader,但具備制作高階卡牌所需要的所有功能。利用這個shader,設計師便可以直接在Material Inspector中制作演出效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

以“巴哈姆特”這張卡牌的制作為例??梢钥吹娇ㄅ苨hader擁有三個主要功能,來將卡牌畫面作為基礎背景,在這之上合成特效。這三個功能分別為貼圖合成、歪曲效果、劃定合成與歪曲的范圍。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

下圖右側為卡牌shader所使用的Material Inspector。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

1.貼圖合成。

將可以捆綁的素材制作成貼圖,在卡牌畫面上合成??梢赃x擇的合成方式分為“加法”、“減法”、“透明化”,移動方式分為“滾動”、“回旋”、“極坐標”等。此外,還可以通過各項數據的調試,來控制合成時的顏色和速度。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

上圖為所有素材貼圖都被合成的狀態

2.歪曲效果。

能夠給專門用來制作歪曲特效的素材貼圖,來給卡牌畫面增加相應的效果。與貼圖合成相同,可以選擇“滾動”、“回旋”、“極坐標”等移動方式,并能調整歪曲的強度、速度等數值。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

上圖為整個畫面都被歪曲的狀態

3.劃定合成與歪曲的范圍。

每張卡牌都有專用的遮罩貼圖,每個通道都能指定貼圖的合成和歪曲范圍。這樣一來,前文中覆蓋整個畫面的合成與歪曲效果,就能被應用在卡牌內任意一個位置。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

接下來再看高階卡牌中使用的數據,這些數據分為以下4種,通過組合來構成卡牌:

1.卡面??ㄅ频幕A內容,不僅能供高階卡牌使用,還是通??ㄅ频耐ㄓ脙热?。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

2.遮罩??梢詣澐諶GB各個通道的用途,以1張彩色貼圖的數據形式輸出。紅綠兩個通道都分別指定了合成文件,藍色的通道則是劃定了歪曲效果的范圍。每張卡面,都需要一個遮罩。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

3.合成貼圖。準備好可以捆綁的貼圖,供合成使用。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

4.材質??ㄅ苨hader所用的材質,跟其他三種數據相搭配便可制作演出效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

高階卡牌的制作案例

實際來看三張卡牌的制作效果。“夜之魔術師”這張卡牌的特效中,法杖前端會發光,角色也會被它發出的光芒照亮。這里使用了紅色的遮罩,來表現反光的效果,遮罩寫入后,卡面會隨之散發出被光芒照射的效果,給人非?;孟氲囊曈X感。綠色的遮罩則用于表現法杖散發出的環狀光效。藍色的遮罩則用于表現服裝和頭發的搖動效果?;钣猛崆男Ч?,能夠讓頭發的飄動特效變得更加柔和。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

在“天輪的石魔”這張卡牌中,描繪了石魔敲擊地面的狀態。高階卡牌的特效,便是突出地面裂開后溢出的光線,以及石魔手邊的士兵被光線照射的反射效果。綠色的遮罩用來表現石魔身體溝壑部分的能量光。藍色的遮罩則用來表現敲擊地面的搖動效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

第三個例子是“千年妖狐·尤愛爾”的高階卡牌??ㄅ普w都飄散著的火焰,是用紅色的遮罩來實現的。圓圈部分表現的,是飄動的粒子閃爍的特效,并且通過濃度的變化,來實現深度差的特效。綠色的遮罩用于表現角色兩側的火玉,如果能活用遮罩的繪制方式與合成貼圖的組合方式,便能表現出流體的視覺效果。大范圍繪制的藍色遮罩,用于表現服裝和頭發的飄動,以及熱氣的視覺效果。通過分離遮罩的濃度和模糊度,就能在歪曲表現中,突出某一部分特殊的搖動效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

可以看到,即便使用同一個卡牌shader,使用的方法不同,就能做出截然不同的演出特效。事實上,利用shader能實現的效果非常多,潛力也非常大,通常來看shader多用于3D游戲當中,但對2D動畫效果而言,從《暗影之詩》的實際運用來看,它也非常有用。不僅如此,對shader定制化的處理,還能夠靈活運用到更多的領域。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

優化與開發效率的提升:共享貼圖資源

《暗影之詩》內,每張卡牌最多可以使用4個特效。對于高階卡牌來說,使用這么多的貼圖來表現特效,很可能遇到瓶頸。通常來說,項目組會壓縮shader的容量,來解決這個問題,但這會降低高階卡牌的整體質量,所以需要尋找別的解決方法。《暗影之詩》找到的答案,便是利用資源打包功能來優化。

隨著卡牌的增加,效果的種類也會增加。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

效果A和效果B當中,分別包含了貼圖A和貼圖B等資源,重復的資源必然會造成資源浪費。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

所以處理方法就是共享貼圖。打包資源A、打包資源B里的特效,都分別對照打包資源C~F當中的貼圖,以避免貼圖的重復。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

接下來還會遇到一個問題“單獨構建時對照出錯”,這一問題可以通過共享命名規則來避免。通過統一Shuriken、材質、貼圖、資源打包的命名規則,來針對性調用必要的資源。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

結果上看,一次構建中,以每個貼圖128KB的大小,每個打包資源節省3個貼圖來計算,那么對戰雙方總共40張卡組的加載過程中,總共能優化30MB的數據量。按照100萬DAU的量級,放大到全服務器的范圍來看,相當于能夠節省30TB的數據量。這樣一來,數據量變少玩家需要下載的內容也就較少了,等待的時間也就變少了。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

最后,開發效率的提升涉及卡牌制作的每個環節?!栋涤爸姟番F在已經推出了1000多張卡牌,卡牌的技能由以下的6重元素互相組合而成。

技能:技能的描述。給予傷害,回復血量等。

設置:細節的設置。造成多少的傷害,抽到什么樣的卡牌。

發動條件:展示特定的狀態和技能發動條件的信息。比如Cost為5,對手場上使用了卡牌。

目標:技能適用的對象。比如場上的卡牌、自己的手牌、卡組內的卡牌等。

時機:什么時候發動技能。從手牌中使用時,卡牌被破壞的時候等。

發動前處理:技能發動前需要的消耗信息。比如死靈法師需要使用墓地中的卡牌來發動效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

值得一提的是,《暗影之詩》中,通過對職業的細分,可以將技能內容、發動條件組合成不同的技能,并且達到量產的效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

下面是實際的制作案例。

技能“Blazing Bless”

技能:造成傷害

設置:2點傷害2ダメージ

發動條件:對方場上存在卡牌時

目標:對方場上的卡牌

時機:使用時

發動前處理:無

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

“毀壞森林的惡果”也能給對手的前排造成2點傷害,但追加了能夠抽取一張妖精的效果。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

當設定了多個技能內容或者設置選項后,技能就可以表現出更豐富多彩的效果?;舅屑寄芏加蛇@6個要素構成,但根據組合和數值的變化,就能給玩家呈現出全新的卡牌。比如下面的兩張卡牌“任性的公主”和“奈芙緹斯”。

使用“任性的公主”可以在場上再召喚一只前鋒。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

“奈芙緹斯”則能在使用后盡可能多的召喚出前鋒,但還融入了很快就會被破壞的復雜設定。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?

根據這些設計,除了能更好地提高開發效率,還能同時實現“追加新卡牌的時候不需要再添加功能”、“防止重新開發某項功能”、“減小修改成本”、“高效調整平衡性”等好處。遇到了Bug的時候,也能更好的辨別問題發生的原因。

日區暢銷第三,網易代理,號稱“日本爐石”的《暗影之詩》是如何制作的?可以看到,只有不斷追求品質,并且從程序上盡可能采用最好的優化和穩定的方式,然后提高設計師和程序員的工作效率,這樣才能做出“具有高品質內容的”的作品
暗影之詩相關攻略