基于Html5技術(shù)的博物館主題游戲設(shè)計(jì)與開發(fā)

陳陽，姚嘉毅

[摘 ? ? ? ? ? 要] ?從短精快的思路和低成本開發(fā)的角度進(jìn)行某個(gè)品牌或項(xiàng)目的推廣工作，依托新媒體網(wǎng)絡(luò)平臺(tái)，使用高品質(zhì)的游戲制作、簡單明了的關(guān)卡玩法、富有感染力的游戲創(chuàng)意和文案、多渠道多方位的傳播途徑等，使Html5輕游戲在未來的推廣營銷策略上贏得先機(jī)。

[關(guān) ? ?鍵 ? 詞] ?HTML5游戲;輕游戲;HTML5技術(shù)

[中圖分類號(hào)] ?TP317 [文獻(xiàn)標(biāo)志碼] ?A ? [文章編號(hào)] ?2096-0603（2019）32-0176-02

隨著前些年《圍住神經(jīng)貓》和《看你有多色》等優(yōu)質(zhì)Html5小游戲在微信朋友圈迅速傳播后，Html5小游戲憑借著跨平臺(tái)、易開發(fā)、無需安裝等特點(diǎn)，受到了越來越多的開發(fā)者和開發(fā)機(jī)構(gòu)的青睞[1]。不僅僅游戲本身備受追捧，其系列表情包等相關(guān)衍生品也得到大量的使用，足以見得Html5輕游戲在游戲圈內(nèi)的影響力。

一、項(xiàng)目依托

為了加強(qiáng)館校合作，凸顯工學(xué)商項(xiàng)目課程，2018年11月底，由我校藝術(shù)設(shè)計(jì)學(xué)院與廣東省博物館聯(lián)合舉辦的“粵博館慶六十周年文創(chuàng)禮品開發(fā)項(xiàng)目”全方位展開，在游戲方面，基于Html5技術(shù)的廣東省博物館主題游戲《火種》在此背景下進(jìn)入設(shè)計(jì)與實(shí)際開發(fā)過程。

二、實(shí)際調(diào)研

廣東省博物館是國家一級博物館，也是廣東省范圍內(nèi)唯一的省級綜合性博物館。其陳列展覽以自然、藝術(shù)、廣東歷史文化等為三大主要陳列方向，總共分為自然館、歷史館、藝術(shù)館和臨展館四大部分，廣東省博物館藏品非常豐富，截至2016年12月，該館的藏品總數(shù)已達(dá)17.28萬余件（套）。

為了提取游戲合適元素，游戲團(tuán)隊(duì)圍繞博物館觀眾進(jìn)行了一套針對上網(wǎng)習(xí)慣、網(wǎng)絡(luò)游戲和網(wǎng)頁游戲的相關(guān)調(diào)查問卷，旨在了解玩家的興趣愛好、生活情況、玩法黏性等，同時(shí)涵蓋本次H5游戲項(xiàng)目類型、題材、廣東省博物館的藏品風(fēng)格、建筑造型和游戲玩法設(shè)計(jì)等核心要素，充分了解網(wǎng)游玩家的真實(shí)想法和玩家共性，借以幫助游戲團(tuán)隊(duì)加深對項(xiàng)目所涉及的網(wǎng)游市場的調(diào)查研究和理解[2]。

三、策劃方案

通過問卷調(diào)研獲取的相關(guān)數(shù)據(jù)，并與相關(guān)專業(yè)人士的溝通后，游戲團(tuán)隊(duì)最終確定了《火種》的整體游戲類型、游戲風(fēng)格和表現(xiàn)手法。并對游戲開發(fā)難度進(jìn)行預(yù)估，形成可行性報(bào)告。

■

本款游戲可基于電腦和微信平臺(tái)，玩法很簡單，主要是通過火種的不斷傳播、延伸，不斷植入廣東省博物館的logo形象、品牌特征和建筑風(fēng)格，加深玩家對該館形象的記憶和印象。

根據(jù)調(diào)研的結(jié)果，本游戲受眾定位為對各類輕游戲有一定喜愛度的玩家，主要面向8歲以上40歲以下且對歷史藏品有濃厚興趣的觀眾。

四、界面設(shè)計(jì)

《火種》界面設(shè)計(jì)主要原則有：（1）由于面向?qū)ο筝^為年輕化，因此界面設(shè)計(jì)時(shí)采用的風(fēng)格簡潔可愛，從視覺上取得玩家的興致和共鳴。（2）簡單易懂，便于控制，方便玩家對操作方法的理解。（3）游戲主顯示區(qū)域盡量避免干擾，界面元素可以按照玩家的意愿及時(shí)展開或收起[3]。

■

