為市面上唯一一款純HTML5技術而備受矚目的青瓷引擎(QICI Engine)，在經歷了一個多月的封閉測試之后，近日全新0.95版本正式發布。據悉，該版本的青瓷引擎(QICI Engine)已具備了正式開發游戲的條件，不但保持了已有的專業HTML5引擎核心要素，對于HTML5游戲的開發服務及性能上亦進行了強化，同時還為開發者量身打造了上百個示例工程，降低學習成本，入門更加輕松。

在此之前，青瓷引擎(QICI Engine)以“讓天下沒有難做的游戲”為口號，出席了各大移動游戲展會及HTML5峰會，從專業的角度以及實例演示，闡述了“真正HTML5引擎究竟應該是什么樣的”，吸引了大批開發者的關注。那么，這樣一款純HTML5技術的游戲引擎究竟能為開發者帶來什么?0.95版本又解決了哪些問題?

【純JavaScript語言開發 快速易用無需安裝】

青瓷引擎(QICI Engine)極易入門，采用純JavaScript語言架構，即引擎基于JavaScript，工具基于JavaScript，后臺服務基于Node的JavaScript，這樣的架構體系使得系統內部各個組件無縫融合，并最大化的減低了對開發人員的要求，只要懂JavaScript即可開發游戲，又可自定義擴展開發工具和后臺服務的插件。另外，青瓷引擎無需插件和客戶端安裝即可在瀏覽器下運行，甚至在平板和手機上亦能做開發工作。而在0.95版本中，更是新增了上百個示例工程，為開發者的學習保駕護航。

【可視化操作 一站式集成 】

目前市面上有些HTML5引擎，只有簡單的制作工具和一堆難懂的渲染API，要做出一款普通的游戲需要耗費較多的精力來開發配套工具，這對大部分普通開發者來說成本難以承受。

青瓷引擎(QICI Engine)是專為游戲開發而生的，采用的是可視化的一站式開發框架，沒有復雜瑣碎的插件，是為游戲量身定做的所見即所得的集成式開發工具，擁有UI控件、自適應分辨率布局系統、曲線動作編輯器、圖集打包等工具，通過簡單的拖拽都可以實現很多復雜的功能。最大程度簡化開發者的操作。

同時，游戲數據也均為可視化，并且可以直接進行修改。游戲引擎還支持excel配置，游戲的數據、數值甚至一些規則都是可以通過excel表格直接配置。而曲線動作編輯器方面，策劃或美工可以直接完成界面打開的動畫、界面關閉動畫、場景切換效果等等一系列界面動作。在0.95版本中，也更加完善了中文API文檔和用戶手冊，給開發者帶來了極大的便利。

【全套通用組件庫解決方案 自定義編輯器插件】

青瓷引擎(QICI Engine)的編輯器工具完全基于青瓷引擎Widget全套自家通用組件庫解決方案搭建而成，不依賴市面上各種層次不齊的通用組件解決方案，青瓷引擎 Widget組件庫包含了樹表等豐富的常規組件，以及靈活組件布局功能，組件風格操作模式統一，并且極其高性能，完全能達到和Native組件媲美的高負載和可操作性，這也是青瓷引擎編輯器工具敢于完全基于HTML5開放游戲引擎工具的根基，這樣的架構很好的和青瓷引擎融合一體，無需任何插件，即可無縫的查看游戲對象層次結構和調試，并且用戶可非常容易的基于青瓷引擎 Widget組件庫擴展自定義編輯器插件。

青瓷引擎(QICI Engine)始終致力于開發者的核心體驗，性能與高效一直是研發過程中的重中之重，伴隨青瓷引擎0.95版本的到來，除了修復BUG外，還新增TiledMap支持，在性能上面也有著更加卓越的表現。

關于青瓷引擎(QICI Engine)：

