当我偶然知道 echarts 底层是由 ZRender 引擎渲染时，内心是非常激动的。无论是简单的统计图，还是复杂的雷达图、地图、关系图，本质上都是通过 ZRender 引擎渲染绘制的。...所以我悟了，相比于 图表库 这种复杂上层建筑，在起步阶段时，一个好的引擎作为底层基础是必不可少的。想打造一个像 echarts 这样几乎完美的图表库，在短时间内是不可能凭空实现的。...所以准备研究一下 ZRender ，体会一下其中的设计思想、结构思路和逻辑实现，先打造一个符合 Flutter 框架的二维绘图引擎库 render2d。这点对于绘制小能手的我感觉还是有些希望的。...所以本系列文章将作为对前端的 ZRender 引擎研究的探索记录。我对 web 前端的知识并不是非常精通，但对于前端的 Canvas 绘制还是略知一二的，借此可能还会巩固一些小前端的知识。...相比而言，Html 的绘制显得更加原始一些，面向过程的味道更浓，这也是封装一个绘制引擎的必要性。
超级浣熊 Cocos引擎10年老用户，精通Cocos全家桶 Cocos-iPhone Cocos2d-x Cocos2d-html5 Cocos2d-js Cocos Creator 2011年开始写中日英多语言博客...supersuraccoon-cocos2d.com Cocos 独立游戏上架AppStore Cocos 电子书上架iBookStore 持续用 cocos 引擎编写各种有趣的东西！...然后在5年前，用 cocos2d-js v3.9把程序重写了一下，把渲染方式升级到了 v3 的风格然后加入了颜色填充的功能。...path：绘制的图形都是由 svg 支持的一个重要标签 path 所内置的命令组成的。 FillRule：组件所支持的 svg 内置的 填充规则 的实际渲染结果，包括了 非零填充，奇偶填充。...要解决这些大的问题，而且还要尽量的不修改引擎，同时支持 Web、 Android、 iOS 平台，还是很有挑战性的。
本文以cocos2d-js为例，但cocos2dx其他版本也是同理的，只是函数名略有不同而已。...vertex shader和fragment shader 2、定义顶点坐标和纹理坐标 3、定义纹理、绑定纹理 4、设置shader的参数 5、每帧draw的时候，gl.drawArrays推送到GPU绘制...vertext shader最后赋值一个vec4给gl_Position，表示该点最终绘制到屏幕上的位置；fragment shader最后赋值vec4给gl_FragColor，表示颜色rgba。
DragonBones首先在Flash和Starling引擎上使用，后续继续推广支持多个游戏引擎，现在已经能很好的支持HTML5和cocos2d-x。 ?...由于cocos2d-js V3.1只支持2.0到2.2版本的DragonBonesDesignPanel，所以我们不能直接使用官网提供的最新版DragonBonesDesignPanel。...另外，由于DragonBones和Cocos2d-js都是开源的， 所以如果还有进一步问题，我们可以学习一下zrong，自己动手修改代码。当然，你需要知道怎么用Flash builder。。。...因为最后一帧到第一帧这个过程，DragonBones自己的运行库会做平缓过度，而cocos2d-js解析则没有这个过度，所以我们就要自己动手加一帧了。 ? 凑合着，还是可以用起来了。...我们可以考虑自行加上js绑定，从而让cocos2d-js也用上最新版的DragonBones。咳咳，当然，这个工作得有需求推动啊，如果有时间的话，笔者也许会尝试一下吧。
andengine中绘制虚拟游戏摇杆非常简单，只需要实现AnalogOnScreenControl模拟摇杆类，在设置一些属性即可。
接下来，为了更方便管理绘制测试效果，使用 Vue 框架集成 ZRender 库。...也就是说需要使用 registerPainter 方法来注册绘制器，理论上来说 ZRender 应该会默认注册一个绘制器，但目前来看，实际上没有。...封装绘制单体 如下所示，现在的目标是让绘制的单体可以依次排列展示，也就是说根据 数组数据 遍历显示 单体组件 PaperBox 。...，也方便接下来的绘制测试。...另外还有路径 Path 的绘制这里暂时不介绍，将在后期单独说明。
cocos2d-js定位 cocos2d-js是喊着Cocos2D-X的金钥匙出身的，它仅仅是Cocos2D-X的一个HTML5实现的分支。...cocos2d-js Cocos2d-js近年来变化很大，但对于JS这个分支的支持却少之又少。前一段时间新出了一个工具叫做Cocos Creator。...结论 按照上述测试方法，我们可以对引擎性能排名做一个大致排列： 第一名：Pixi.js 和 Turbulenz 第二名：Egret 第三名：Cocos2d-js 第四名：Hilo 第五名：enchant.js...50款引擎，使用纯HTML5开发的6款，使用Egret开发的30款，Cocos2d-js的14款，laya的1款，createjs的1款。 统计结果如下： ?...cocos2d-js：老牌引擎，其性能在排名中居中，工作流支持相对完整，推荐。 PlayCanvas：重度3D游戏开发引擎，本文不对3D做推荐。 melonJS：性能不理想，不推荐。
cocos2d-js是cocos2d-x的JavaScript版本，真正跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8...开始cocos2d-js开发前，需要洗洗脑，知道cocos2d-js的平面坐标情况。这跟HTML和canvas的布局都不一样。 ?...在cocos2d-js游戏中，画面的左下角是(0,0)，x从左往右递增，而y是从下往上递增的，跟数学的二维坐标系一致。...Cocos2d-js框架把游戏拆分为很多个场景，当玩家在不同界面切换的时候，框架实际上就是让游戏画面在不同场景中切换。跟Flash一样，cocos2d-js也有最基本的元素——节点Node。...通过这个简单例子，我们对cocos2d-js制作HTML5有了初步印象。
cocos2d-js 定位 cocos2d-js是喊着Cocos2D-X的金钥匙出身的，它仅仅是Cocos2D-X的一个HTML5实现的分支。...cocos2d-js Cocos2d-js近年来变化很大，但对于JS这个分支的支持却少之又少。前一段时间新出了一个工具叫做Cocos Creator。...结论 按照上述测试方法，我们可以对引擎性能排名做一个大致排列： 第一名：Pixi.js 和 Turbulenz 第二名：Egret 第三名：Cocos2d-js 第四名：Hilo 第五名：enchant.js...50款引擎，使用纯HTML5开发的6款，使用Egret开发的30款，Cocos2d-js的14款，laya的1款，createjs的1款。 统计结果如下： ?...cocos2d-js：老牌引擎，其性能在排名中居中，工作流支持相对完整，推荐。 PlayCanvas：重度3D游戏开发引擎，本文不对3D做推荐。 melonJS：性能不理想，不推荐。
本文是谷歌地球引擎（Google Earth Engine，GEE）系列教学文章的第八篇，更多GEE文章请参考专栏：GEE学习与应用（https://blog.csdn.net/zhebushibiaoshifu...GEE；随后，依据Google Earth Engine谷歌地球引擎数据导入与筛选显示中内容，我们将GMTED2010数据产品导入GEE；并对上述二者做好重命名。...同时，依据Google Earth Engine谷歌地球引擎矢量数据裁剪栅格数据中内容，将美国中西部堪萨斯州的矢量图层提取出来。...接下来，我们绘制时间序列图。 ...执行代码，稍等片刻即可看到时间序列图绘制完毕。
超级浣熊 Cocos引擎10年老用户，精通Cocos全家桶 Cocos-iPhone Cocos2d-x Cocos2d-html5 Cocos2d-js Cocos Creator 2011年开始写中日英多语言博客...supersuraccoon-cocos2d.com Cocos 独立游戏上架AppStore Cocos 电子书上架iBookStore 持续用 cocos 引擎编写各种有趣的东西！...今天给大家介绍一个开源项目：SSRLoS Cocos全家桶SSRLoS 一句话介绍一下这个项目，就是基于 cocos 引擎的 2d 光线追踪，视野范围计算，渲染相关的东西。...该项目支持以下Cocos引擎： Cocos2d-x Cocos2d-js Cocos Creator 1.x Cocos Creator 2.x 截至到现在，这个项目的 80% 精力都是放在了算法的优化在优化上...SSRLoS项目我是从 cocos2dx 开始的，后续新功能的开发应该也会从 cocos2dx 入手，毕竟引擎稳定，我最为熟悉。
小游戏引擎 虽然我们前面说了很多HTML5 与小游戏的区别，但请注意，无论怎样的引擎，最终在游戏运行时所做的大部分事情都是随着用户的交互更新画面和播放声音。...游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。...小游戏的开发语言是 JavaScript，那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。...在小游戏中，常见的引擎如下： 引擎 理念 Creat.js 一个非常轻量的，基于 HTML5 开发的游戏、动画、交互应用引擎 Pixi.js 高性能的 WebGL 模式 2D 渲染引擎，API 简陋...（白鹭） 自建工具链工作流，參考Flash AS3 API的移动端H5引|擎，支持打包APP（但是这个好像倒闭了） Cocos2d-js cocos2d-js继承原生cocos2d引擎的设计理念，API
如果要说H5游戏的技术特点，主要应用到 DOM CSS、Canvas、WebGL，以及一些游戏引擎。...游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。...小游戏的开发语言是 JavaScript，那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。...在小游戏中，常见的引擎如下： 引擎 理念 Creat.js 一个非常轻量的，基于 HTML5 开发的游戏、动画、交互应用引擎 Pixi.js 高性能的 WebGL 模式 2D 渲染引擎，API 简陋，常被...） 自建工具链工作流，參考Flash AS3 API的移动端H5引 擎，支持打包APP（但是这个好像倒闭了） Cocos2d-js cocos2d-js继承原生cocos2d引擎的设计理念，API也参考原生
回首自己3年多的cocos2d游戏开发经历，从cocos2d到coco2d-x入门，之后机缘巧合辗转到了cocos2d-js阵营。...在深入使用cocos2d-js以及后来使用cocoscreator做游戏项目的同时，我开始逐步走进Javascript神奇的世界。...在过去的两年时间先后培养了5名cocos2d-js客户端程序员，现在联系他们大多还在做cocos H5方向的工作。...当你修改过Creator引擎源码时，记得一定要使用使用 gulp 命令重新编译引擎才能生效，方法步骤如下： 命令终端切换到目录: Creator安装目录/engine 执行命令：npm install...重振旗鼓面对新一年的到来时，洞察到一个奇怪的现像，在成都游戏行业中cocos2d-js、cocoscreator市场，很多公司招不到人，与HR聊天的过程中听说到“成都要找个做cocos2d-js\cocoscreator
如果要说H5游戏的技术特点，主要应用到 DOM CSS、Canvas、WebGL，以及一些游戏引擎。...游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。...小游戏的开发语言是 JavaScript，那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。...在小游戏中，常见的引擎如下： 引擎 理念 Creat.js 一个非常轻量的，基于 HTML5 开发的游戏、动画、交互应用引擎 Pixi.js 高性能的 WebGL 模式 2D 渲染引擎，API 简陋，常被...） 自建工具链工作流，參考Flash AS3 API的移动端H5引|擎，支持打包APP（但是这个好像倒闭了） Cocos2d-js cocos2d-js继承原生cocos2d引擎的设计理念，API也参考原生
后端 Nodejs Node.js 是一个 Javascript 运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl 开发，实质是对 Chrome V8 引擎进行了封装...游戏 代表 Cocos2d-js 和 Unity 3D，还有 Pomelo、Bearcat 世界上最流行的 2D 游戏引擎之一 Cocos2d 和最流行的 3D 游戏引擎之一均支持 JS 开发游戏。...Cocos2d-JS Cocos2d-JS 是跨全平台的游戏引擎，采用原生 JavaScript 语言，可发布到包括 Web 平台，iOS，Android，Windows Phone8，Mac，Windows...等平台，引擎基于MIT 开源协议，完全开源，免费，易学易用，拥有活跃的社区支持。...Cocos2d-JS 让2D 的游戏编程门槛更低，使用更加容易和高效。
Cocos2d 和最流行的 3D 游戏引擎之一 Unity3D 均支持 JS 开发游戏。...Cocos2d-js Cocos2d-JS 是 Cocos2d-x 的 JavaScript 版本，融合了 Cocos2d-html5 和Cocos2d-x JavaScript Bindings。...在3.0版中，Cocos2d-JS 完成了不同平台工作流的彻底整合，为不同平台提供了统一的开发体验。...无论开发 Web 应用还是原生应用，都可以便捷地采用 Cocos2d-JS 实现“一次开发，全平台运行”。...另一方面，若开发者只想开发一款 Web 轻度休闲游戏，Cocos2d-JS 也专门为此类游戏定制了 Lite Version，直接将 Cocos2d-JS Lite Version 集成到页面中即可使用
随着对Cocos Creator 2.x的实践，以及引擎组大神们的指导，对Cocos Creator 1.x和2.x有了新的了解和认识，在此将这次学习内容与大家分享。...1. 1.x与2.x的渲染区别 ---- Cocos Creator 1.x 是在cocos2d-js基础上增加了组件化与可视化编辑器，随着引擎不断迭代与进化，之前cocos2d-js的渲染设计制约了引擎的发展...从上图可以看到，引擎中维护了一颗场景逻辑树（左边），需要时刻与渲染树（右边）进行数据同步。sgNode仅仅是为了同步Node的所有transform信息和渲染组件的状态信息，这造成了巨大的浪费。 ?...在2.x使用了全新的设计，引擎内部只有一颗逻辑树，场景下包含节点，节点下挂载有渲染组件，简单清晰。因此在2.x中节点与组件对象中，不再有_sgNode这个变量了，使用时需要注意。...小结 ---- 本篇主要是对官方Cocos Creator 2.x引擎在渲染方面的解读，其中对开发者特别有用的渲染性能提升、自定材质、3D摄像机等等，让游戏表现会更加丰富。 ?
熟悉js的dom事件或者flash事件的，基本都能立马明白cc.eventManager的用法。 cc.eventManager有两种注册监听器的方式，一种是原...
其实这里只简单对比3个浏览器，估计也足够代表性了。 结论是： 1、有webgl支持的时候，就可以尽情的耍吧； 2、没有webgl，能native就native。...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