按照以上思路，《火種》界面設(shè)計(jì)的基本概念設(shè)計(jì)可以用圖表的形式表達(dá)出來，包括基本功能、元素表達(dá)、信息結(jié)構(gòu)、屏幕安排等。根據(jù)概念設(shè)計(jì)，繪制并細(xì)化游戲界面的布局圖，界面的表現(xiàn)形式可以很直觀地展現(xiàn)，為實(shí)現(xiàn)功能做好鋪墊。

《火種》界面設(shè)計(jì)沿用了慣用的冒險(xiǎn)闖關(guān)游戲的界面布局。引導(dǎo)界面和結(jié)束界面凸顯廣東省博物館的logo和相關(guān)主體信息。主體界面上主要顯示得分、時(shí)間、關(guān)卡、其他類資訊這些信息通常都設(shè)置在屏幕的頂部區(qū)域，提示的資訊不會(huì)影響玩家的正常游戲[4]。

五、動(dòng)畫制作

《火種》中所涉及的動(dòng)畫主要有：過場動(dòng)畫、角色動(dòng)畫。過場動(dòng)畫主要出現(xiàn)在游戲開始和結(jié)束前不同場景間切換時(shí)，用來交代情節(jié)的發(fā)展和場景的變化。角色動(dòng)畫主要表現(xiàn)在游戲?qū)嶋H進(jìn)展過程中，游戲主體即廣東省博物館logo在角色升級和過時(shí)降級情況下的動(dòng)畫設(shè)定。

■

實(shí)際制作過程中，場景動(dòng)畫主要基于CSS3動(dòng)畫效果，角色動(dòng)畫所應(yīng)用的星云動(dòng)畫特效基于HTML5 Canvas技術(shù)，整個(gè)畫面動(dòng)態(tài)模擬了一個(gè)星系的外觀變化，就比如模擬太陽系的整體環(huán)境，有很多小行星圍繞著太陽系中心進(jìn)行旋轉(zhuǎn)，產(chǎn)生瞬間的動(dòng)態(tài)圖形變化，而其星系中心也會(huì)顯得格外絢麗多彩。這些小星點(diǎn)都在HTML5 Canvas上進(jìn)行繪制而成，時(shí)間很短暫，但顯得非常亮麗奪目。

六、程序?qū)崿F(xiàn)

《火種》中使用Html5+jQuery API，jQuery是一個(gè)精簡、高效并且功能非常豐富的JavaScript工具庫。游戲流程實(shí)現(xiàn)：先init（）初始化，再getImageRes（）裝載主界面和背景音樂loadAudioResources（number），創(chuàng)建游戲?qū)ο蠛图虞d關(guān)卡，具體過程見下流程圖。

■

七、結(jié)語

無疑，Html5是最近幾年web前端開發(fā)最為熱門的話題，它從根本上改變了開發(fā)機(jī)構(gòu)開發(fā)Web應(yīng)用的方式，從PC端瀏覽器到手機(jī)端移動(dòng)應(yīng)用，Html5是對HTML標(biāo)準(zhǔn)的第五次修訂。而其語法則是向后兼容的，正逐漸成為一個(gè)不斷在更新和變化的活標(biāo)準(zhǔn)。

而基于Html5技術(shù)的《火種》等作品是學(xué)院工學(xué)商一體化項(xiàng)目制課程結(jié)出的又一碩果，有助于促進(jìn)學(xué)院與省博物館在人才培養(yǎng)、文創(chuàng)產(chǎn)品和藝術(shù)衍生品設(shè)計(jì)研究、創(chuàng)新應(yīng)用領(lǐng)域開展廣泛深入的合作。

參考文獻(xiàn)：

[1]黃伊琳.基于HTML5的微信游戲設(shè)計(jì)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2017（12）：22-24.

[2]臧金梅.基于HTML5的簡單拼圖游戲的設(shè)計(jì)和實(shí)現(xiàn)[J].信息技術(shù)與信息化，2017（12）：22-24.

[3]謝運(yùn)佳.基于HTML5的認(rèn)知訓(xùn)練小游戲的設(shè)計(jì)與開發(fā)[J].廣州廣播電視大學(xué)學(xué)報(bào)，2017（4）：104-106.

[4]陳宏揚(yáng).基于HTML5的闖關(guān)游戲式移動(dòng)學(xué)習(xí)平臺(tái)的開發(fā)和設(shè)計(jì)[J].廣東輕工職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017（16）：9-12.

◎編輯 武生智

Design and Development of Museum Theme Games Based on Html5 Technology

GHEN Yang，YAO Jia-yi

Abstract：The promotion of a brand or project from the perspective of short，precise and quick thinking and low-cost development，relying on the new media network platform，using high-quality game production，simple and clear levels of play，infectious game creativity and copy，multi-channel and multi-dimensional communication channels，etc.，make Html5 light games win the first chance in the future promotion and marketing strategy.

Key words：HTML5 game;light games;HTML5 technology