砸金豬(砸金豬視頻)

2019年春節(jié)，百度出了一款砸金豬積福氣的AR小游戲嗎，并獲得了非常不錯(cuò)的互動(dòng)數(shù)據(jù)以及用戶的稱贊。而本文就還原了百度AR團(tuán)隊(duì)如何做出這款游戲的過程。

2019年春節(jié)，百度AR團(tuán)隊(duì)策劃了一款砸金豬積福氣的AR小游戲，助力百度地圖“回家有圖，一路是福”運(yùn)營活動(dòng)。

項(xiàng)目歷時(shí)兩個(gè)月，從內(nèi)容創(chuàng)意到設(shè)計(jì)開發(fā)，交互、視覺、模型、動(dòng)畫多個(gè)設(shè)計(jì)師高度配合，在春節(jié)來臨前，給百度地圖的用戶帶來了不一樣的新奇游戲體驗(yàn)。

當(dāng)然在設(shè)計(jì)制作過程中也遇到了很多問題和困難，我們通過本次的流程梳理和問題思考，把AR設(shè)計(jì)師做項(xiàng)目時(shí)的設(shè)計(jì)過程總結(jié)下來，希望能對大家有一些幫助和啟發(fā)。

Step1：背景&分析

春節(jié)作為地圖全年最重要的節(jié)點(diǎn)，希望在活動(dòng)中融入AR技術(shù)，通過小游戲吸引地圖用戶關(guān)注活動(dòng)，增加互動(dòng)量，同時(shí)展示百度的AI能力。

我們參考往年地圖DAU數(shù)據(jù)，根據(jù)用戶使用行為提煉出三個(gè)階段：

第一階段是用戶已經(jīng)有歸家意圖，即已經(jīng)設(shè)定明確目的地。第二階段為旅途中第三階段為已經(jīng)到達(dá)目的地，完成團(tuán)聚。

同時(shí)為了滿足活動(dòng)送用戶歸家紅包的訴求，我們提取出豬年、旅途、路線規(guī)劃、紅包等關(guān)鍵詞，進(jìn)行游戲內(nèi)容搭建。

Step2：游戲內(nèi)容創(chuàng)意

在主要關(guān)鍵詞確認(rèn)之后，我們展開討論與發(fā)散。

首先是豬年關(guān)鍵詞。

結(jié)合地圖春節(jié)期間派發(fā)歸家獎(jiǎng)金的活動(dòng)計(jì)劃，將豬年與獎(jiǎng)金這兩個(gè)關(guān)鍵詞相結(jié)合，想到了砸豬型存錢罐的概念。

融入路線、旅途、終點(diǎn)等關(guān)鍵詞，最終決定的玩法是將游戲場景放置在真實(shí)環(huán)境中，福豬在場景中沿著規(guī)劃路線向終點(diǎn)前進(jìn)，途中用戶砸到福豬可以獲得歸家紅包。

在方案創(chuàng)意階段AR設(shè)計(jì)師會(huì)同步與開發(fā)溝通可實(shí)現(xiàn)方案，考慮角色和地形在AR環(huán)境中的真實(shí)效果。

場景在開始設(shè)計(jì)前會(huì)實(shí)物模擬放置在實(shí)景中的位置，考慮高度、大小、位置等虛擬坐標(biāo)與真實(shí)坐標(biāo)對應(yīng)后，確定可實(shí)現(xiàn)方案展開地形設(shè)計(jì)。

Step3：設(shè)計(jì)流程與執(zhí)行1. 設(shè)計(jì)流程

本次項(xiàng)目周期較為緊張，游戲方案確定后，交互和視覺同步開始進(jìn)行設(shè)計(jì)；并與開發(fā)驗(yàn)證AR環(huán)境中的可實(shí)現(xiàn)方案，模型、動(dòng)畫根據(jù)視覺進(jìn)展第一時(shí)間開展工作，驗(yàn)證AR引擎能力，提前解決問題。

2. 設(shè)計(jì)執(zhí)行

1.1 角色設(shè)定

