自2010年接触HTML5以来，也算是个老鸟了，还记得第一次分享时，得到的大家的认可和鼓励，现在已然这方面的专家了，所以有了录套HTML5游戏引擎视频的想法，以回报大家，也让那些想从事HTML5行业的朋友有迹可循，不至于太迷茫。
这套视频从零开始，深入浅出了HTML5游戏引擎的方方面面，套路很全，非常适合有一些JS基础的朋友学习，先奉上第一讲【js基础进阶】，大纲如后附图：
论坛回复 /
(3 / 1844)
danny.chiu
浏览: 79749 次
来自: 北京
if (AIS.modual[modual].ns)
lokinell2006 写道个人觉得现在dojo的整体架构做 ...
lokinell2006 写道个人觉得现在dojo的整体架构做 ...
学习了 这个不一般
fch415 写道To rain:
——更 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'全硬件加速的HTML5游戏引擎是这样炼成的
　　由于HTML5具备跨平台、易移植、部署简单、节省成本等优点，所以从2012年甚至更早的时候，HTML5就被炒得火热起来。但事与愿违，这一年多来，由于HTML5的性能瓶颈，导致成功的HTML5少之又少，市场情绪低迷。正是在这样的背景下，2013年2月在西班牙巴塞罗那世界移动通信大会上正式发布的全球首款基于硬件渲染的HTML5游戏处理引擎&&Sphinx，于近日开放公测和上线开发者社区，正式吹响了全硬件加速HTML5游戏引擎的进攻号角。　　《程序员》：大家都看到HTML5的好处了，那么在HTML5游戏遇阻之后，大家又是怎样的反应？　　罗志宇：有三种情况。第一种最普遍，就是观望，等待整个产业进步以后，再继续跟进。第二种是基于现状的妥协，比如不做重度网游，只做休闲游戏；不做版，只做版。因为从性能上来说，苹果是所有厂商里图形做得最好的，可以反过来抵消一些游戏展现能力的缺陷。第三种是不妥协，积极寻求可行的解决办法。这种团队认为自己已在HTML5游戏上花费了大量心血，而且也小有成绩，他们不想在用户体验上打折扣，所以就想寻求突破。在这点上，他们与欧朋做Sphinx的初衷非常切合。　　《程序员》：所以想到了要做Sphinx？　　罗志宇：可以这么说。我们当时的出发点非常简单。作为平台厂商，天生就要做HTML5，而如果游戏厂商想用HTML5，却失望而归的话，平台就很容易衰败。所以我们想解决HTML5游戏存在的问题。　　分析之后，我们发现导致HTML5性能瓶颈的主要原因是在HTML5和底层硬件之间隔了一个浏览器，而浏览器的首要任务是展现网页，而非游戏。　　由于我之前是做渲染技术出身的，所以很了解游戏一般会卡在两个地方：一个是CPU效能，另一个是GPU效能。CPU效能更多的是通过JavaScript发挥出来，而想真正大幅提高游戏性能的话，必须要充分利用GPU效能。　　其实，早在2007年我还在总部时，就对Sphinx引擎相关的渲染技术进行了验证。第一版用在Opera移动浏览器上面，Sphinx是第二版。由于渲染技术对浏览器性能提升明显，所以当时从Opera Mobile 9直接跳过Opera Mobile 10，发布了Opera Mobile 11。同期的浏览器在卷动页面时都会有马赛克一样的方格，然后才慢慢填清晰起来，而使用渲染技术的Opera Mobile 11没有马赛克，这可以说是第一次尝试硬件加速。所以，Sphinx的开发不是一蹴而就的，经历了长期的技术沉淀。　　《程序员》：Sphinx的架构是怎样的？为何称为全硬件加速引擎？　　罗志宇：开始时，我们认为JavaScript引擎会有很多问题，但后来发现似乎并没有那么多，更多的原因在于开发者自己没有做好优化。只要做好优化，帧率完全可以从10帧提升到35帧。但要想从35帧提升到70帧，就要靠提升渲染引擎来实现。　　以前网页渲染引擎是偏文字渲染精确度的，经常会出现网格对齐这类问题。而游戏更多的是追求速度。因此，这两种渲染引擎的架构完全不同。在Sphinx中，整个浏览器分成前端和后端，前端主要执行页面、JavaScript、CSS，后端是正儿八经的图形渲染引擎。所以，Sphinx的结构很简单，就是一个标准的HTML5前端加上一个强大的游戏级别的图形引渲染擎。　　说起来简单，做起来并不那么容易。因为之前的图形引擎并非是为了游戏而设计，而我们要做的Sphinx较之复杂得多，需要非常精确的调整。实际上，硬件加速GPU的演进只和游戏有关系，整个GPU在最开始发明时就是为了游戏，游戏和GPU之间是一种互相促进和演进的过程。所以游戏引擎用GPU用得最狠、最恰当。整个工艺里，游戏引擎和图形引擎是最好的。浏览器很晚才开使用GPU，所以无法做出游戏引擎的效果。我们所做的就是将游戏引擎所有的设计模式和工作方法都拿过来放到浏览器里面，做出真正意义上的全硬件加速游戏引擎Sphinx。　　《程序员》：Sphinx研发团队是怎样组建起来的？　　罗志宇：这个团队规模蛮小，只有9个人，他们之前专门给联发科定制浏览器。因为内核非常复杂，所以人数越多，沟通成本越高，迭代速度就会降低。我们一般会把整个系统框架和原型梳理出来之后，再根据工作量的情况考虑人员调整。如果一开始就黑压压扑上来一片的话，每个人都不清楚自己要做什么，连开会都变得像打酱油一样。　　欧朋的工程师是一个奇怪的群体，我们对他们本身没有什么特殊要求，但都一专多能。我们不会给每个人贴上固定标签，因为一旦贴上就会对他的职业发展或知识发挥有很大限制。在同一客户端里，所有工作都是交织的。　　《程序员》：Sphinx研发过程中遇到了哪些困难？　　罗志宇：研发Sphinx是一项大工程，为了确保每个环节正确性，我们从技术和人员上做了很多。　　在技术层面，为了确定插入游戏渲染引擎中的东西是否破坏了浏览器的整体性能，我们内部做了很多回归测试，整个Opera有14万的测试用例，每一次改动都是全部重跑一遍。　　在人的层面，我们经历的挑战更大。由于是全新的团队，他们对做这样一个高性能的游戏引擎并不自信，但又很容易满足于一点小小的成绩。为了解决这个问题，我会给他们树立一个理性的高目标，然后推动他们去挑战自己。这个过程经历了两个大困难。第一，项目刚开始时，渲染游戏帧数多在10帧以下，当时大家很沮丧，随便挑一个游戏，涨个5~6帧就开心不已。后来我说，不应该去追求这种表面的东西，应该从结构上分析问题到底出在什么地方，保证整个结构在逻辑和数学上是合理的。这个周期让他们把方向摆正，向前走。第二，Sphinx Beta版正式发布，大家松了口气，觉得前途一片光明。然后，2013年4月，《三国时代OL》制作人张哲带着《不江湖》来了。跑了一下，只有10帧！所有人都郁闷了，一系列问题浮出水面&&GC、渲染合并算法都出现了问题。考虑到之前确实短视一点，我告诉他们，这阶段能做什么，而且会很长一段时间都在这种架构里进行探讨，怎么来解决这些问题。经过努力，我们终于将《不江湖》提升到了70帧，即使在普通浏览器上也能达到30帧以上。　　总体来说，研发Sphinx是一个自然而然的过程，因为工程师喜欢这种更先进的东西，喜欢享受成就感。
最新资讯离线随时看
聊天吐槽赢奖品
相关软件：
大小：1.93 MB
授权：免费
大小：62.51 MB
授权：免费您的位置： >
+ (0) + （0）
最近看到网上一篇文章，标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。
　　针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。
　　2D与3D编程语言设计理念&功能工作流性能学习资料商业应用
　　2D与3D、编程语言对比
　　2D与3D
　　游戏领域中，最直白的一种分类方法便是2D与3D的区分。通常我们都会认为它们是游戏引擎领域两类不同的产品。原文中提及的引擎确实是当下最为流行的HTML5游戏引擎。很多引擎属于2D、3D通吃类型，我们通过一个表格进行对比。
　　编程语言
　　基于HTML5技术的游戏引擎，所需要的脚本必定是Java，只有Java脚本语言才能运行于浏览器中。但目前市场上，出现了很多Java代替品，例如Type、Coffee、Live等等。不同语言直接的定位不同，语言哲学也不尽相同。一些游戏引擎在语言选择上也颇有意思。
　　Engine
　　2D Render
　　3D Render
　　Three.js NO YESYESNO
　　Phaser YESNO YESYES
　　Pixi.js YESNO YESYES
　　Egret YESYESNO YES
　　enchant.js YESNO YESNO
　　craftyJS YESNO YESNO
　　Turbulenz YESYESYESYES
　　cocos2d-js YESNO YESNO
　　PlayCanvas NO YESYESNO
　　melonJS YESNO YESNO
　　Quintus YESNO YESNO
　　Hilo YESNO YESNO
　　可以从表格中看出，下面三个引擎属于2D和3D通吃类型。
　　EgretTurbulenzPlayCanvas
　　在Web游戏领域胜出的编程语言是Java和Type。但绝大部分HTML5游戏引擎还是采用Java语言。只有三款引擎选择支持Type。其中Egret做的最为彻底，仅支持Type，并未推出Java语言版本。
　　从当前前端技术圈环境分析，未来可能很多前端框架或者引擎会推出响应的Type语言分支，从AngularJS宣布将使用Type开发开始，Type在很大程度上被前端认可。不得不说微软在开源圈这一仗打得漂亮。
　　设计理念&功能
　　架构设计是一门大学问，对于开源引擎架构的设计模式主要取决于作者的程序哲学观点和产品定位。将设计思路和功能放在一起对比讨论，比单独功能讨论更有参考意义。一个引擎的功能并非越多越好，功能应围绕引擎定位而定，这样的思路在一些引擎中体现尤为明显，下面我们针对每个引擎一一分析。
　　Three.js
　　Three.js项目创建时间是在2010年的4月24日，到目前位置，应该算是比较老牌的开源项目了。事实上Three.js定义并非一个游戏引擎。在Github主页中，作者很明确的定义了Three.js的定位，叫做&Java 3D library&。它仅仅是一个基于Java语言的3D库而已。当然，你可以用它来做任何事情，无论是游戏，还是炫酷的3D展示。
　　设计理念
　　Three.js在设计之处希望创建一个非常轻量级的3D库，能够帮助开发者快速搭建基于HTML5的3D内容。同时，通过暴露简单的API，将3D内容的开发复杂性降至最低。
　　渲染环境上，Three.js支持WebGL和CCS3D两种渲染模式。从当前使用量和标准普及程度来做分析看，开发者更加倾向于WebGL渲染方式。
　　文本主要想对2D游戏引擎做深入分析，所有没有对Three.js的功能与那些流行的3D引擎加以对比。
　　Pixi.js
　　很多人第一眼看到Pixi.js官网，都会不自觉的认为这是一款游戏引擎。但在主页中作者对于Pixi.js的定义为&2D WebGL renderer with canvas fallback&，翻译为中文是一款依赖于canvas的WebGL渲染器。所以当你看到Pixi.js提供了为数不多的功能时，请不要惊讶，因为它只是一款渲染器。
　　设计理念
　　Pixi.js的设计理念很多程度来源于它的定位，只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。你经常能看到一些游戏引擎，或者产品都基于Pixi.js而开发。
　　最求极致的渲染性能是Pixi.js的首要任务，为了让Pixi.js更加易于使用，作者在API设计上更加参考非常成熟的2D渲染架构 && Flash，并且提供的API也尽量参考了Acon。
　　例如创建一个显示对象，在Pixi.js中被封装为 PIXI.Sprite。如果需要显示图像，借助 PIXI.PIXI.Texture纹理进行渲染数据填充。最终设置显示对象的坐标，代码看起来就像下面这样。
　　varstage = newPIXI.Container（）; vartexture = PIXI.Texture.fromImage（&bunny.jpg&）; varbunny = newPIXI.Sprite（texture）; bunny.posion.x = 80; bunny.posion.y = 60; stage.addChild（bunny）;
不好我反对
关于HTML5游戏引擎深度测评下载
相关电子资料下载
评价:好评中评差评
技术交流、我要发言
发表评论，获取积分！ 请遵守相关规定！提 交
Copyright &
elecfans.com.All Rights Reserved怎么选择html5游戏引擎_百度知道
怎么选择html5游戏引擎
我有更好的答案
我们便假设是否能够反复使用同样的代码，即我们只需要编写第一款游戏然后为之后的游戏换入新图像和声音资产。如果是这样的话一切就简单多了。就像你们所看到的这样，这些过程都很顺利且非常有组织性。我也会描述为何JavaScript被当成是支持我们工作的最佳语言，我们获得机会能够基于HTML5为Spil games创造一系列5款麻将连连看游戏。我们创造的第一款游戏是《Dream Pet Link》。考虑到我们所分配到的任务是基于以下同样的机制但却是不同的主题而创造4款额外的游戏。但这里存在一些问题可能让事情变得更复杂，以及在这些游戏和我们的其它HTML5游戏中创造代码库的过程：*想要在不具有同样机制的其它游戏中重新使用一些代码*关于代码改变的不确定性必须适应图像和音频中的差异*我们可以在之后的循环中发现功能和性能的完善这些注意事项推动着我们去采取与预期不同的设计方法。在此我将与你们分享我在创造这些游戏的过程去年
专注培养IT技术人才
主营：PHP培训，JAVA培训，HTML5培训，UI培训，Linux培训，Python培训
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。HTML5游戏开发引擎-初识CreateJS的详解（图文）-H5教程-PHP中文网QQ群微信公众号还没有收藏HTML5游戏开发引擎-初识CreateJS的详解（图文）Create为CreateJS库，可以说是一款为游戏开发的引擎。打造 HTML5 游戏，构建新游戏，提供构建最新 HTML5 的技术、你可以通过这个网站学习如何构建跨平台和跨终端游戏。这个资源库还会告诉你如何构建多人在线游戏。CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。1.进入createjs首页： 首页有几个tab页，有EASEJS、TweenJS、SoundJS、PrloadJS、ZOE五种.(最新的官网好像没有ZOE的tab页了）EASEJS：用来处理HTML5的canvasTWEENJS：用来处理HTML5的动画调整和javascript属性SOUNDJS：用来帮助简化处理音频相关的APIPRELOADJS：管理和协调程序加载项的类库ZOE：将SWF动画导出为EaseIJS的sprite的工具基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, ome, Firefox 或者 IE 9+ 。 2.首页解析： 3.进入下载页因为这篇博客主要介绍HTML5游戏开发的引擎canvas,所以我们下载EASEJS就可以了。4.帮助文档：
帮助文档里有很多类的介绍，还有对应类的方法、属性、的介绍。不过是英文版本的，暂时还没有找到比较好的中文的版本。ps:如果英文比较差的园友，那就只能用web工具强硬翻译了。具体web工具翻译页面的方法可以看我之前的一篇博客：谷歌/微软/必应web页面免费翻译插件5.引入主要JS： 这个文件是我们需要引入的js文件。v简单demo1.html代码： &!DOCTYPE html&
&html xmlns=&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&/&
&title&First Canvas for CNBlogs&/title&
&script src=&EaselJS-0.8.1/lib/easeljs-0.8.1.min.js&&&/script&&/head&&body&
&canvas id=&canvas& width=&500& height=&500&&&/canvas&
&script src=&Scripts/Index.js&&&/script&&/body&&/html&2.js代码： var count = 0;
window.onload = function () {
canvas = document.getElementById(&canvas&);
// 创建一个舞台对象
stage = new createjs.Stage(canvas);
txt = new createjs.Text(&Hello CNBlogs-&&, &20px Arial&, &#ff7700&);
stage.addChild(txt);
createjs.Ticker.addEventListener(&tick&, tick);
}function tick(e)
txt.text = &Hello CNBlogs-&& + count + &?&;
stage.update();
}3.运行效果： v鼠标经过特效1.html代码： &!DOCTYPE html&&html xmlns=&http://www.w3.org/1999/xhtml&&&head&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&First Canvas for CNBlogs&/title&
&script src=&EaselJS-0.8.1/lib/easeljs-0.8.1.min.js&&&/script&&/head&&body&
&canvas id=&canvas& style=&border:1px #000& width=&1000& height=&500&&&/canvas&
&script src=&Scripts/Flash.js&&&/script&&/body&&/html&2.js代码： var img = new Image();
window.onload = function () {
canvas = document.getElementById(&canvas&);
// 创建一个舞台对象
stage = new createjs.Stage(canvas);
stage.addEventListener(&stagemousedown&, clickCanvas);
stage.addEventListener(&stagemousemove&, moveCanvas);
var data = {
images: [&cnblogsLogo.png&],
frames: { width: 20, height: 20, regX: 10, regY: 10 }
// 关于EaselJS的一些属性或者方法大家可以根据对应的api文档熟悉熟悉。
//例如Sprite可以在这里找到
// file:.../EaselJS-0.8.1/docs/EaselJS_docs-0.8.1/classes/Sprite.html
sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener(&tick&, tick);
}function tick(e) {
var t = stage.getNumChildren();
for (var i = t-1; i &0; i--) {
var st = stage.getChildAt(i);
// 设置单位帧的位置
st.vY += 2;
st.vX += 1;
st.x += st.vX;
st.y += st.vY;
// 设置大小变形
st.scaleX = st.scaleY = st.scaleX + st.vS;
// 设置透明度
st.alpha += st.vA;
if (st.alpha &= 0 || st.y & canvas.height) {
// 如果超标则移除当前的
stage.removeChildAt(i);
// 每做一次操作，需要对舞台一次更新
stage.update(e);
}function clickCanvas(e) {
// 设置鼠标点击出现的图案多
addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2);
function moveCanvas(e) {
// 设置鼠标经过出现的图案少
addS(Math.random() * 2 + 10, stage.mouseX, stage.mouseY, 1);
// addS方法中所有小数或者随机数都是可以根据具体需求随意设置的，
function addS(count,x,y,speed) {
for (var i = 0; i & i++) {
// 关于sprite.clone方法文档的介绍是，返回的是序列的实例，
// 所以每个实例对象都可以用这个方法控制
var sp = sprite.clone();
// 设置图标出现位置
// 利用随机数控制图标随机亮度
sp.alpha = Math.random() * 0.5 + 0.5;
// 设置大小
sp.scaleX = sp.scaleY = Math.random() + 0.3;
// 设置曲线
var a = Math.PI * 2 * Math.random();
//设置速度
var v = (Math.random() - 0.5) * 30 *
sp.vX = Math.cos(a) *
sp.vY = Math.sin(a) *
sp.vS = (Math.random() - 0.5) * 0.2; // scale
sp.vA = -Math.random() * 0.05 - 0.01;// alpha
stage.addChild(sp);
}3.运行效果： 以上就是HTML5游戏开发引擎-初识CreateJS的详解（图文）的详细内容，更多请关注php中文网其它相关文章！共3篇750点赞收藏分享：.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号}