基于Html5技術的博物館主題游戲設計與開發

陳陽，姚嘉毅

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

[關 ? ?鍵 ? 詞] ?HTML5游戲;輕游戲;HTML5技術

[中圖分類號] ?TP317 [文獻標志碼] ?A ? [文章編號] ?2096-0603（2019）32-0176-02

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

一、項目依托

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

二、實際調研

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

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

三、策劃方案

通過問卷調研獲取的相關數據，并與相關專業人士的溝通后，游戲團隊最終確定了《火種》的整體游戲類型、游戲風格和表現手法。并對游戲開發難度進行預估，形成可行性報告。

■

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

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

四、界面設計

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

■

按照以上思路，《火種》界面設計的基本概念設計可以用圖表的形式表達出來，包括基本功能、元素表達、信息結構、屏幕安排等。根據概念設計，繪制并細化游戲界面的布局圖，界面的表現形式可以很直觀地展現，為實現功能做好鋪墊。

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

五、動畫制作

《火種》中所涉及的動畫主要有：過場動畫、角色動畫。過場動畫主要出現在游戲開始和結束前不同場景間切換時，用來交代情節的發展和場景的變化。角色動畫主要表現在游戲實際進展過程中，游戲主體即廣東省博物館logo在角色升級和過時降級情況下的動畫設定。

■

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

六、程序實現

《火種》中使用Html5+jQuery API，jQuery是一個精簡、高效并且功能非常豐富的JavaScript工具庫。游戲流程實現：先init（）初始化，再getImageRes（）裝載主界面和背景音樂loadAudioResources（number），創建游戲對象和加載關卡，具體過程見下流程圖。

■

七、結語

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

而基于Html5技術的《火種》等作品是學院工學商一體化項目制課程結出的又一碩果，有助于促進學院與省博物館在人才培養、文創產品和藝術衍生品設計研究、創新應用領域開展廣泛深入的合作。

參考文獻：

[1]黃伊琳.基于HTML5的微信游戲設計[J].計算機系統應用，2017（12）：22-24.

[2]臧金梅.基于HTML5的簡單拼圖游戲的設計和實現[J].信息技術與信息化，2017（12）：22-24.

[3]謝運佳.基于HTML5的認知訓練小游戲的設計與開發[J].廣州廣播電視大學學報，2017（4）：104-106.

[4]陳宏揚.基于HTML5的闖關游戲式移動學習平臺的開發和設計[J].廣東輕工職業技術學院學報，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