In 未分类 on 2015年05月07日 by TAT.dnt view: 2,399

6

写在前面

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

为 React 扩展 jsReady

In 未分类 on 2015年04月29日 by TAT.dnt view: 2,057

2

写在前面

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

1	<script type="text/jsx" src="js/react_test.js"></script>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var Timer = React.createClass({

getInitialState: function() {

return {secondsElapsed: 0};

},

tick: function() {

this.setState({secondsElapsed: this.state.secondsElapsed + 1});

},

componentDidMount: function() {

this.interval = setInterval(this.tick, 1000);

},

componentWillUnmount: function() {

clearInterval(this.interval);

},

render: function() {

return (

<div>Seconds Elapsed: {this.state.secondsElapsed}</div>

);

}

});

AlloyRenderingEngine 继承

In 未分类 on 2015年04月28日 by TAT.dnt view: 1,675

2

写在前面

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var Parent = function () {

}

Parent.prototype.a = function () {

}

var Child = function () {

}

Child.prototype = new Parent();

Child.prototype.a = function () {

this.a();

}

var child = new Child();

child.a();

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

AlloyRenderingEngine 之 Shape

In 未分类 on 2015年04月23日 by TAT.dnt view: 1,418

0

写在前面

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

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

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

向 ES6 靠齐的 Class.js

In 未分类 on 2015年04月19日 by TAT.dnt view: 5,068

4

写在前面

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

var Person = Class.extend({

init: function(isDancing){

this.dancing = isDancing;

},

dance: function(){

return this.dancing;

}

});

var Ninja = Person.extend({

init: function(){

this._super( false );

},

dance: function(){

// Call the inherited version of dance()

return this._super();

},

swingSword: function(){

return true;

}

});

1

<span style="font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; line-height: 1.6;">init为构造函数，通过this._super()访问</span><strong style="font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; line-height: 1.6;">父类同名方法</strong><span style="font-family: sans-serif, Arial, Verdana, 'Trebuchet MS'; line-height: 1.6;">。</span>

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

AlloyRenderingEngine 入门

In 未分类 on 2015年04月17日 by TAT.dnt view: 4,986

4

写在前面

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

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

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

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

游戏/前端开发利器：第二代 spritecow

In 未分类 on 2015年03月09日 by TAT.dnt view: 7,551

1

快速入口

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

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

写在前面

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

AlloyRenderingEngine 开门大吉

In 未分类 on 2015年02月28日 by TAT.dnt view: 6,917

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 还有很多优点，如：

HTML5 粒子编辑器

In 未分类 on 2015年01月23日 by TAT.dnt view: 19,534

8

写在前面

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

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

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

canvas globalCompositeOperation

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

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