大家好，我是騰訊TGideas的動(dòng)畫(huà)師二娃，有幸參與這次聯(lián)合《小王子》電影推出愛(ài)消除小王子游戲版本的世界觀推廣H5，同時(shí)我們還做了另一版，作為游戲內(nèi)嵌世界觀，分別在國(guó)慶長(zhǎng)假后，在微信、手Q、以及PR傳播等平臺(tái)推廣，數(shù)據(jù)反饋也很棒，下面給大家分享這個(gè)痛并充滿愛(ài)的過(guò)程。

　　一、前期創(chuàng)意

　　1. 目的：天天愛(ài)消除與《小王子》電影合作，推出小王子游戲版本，需要一個(gè)預(yù)熱推廣H5。

　　2. 創(chuàng)意主要參與人員：游戲營(yíng)銷(xiāo)、創(chuàng)意支持、視覺(jué)設(shè)計(jì)、多媒體設(shè)計(jì)等負(fù)責(zé)人。

　　3. 愛(ài)消除和小王子結(jié)合的問(wèn)題：

　　文化背景差異：在國(guó)外家喻戶(hù)曉，在國(guó)內(nèi)主要在文藝青年領(lǐng)域被熟知;

　　調(diào)性不同：愛(ài)消除休閑快樂(lè)，小王子憂郁深沉;

　　共性不足：小王子與愛(ài)消除游戲玩法的契合點(diǎn)少;

　　美術(shù)風(fēng)格不同：愛(ài)消除Q版簡(jiǎn)約風(fēng)格，小王子粘土文藝風(fēng)格。

　　4. 劇本創(chuàng)意

　　我們?cè)诠适轮性O(shè)定了一個(gè)喵星球，將愛(ài)消除的核心玩法，構(gòu)建成這個(gè)星球的世界觀，希望借小王子的視角，探索其中奧秘。

　　根據(jù)小王子原作中以孩童的視角贊頌真善美，我們希望結(jié)合愛(ài)消除，以“消除煩惱”作為關(guān)鍵切入點(diǎn)，連接小王子的純凈世界，感悟成長(zhǎng)。

　　5. 調(diào)性選擇

　　根據(jù)劇本創(chuàng)意，我們前期計(jì)劃動(dòng)畫(huà)、音樂(lè)、配音都是走小王子的調(diào)性。由于版權(quán)原因沒(méi)能直接使用《小王子》電影原聲音樂(lè)，于是參考其神秘感和故事性，決定由團(tuán)隊(duì)原創(chuàng)，配音一致選擇童聲。不過(guò)，到最后音樂(lè)和配音還是出現(xiàn)讓我們始料未及的變動(dòng)，下文詳說(shuō)。

　　6. 風(fēng)格選擇

　　小王子片方最初并不允許我們對(duì)片中形象做再創(chuàng)作，于是兩個(gè)角色兩種風(fēng)格，需要選擇一種中和的風(fēng)格，而粘土風(fēng)格剛好可以結(jié)合愛(ài)消除和小王子童真的共性，讓兩種畫(huà)風(fēng)融為一體，并且團(tuán)隊(duì)中還有高顏值粘土達(dá)人傾力制作(下文會(huì)做詳細(xì)介紹不著急哈)，于是這個(gè)方案就這么愉快的定下來(lái)了。

　　二、制作流程

　　說(shuō)了這么多，究竟做一個(gè)粘土動(dòng)畫(huà)H5應(yīng)該準(zhǔn)備哪些東西?以下內(nèi)容較多，先放一張大概的分工流程示意圖。

　　文案確認(rèn)后3周內(nèi)出H5 DEMO, 還要預(yù)留后期的優(yōu)化時(shí)間，如果按照上述的工作一步一步做的話，天天加班也做不完，必須各個(gè)分工同步交疊進(jìn)行。比如在文案編寫(xiě)的同時(shí)，粘土試驗(yàn)和背景樂(lè)制作都在進(jìn)行了，在粘土制作的同時(shí)，動(dòng)態(tài)故事板也在同步進(jìn)行，把工作搭配好可以加快整體進(jìn)度。

　　文案(創(chuàng)意支持)

