写在前面
不读文章，只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下，多谢支持:)。
前几天发了篇向 ES6 靠齐的 Class.js，当初 jr 为什么不把父类的实例暴露给子类，其原因还是为了延续原型继承的习惯，子类重写就会覆盖掉父类的方法，父类的方法就会丢，如下面的代码，就堆栈溢出了：
|
|
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 一下，先赋给变量或者某个属性。如：
|
|
var Parent = function () { } Parent.prototype.a = function () { alert(1) } var Child = function () { } Child.prototype = new Parent(); Child.prototype.parentA = Child.prototype.a; Child.prototype.a = function () { this.parentA(); } var child = new Child(); child.a(); |
但是这样的话，代码不就很丑陋了吗！？
所以 AlloyRenderingEngine 选择使用了 JR 的 Class.js，然后在其基础之上扩展了静态方法和属性，以及静态构造函数。
所以就变成了这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var Person = Class.extend({ statics:{ //静态构造函数会直接被Class.js执行 ctor:function(){ //这里的this相当于Person }, Version:"1.0.0", GetVersion:function(){ return Person.Version; } }, ctor: function(isDancing){ this.dancing = isDancing; }, dance: function(){ return this.dancing; } }); var Ninja = Person.extend({ ctor: function(){ this._super( false ); }, dance: function(){ // Call the inherited version of dance() return this._super(); }, swingSword: function(){ return true; } }); |
AlloyRenderingEngine 继承
AlloyRenderingEngine 内置了 Container 对象，用来管理元素，Stage 对象也是继承自 Container 对象，
还有，Container 对象继承自 DisplayObject，所以 Container 对象也能够设置 scale、x、y、alpha、rotation、compositeOperation… 等，设置的属性能够叠加到子元素上。
x、y、rotation、scaleX、scaleY、skewX、skewY… 等直接矩阵叠加，也就是子元素的呈现跟父容器、父容器的父容器、父容器的父容器的父容器… 都有关系；
其实 alpha 是乘法叠加 (如：容器的透明度是 0.5，容器内部的元素透明度为 0.9，最后容器内部元素呈现的透明度就是 0.45);；
compositeOperation 先查找自己，自己没定义，再向上查找，直到找到定义了 compositeOperation 的，就使用该 compositeOperation，有点类似决定定位元素找父容器的感觉。
很多情况下，我们需要继承 Container 对象来封装一些自定义的对象。
比如封装一个按钮：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var Button = Container.extend({ ctor: function (image) { this._super(); this.bitmap = new Bitmap(image); this.bitmap.originX = this.bitmap.originY = 0.5; this.add(this.bitmap); //鼠标指针的形状 this.cursor = "pointer"; this._bindEvent(); }, _bindEvent: function () { this.onHover(function () { this.scale = 1.1; }, function () { this.scale = 1.0; }) this.onMouseDown(function () { this.scale = 0.9; }) this.onMouseUp(function () { this.scale = 1.1; }) } }); |
使用这个 button 就很方便了：
|
|
var stage = new Stage("#ourCanvas"); var button = new Button("button.png"); button.x = 100; button.y = 100; button.onClick(function () { console.log("你点击我了"); }) stage.add(button); |
简单吧！
在线演示
地址
演示地址:http://alloyteam.github.io/AlloyGameEngine/tutorial/lesson2.html
Class.js:https://github.com/AlloyTeam/AlloyGameEngine/blob/master/src/are/base.js
AlloyGameEngine:https://github.com/AlloyTeam/AlloyGameEngine
雷斌 2016 年 3 月 24 日
为什么好多的 demo 地址都已经失效找不到了呢·······[泪]
TAT.dnt 2016 年 4 月 27 日
哦。因为项目路径有所变更。统一从这里访问吧 https://github.com/AlloyTeam/AlloyGameEngine