火星網校
《獸人必須死》動畫站創意思路總結
發布時間：2018-11-17 19:57:24
今天給大家分享《獸人必須死》的一個特色站，內容是個人創意思路、設計及很重要的溝通執行的一些經驗，不僅有成功的還有失敗的彎路，希望各位喜歡！
項目背景
項目背景主要是為迎接第三次封閉測試，三測的主題是經典再續目的：
1.希望過去玩獸人必須死1、2的單機用戶找回當年虐殺小獸人的快感跟激情；
2.同時也希望把遊戲講究策略對抗的特點能表現出來；
3.吸引用戶訪問，為三測預熱做好鋪墊。
開會討論
了解了三測的目的和方向，接下來就是項目的創意和素材準備，獸人項目組真的非常棒，在我設計空閑期至少提前了半年開始準備期，提前規劃官網，並給這次特色站預留了充分製作的時間，也就是說這個特色站其實在去年10月份左右就已經開始規劃準備了！
事實證明確實提前避免了很多問題！既然是核心經典傳承，我這裏首先給出了一個創意想法：
“獸人的艾倫很像電影超人的形象，所以我想以艾倫為主人公設定特色站劇情 一個陽光明媚的下午，一個可愛的老婦人在廚房為孩子們準備吃的，結果可怕的獸人大軍再次入侵了，他們踐踏了孩子們的玩具(一個帥氣的艾倫玩偶)，各大廣播電視開始播放獸人殘害善良人類的新聞，這時畫麵一轉一個側影留著胡子的男人，緩緩放下手中自拍杆，默默的關上電視打開衣櫃，一件悉心保護的戰袍躺在裏麵，他就是艾倫！啪，他飛身衝破窗戶重返屬於他的戰場！”
OK！回歸現實，本來想用動畫貫穿整個故事，加入互動來完成，項目也覺得不錯，盡管故事略顯老套，但是我們講究的是情懷，那一瞬間你就是艾倫，原來平靜的生活並不屬於他，就像速7的保羅，好了不提傷感的事！不過畢竟不是一個純找感覺的站，我們還是要有實際內容，項目希望特色的內容都能融入整個站，希望老玩家來到這裏也能有所收獲了解網絡版獸人是如何玩的，新玩家進來知道他是有曆史的，所以這個我自己滿意的方案被華麗麗的否決了！
方案擬定
方案被否決後我自己也緩了幾天，想法也需要重新醞釀最終跟項目達成一致，策略就用我們小時候類似的塑料人物小兵那種感覺（可以展現遊戲的特色），而主場景改成男主角艾倫的一個工作環境，一張破舊的木桌、一些燈光、一些古老的魔法書武器等散落，而艾倫在製定最新的對抗獸人的策略！不需要露臉，我們希望玩家能自己進入角色，假想自己是艾倫以第一人稱視覺的感覺操作畫麵。形式上想好用動畫的方式引導操作，給用戶帶來體驗上的形象感跟參與感！
素材需求
所有的想法在沒有素材麵前都是空想，所以一確定設計方案，馬上開始積極與美方ROBOT公司溝通，看需要多久可以提供素材支持。因為遊戲裏的桌麵包括一些道具，如果不是遊戲內的可能需要重新建模繪製，美方看到需求後提出看能不能在他們的一張宣傳小女巫的壁紙上進行修改！
看到這張圖我們都比較驚喜因為正好與創意方向有點不謀而合，我們需要進行修改如下幾點：
1.我們需要艾倫的手部介入，這樣才會有真實代入感；
2.我們需要一個骷髏金牌用來記錄獸人必須死獲得的榮譽；
3.需要艾倫的武器；
4.需要類似小時候玩的塑料獸人小兵排兵布陣；
5.書裏的內容改成各類陷阱，及遊戲內小地圖的進攻路線圖。
提出我們的想法後，接下來就是等待美方的調整，由於美方同時在進行遊戲內版本的優化調整，所以一度我們的需求延後，但好在我們需求提的夠早！OK，我們有的是時間等，下圖是素材最終調整後。
到這裏素材調整其實已經滿足我們的需求了，去掉了小女巫裏很多紫紅的顏色，換成艾倫管用的藍黃色調。
設計成型
獸人屬於美式卡通，所以設計核心思路就是美式動畫，整體設計去除質感，走偏平比較歐美化路線！
在操作體驗上我希望用戶跟界麵可以進行簡單的互動，借鑒類似iphone滑動解鎖的感覺！很多優秀的國外案例也是采用此法，同時也考慮了部分用戶可能不知道如何操作，所以設計上下方手指指向也是操作滑塊區域，內容動畫上加入類似視頻的動畫效果來開啟新一輪艾倫對小獸人的圍剿。
進行主場景後，我們需要對雜亂桌麵的物品進行梳理排列，首先我們需要整理出我們需要表達的4個核心內容，然後再找到相匹配的場景物件！
接下來就是實際執行部分，想好大致動畫效果，對桌麵物件進行重新排放，並對各個物件明暗關係重新處理，以下就是最終呈現效果圖！
動畫討論及執行部分
拉上重構，動畫進行了幾種方案的討論：
最終從網速及操作綜合考量，選擇動畫完成入場及切換轉場；而重構完成，鼠標拖拉及少部分轉場，整個切麵其實被切割成3段動畫：
1：首先所以桌麵物品入場，slogen入場；
2：拖動滑塊，場景物體產生位移跟隨滑塊進度；
3：書頁翻動，人物手需要指指點點示意，並配有背景人物聲音，表示艾倫已回歸！
整體的創意效果要的是：當我們在拖動滑塊時就好像在一個視頻播放器裏快進，如果滑塊沒超過進度一半，則自己會回到初始位置，物品也會歸位。動畫的流暢我們希望是能達到視頻級的，這也是其中難度很大的而一個環節！ 拖動滑塊部分因為有互動操作這部分由重構完成，為了能精準控製畫麵每個元素動的進度用序列幀圖去解決！
動畫那裏如火如荼的進行，但是之前擔心的問題來了，畢竟所有物品都是靜態圖，我們需要它位移就會很假！第一版結果並不理想，為了達到動畫視頻級效果，經曆無數次修改及電話溝通，慢慢優化效果！還有個比較重要的問題是：關於手部動畫又陷入了無奈，動畫那隻能進行簡單的上下左右位移，讓整個手看上去非常的傻，呆板，怎麼辦？
因為是跨國溝通，所以語言匱乏的我隻好親自動手實錄！
經過多番努力，經曆了不少時間，終於得到了我們想要的結果，也很感謝美方的支持，不僅提供單張手部序列幀，並且還有AE原文件，展示下部分靜態手部序列幀！
我們把手部序列全部提供給動畫，經過電話溝通表達了整體配合的方式，並增加了書翻頁的動畫效果！這時候整體的動畫已經越來越趨向自然，最後把整體動畫分解成之前說的3個部分，下圖是第二部分分解重構實現部分。
當然內頁的H5動畫一個都不能少，每個細微動畫也都是跟重構進行溝通後實現完成的！
[flash]http://static.video.qq.com/TPout.swf?vid=i0192s3s1yg&auto=0[/flash]
配音及配樂
為了增加玩家代入感，背景音樂及艾倫的聲音是必不可少的，訂好了艾倫馬上找人開始專業錄製，最終精簡了話語！配上經典的獸人音樂是不是感覺艾倫又回來了呢？
總結
少許遺憾的是：為了加快前麵動畫的節奏刪減了砍掉了部分效果，使得整體故事性稍弱，但自己還是比較滿意的，整個網站用了最低的成本，去模擬視頻類似的效果，受到項目組一致好評！配合新官網上線PV達到32萬！對於之前數據已經是大幅增長！
這次項目的經曆也讓自己認識到，設計師在整個特色站中應該起到的作用，他不僅僅是一個設計的執行者，更是一個項目美術方麵的監製，你放鬆了尺度很可能最終效果就會差強人意，全程的創意表現及執行基本都能保持初心這點其實挺不容易，一個項目在完成前可能都會遇到各種不同的問題，良好的溝通，堅持的信念，提前的項目規劃往往可以事半功倍！
最後感謝跟我一起努力的項目組同事，感謝你們一如既往的支持設計師的想法，感謝重構師及動畫師，感謝你們的反複修改，完成了以前不常見的效果和體驗，謝謝！
（轉載自：騰訊遊戲TGideas，作者：keemi）
分享
华体会hth体育网
賞析
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
想要製作自己的手機遊戲嗎？火星時代教育讓您實現此目標！理論學習與實戰操作相結合，我們的專業課程將帶您逐步掌握手機遊戲製作的精髓。
-
了解影視後期技能培訓學校的重要性，以及火星時代教育如何幫助你成為創意工業的精英。
-
詳解影視概念培訓的收費模式與注意事項，以及火星時代教育在此領域的優勢和服務介紹。
-
火星時代教育為您詳盡介紹UI設計課程培訓價格，助你快速掌握UI設計技能，提升職場競爭力
-
揭示UE界麵設計的關鍵技術與實踐應用，探究如何運用設計思維和工具提升產品用戶體驗。火星時代，引領教育創新。
-
若你想浸入影視動畫行業，挑選一所優質的專業培訓機構至關重要。從專業設施、師資力量到畢業生就業，火星時代教育與眾不同，是靠譜的影......
