AlloyRenderingEngine繼承

【當耐特】發表於2015-04-28
繼承

寫在前面

不讀文章，只對程式碼感興趣可以直接跳轉到這裡 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

相關文章