青瓷引擎(QICI Engine)由廈門青瓷數碼十幾年實際游戲開發經驗總結、提煉，汲取Unity3D大部分的優點，采用純HTML5技術和JavaScript語言，提供一站式2D游戲開放框架及專業的編輯器工具，是一款高性能、高效率，更貼合實際，更親近程序、美術和策劃等開發人員的真正意義上的HTML5引擎。青瓷引擎將以開源和免費的形式發布。

strolid是一款采用諸多web新技術的HTML5游戲。游戲的作者treeform分別使用webGL、WebSocket、AudioContext和作者自制的響應式HTML框架來渲染圖形、創建網絡連接、播放音頻和設計UI。另外，他還使用了Electron來將游戲打包成Windows和Mac的桌面應用程序。筆者這次給大家分享一下Istrolid作者的游戲開發心得。

2D WebGL

在使用openGL和WebGL引擎時，開發者通常會創建多個網格和紋理對象。但是Istrolid的作者卻有著自己獨特的建構方法。他通過一個網格和紋理對象來繪畫所有的游戲內容。游戲中的飛船有非常簡單的多邊形構成，有的甚至是由若干個三角形構成的。因此作者認為沒有必為每一個要繪制的物體都新建一個網格對象。

取而代之的是創建一個動態的網格并在每一幀畫面中通過代碼來調整這個網格。這樣會大大加快繪制的速度。這種方法和通常被開發者們棄用的openGL的immediate模式比較類似。同時，作者不推薦使用 3D ModelView的矩陣。在編寫Istrolid時，他僅僅將一個視點的矩形傳遞給了著色器。因此這款游戲是完全基于2D引擎的。

圖1 游戲中的飛船均由簡單的多邊形構成

紋理對象也很簡單，而且和網格對象一樣是動態的。在一個區域或者地形上繪制圖片時，游戲程序會加載這個紋理對象并將它放到一個實時打包的紋理地圖集中。之后程序會根據新的UI坐標系來創建網格對象。

圖2 2048px*2048px的地圖集

作者對著色器的操作也很簡單。他將所有的顏色都轉換到了HSV顏色空間中以便于進行顏色的調整。

圖3 HSV顏色空間

Coffee Script

JavaScript快得難以置信。作者原本利用Panda3d和Python來編寫卻發現Python并不能滿足他對速度的需求。他認為不斷發展壯大的JavaScript在滿足他對速度的追求的同時還能實現更多的功能。他使用CoffeeScript來編寫整個游戲并非常喜愛它的縮進排版和箭頭標識符。特別令他印象深刻的一點是箭頭標識符可以非常快速的創建內聯函數。

他利用自己三年前編寫的基于HTML的編輯器在服務器上編寫代碼。這樣的好處是他可以通過訪問編輯器的URL來在任意一臺電腦上開始他的開發工作。他用過Windows、Mac和ChromeOS并非常支持ChromeOS的云理念。

圖4 作者自制的基于網絡的編輯器

WebSocket和服務器

作者利用CoffeeScript來編寫服務器端程序并用Node.js來運行。他希望這款游戲能夠同時支持單人模式和多人模式。當玩家進行單人模式游戲時會開啟一個本地服務器。程序通過一個偽WebSocket來連接到本地服務器。這樣的好處是可以在一個真實的網絡環境中來測試代碼，從而簡化調試的過程。所有的調試和單步調試都在一個進程中完成。另外，他還可以在這個偽WebSocket中設置網絡延時和抖動來模擬復雜的網絡環境。

在開發即時戰略類游戲時，開發者通常會選擇鎖步（Lock Step）方法。但是Istrolid得作者并沒有這么做。他認為鎖步已經過時，不易于編寫（尤其是用JavaScript編寫時）。而且在這個個人電腦普遍擁有高帶寬的時代，鎖步的優勢已不再明顯。他采用delta編碼方式，并僅將變動的數據從服務器傳給每個玩家的服務器上。

圖5 Istrolid的網絡結構

AudioContext