　　首先是劇本文案，故事的核心。在流程上必須盡早確認(rèn)，以便接下來(lái)工作的展開(kāi)。說(shuō)個(gè)題外話，前期我們和文案的同學(xué)一起聊劇本，現(xiàn)場(chǎng)大伙居然把自己聊感動(dòng)哭了，想必都走心了，無(wú)論最后傳遞到觀眾那里能接收幾成，但最初創(chuàng)作要滿，先把自己打動(dòng)，并在實(shí)現(xiàn)過(guò)程中盡可能保留那份感動(dòng)。

　　分鏡 / 動(dòng)態(tài)故事板(多媒體設(shè)計(jì))

　　劇本有了，接下來(lái)動(dòng)畫(huà)師和視覺(jué)設(shè)計(jì)師(也就是粘土達(dá)人本人)一同草擬分鏡，需要讓這一環(huán)節(jié)的小伙伴都清楚我們要做什么。

　　估計(jì)只有我倆才能看懂這草圖(～￣▽?zhuān)?～

　　對(duì)分鏡頭達(dá)成一致后，動(dòng)畫(huà)師需要根據(jù)劇本和草擬分鏡，制作一份動(dòng)態(tài)故事板，也就是動(dòng)態(tài)版的分鏡頭，把每一幕劇情用簡(jiǎn)明動(dòng)畫(huà)串聯(lián)起來(lái)，把故事講明白。

　　這一步很重要，雖然按照常規(guī)H5頁(yè)面的流程，是沒(méi)有分鏡這一步的，也只是在洛克王國(guó)大電影巨人谷H5動(dòng)畫(huà)項(xiàng)目設(shè)計(jì)前，有過(guò)和設(shè)計(jì)師進(jìn)行分鏡討論的步驟，但卻沒(méi)有時(shí)間真正出過(guò)一版動(dòng)態(tài)故事板。這次與以往不同，需完成時(shí)長(zhǎng)接近3分鐘的長(zhǎng)篇?jiǎng)赢?huà)，必須使用動(dòng)態(tài)故事板把控整體節(jié)奏。(動(dòng)態(tài)故事板片段gif圖)

　　第三幕動(dòng)態(tài)圖太大，點(diǎn)擊此處可見(jiàn)；

　　粘土制作(視覺(jué)設(shè)計(jì))

　　動(dòng)態(tài)故事板確定下來(lái)后，我們的粘土達(dá)人亞非，開(kāi)始制作需要用到的粘土造型。這一環(huán)節(jié)非常重要，決定著整個(gè)H5的視覺(jué)效果。

　　粘土使用了軟陶和輕粘土兩種材料，軟陶制作需要雕刻紋理的部件，輕粘土捏制造型圓潤(rùn)松軟的部件，比如角色。捏制完成后，對(duì)粘土逐一多角度拍攝，拍攝過(guò)程中需要統(tǒng)一光源，完成后將照片素材放置在PS中模擬出定格畫(huà)面效果，再將素材PSD提供給動(dòng)畫(huà)師。

　　下面快來(lái)欣賞萌萌噠粘土吧。

　　Canvas動(dòng)畫(huà)(多媒體設(shè)計(jì))

　　在H5環(huán)境下，做長(zhǎng)篇逐幀定格動(dòng)畫(huà)是不現(xiàn)實(shí)的，頁(yè)面會(huì)因?yàn)樗夭牧窟^(guò)大而崩潰，除非做成視頻格式，但視頻兼容性較差，不能滿足各類(lèi)投放平臺(tái)。

　　于是，我們選擇模擬粘土動(dòng)畫(huà)的方案。把需要做動(dòng)畫(huà)的素材都拆解成零件在flash中重組，重復(fù)的素材可以多次使用，減少資源占用。參考其中一個(gè)分鏡的制作，整部動(dòng)畫(huà)基本都是用這種方法完成的。不過(guò)片中這么多分鏡頭，設(shè)計(jì)師在有限時(shí)間內(nèi)只能把重要的畫(huà)面設(shè)計(jì)出來(lái)，其余分鏡，需要?jiǎng)赢?huà)師用素材補(bǔ)充完整。動(dòng)畫(huà)制作完后提交給Canvas前端開(kāi)發(fā)，將其制作成H5,可在手機(jī)頁(yè)面上預(yù)覽。

