AlloyRenderingEngine 상속

14778 단어 Engine

앞에 쓰다


문장을 읽지 않고 코드에만 관심이 있으면 바로 여기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.슈퍼가 부류와 같은 종류에 접근하는 방법은 원형 계승 동명이 부류에 접근할 수 없는 약점을 복원했다. 물론 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();
그런데 이러면 코드가 못생기지 않나요!?그래서 Alloy Rendering Engine은 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 상속


Alloy Rendering Engine은 컨테이너 대상을 내장하여 요소를 관리하는데 Stage 대상도 컨테이너 대상을 계승하고 컨테이너 대상도 Display Object를 계승하기 때문에 컨테이너 대상도 scale, x, y,alpha,rotation,composite Operation 등을 설정할 수 있으며 설정된 속성은 하위 요소에 중첩될 수 있다.
x, y,rotation,scaleX,scaleY,skewX,skewY...등 직접 행렬이 중첩된다. 즉, 하위 원소의 표현은 부모 용기, 부모 용기의 부모 용기, 부모 용기의 부모 용기... 와 관계가 있다.사실 알파는 곱셈 중첩(예를 들어 용기의 투명도는 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);
간단하죠!

온라인 데모



; (function () {
var img = new Image();
img.src = "data:image/png;base64,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RjDD/ZJeICfl9yLDe7M71XGynW8zUrwgK8UW+oPW0ozR0nypB+Cs4wuzxbsRRzht7nuh15O55oJXgZ05v033QYke4vN2LT8U7EQ4vSzRd6qmdRH4LVK8YAyZIYRweTHZxcsEcPWCfyHFbMaQGTYiXCZNc5+0BzgiRJCyHUe9foICxjGEw0iqGgMDzW4NSBLSLq+fpADRhSS7bejvTSkFcA1FrwB/Ictx2iMMCuHsFei/wsZg1ncRJD37Vq+fqoCwFeFswM1JvwK4ekET8F3G5oPB4CiS7LYJBq4vM2APcInwnvPFH3r9hHmMDxGOdsPgivsMaovpEuENJJF3m9dPmodoQ7h5AwZfWWnQe3xHBAWsB36IBPWOQRBAOFkPqKGUtRqSkcURwQJeZKwnJJBo+S+SRrXuIVu5HBHiwAvAdxAX22jFeYeDF4B4OgXd0jIzunrCeuAJRufq6Kjz7OvJoE592nZeRwQb+CdSPWgLo2OzlihluNp5dtuTUobQa3W0B6kYsY6RbbboAn6PVBTJuI4kjJWzHQrys5ytG30KOj+DFC8YCQWdNwK/IJ8LOrvhykV6L/BNCruk+W8Qe37+lzR3w9UbqpDiBY+RJT/zMAsQB+oRH+6rOJ6sbJAPOXC4uoSYjgxJq5DEpcMW/DVMAkSRoNkNyJBzFrJHfAI583i7hKhEcic/gCSyrs70PjIQQCEGtG0I6bU4x3azTXwCOQ85cAlRgmQRvwNYgfSKStIYooYoQBwheT8SpVyLxGqakDviE/A05sMlRhkwB0mhvBxJalqDpHYsYYD9Sj8C2AixrYh9vg45mbIHic8PQ+5JdyOvgm5cBaPHI+kT5gBXIXuKGUgPucK57keSjNgx0+w2oxETCALtyMR5BjgJHELIPuNcT9tskA38H/FXEZyb726IAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTAyLTIxVDIzOjEzOjMyKzA4OjAwgoE57QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wMi0yMVQyMzoxMzozMiswODowMPPcgVEAAABNdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuOC44LTcgUTE2IHg4Nl82NCAyMDE0LTAyLTI4IGh0dHA6Ly93d3cuaW1hZ2VtYWdpY2sub3JnWaRffwAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABh0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMjQ4F2BYXwAAABd0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAyNDiEkQgCAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADEzOTI5OTU2MTIuEd96AAAAE3RFWHRUaHVtYjo6U2l6ZQA3LjI1S0JCWq8W2QAAAGJ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2hvbWUvZnRwLzE1MjAvZWFzeWljb24uY24vZWFzeWljb24uY24vY2RuLWltZy5lYXN5aWNvbi5jbi9wbmcvMTEzNzUvMTEzNzU4MS5wbmfci11fAAAAAElFTkSuQmCC";
img.onload = function () {
var Stage = ARE.Stage, Bitmap = ARE.Bitmap, Container = ARE.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);
//마우스 포인터의 모양 & #13;
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;
})
}
});
var stage = new Stage("#ourCanvas");
var button = new Button(img);
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

좋은 웹페이지 즐겨찾기