最終的福豬外形選定了一只站立的豬。沒有用豬型存錢罐的原因是我們想讓豬在豬年站起來，飛奔著向前跑，并將存錢罐里錢幣的概念轉(zhuǎn)變成豬豬背著的福袋。這樣可塑性比較強(qiáng)， 背上福袋的豬豬體積上增大后在AR場景中也更醒目一些。

基礎(chǔ)形象確定之后，就可以根據(jù)角色的自身性格和功能進(jìn)行多個(gè)角色的細(xì)節(jié)設(shè)計(jì)了，并會(huì)考慮在游戲和AR環(huán)境中角色的可識別性和視覺效果，根據(jù)反饋調(diào)整最優(yōu)視覺效果。

1.2 角色建模

形象確定下后就開始進(jìn)行模型的制作，在模型制作過程中，AR項(xiàng)目的建模流程是區(qū)別于傳統(tǒng)建模流程的。

首先第一步模型創(chuàng)建的過程中，模型師要先考慮用基本的幾何形態(tài)完成模型的創(chuàng)建，符合AR的面數(shù)控制，在簡模通過技術(shù)的性能測試后，再根據(jù)視覺要求進(jìn)行細(xì)化。

后面的步驟中也是，模型師每做一步都需要對當(dāng)前的效果進(jìn)行測試，模型效果在引擎中的不確定性非常高，需要隨時(shí)結(jié)合真實(shí)場景進(jìn)行修改測試。

回到模型創(chuàng)建，模型師拿到原畫設(shè)定后對整體效果進(jìn)行梳理，從三個(gè)方向?qū)δＰ瓦M(jìn)行創(chuàng)建。原畫給出了X軸方向的整體視覺效果，Y軸方向決定身高比例，Z軸方向決定身材比例和動(dòng)畫的活動(dòng)范圍。

模型師從最簡單的多邊形模型一步步驗(yàn)證引擎效果進(jìn)行細(xì)化的過程，建模得到驗(yàn)證后，會(huì)逐漸增加細(xì)節(jié)，并開始其他角色的模型制作。

在用建模測試過引擎的性能后，對模型進(jìn)行逐一的細(xì)節(jié)優(yōu)化，并進(jìn)行貼圖的繪制。

最終渲染效果：

列舉兩個(gè)模型階段的常見的問題：

一個(gè)是引擎渲染效果與三維渲染不一致，一個(gè)是pod格式的問題。

都是引擎沒辦法100%還原模型效果的問題，這時(shí)候需要設(shè)計(jì)師在有限的引擎能力下找到平衡的點(diǎn)，

最大程度對齊效果，如果效果我們實(shí)在沒辦法接受，還會(huì)推動(dòng)進(jìn)行技術(shù)上的更新，達(dá)到更好的效果。

2.1 場景設(shè)定

場景在視覺設(shè)計(jì)的階段就會(huì)將金豬行進(jìn)的路線進(jìn)行詳細(xì)規(guī)劃，與rd溝通場景放置在真實(shí)空間中的實(shí)現(xiàn)方案，對整個(gè)場景在真實(shí)空間中的效果有一個(gè)基本的預(yù)期，心中有數(shù)。

場景的各個(gè)細(xì)節(jié)都需要詳細(xì)說明，場景建模和技術(shù)都會(huì)根據(jù)這些細(xì)節(jié)的點(diǎn)進(jìn)行在三維和真實(shí)空間中的坐標(biāo)系設(shè)定。

2.2 場景建模

場景的建模工作流程基本與角色建模的流程相似，也是先出建模、驗(yàn)證技術(shù)能力，再確認(rèn)能力后進(jìn)行。

細(xì)化：

最終場景的局部圖，整體效果圖

列舉兩個(gè)場景制作的問題：

第一個(gè)是貼圖在引擎中不顯示，雖然我們已經(jīng)做過很多ca，但是每次都會(huì)有新的問題出來。以往的傳統(tǒng)制作經(jīng)驗(yàn)并不能完全解決AR引擎中的問題，我們只能在一步步在探索中解決問題。

