好消息!Html5游戏和动画的福音

今年基本都淡出了cocos2d-js的开发,更多集中在普通H5应用上,还有自己的Fanvas组件(http://code.tencent.com/),做canvas动画。

不过,最近回头一看WebGL的消息,发现两个大好事。

一个呢,就是随着大家有钱起来,街上用iPhone 6、6s的人越来越多了,ios 9的覆盖率也越来越高。ios 9代表什么呢?代表强有力的支持webgl啊。

另外,Android方面也有好消息。Android在H5这一块一直跟不上时代,或者准确说是跟不上时代的国内Android手机厂商,迟迟不升级Android 5、6,基本都是4.x的版本。而4.x实际不是google的亲儿子,里边的webkit对h5支持非常烂,当然就包括不支持WebGL了。做前端开发的同学应该深受其害,当然包括我自己。

今天,跟总监交流一下,听说QQ浏览器6.2已经加入了blink的chromium内核(可能说法不准确),支持WebGL了。这个是大事啊!在Android 4.X的系统中安装,也可以支持WebGL,虽然不说这运行效率非常高,但至少比canvas动画要高效一个档次。

再另外,还有一个重磅消息,微信和手机QQ将在年后也会更新到最新的QQ浏览器内核,这将意味着,到时微信/手Q直接打开一个游戏链接,就可以用上WebGL了。!!!!

相对比,白鹭引擎、cocos2d-js官方出的所谓runtime,可能原生的webgl来得更纯粹一些,不需要任何的附加条件就可以使用GPU加速。鄙人了解过白鹭引擎的runtime,当时我兴高采烈的想试试,结果发现必须要申请白名单,而且最终只能在一些指定的APP上发布游戏(例如玩吧),这不是开玩笑吗?这并不是我们追求的H5游戏!

欢迎大家一起来关注这些好消息。

最后,上几张图,庆祝一下。

1、小米3,Android 4.4.4,运行3d的场景。

2、使用WebGL和Canvas 2d两种情况的渲染效率对比。(上图是canvas 2d,下图是webgl,帧频明显高一档次,粒子系统效果也更好)

DEMO地址:http://kenkozheng.github.io/cocos/hungry_hero/index.html (不过,如果直接打开,默认只使用canvas 2d模式,因为cocos2d-js引擎指定了这个模式,需要稍稍修改引擎代码才能在Android上启动WebGL)

时间: 2024-09-30 06:55:42

好消息!Html5游戏和动画的福音的相关文章

基于HTML5的高性能动画与游戏

其实这篇文章类似版本早在12年就在网上各处出现了,也随着HTML5的兴起,HTML的新特性也是倍受开发者们追捧,自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的,笔者也是在12年接触的相关技术,不过俗话说"隔行如隔山",随着大前端时代的到来,前端的工作范围和知识疆界也在不断的扩展,需要的知识结构和知识体系也在不断的丰富,最近也基于所在团队不断需要有新人有这方面的知识储备,于是就有了此文.当然本文并不会提供任何一段完整可用的代码,伸手党也请耐下心来看吧,理解了原理实现其实是一

【译】html5游戏入门

[译]html5游戏入门 原文链接 简介 如果你想用canvas做个游戏,那么来对地方了. 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建canvas标签 废话不多说,我们必须创建一个canvas标签,简单起见,用一下不喜欢的jQuery var CANVAS_WIDTH = 480; var CANVAS_HEIGHT = 320; var canvasElement = $("<canvas width='" +

javascript+HTMl5游戏下载,开发一个都能月薪上万!舅服你

HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,HTML5一定会广泛使用,至少在网页动画方面,下面是一些利用HTML5完成的游戏作品.你是否能在这个领域有所建树就看你掌握H5多少技能啦? HTML5切水果游戏: 这曾是风靡全球的一款手机APP游戏切水果,现在JS小组已经将其改版成HTML5,并将其开源.下面的所有游戏我都已经用到自己的域名上线了,想

JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)

继之前用游戏引擎(青瓷引擎)做了斗地主单机版游戏之后,这里分享下使用socket.io来实现网络对战,代码可已放到github上,在此谈谈自己整个的开发思路吧. 客户端代码 服务端代码 (点击图片进入游戏体验) 前文链接: javascript开发HTML5游戏--斗地主(单机模式part1) javascript开发HTML5游戏--斗地主(单机模式part2) javascirpt开发HTML5游戏--斗地主(单机模式part3) 本文章为网络对战第一部分内容.主要内容如下: 简介 服务端项

[转载]HTML5游戏开发资源

https://github.com/vicalloy/html5gamedev/blob/master/README.md 游戏引擎 名称 许可协议 流行度 Github Watch 关键特性 备注 Phaser MIT   4000+ TypeScript, 2D, WebGL 使用Pixi.js作为图像引擎.功能完善,并提供了超过的250+的范例.推荐使用 Pixi.js MIT   4000+ 2D, WebGL Pixi.js 是一个 2D webGL 渲染器,在浏览器不支持WebGL

9个绚丽多彩的HTML5进度条动画赏析

进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果.页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改变进度条的值,使用起来比较方便.另外以前介绍过一款CSS3 3D进度条,其风格也类似. 在线演示 源码下

JS开发HTML5游戏《神奇的六边形》(四)

近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容太多,为方便大家阅读,所以分成四部分来讲解. 本文为第四部分,主要包括: 16.分数往上飘动画 17.形状飞入动画 18.其他动画表现添加 19.游戏结束界面 20. 添加LOGO 21. 渲染优化 若要一次性查看所有文档,也可点击这里. 十六. 分数往上飘的动画 在表现加分时,分数会有个缩放的效果,然后往上

HTML5游戏实战之160代码实现黄金矿工

黄金矿工是一款在flash时代红极一时的游戏,变种非常多,今天介绍它的html5版本制作过程. 这是一款结合了商业元素的游戏,在游戏的某些页面上有企业的品牌露出,这也是html5游戏盈利的一种方式,您可以根据需要替换成需要的品牌. 首先show一下最终成果,PC玩家点这里 手机玩家扫描二维码: 如果您需要在本游戏的基础上加以改进点这里. 在开始介绍游戏开发步骤前,先打个广告,对html5游戏开发,TangIDE 或者Cantk 感兴趣的朋友请扫描下方二维码,加入七巧板官方QQ交流群,一起交流做h

HTML5游戏实战(4): 20行代码实现FlappyBird

这个系列很久没有更新了.几个月前有位读者调侃说,能不能一行代码做一个游戏呢.呵呵,接下来一段时间,我天天都在想这个问题,怎么能让GameBuilder+CanTK进一步简化游戏的开发呢.经过几个月的努力,虽然还是做不到一行代码做一个游戏,但是GameBuilder的功能已经有了质的突破了.今天我们用FlappyBird为例介绍一下用GameBuilder +CanTK开发游戏的方法,整个游戏用了不到20行代码. CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发H