　　Canvas腳本(多媒體開(kāi)發(fā))

　　這次H5主要面向高端配置的移動(dòng)設(shè)備，盡管如此，素材量也是相當(dāng)驚人的，再加上動(dòng)畫(huà)時(shí)長(zhǎng)超2分鐘，還有循環(huán)背景樂(lè)、對(duì)應(yīng)字幕的旁白，動(dòng)畫(huà)中間部分還有交互，為了節(jié)省資源，部分景深效果使用代碼來(lái)實(shí)現(xiàn)的，這些都令我們的腳本哥后期優(yōu)化花費(fèi)不少功夫，何況還有最虐的反復(fù)修改環(huán)節(jié)。

　　小王子3D模型(Yigaxu多媒體設(shè)計(jì)組)

　　H5片中小王子的造型原本計(jì)劃用粘土來(lái)制作，但片方那邊關(guān)于小王子造型版權(quán)的問(wèn)題比較糾結(jié)，加之角色需要做跑、跳、彎腰等動(dòng)作，假如使用粘土素材拆解方法的話，很難還原正確的肢體光影，于是我們使用項(xiàng)目組提供的3D模型，由另一位動(dòng)畫(huà)師渲染粘土小王子的動(dòng)作素材。

　　還要考慮到燈光的問(wèn)題，此處光從籠子內(nèi)散發(fā)出來(lái)：

　　音樂(lè)&配音(多媒體設(shè)計(jì))

　　編曲其實(shí)是二娃的業(yè)余愛(ài)好，雖業(yè)余，但每次有機(jī)會(huì)用到工作上都會(huì)加倍用心，比如今年上半年有幸為3.30發(fā)布會(huì)的H5創(chuàng)作了背景音樂(lè)。

　　這次音樂(lè)使用Garage Band的鋼琴來(lái)演奏，在情緒升華的部分加入了弦樂(lè)組合。為了能讓這段音樂(lè)略帶法國(guó)詩(shī)意童話的味道，第一次使用混合里第亞的教會(huì)調(diào)式The Modes，它起源于歐洲古代**教贊美詩(shī)，使用這種調(diào)式會(huì)使曲子聽(tīng)上去帶有淡淡的神秘感和故事性。不過(guò)很遺憾，最后這首曲子沒(méi)能被采用。

　　Garage Band iPhone版界面

　　正如前文提到的，在整個(gè)H5 動(dòng)畫(huà)、音樂(lè)DEMO完成以后，項(xiàng)目組突然提出一個(gè)另我們始料未及的修改，從愛(ài)消除品牌角度出發(fā)，要求把原計(jì)劃中，偏向《小王子》的走心調(diào)性更改成愛(ài)消除的歡樂(lè)調(diào)性，配音也要求從童聲改成白領(lǐng)女聲。

　　修改調(diào)性對(duì)于我們來(lái)說(shuō)是件比較嚴(yán)重的事情，在溝通無(wú)效后，我們只好重新做一版。時(shí)間原因，音樂(lè)只好走外包重制，配音也重新錄制了好幾版。初版那種看完會(huì)讓人鼻根一酸的感覺(jué)已經(jīng)沒(méi)有了，現(xiàn)在大伙看到的上線版，便是修改后歡樂(lè)結(jié)尾的版本。

　　重構(gòu)/開(kāi)發(fā)測(cè)試(前端重構(gòu))

　　由于這次H5還涉及游戲福利領(lǐng)取，所以還需要后臺(tái)開(kāi)發(fā)聯(lián)調(diào)。等H5主要內(nèi)容準(zhǔn)備就緒后，由我們的重構(gòu)打包發(fā)布。游戲內(nèi)嵌版本也需要游戲開(kāi)發(fā)聯(lián)調(diào)測(cè)試，在天天愛(ài)消除游戲新版本中上線。

　　 原文地址：tgideas.qq

　　 來(lái)源優(yōu)設(shè)網(wǎng)