第二個(gè)問題也是場景在引擎中的渲染問題，我們推動(dòng)技術(shù)實(shí)用gltf格式，獲得了更好的視覺效果。

三維與技術(shù)的共同開發(fā)流程基本是一個(gè)循環(huán)，雖然我們建立了很多規(guī)范也沉淀了很多方法，但是像我前面提到的，在AR的制作過程中，一直都會(huì)有新的問題新的挑戰(zhàn)，是一個(gè)不停發(fā)現(xiàn)問題、解決問題的過程。

3.1 動(dòng)畫設(shè)計(jì)

角色和場景的模型制作完畢后，就是動(dòng)畫師的工作，動(dòng)畫師做為設(shè)計(jì)的最后一環(huán)，與開發(fā)的對接最為密切，很多問題會(huì)出現(xiàn)在這一步。

比如游戲使用slam無法控制用戶游戲視角，動(dòng)畫制作從傳統(tǒng)的一個(gè)機(jī)位變成全方位，每一個(gè)角色的動(dòng)作都需要360度無穿幫，需要?jiǎng)赢嫀煻啻握{(diào)整和規(guī)范。

拿到制作好的角色模型，首先要對角色特點(diǎn)進(jìn)行分析，確定動(dòng)畫風(fēng)格（寫實(shí)or卡通）為對應(yīng)的角色設(shè)計(jì)適合他性格特點(diǎn)和情景的動(dòng)作，包括肢體動(dòng)態(tài)，表情動(dòng)態(tài)。

接下來進(jìn)行動(dòng)畫制作，動(dòng)畫制作分為幾個(gè)階段：layout，blocking，animation，final。

在制作過程中，動(dòng)畫師會(huì)從節(jié)奏感、重量感和彈性增強(qiáng)角色動(dòng)態(tài)細(xì)節(jié)。嘗試加入重量感來增強(qiáng)福豬跑步時(shí)上下顛

簸的感覺，符合福豬本身的重量。在彈性設(shè)計(jì)上會(huì)更加夸張，跳躍時(shí)有一個(gè)慣性的伸縮，加強(qiáng)福豬Q彈的質(zhì)感。

動(dòng)畫制作完畢后將動(dòng)畫文件導(dǎo)出fbx文件和貼圖，生成gltf文件與開發(fā)共同做效果測試。

最終動(dòng)態(tài)效果：

最終的模型、動(dòng)畫輸出給開發(fā)后，并不表示設(shè)計(jì)師的工作已經(jīng)結(jié)束，而是開始不停的遇到問題，解決問題，設(shè)計(jì)師需要很強(qiáng)的問題解決能力，在有限的技術(shù)可實(shí)現(xiàn)范圍內(nèi)把效果做到最好。

4.1 界面設(shè)計(jì)

游戲界面延續(xù)使用3d形象，在不同結(jié)果的彈窗中使用不同的福豬，游戲內(nèi)的所有元素統(tǒng)一設(shè)計(jì)為3d效果。

游戲最終效果：

https://v.youku.com/v_show/id_XNDI0NTc1NjIzMg==.html?spm=a2h3j.8428770.3416059.1

Step4：項(xiàng)目總結(jié)

2019年的春節(jié)，在大家的努力下福豬項(xiàng)目按時(shí)上線百度地圖，有付出就肯定會(huì)有收獲，在制作期間我們的設(shè)計(jì)獲得肯定并吸引到贊助商助力，上線7天砸金豬互動(dòng)量達(dá)千萬。

雖然游戲設(shè)計(jì)過程中遇到了很多困難，但是辦法總比困難多，組內(nèi)設(shè)計(jì)師也形成了一套高效配合的工作方法和流程。

在諸多條件限制下，設(shè)計(jì)師很遺憾對太多效果不得不做取舍，不過這也是AR小游戲的開始，未來還有很多可以優(yōu)化的方面，為玩家提供更多可能性。

作者：百度人工智能交互設(shè)計(jì)院（Baidu AI Interaction Design Lab）

本文由 @百度人工智能交互設(shè)計(jì)院 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash, 基于CC0協(xié)議