TAT.dnt 强大的 observejs
In Web开发 on 2015年05月07日 by view: 2,014
6

写在前面

各大 MVVM 框架的双向绑定太难以观察,很难直观地从业务代码里知道发生了什么,我不是双向绑定的反对者,只是认为双向绑定不应该糅合进底层框架,而应该出现在业务代码中,或者是业务和框架之间的代码上,由开发者实现,由开发者决定观察什么,决定响应什么。
以及 Object.observe 的支持度不够好(http://caniuse.com/#search=observe),再者 Object.observe 的功能太弱(如对象内数组的变化无法监听)。
所以就有了 observejs。

TAT.dnt 为 React 扩展 jsReady
In Web开发 on 2015年04月29日 by view: 1,579
2

写在前面

因为用 React 就会需要写jsx
React 会将 jsx 编译成 js。然后 append 到 head 当中。从 fiddler 的请求和 JSXTransformer 源码来看,当在页面使用下面的 html 时候:

会发送两次请求 react_test.js 文件,一次是 JSXTransformer 发送的,一次是浏览器识别 script 标签自动发送的。
上面的 react_test.js 里面全是jsx语法,和 javascript 有点像,如:

TAT.dnt AlloyRenderingEngine 继承
In Web开发 on 2015年04月28日 by view: 1,252
2

写在前面

不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下,多谢支持:)。

前几天发了篇向 ES6 靠齐的 Class.js,当初 jr 为什么不把父类的实例暴露给子类,其原因还是为了延续原型继承的习惯,子类重写就会覆盖掉父类的方法,父类的方法就会丢,如下面的代码,就堆栈溢出了:

而 jr 的 Class.js 可以让你通过 this._super 访问父类同类方法,修复了原型继承同名无法访问父类的弱点,当然也可以 hack 一下,先赋给变量或者某个属性。如:

TAT.dnt AlloyRenderingEngine 之 Shape
In Web开发 on 2015年04月23日 by view: 1,109
0

写在前面

不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下,多谢支持:)。

游戏或者应用中,不是所有的地方都是贴图,Shape 也有很常见的应用场景,如游戏中显示 HP 的血条。大量的 Shape 可以组成矢量图。矢量图的好处是放大不失真,也就是不会变模糊;而位图放大失真,失真的程度要看其平台插值算法的牛 B 程度,但放大效果越好的算法,速度越慢,所以大部分平台会在速度和效果上取个折中。

绘制 Shape 根绘制位图本质不一样,绘制位图可以充分利用 GPU 渲染(当然也可以不用),绘制 Shape 必须经过 CPU 先进行数学计算和图形学相关算法(比如你可以尝试不使用 api,而使用点去绘制贝塞尔曲线、圆形、线条等,你做的所有数学工作,就是计算机做的工作),然后再进行渲染。所以很显然,绘制大量的 Shape 会造成帧率下降。

TAT.dnt 向 ES6 靠齐的 Class.js
In Web开发 on 2015年04月19日 by view: 4,509
4

写在前面

在 2008 年的时候,John Resig 写了一 Class.js,使用的方式如下:

这种看上去很酷很方便的继承方式,居然有一个致命的缺陷。那就是:

TAT.dnt AlloyRenderingEngine 入门
In HTML5,Web开发 on 2015年04月17日 by view: 4,370
4

写在前面

AlloyRenderingEngine 是一款非常快速的渲染引擎,目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,

属于 AlloyGameEngine 下的一个子项目,负责渲染。

因为游戏===复杂的 App,所有 AlloyGameEngine 不仅可以做游戏,也可以制作 App,比如: http://kmdjs.github.io/ppt-editor/

用 AlloyGameEngine 制作 App,如大炮轰蚊子。

快速入口

不读文章可以直接拐向这里:

spritecow 二代:https://kmdjs.github.io/arejs-tool-sprite/

写在前面

工欲善其事必先利其器,最近 fork 了一份 spritecow 代码进行了大量升级改造,
作为 AlloyRenderingEngine 的开发辅助工具之一,确确实实地提高了开发效率,游戏或前端开发更加便利。

TAT.dnt AlloyRenderingEngine 开门大吉
In Web开发 on 2015年02月28日 by view: 6,006
10

快速入口

不读文章可以直接拐向这里:

github:https://github.com/AlloyTeam/AlloyGameEngine

开门大吉

每次输入 kmdj 输入法自动提示【开门大吉】,输入 kmdjs 提示【开幕倒计时】,所以说 kmdjs 不仅仅是满满的血腥味
(kill all module define lib/framework, kill amd and cmd),还有着美好的寓意。
一定要提 kmdjs 是因为 AlloyRenderingEngine 是基于 kmdjs 进行模块化开发(其实使用 kmdjs 已经没有模块的概念了),只要 class 和 namespace。
kmdjs 的核心的核心就是 {},class 全部挂在 {} 上。{} 属于 namespace。所以很自然而然得轻松实现循环依赖。当然 kmdjs 还有很多优点,如:

写在前面

大家阅读此文之前,可以先看一篇 MiloYip 的文章:用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些 nosie 算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是 32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置 globalCompositeOperation 的值为 lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。