开源HTML5 APP开发神器CanTK发布

李先静 2014-09-09 06:14:00
加精
CanTK是一套基于HTML5 Canvas的GUI系统,它提供了完整的控件库,事件分发系统,窗口管理系统和不同的平台的适配。CanTK是为解决HTML5 App开发的两个基本难题而生的:

开发真正Native体验的APP。
HTML的基因是文档,它的长处是呈现内容,而不是与用户交互,所以不管怎么努力,都很难开发出与Native媲美的应用。即使拿目前最优秀的HTML5 Mobile Framework(如Sencha touch和KendoUI)开发出来的App来看: 与网页相比,它们确实像APP,但是与真正的APP相比,它们又更像网页。这就是目前HTML5 APP最尴尬的地方。

HTML难以胜任APP开发的主要原因有:

1.HTML的基因是文档,文档内容微小的改变都会导致界面重排,而用户操作过程有反馈是现代APP最基本的要求,这些反馈都导致界面需要不断重排,消耗大量的CPU时间,所以HTML APP有了性能不佳的名声。

2.HTML本身并没有窗口管理机制,通常都是通过加载不同的页面来模拟不同的窗口。由于页面加载本身需要时间,HTML5 APP界面切换时通常都要启用等待动画,这也极大的影响了用户体验。

3.HTML控件本身的局限让模拟Native效果变得非常困难,HTML只提供了最基本的控件,虽然可以通过CSS来模拟一些控件,但是和原生GUI库相比那就差得太远了。

4.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,以后还会增加其它游戏引擎的支持。以下HTML5游戏引擎的大佬们对CanTK的评价:

游戏引擎cocos2d-html5作者林顺的评价:

基本覆盖常用的app功能了,online demo做的非常用心。要是图表相关的控件能绑定数值,那就是开发app的神器了。
游戏引擎egret开发者的评价:

看起来很赞!!
游戏引擎pixi.js开发者的评价:

This is great! lovely job @xianjimli!
游戏引擎phaser.js开发者的评价:

Very nice :) The UI builder tool loads really slow for me, but it looks great.
游戏引擎panda.js开发者的评价:

Amazing! :D
CanTK的特色:

完全开放源码给公司和个人免费使用(Under LGPL 2.0)。

1.完整的GUI系统满足APP开发的需要。

2.开发真正的Native-Like的应用程序。

3.比传统HTML5 APP更好的性能和体验。

4.无缝集成到HTML5各种游戏引擎。

5.超强扩展性,可以实现任何你想要的控件。

6.提供可视化开发工具,在线开发HTML5 APP和游戏。

7.根据Layout参数自动适配不同分辨率和密度的屏幕。

8.用JSON取代HTML和CSS,全部界面数据放到一个压缩的JSON文件,一次加载全部界面(数据很少,30个窗口小于40K),界面切换瞬间完成。

9.支持各种Mobile平台,测试过的平台包括iOS, android, windows phone, firefox, blackberry和tizen。

在线demo

基本控件: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/

项目链接
源码下载:https://github.com/drawapp8/cantk (如果您觉得有用,请加星,谢谢:))


...全文
9542 77 打赏 收藏 转发到动态 举报
写回复
用AI写文章
77 条回复
切换为时间正序
请发表友善的回复…
发表回复
shihun_feel 2017-01-05
  • 打赏
  • 举报
回复
支持,开源的都是极好的,技术又很牛。
you23333333 2016-12-25
  • 打赏
  • 举报
回复
支持楼主 继续更新
hookee 2016-12-04
  • 打赏
  • 举报
回复
xiaowu_lee 2016-12-03
  • 打赏
  • 举报
回复
一定好好学习一下
业余草 2016-11-29
  • 打赏
  • 举报
回复
好久了,还没结贴!!!
cheneyjava 2016-11-28
  • 打赏
  • 举报
回复
不错不错 顶一个
javaMyGod 2016-11-23
  • 打赏
  • 举报
回复
非常感谢楼主的慷慨,支持你,。。
李先静 2015-07-17
  • 打赏
  • 举报
回复
引用 68 楼 flytheriver 的回复:
ios上非常流畅,很赞啊,但是安卓上要卡死了 楼主有办法么
android上可以用cantk-runtime加速:https://github.com/drawapp8/cantk-runtime
flytheriver 2015-07-14
  • 打赏
  • 举报
回复
ios上非常流畅,很赞啊,但是安卓上要卡死了 楼主有办法么
bluebaby88 2015-06-30
  • 打赏
  • 举报
回复
学习学习,好东西啊
李先静 2015-06-27
  • 打赏
  • 举报
回复
Cantk HTML5游戏实战《银行卡牌连连看看游戏》: http://blog.csdn.net/shenhaijy/article/details/46658935
caxieyou 2015-06-11
  • 打赏
  • 举报
回复
干货啊~~~~~~~~
sxfgen 2015-06-09
  • 打赏
  • 举报
回复
路过 围观
mirrorspace 2015-05-29
  • 打赏
  • 举报
回复
好强大啊感觉
udbyygyt 2015-05-27
  • 打赏
  • 举报
回复
确实牛。。。顶顶。。。
李先静 2015-05-17
  • 打赏
  • 举报
回复
cantk-runtime开源了:https://github.com/drawapp8/cantk-runtime
mnb678678 2015-04-15
  • 打赏
  • 举报
回复
可以可以。。。
李先静 2015-04-07
  • 打赏
  • 举报
回复
CanTK 20行代码实现FlappyBird: http://blog.csdn.net/absurd/article/details/44915637
暗尘掩月 2015-03-27
  • 打赏
  • 举报
回复
mark
诗就 2015-03-27
  • 打赏
  • 举报
回复
好强大的样子,必须支持
加载更多回复(52)

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