开源HTML5 APP开发神器CanTK发布

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

  1. 开发真正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系统。

  1. 为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)。
  • 完整的GUI系统满足APP开发的需要。
  • 开发真正的Native-Like的应用程序。
  • 比传统HTML5 APP更好的性能和体验。
  • 无缝集成到HTML5各种游戏引擎。
  • 超强扩展性,可以实现任何你想要的控件。
  • 提供可视化开发工具,在线开发HTML5 APP和游戏。
  • 根据Layout参数自动适配不同分辨率和密度的屏幕。
  • 用JSON取代HTML和CSS,全部界面数据放到一个压缩的JSON文件,一次加载全部界面(数据很少,30个窗口小于40K),界面切换瞬间完成。
  • 支持各种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 (如果您觉得有用,请加星,谢谢:))

APP开发工具:http://www.drawapp8.com/appedit.php

游戏开发工具:http://gamebuilder.duapp.com/

  • 屏幕截图

时间: 2024-10-10 08:54:38

开源HTML5 APP开发神器CanTK发布的相关文章

开源HTML5 APP开发神器CanTK发布[HTML5]

http://book.zhulang.com/299065/734548.html http://book.zhulang.com/299065/734549.html http://book.zhulang.com/299065/734550.html http://book.zhulang.com/299065/734551.html http://book.zhulang.com/299065/734552.html http://book.zhulang.com/299065/7345

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

html5 app开发重大消息-腾讯在技术端推进Html5生态发展

中新网5月3日电 日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公司副总裁钟翔平表示,TBS带来了浏览能力的升级,为Html5开发者提供更强的技术能力,将真正在技术端推进Html5生态的发展. 尽管目前Html5所带来的移动互联网营销异常火爆,但据很多html5 app开发者反映,由于开发Html5页面后需要反复测试,导致开发适配成本很高,同时为

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

WeX5开源免费跨端开发工具-html5 app开发就用WeX5

http://www.wex5.com/wex5/?utm_source=Baidu-0815

HTML5 Plus移动App(5+App)开发入门指南

HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范.HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现.

JS动态更新HTML5 APP页面的结构(包括功能和布局)

HTML5 APP开发算是越来越流程了.当然,开发这样的HTML5 APP有什么好处呢.笔者认为:可以通过后台JS动态更新HTML5 APP页面的结构,是一大优势. 那如何实现该功能呢. 首先,得知道其原理:为什么可以通过后台JS就可以更新前台APP. 接着,得知道操作步骤是怎样的. 详细内容,可以查看如下链接: HTML5 APP 实现后台JS更新APP前端页面功能 HTML5 APP开发之动态调整页面布局 如需要源码,请@我 (一份完整的源代码,收费1元)

HTML5来了:5个好用的混合式App开发工具

在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本.周期短开发出体验效果好的App,所以当下用HTML5远比赌HTML5更现实.于是,一个一直被提及但是从没有占据过统治地位的概念又一次走进了移动开发者们的视野,那就是跨平台开发. 目前国内外已经有很多基于HTML5的跨平台开发工具,你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一

开源HTML5 Canvas游戏Runtime发布

Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能的恶名! Cantk-Runtime提供高效的HTML5 Canvas绘图API.兼容HTML5 Audio的游音乐/音效播放接口和原生的编辑器接口, 让HTML5 Canvas 2D游戏只需要简单的适配就可以跑起来. 欢迎加入QQ群 :223466431 特色 0.开源.开放全部源码,可用于商业和