AlloyRenderingEngine继承

写在前面

不读文章，只对代码感兴趣可以直接跳转到这里 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