開源HTML5 APP開發工具:CanTK

jopen 10年前發布 | 42K 次閱讀 CanTK 移動Web開發框架 移動開發

CanTK是一套基于HTML5 Canvas的GUI系統,它提供了完整的控件庫,事件分發系統,窗口管理系統和不同的平臺的適配。CanTK是為解決HTML5 App開發的兩個基本難題而生的:

開發真正Native體驗的APP

HTML的基因是文檔,它的長處是呈現內容,而不是與用戶交互,所以不管怎么努力,都很難開發出與Native媲美的應用。即使拿目前最優秀的 HTML5 Mobile Framework(如Sencha touch和KendoUI)開發出來的App來看: 與網頁相比,它們確實像APP,但是與真正的APP相比,它們又更像網頁。這就是目前HTML5 APP最尷尬的地方。

HTML難以勝任APP開發的主要原因有:

HTML的基因是文檔,文檔內容微小的改變都會導致界面重排,而用戶操作過程有反饋是現代APP最基本的要求,這些反饋都導致界面需要不斷重排,消耗大量的CPU時間,所以HTML APP有了性能不佳的名聲。

HTML本身并沒有窗口管理機制,通常都是通過加載不同的頁面來模擬不同的窗口。由于頁面加載本身需要時間,HTML5 APP界面切換時通常都要啟用等待動畫,這也極大的影響了用戶體驗。

HTML控件本身的局限讓模擬Native效果變得非常困難,HTML只提供了最基本的控件,雖然可以通過CSS來模擬一些控件,但是和原生GUI庫相比那就差得太遠了。

HTML5用來開發APP本身也是很困難的。很多外行都會說HTML不是很簡單嗎? HTML是很簡單!但是用它開發APP卻是很難的,否則Sencha touch這些庫就不可能賣這么貴了。

上面有些原因可以通過工具或庫來解決,有些原因則完全無法解決的。HTML5的出現確實為HTML APP帶來了轉機,因為HTML5 Canvas元素為開發者帶來了巨大的靈活性,但是大部分廠商都是在CSS上是動腦子,所以幾年之后HTML5 APP仍然不死不活。

CanTK則是完全放棄CSS和HTML控件,在HTML5 Canvas元素上實現的一套完整的GUI系統。雖然CanTK不是第一個在Canvas上做控件的,但是CanTK卻是目前唯一一個完整的GUI系統。

為HTML5游戲引擎提供UI支持

任何一個游戲玩家都知道,游戲場景是只是游戲的一部分,稍微的復雜一點的游戲都有其它界面,比如設置,裝備和商店等等。仔細觀察這些界面, 我們會發現它們除了皮膚外,與普通APP的界面沒有太大不同。HTML5游戲引擎都是基于HTML5 Canvas實現的,它們的優勢是挖掘硬件圖形渲染潛力(拼的就是速度),而GUI控件方面幾乎都很弱。HTML控件表現力不佳,而且很難與HTML5 Canvas無縫集成,這讓HTML5游戲開發者不得不花大量時間去做游戲界面。 

CanTK解放了HTML5游戲開發者在UI的工作,讓他們專注于游戲本身的開發。CanTK為目前流行的HTML5游戲引擎做了適配,其中包括 cocos2d-html5, egret, pixi.js, panda.js和phaser.js,以后還會增加其它游戲引擎的支持。

CanTK的特色:

  • 完全開放源碼給公司和個人免費使用(Under LGPL 2.0)。

  • 完整的GUI系統滿足APP開發的需要。

  • 開發真正的Native-Like的應用程序。

  • 比傳統HTML5 APP更好的性能和體驗。

  • 無縫集成到HTML5各種游戲引擎。

  • 超強擴展性,可以實現任何你想要的控件。

  • 提供可視化開發工具,在線開發HTML5 APP和游戲。

  • 根據Layout參數自動適配不同分辨率和密度的屏幕。

  • 用JSON取代HTML和CSS,全部界面數據放到一個壓縮的JSON文件,一次加載全部界面(數據很少,30個窗口小于40K),界面切換瞬間完成。

  • 支持各種Mobile平臺,測試過的平臺包括iOS, android, windows phone, firefox, blackberry和tizen。

開源HTML5 APP開發工具:CanTK

在線演示:

基本控件:http://gamebuilder.duapp.com/apprun.php?appid=511409555747143

連連看:https://jsgames.sinaapp.com/animal-link/

拼圖游戲:https://jsgames.sinaapp.com/puzzle-1/

計算器:http://dapp8.sinaapp.com/calculator/

秒表:http://dapp8.sinaapp.com/stopwatch/


項目主頁:http://www.baiduhome.net/lib/view/home/1410270811711

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!