瀏覽器的音頻播放能力已經改善許多。作者通過過程生成技術來創建背景音樂，并創建一個隨著游戲的進行動態響應的鼓。當一個單位被集中或者爆炸時他會提高這個鼓的音量。他將每一個武器開火時的聲音的音量設定成一個隨機數以保證每一個武器的聲音都有差別，盡管這個差別很細微。除非要開發一個音樂游戲否則作者不推薦在這方面花太多時間。

HTML UI

如果游戲中的UI非常多的話，那么完全靠自己用代碼來實現就會非常困難。這時就需要一些些復雜的UI框架來進行輔助。對于HTML5游戲來說，無需使用復雜的工具包即可實現復雜的UI效果。作者還利用HTML5的特性自己設計了一個響應式框架從而簡化UI的編寫過程。

Electorn “Shell”

如今將HTML5游戲編譯成適合于Windows、Mac或Linux的桌面應用程序非常容易。Istrolid的作者非常推薦那些因為插件拓展、瀏覽器過時或者驅動故障等問題頭疼的開發者嘗試一下Electron。同時這也為把你的游戲發布到類似Steam這樣需要提供可下載文件的游戲平臺創造了可能。

圖6 Electron

點擊閱讀原文，查看原文章～

頁游戲的開發流程可以根據項目的規模和復雜性而有所不同，但通常包括以下一般步驟，希望對大家有所幫助。北京木奇移動技術有限公司，專業的軟件外包開發公司，歡迎交流合作。

1.需求分析：

確定游戲的概念、目標受眾和核心功能。了解玩法、游戲性、關卡設計等方面的需求。明確項目范圍，包括技術要求和預算。

2.概念和設計：

開發游戲的創意概念，包括角色、故事情節、關卡設計和用戶界面。創建草圖和原型，以可視化游戲的外觀和功能。

3.技術棧選擇：

選擇適當的開發技術和框架，例如HTML5、JavaScript、Canvas/WebGL、游戲引擎（如Phaser、Three.js）等。確定開發團隊的技能和工具。

4.游戲引擎或框架的設置：

如果使用游戲引擎或框架，設置游戲引擎環境，導入資源和創建游戲基礎結構。

5.角色和資源設計：

設計游戲中的角色、道具、背景和音頻。創建或獲取所需的游戲資源，如圖形、聲音、音樂和動畫。

6.編碼和開發：

根據游戲設計，編寫游戲的前端代碼，包括游戲邏輯、用戶界面和控制。集成游戲資源，創建游戲界面和玩法。

7.測試：

進行功能測試，包括游戲性測試、界面測試和性能測試。修復和調整問題，確保游戲的穩定性和可玩性。

8.優化：

進行性能優化，確保游戲在不同設備和瀏覽器上順暢運行?？紤]加載時間、幀速率和內存使用。

9.用戶界面（UI）和用戶體驗（UX）：

設計和測試用戶界面，確保用戶界面友好且易于導航。考慮用戶體驗，以提高游戲的吸引力。

10.多平臺適配：

確保游戲能夠在各種設備上運行，包括桌面、移動設備和不同瀏覽器。進行跨瀏覽器和跨設備測試。

11.發布和部署：

準備游戲發布的版本，包括打包和構建。將游戲部署到Web服務器或游戲平臺，確保在線可訪問。

12.營銷和推廣：

制定游戲的營銷和推廣策略，包括社交媒體宣傳、應用商店提交、廣告等方式來吸引玩家。

13. 監控和反饋：

使用分析工具跟蹤游戲性能和玩家行為。收集用戶反饋，了解他們的需求和意見。

14. 更新和維護：

定期更新游戲，添加新功能、修復錯誤和改進性能。與玩家互動，以滿足他們的期望。

15. 合規性和法規：

確保游戲符合適用法規和合規性要求，尤其是涉及隱私、兒童保護和知識產權方面的法規。

以上是一般的網頁游戲開發流程，但具體的流程可能因項目類型、規模和需求而有所不同。成功的網頁游戲開發需要協同合作的開發團隊，包括程序員、設計師、藝術家和測試人員，以確保游戲的質量和可玩性。