新增renderableComponent 用于控制可渲染组件的基类 不要在transform当中直接更改目标属性

demo/libs/framework/framework.d.ts

@@ -137,7 +137,6 @@ declare class WeightedPathfinder {
 }
 declare abstract class Component {
     entity: Entity;
-    displayRender: egret.DisplayObject;
     private _enabled;
     updateInterval: number;
     readonly transform: Transform;
@@ -150,7 +149,6 @@ declare abstract class Component {
     onDisabled(): void;
     onEntityTransformChanged(comp: ComponentTransform): void;
     update(): void;
-    bind(displayRender: egret.DisplayObject): this;
     registerComponent(): void;
     deregisterComponent(): void;
 }
@@ -338,6 +336,15 @@ declare class VertexPosition {
 declare class PolygonMesh extends Mesh {
     constructor(points: Vector2[], arePointsCCW?: boolean);
 }
+declare abstract class RenderableComponent extends Component {
+}
+declare class SpriteRenderer extends RenderableComponent {
+    private _sprite;
+    private _origin;
+    sprite: egret.DisplayObject;
+    setSprite(sprite: egret.DisplayObject): SpriteRenderer;
+    initialize(): void;
+}
 declare class EntitySystem {
     private _scene;
     private _entities;

demo/libs/framework/framework.js

@@ -776,10 +776,6 @@ var Component = (function () {
     };
     Component.prototype.update = function () {
     };
-    Component.prototype.bind = function (displayRender) {
-        this.displayRender = displayRender;
-        return this;
-    };
     Component.prototype.registerComponent = function () {
         this.entity.componentBits.set(ComponentTypeManager.getIndexFor(this), false);
         this.entity.scene.entityProcessors.onComponentAdded(this.entity);
@@ -1352,13 +1348,6 @@ var Transform = (function () {
         else {
             this.localScale = scale;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.scaleX = this.scale.x;
-                component.displayRender.scaleY = this.scale.y;
-            }
-        }
         return this;
     };
     Transform.prototype.setLocalRotationDegrees = function (degrees) {
@@ -1378,12 +1367,6 @@ var Transform = (function () {
         else {
             this.localRotation = radians;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.rotation = this.rotation;
-            }
-        }
         return this;
     };
     Transform.prototype.setRotationDegrees = function (degrees) {
@@ -1407,13 +1390,6 @@ var Transform = (function () {
         else {
             this.localPosition = position;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.x = this.entity.scene.camera.transformMatrix.m31 + this.position.x;
-                component.displayRender.y = this.entity.scene.camera.transformMatrix.m32 + this.position.y;
-            }
-        }
         return this;
     };
     Transform.prototype.setDirty = function (dirtyFlagType) {
@@ -1573,15 +1549,6 @@ var Camera = (function (_super) {
     Camera.prototype.initialize = function () {
     };
     Camera.prototype.update = function () {
-        var _this = this;
-        SceneManager.getActiveScene().entities.buffer.forEach(function (entity) { return entity.components.buffer.forEach(function (component) {
-            if (component.displayRender) {
-                var has = _this.entity.scene.$children.indexOf(component.displayRender);
-                if (has == -1) {
-                    _this.entity.scene.stage.addChild(component.displayRender);
-                }
-            }
-        }); });
     };
     Camera.prototype.setPosition = function (position) {
         this.entity.transform.setPosition(position);
@@ -1663,6 +1630,38 @@ var PolygonMesh = (function (_super) {
     }
     return PolygonMesh;
 }(Mesh));
+var RenderableComponent = (function (_super) {
+    __extends(RenderableComponent, _super);
+    function RenderableComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return RenderableComponent;
+}(Component));
+var SpriteRenderer = (function (_super) {
+    __extends(SpriteRenderer, _super);
+    function SpriteRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SpriteRenderer.prototype, "sprite", {
+        get: function () {
+            return this._sprite;
+        },
+        set: function (value) {
+            this.setSprite(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SpriteRenderer.prototype.setSprite = function (sprite) {
+        this._sprite = sprite;
+        if (this._sprite)
+            this._origin = new Vector2(this._sprite.anchorOffsetX, this._sprite.anchorOffsetY);
+        return this;
+    };
+    SpriteRenderer.prototype.initialize = function () {
+    };
+    return SpriteRenderer;
+}(RenderableComponent));
 var EntitySystem = (function () {
     function EntitySystem(matcher) {
         this._entities = [];
@@ -2681,7 +2680,9 @@ var WebGLUtils = (function () {
     function WebGLUtils() {
     }
     WebGLUtils.getWebGL = function () {
-        return document.querySelector("canvas").getContext("webgl");
+        if (egret.WebGLUtils.checkCanUseWebGL())
+            return document.querySelector("canvas").getContext("webgl");
+        throw new Error("cannot get webgl");
     };
     WebGLUtils.drawUserIndexPrimitives = function (primitiveType, vertexData, vertexOffset, numVertices, indexData, indexOffset, primitiveCount) {
         var GL = this.getWebGL();

source/bin/framework.d.ts

@@ -137,7 +137,6 @@ declare class WeightedPathfinder {
 }
 declare abstract class Component {
     entity: Entity;
-    displayRender: egret.DisplayObject;
     private _enabled;
     updateInterval: number;
     readonly transform: Transform;
@@ -150,7 +149,6 @@ declare abstract class Component {
     onDisabled(): void;
     onEntityTransformChanged(comp: ComponentTransform): void;
     update(): void;
-    bind(displayRender: egret.DisplayObject): this;
     registerComponent(): void;
     deregisterComponent(): void;
 }
@@ -338,6 +336,15 @@ declare class VertexPosition {
 declare class PolygonMesh extends Mesh {
     constructor(points: Vector2[], arePointsCCW?: boolean);
 }
+declare abstract class RenderableComponent extends Component {
+}
+declare class SpriteRenderer extends RenderableComponent {
+    private _sprite;
+    private _origin;
+    sprite: egret.DisplayObject;
+    setSprite(sprite: egret.DisplayObject): SpriteRenderer;
+    initialize(): void;
+}
 declare class EntitySystem {
     private _scene;
     private _entities;

source/bin/framework.js

@@ -776,10 +776,6 @@ var Component = (function () {
     };
     Component.prototype.update = function () {
     };
-    Component.prototype.bind = function (displayRender) {
-        this.displayRender = displayRender;
-        return this;
-    };
     Component.prototype.registerComponent = function () {
         this.entity.componentBits.set(ComponentTypeManager.getIndexFor(this), false);
         this.entity.scene.entityProcessors.onComponentAdded(this.entity);
@@ -1352,13 +1348,6 @@ var Transform = (function () {
         else {
             this.localScale = scale;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.scaleX = this.scale.x;
-                component.displayRender.scaleY = this.scale.y;
-            }
-        }
         return this;
     };
     Transform.prototype.setLocalRotationDegrees = function (degrees) {
@@ -1378,12 +1367,6 @@ var Transform = (function () {
         else {
             this.localRotation = radians;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.rotation = this.rotation;
-            }
-        }
         return this;
     };
     Transform.prototype.setRotationDegrees = function (degrees) {
@@ -1407,13 +1390,6 @@ var Transform = (function () {
         else {
             this.localPosition = position;
         }
-        for (var i = 0; i < this.entity.components.buffer.length; i++) {
-            var component = this.entity.components.buffer[i];
-            if (component.displayRender) {
-                component.displayRender.x = this.entity.scene.camera.transformMatrix.m31 + this.position.x;
-                component.displayRender.y = this.entity.scene.camera.transformMatrix.m32 + this.position.y;
-            }
-        }
         return this;
     };
     Transform.prototype.setDirty = function (dirtyFlagType) {
@@ -1573,15 +1549,6 @@ var Camera = (function (_super) {
     Camera.prototype.initialize = function () {
     };
     Camera.prototype.update = function () {
-        var _this = this;
-        SceneManager.getActiveScene().entities.buffer.forEach(function (entity) { return entity.components.buffer.forEach(function (component) {
-            if (component.displayRender) {
-                var has = _this.entity.scene.$children.indexOf(component.displayRender);
-                if (has == -1) {
-                    _this.entity.scene.stage.addChild(component.displayRender);
-                }
-            }
-        }); });
     };
     Camera.prototype.setPosition = function (position) {
         this.entity.transform.setPosition(position);
@@ -1663,6 +1630,38 @@ var PolygonMesh = (function (_super) {
     }
     return PolygonMesh;
 }(Mesh));
+var RenderableComponent = (function (_super) {
+    __extends(RenderableComponent, _super);
+    function RenderableComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return RenderableComponent;
+}(Component));
+var SpriteRenderer = (function (_super) {
+    __extends(SpriteRenderer, _super);
+    function SpriteRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(SpriteRenderer.prototype, "sprite", {
+        get: function () {
+            return this._sprite;
+        },
+        set: function (value) {
+            this.setSprite(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SpriteRenderer.prototype.setSprite = function (sprite) {
+        this._sprite = sprite;
+        if (this._sprite)
+            this._origin = new Vector2(this._sprite.anchorOffsetX, this._sprite.anchorOffsetY);
+        return this;
+    };
+    SpriteRenderer.prototype.initialize = function () {
+    };
+    return SpriteRenderer;
+}(RenderableComponent));
 var EntitySystem = (function () {
     function EntitySystem(matcher) {
         this._entities = [];
@@ -2681,7 +2680,9 @@ var WebGLUtils = (function () {
     function WebGLUtils() {
     }
     WebGLUtils.getWebGL = function () {
-        return document.querySelector("canvas").getContext("webgl");
+        if (egret.WebGLUtils.checkCanUseWebGL())
+            return document.querySelector("canvas").getContext("webgl");
+        throw new Error("cannot get webgl");
     };
     WebGLUtils.drawUserIndexPrimitives = function (primitiveType, vertexData, vertexOffset, numVertices, indexData, indexOffset, primitiveCount) {
         var GL = this.getWebGL();

source/src/ECS/Component.ts

@@ -1,6 +1,5 @@
 abstract class Component {
     public entity: Entity;
-    public displayRender: egret.DisplayObject;
     private _enabled: boolean = true;
     public updateInterval: number = 1;
 
@@ -56,13 +55,6 @@ abstract class Component {
 
     }
 
-    /** 绑定显示对象 */
-    public bind(displayRender: egret.DisplayObject){
-        this.displayRender = displayRender;
-
-        return this;
-    }
-
     /** 内部使用 运行时不应该调用 */
     public registerComponent(){
         this.entity.componentBits.set(ComponentTypeManager.getIndexFor(this), false);

source/src/ECS/Components/Camera.ts

@@ -98,14 +98,7 @@ class Camera extends Component {
     }
 
     public update(){
-        SceneManager.getActiveScene().entities.buffer.forEach(entity => entity.components.buffer.forEach(component => {
+        
-            if (component.displayRender){
-                let has = this.entity.scene.$children.indexOf(component.displayRender)
-                if (has == -1){
-                    this.entity.scene.stage.addChild(component.displayRender);
-                }
-            }
-        }));
     }
 
     public setPosition(position: Vector2){

source/src/ECS/Components/RenderableComponent.ts

@@ -0,0 +1,6 @@
+/** 
+ * 所有可渲染组件的基类 
+ */
+abstract class RenderableComponent extends Component {
+    
+}

source/src/ECS/Components/SpriteRenderer.ts

@@ -0,0 +1,24 @@
+class SpriteRenderer extends RenderableComponent {
+    private _sprite: egret.DisplayObject;
+    private _origin: Vector2;
+
+    public get sprite(){
+        return this._sprite;
+    }
+
+    public set sprite(value: egret.DisplayObject){
+        this.setSprite(value);
+    }
+
+    public setSprite(sprite: egret.DisplayObject): SpriteRenderer{
+        this._sprite = sprite;
+        if (this._sprite)
+            this._origin = new Vector2(this._sprite.anchorOffsetX, this._sprite.anchorOffsetY);
+
+        return this;
+    }
+
+    public initialize() {
+
+    }
+}

source/src/ECS/Transform.ts

@@ -203,14 +203,6 @@ class Transform {
             this.localScale = scale;
         }
 
-        for (let i = 0; i < this.entity.components.buffer.length; i ++){
-            let component = this.entity.components.buffer[i];
-            if (component.displayRender){
-                component.displayRender.scaleX = this.scale.x;
-                component.displayRender.scaleY = this.scale.y;
-            }
-        }
-
         return this;
     }
 
@@ -234,13 +226,6 @@ class Transform {
             this.localRotation = radians;
         }
 
-        for (let i = 0; i < this.entity.components.buffer.length; i ++){
-            let component = this.entity.components.buffer[i];
-            if (component.displayRender){
-                component.displayRender.rotation = this.rotation;
-            }
-        }
-
         return this;
     }
 
@@ -270,14 +255,6 @@ class Transform {
             this.localPosition = position;
         }
 
-        for (let i = 0; i < this.entity.components.buffer.length; i ++){
-            let component = this.entity.components.buffer[i];
-            if (component.displayRender){
-                component.displayRender.x = this.entity.scene.camera.transformMatrix.m31 + this.position.x;
-                component.displayRender.y = this.entity.scene.camera.transformMatrix.m32 + this.position.y;
-            }
-        }
-
         return this;
     }
 

source/src/Utils/WebGLUtils.ts

@@ -1,6 +1,9 @@
 class WebGLUtils {
     public static getWebGL(): WebGLRenderingContext{
-        return document.querySelector("canvas").getContext("webgl");
+        if (egret.WebGLUtils.checkCanUseWebGL())
+            return document.querySelector("canvas").getContext("webgl");
+
+        throw new Error("cannot get webgl");
     }
 
     public static drawUserIndexPrimitives<T>(primitiveType: number, vertexData: T[], vertexOffset: number, numVertices: number, indexData: number[], indexOffset: number, primitiveCount: number){