我們花不到 10 天，做了支細節驚人、妖氣十足的「捉網紅」H5
這幾天朋友圈流傳著一個「中秋新傳說」，關于月老養的網紅逃跑到人間的故事，而奉命為月老找回網紅者，就是下面這支畫風有點騷騷的H5：《月宮網紅獵人》，相信很多朋友都已經玩過。從立項到制作完成用時不到10天，網紅逃跑故事背后，還有怎樣的故事？今天無非創意（也就是此次H5的制作團隊）將親自給大家講講H5制作幕后那些事...
原標題：《揭秘最近朋友圈那支捉網紅H5幕后那些事》
數英網用戶原創文章，轉載請聯系本人
點擊查看案例：http://www.dh-gg.com/projects/18854.html
《月宮網紅獵人》最讓大家印象深刻的,大概就是那讓人眼瞎的游戲畫面吧？
有用戶朋友反應，第一次進入游戲，簡直刺瞎狗眼，像素化、三維、長畫幅，并且細節驚人，眼花繚亂，非常好奇這妖氣十足的游戲頁面是怎么設計出來的。
既然大家有興趣，那我們就來扒一扒H5制作過程中的那些事，并偷偷附上從美術那里偷來的線稿（壞笑.jpg）
關于設計風格的選擇，在和甲方爸爸溝通的過程中，雙方意見都比較一致，所以很快達成共識，決定采用三維的像素畫面，雖然這種風格相對于普通的平面風格在設計和程序上會大大增加難度和工作量，但對于「找網紅」這個既定的游戲方案來講，三維、像素化的畫面無疑能夠提高游戲的難度和可玩性、增加畫面沖擊感以及達到混淆用戶視覺的效果。
在一開始確定畫面尺寸的時候，我們做了幾個不同尺寸的demo進行試驗，從內容的表現以及游戲的體驗效果考慮，最后決定采用長度為1920px即主流手機屏幕三倍左右的畫幅。（PS：這個尺寸可以作為大多數長畫幅的互動游戲類H5的參考尺寸）
確定了風格、尺寸以及場景內容之后，設計師飲下一碗雞血，奮筆疾書幾小時之后，熱乎乎的線稿出爐！
從線稿上我們可以看到大體的場景布局及畫面內容
雖然很快完成了線稿，但離勝利還很遠，接下來要做的就是填色以及磨細節——也是最漫長最繁瑣的階段!
經過兩天的打磨，終于完成了整體的填色和部分細節：
但，很明顯這并不是最終版的配色方案。為了更突出商城夜晚的熱鬧氛圍以及貼合H5背景故事的基調，在內部探討以及甲方的建議下，我們對配色做了一次大膽的調整，最后的效果也就是大家現在所看到的畫面，色彩對比更加鮮明，更加妖氣：
程序方面，最繁鎖的部分就是動效的處理了。
大家在玩游戲的同時，可能有注意到游戲畫面上有一些細節上的動效，比如墻上的燈、店鋪的照片、舞臺燈光以及地面上部分行走的小人等。雖然單純的動效實現并沒有多大的難度，但由于游戲頁面圖層十分復雜，動效的處理便增加了不少難度。
另外值得一提的是H5的BMG
童年時期浸淫在紅白機世界里的朋友們對H5的背景音樂肯定很有親切感吧？為了讓H5更有像素游戲的感覺，我們特意翻出了十幾首經典像素游戲配樂，逐首配對甄選，最后敲定并進行分段剪裁；
細心的朋友會發現，游戲前后兩段背景音樂其實是有差別的，的確我們在剪裁上也下了一番功夫，游戲之前我們剪裁了較為平淡的部分，而游戲部分則使用較為激昂的部分，以此增強游戲的活躍氣氛，突出限時形式的緊迫感；另外為了整個游戲配樂的流暢和諧，游戲勝利與失敗的音效也是從整首音樂中仔細尋找并剪裁出來的小片段，這里對剪裁的要求更高，多一分少一秒都會影響效果。
H5推出之后，我們在朋友圈做了個小調查，很多用戶朋友表示游戲看似簡單，但捉齊6個網紅卻很難。能捉齊6個的，不是有神力相助，就是眼力爆表！
上完彩蛋，我們最后再來捉一遍網紅，看看你是不是合格的網紅獵人吧！
掃描二維碼，立即捉網紅
（數英網 App 用戶需點擊放大二維碼后，長按識別）
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）