代码改变世界

AlloyRenderingEngine继承

2015-04-28 14:59 【当耐特】 阅读(...) 评论(...) 编辑 收藏

写在前面

不读文章,只对代码感兴趣可以直接跳转到这里 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,然后在其基础之上扩展了静态方法和属性,以及静态构造函数

所以就变成了这样:

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对象来封装一些自定义的对象。
比如封装一个按钮:

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);

简单吧!

在线演示

地址

Class.js:https://github.com/AlloyTeam/AlloyGameEngine/blob/master/src/are/base.js
AlloyGameEngine:https://github.com/AlloyTeam/AlloyGameEngine