整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
為市面上唯一一款純HTML5技術(shù)而備受矚目的青瓷引擎(QICI Engine)，在經(jīng)歷了一個多月的封閉測試之后，近日全新0.95版本正式發(fā)布。據(jù)悉，該版本的青瓷引擎(QICI Engine)已具備了正式開發(fā)游戲的條件，不但保持了已有的專業(yè)HTML5引擎核心要素，對于HTML5游戲的開發(fā)服務(wù)及性能上亦進行了強化，同時還為開發(fā)者量身打造了上百個示例工程，降低學習成本，入門更加輕松。
在此之前，青瓷引擎(QICI Engine)以“讓天下沒有難做的游戲”為口號，出席了各大移動游戲展會及HTML5峰會，從專業(yè)的角度以及實例演示，闡述了“真正HTML5引擎究竟應(yīng)該是什么樣的”，吸引了大批開發(fā)者的關(guān)注。那么，這樣一款純HTML5技術(shù)的游戲引擎究竟能為開發(fā)者帶來什么?0.95版本又解決了哪些問題?
【純JavaScript語言開發(fā) 快速易用無需安裝】
青瓷引擎(QICI Engine)極易入門，采用純JavaScript語言架構(gòu)，即引擎基于JavaScript，工具基于JavaScript，后臺服務(wù)基于Node的JavaScript，這樣的架構(gòu)體系使得系統(tǒng)內(nèi)部各個組件無縫融合，并最大化的減低了對開發(fā)人員的要求，只要懂JavaScript即可開發(fā)游戲，又可自定義擴展開發(fā)工具和后臺服務(wù)的插件。另外，青瓷引擎無需插件和客戶端安裝即可在瀏覽器下運行，甚至在平板和手機上亦能做開發(fā)工作。而在0.95版本中，更是新增了上百個示例工程，為開發(fā)者的學習保駕護航。
【可視化操作 一站式集成 】
目前市面上有些HTML5引擎，只有簡單的制作工具和一堆難懂的渲染API，要做出一款普通的游戲需要耗費較多的精力來開發(fā)配套工具，這對大部分普通開發(fā)者來說成本難以承受。
青瓷引擎(QICI Engine)是專為游戲開發(fā)而生的，采用的是可視化的一站式開發(fā)框架，沒有復雜瑣碎的插件，是為游戲量身定做的所見即所得的集成式開發(fā)工具，擁有UI控件、自適應(yīng)分辨率布局系統(tǒng)、曲線動作編輯器、圖集打包等工具，通過簡單的拖拽都可以實現(xiàn)很多復雜的功能。最大程度簡化開發(fā)者的操作。
同時，游戲數(shù)據(jù)也均為可視化，并且可以直接進行修改。游戲引擎還支持excel配置，游戲的數(shù)據(jù)、數(shù)值甚至一些規(guī)則都是可以通過excel表格直接配置。而曲線動作編輯器方面，策劃或美工可以直接完成界面打開的動畫、界面關(guān)閉動畫、場景切換效果等等一系列界面動作。在0.95版本中，也更加完善了中文API文檔和用戶手冊，給開發(fā)者帶來了極大的便利。
【全套通用組件庫解決方案 自定義編輯器插件】
青瓷引擎(QICI Engine)的編輯器工具完全基于青瓷引擎Widget全套自家通用組件庫解決方案搭建而成，不依賴市面上各種層次不齊的通用組件解決方案，青瓷引擎 Widget組件庫包含了樹表等豐富的常規(guī)組件，以及靈活組件布局功能，組件風格操作模式統(tǒng)一，并且極其高性能，完全能達到和Native組件媲美的高負載和可操作性，這也是青瓷引擎編輯器工具敢于完全基于HTML5開放游戲引擎工具的根基，這樣的架構(gòu)很好的和青瓷引擎融合一體，無需任何插件，即可無縫的查看游戲?qū)ο髮哟谓Y(jié)構(gòu)和調(diào)試，并且用戶可非常容易的基于青瓷引擎 Widget組件庫擴展自定義編輯器插件。
青瓷引擎(QICI Engine)始終致力于開發(fā)者的核心體驗，性能與高效一直是研發(fā)過程中的重中之重，伴隨青瓷引擎0.95版本的到來，除了修復BUG外，還新增TiledMap支持，在性能上面也有著更加卓越的表現(xiàn)。
關(guān)于青瓷引擎(QICI Engine)：
青瓷引擎(QICI Engine)由廈門青瓷數(shù)碼十幾年實際游戲開發(fā)經(jīng)驗總結(jié)、提煉，汲取Unity3D大部分的優(yōu)點，采用純HTML5技術(shù)和JavaScript語言，提供一站式2D游戲開放框架及專業(yè)的編輯器工具，是一款高性能、高效率，更貼合實際，更親近程序、美術(shù)和策劃等開發(fā)人員的真正意義上的HTML5引擎。青瓷引擎將以開源和免費的形式發(fā)布。
strolid是一款采用諸多web新技術(shù)的HTML5游戲。游戲的作者treeform分別使用webGL、WebSocket、AudioContext和作者自制的響應(yīng)式HTML框架來渲染圖形、創(chuàng)建網(wǎng)絡(luò)連接、播放音頻和設(shè)計UI。另外，他還使用了Electron來將游戲打包成Windows和Mac的桌面應(yīng)用程序。筆者這次給大家分享一下Istrolid作者的游戲開發(fā)心得。
2D WebGL
在使用openGL和WebGL引擎時，開發(fā)者通常會創(chuàng)建多個網(wǎng)格和紋理對象。但是Istrolid的作者卻有著自己獨特的建構(gòu)方法。他通過一個網(wǎng)格和紋理對象來繪畫所有的游戲內(nèi)容。游戲中的飛船有非常簡單的多邊形構(gòu)成，有的甚至是由若干個三角形構(gòu)成的。因此作者認為沒有必為每一個要繪制的物體都新建一個網(wǎng)格對象。
取而代之的是創(chuàng)建一個動態(tài)的網(wǎng)格并在每一幀畫面中通過代碼來調(diào)整這個網(wǎng)格。這樣會大大加快繪制的速度。這種方法和通常被開發(fā)者們棄用的openGL的immediate模式比較類似。同時，作者不推薦使用 3D ModelView的矩陣。在編寫Istrolid時，他僅僅將一個視點的矩形傳遞給了著色器。因此這款游戲是完全基于2D引擎的。
圖1 游戲中的飛船均由簡單的多邊形構(gòu)成
紋理對象也很簡單，而且和網(wǎng)格對象一樣是動態(tài)的。在一個區(qū)域或者地形上繪制圖片時，游戲程序會加載這個紋理對象并將它放到一個實時打包的紋理地圖集中。之后程序會根據(jù)新的UI坐標系來創(chuàng)建網(wǎng)格對象。
圖2 2048px*2048px的地圖集
作者對著色器的操作也很簡單。他將所有的顏色都轉(zhuǎn)換到了HSV顏色空間中以便于進行顏色的調(diào)整。
圖3 HSV顏色空間
Coffee Script
JavaScript快得難以置信。作者原本利用Panda3d和Python來編寫卻發(fā)現(xiàn)Python并不能滿足他對速度的需求。他認為不斷發(fā)展壯大的JavaScript在滿足他對速度的追求的同時還能實現(xiàn)更多的功能。他使用CoffeeScript來編寫整個游戲并非常喜愛它的縮進排版和箭頭標識符。特別令他印象深刻的一點是箭頭標識符可以非常快速的創(chuàng)建內(nèi)聯(lián)函數(shù)。
他利用自己三年前編寫的基于HTML的編輯器在服務(wù)器上編寫代碼。這樣的好處是他可以通過訪問編輯器的URL來在任意一臺電腦上開始他的開發(fā)工作。他用過Windows、Mac和ChromeOS并非常支持ChromeOS的云理念。
圖4 作者自制的基于網(wǎng)絡(luò)的編輯器
WebSocket和服務(wù)器
作者利用CoffeeScript來編寫服務(wù)器端程序并用Node.js來運行。他希望這款游戲能夠同時支持單人模式和多人模式。當玩家進行單人模式游戲時會開啟一個本地服務(wù)器。程序通過一個偽WebSocket來連接到本地服務(wù)器。這樣的好處是可以在一個真實的網(wǎng)絡(luò)環(huán)境中來測試代碼，從而簡化調(diào)試的過程。所有的調(diào)試和單步調(diào)試都在一個進程中完成。另外，他還可以在這個偽WebSocket中設(shè)置網(wǎng)絡(luò)延時和抖動來模擬復雜的網(wǎng)絡(luò)環(huán)境。
在開發(fā)即時戰(zhàn)略類游戲時，開發(fā)者通常會選擇鎖步（Lock Step）方法。但是Istrolid得作者并沒有這么做。他認為鎖步已經(jīng)過時，不易于編寫（尤其是用JavaScript編寫時）。而且在這個個人電腦普遍擁有高帶寬的時代，鎖步的優(yōu)勢已不再明顯。他采用delta編碼方式，并僅將變動的數(shù)據(jù)從服務(wù)器傳給每個玩家的服務(wù)器上。
圖5 Istrolid的網(wǎng)絡(luò)結(jié)構(gòu)
AudioContext
瀏覽器的音頻播放能力已經(jīng)改善許多。作者通過過程生成技術(shù)來創(chuàng)建背景音樂，并創(chuàng)建一個隨著游戲的進行動態(tài)響應(yīng)的鼓。當一個單位被集中或者爆炸時他會提高這個鼓的音量。他將每一個武器開火時的聲音的音量設(shè)定成一個隨機數(shù)以保證每一個武器的聲音都有差別，盡管這個差別很細微。除非要開發(fā)一個音樂游戲否則作者不推薦在這方面花太多時間。
HTML UI
如果游戲中的UI非常多的話，那么完全靠自己用代碼來實現(xiàn)就會非常困難。這時就需要一些些復雜的UI框架來進行輔助。對于HTML5游戲來說，無需使用復雜的工具包即可實現(xiàn)復雜的UI效果。作者還利用HTML5的特性自己設(shè)計了一個響應(yīng)式框架從而簡化UI的編寫過程。
Electorn “Shell”
如今將HTML5游戲編譯成適合于Windows、Mac或Linux的桌面應(yīng)用程序非常容易。Istrolid的作者非常推薦那些因為插件拓展、瀏覽器過時或者驅(qū)動故障等問題頭疼的開發(fā)者嘗試一下Electron。同時這也為把你的游戲發(fā)布到類似Steam這樣需要提供可下載文件的游戲平臺創(chuàng)造了可能。
圖6 Electron
點擊閱讀原文，查看原文章～
頁游戲的開發(fā)流程可以根據(jù)項目的規(guī)模和復雜性而有所不同，但通常包括以下一般步驟，希望對大家有所幫助。北京木奇移動技術(shù)有限公司，專業(yè)的軟件外包開發(fā)公司，歡迎交流合作。
1.需求分析：
確定游戲的概念、目標受眾和核心功能。了解玩法、游戲性、關(guān)卡設(shè)計等方面的需求。明確項目范圍，包括技術(shù)要求和預(yù)算。
2.概念和設(shè)計：
開發(fā)游戲的創(chuàng)意概念，包括角色、故事情節(jié)、關(guān)卡設(shè)計和用戶界面。創(chuàng)建草圖和原型，以可視化游戲的外觀和功能。
3.技術(shù)棧選擇：
選擇適當?shù)拈_發(fā)技術(shù)和框架，例如HTML5、JavaScript、Canvas/WebGL、游戲引擎（如Phaser、Three.js）等。確定開發(fā)團隊的技能和工具。
4.游戲引擎或框架的設(shè)置：
如果使用游戲引擎或框架，設(shè)置游戲引擎環(huán)境，導入資源和創(chuàng)建游戲基礎(chǔ)結(jié)構(gòu)。
5.角色和資源設(shè)計：
設(shè)計游戲中的角色、道具、背景和音頻。創(chuàng)建或獲取所需的游戲資源，如圖形、聲音、音樂和動畫。
6.編碼和開發(fā)：
根據(jù)游戲設(shè)計，編寫游戲的前端代碼，包括游戲邏輯、用戶界面和控制。集成游戲資源，創(chuàng)建游戲界面和玩法。
7.測試：
進行功能測試，包括游戲性測試、界面測試和性能測試。修復和調(diào)整問題，確保游戲的穩(wěn)定性和可玩性。
8.優(yōu)化：
進行性能優(yōu)化，確保游戲在不同設(shè)備和瀏覽器上順暢運行。考慮加載時間、幀速率和內(nèi)存使用。
9.用戶界面（UI）和用戶體驗（UX）：
設(shè)計和測試用戶界面，確保用戶界面友好且易于導航。考慮用戶體驗，以提高游戲的吸引力。
10.多平臺適配：
確保游戲能夠在各種設(shè)備上運行，包括桌面、移動設(shè)備和不同瀏覽器。進行跨瀏覽器和跨設(shè)備測試。
11.發(fā)布和部署：
準備游戲發(fā)布的版本，包括打包和構(gòu)建。將游戲部署到Web服務(wù)器或游戲平臺，確保在線可訪問。
12.營銷和推廣：
制定游戲的營銷和推廣策略，包括社交媒體宣傳、應(yīng)用商店提交、廣告等方式來吸引玩家。
使用分析工具跟蹤游戲性能和玩家行為。收集用戶反饋，了解他們的需求和意見。
定期更新游戲，添加新功能、修復錯誤和改進性能。與玩家互動，以滿足他們的期望。
確保游戲符合適用法規(guī)和合規(guī)性要求，尤其是涉及隱私、兒童保護和知識產(chǎn)權(quán)方面的法規(guī)。
以上是一般的網(wǎng)頁游戲開發(fā)流程，但具體的流程可能因項目類型、規(guī)模和需求而有所不同。成功的網(wǎng)頁游戲開發(fā)需要協(xié)同合作的開發(fā)團隊，包括程序員、設(shè)計師、藝術(shù)家和測試人員，以確保游戲的質(zhì)量和可玩性。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
