新增renderer渲染器 用于控制场景如何渲染

demo/libs/framework/framework.d.ts

@@ -208,9 +208,11 @@ declare class Entity {
 declare class Scene extends egret.DisplayObjectContainer {
     camera: Camera;
     readonly entities: EntityList;
+    readonly renderableComponents: RenderableComponentList;
     private _projectionMatrix;
     private _transformMatrix;
     private _matrixTransformMatrix;
+    private _renderers;
     readonly entityProcessors: EntityProcessorList;
     constructor(displayObject: egret.DisplayObject);
     createEntity(name: string): Entity;
@@ -221,6 +223,9 @@ declare class Scene extends egret.DisplayObjectContainer {
     removeEntityProcessor(processor: EntitySystem): void;
     getEntityProcessor<T extends EntitySystem>(): T;
     setActive(): Scene;
+    addRenderer<T extends Renderer>(renderer: T): T;
+    getRenderer<T extends Renderer>(type: any): T;
+    removeRenderer(renderer: Renderer): void;
     initialize(): void;
     onActive(): void;
     onDeactive(): void;
@@ -355,7 +360,7 @@ declare class VertexPosition {
 declare class PolygonMesh extends Mesh {
     constructor(points: Vector2[], arePointsCCW?: boolean);
 }
-declare abstract class RenderableComponent extends Component {
+declare abstract class RenderableComponent extends Component implements IRenderable {
     private _isVisible;
     protected _areBoundsDirty: boolean;
     protected _bounds: Rectangle;
@@ -371,6 +376,12 @@ declare abstract class RenderableComponent extends Component {
     protected onBecameInvisible(): void;
     abstract render(camera: Camera): any;
     isVisibleFromCamera(camera: Camera): boolean;
+    onEntityTransformChanged(comp: ComponentTransform): void;
+}
+declare enum SpriteEffects {
+    none = 0,
+    flipHorizontally = 1,
+    flipVertically = 2
 }
 declare class SpriteRenderer extends RenderableComponent {
     private _sprite;
@@ -378,6 +389,8 @@ declare class SpriteRenderer extends RenderableComponent {
     readonly bounds: any;
     sprite: egret.DisplayObject;
     setSprite(sprite: egret.DisplayObject): SpriteRenderer;
+    origin: Vector2;
+    setOrigin(origin: Vector2): this;
     render(camera: Camera): void;
 }
 interface ITriggerListener {
@@ -538,6 +551,14 @@ declare class Matcher {
     static empty(): Matcher;
     IsIntersted(e: Entity): boolean;
 }
+declare class RenderableComponentList {
+    private _components;
+    readonly count: number;
+    readonly buffer: IRenderable[];
+    add(component: IRenderable): void;
+    remove(component: IRenderable): void;
+    updateList(): void;
+}
 declare class Time {
     static unscaledDeltaTime: any;
     static deltaTime: number;
@@ -546,6 +567,25 @@ declare class Time {
     private static _lastTime;
     static update(currentTime: number): void;
 }
+declare abstract class Renderer {
+    camera: Camera;
+    onAddedToScene(scene: Scene): void;
+    abstract render(scene: Scene): any;
+    protected renderAfterStateCheck(renderable: IRenderable, cam: Camera): void;
+}
+declare class DefaultRenderer extends Renderer {
+    render(scene: Scene): void;
+}
+interface IRenderable {
+    bounds: Rectangle;
+    enabled: boolean;
+    isVisible: boolean;
+    isVisibleFromCamera(camera: Camera): any;
+    render(camera: Camera): any;
+}
+declare class ScreenSpaceRenderer extends Renderer {
+    render(scene: Scene): void;
+}
 declare class Flags {
     static isFlagSet(self: number, flag: number): boolean;
     static isUnshiftedFlagSet(self: number, flag: number): boolean;

demo/libs/framework/framework.js

@@ -1062,9 +1062,11 @@ var Scene = (function (_super) {
     __extends(Scene, _super);
     function Scene(displayObject) {
         var _this = _super.call(this) || this;
+        _this._renderers = [];
         displayObject.stage.addChild(_this);
         _this._projectionMatrix = new Matrix2D(0, 0, 0, 0, 0, 0);
         _this.entityProcessors = new EntityProcessorList();
+        _this.renderableComponents = new RenderableComponentList();
         _this.entities = new EntityList(_this);
         _this.addEventListener(egret.Event.ACTIVATE, _this.onActive, _this);
         _this.addEventListener(egret.Event.DEACTIVATE, _this.onDeactive, _this);
@@ -1106,7 +1108,27 @@ var Scene = (function (_super) {
         SceneManager.setActiveScene(this);
         return this;
     };
+    Scene.prototype.addRenderer = function (renderer) {
+        this._renderers.push(renderer);
+        this._renderers.sort();
+        renderer.onAddedToScene(this);
+        return renderer;
+    };
+    Scene.prototype.getRenderer = function (type) {
+        for (var i = 0; i < this._renderers.length; i++) {
+            if (this._renderers[i] instanceof type)
+                return this._renderers[i];
+        }
+        return null;
+    };
+    Scene.prototype.removeRenderer = function (renderer) {
+        this._renderers.remove(renderer);
+    };
     Scene.prototype.initialize = function () {
+        if (this._renderers.length == 0) {
+            this.addRenderer(new DefaultRenderer());
+            console.warn("场景开始时没有渲染器 自动添加DefaultRenderer以保证能够正常渲染");
+        }
         this.camera = this.createEntity("camera").getOrCreateComponent(new Camera());
         Physics.reset();
         if (this.entityProcessors)
@@ -1128,6 +1150,7 @@ var Scene = (function (_super) {
         this.entities.update();
         if (this.entityProcessors)
             this.entityProcessors.lateUpdate();
+        this.renderableComponents.updateList();
     };
     Scene.prototype.prepRenderState = function () {
         this._projectionMatrix.m11 = 2 / this.stage.width;
@@ -1766,8 +1789,17 @@ var RenderableComponent = (function (_super) {
         this.isVisible = camera.bounds.intersects(this.bounds);
         return this.isVisible;
     };
+    RenderableComponent.prototype.onEntityTransformChanged = function (comp) {
+        this._areBoundsDirty = true;
+    };
     return RenderableComponent;
 }(Component));
+var SpriteEffects;
+(function (SpriteEffects) {
+    SpriteEffects[SpriteEffects["none"] = 0] = "none";
+    SpriteEffects[SpriteEffects["flipHorizontally"] = 1] = "flipHorizontally";
+    SpriteEffects[SpriteEffects["flipVertically"] = 2] = "flipVertically";
+})(SpriteEffects || (SpriteEffects = {}));
 var SpriteRenderer = (function (_super) {
     __extends(SpriteRenderer, _super);
     function SpriteRenderer() {
@@ -1802,6 +1834,23 @@ var SpriteRenderer = (function (_super) {
             this._origin = new Vector2(this._sprite.anchorOffsetX, this._sprite.anchorOffsetY);
         return this;
     };
+    Object.defineProperty(SpriteRenderer.prototype, "origin", {
+        get: function () {
+            return this._origin;
+        },
+        set: function (value) {
+            this.setOrigin(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SpriteRenderer.prototype.setOrigin = function (origin) {
+        if (this._origin != origin) {
+            this._origin = origin;
+            this._areBoundsDirty = true;
+        }
+        return this;
+    };
     SpriteRenderer.prototype.render = function (camera) {
         if (!this.sprite)
             return;
@@ -2598,6 +2647,34 @@ var Matcher = (function () {
     };
     return Matcher;
 }());
+var RenderableComponentList = (function () {
+    function RenderableComponentList() {
+        this._components = [];
+    }
+    Object.defineProperty(RenderableComponentList.prototype, "count", {
+        get: function () {
+            return this._components.length;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(RenderableComponentList.prototype, "buffer", {
+        get: function () {
+            return this._components;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    RenderableComponentList.prototype.add = function (component) {
+        this._components.push(component);
+    };
+    RenderableComponentList.prototype.remove = function (component) {
+        this._components.remove(component);
+    };
+    RenderableComponentList.prototype.updateList = function () {
+    };
+    return RenderableComponentList;
+}());
 var Time = (function () {
     function Time() {
     }
@@ -2615,6 +2692,39 @@ var Time = (function () {
     Time._lastTime = 0;
     return Time;
 }());
+var Renderer = (function () {
+    function Renderer() {
+    }
+    Renderer.prototype.onAddedToScene = function (scene) { };
+    Renderer.prototype.renderAfterStateCheck = function (renderable, cam) {
+        renderable.render(cam);
+    };
+    return Renderer;
+}());
+var DefaultRenderer = (function (_super) {
+    __extends(DefaultRenderer, _super);
+    function DefaultRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DefaultRenderer.prototype.render = function (scene) {
+        var cam = this.camera ? this.camera : scene.camera;
+        for (var i = 0; i < scene.renderableComponents.count; i++) {
+            var renderable = scene.renderableComponents.buffer[i];
+            if (renderable.enabled && renderable.isVisibleFromCamera(cam))
+                this.renderAfterStateCheck(renderable, cam);
+        }
+    };
+    return DefaultRenderer;
+}(Renderer));
+var ScreenSpaceRenderer = (function (_super) {
+    __extends(ScreenSpaceRenderer, _super);
+    function ScreenSpaceRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ScreenSpaceRenderer.prototype.render = function (scene) {
+    };
+    return ScreenSpaceRenderer;
+}(Renderer));
 var Flags = (function () {
     function Flags() {
     }

source/bin/framework.d.ts

@@ -208,9 +208,11 @@ declare class Entity {
 declare class Scene extends egret.DisplayObjectContainer {
     camera: Camera;
     readonly entities: EntityList;
+    readonly renderableComponents: RenderableComponentList;
     private _projectionMatrix;
     private _transformMatrix;
     private _matrixTransformMatrix;
+    private _renderers;
     readonly entityProcessors: EntityProcessorList;
     constructor(displayObject: egret.DisplayObject);
     createEntity(name: string): Entity;
@@ -221,6 +223,9 @@ declare class Scene extends egret.DisplayObjectContainer {
     removeEntityProcessor(processor: EntitySystem): void;
     getEntityProcessor<T extends EntitySystem>(): T;
     setActive(): Scene;
+    addRenderer<T extends Renderer>(renderer: T): T;
+    getRenderer<T extends Renderer>(type: any): T;
+    removeRenderer(renderer: Renderer): void;
     initialize(): void;
     onActive(): void;
     onDeactive(): void;
@@ -355,7 +360,7 @@ declare class VertexPosition {
 declare class PolygonMesh extends Mesh {
     constructor(points: Vector2[], arePointsCCW?: boolean);
 }
-declare abstract class RenderableComponent extends Component {
+declare abstract class RenderableComponent extends Component implements IRenderable {
     private _isVisible;
     protected _areBoundsDirty: boolean;
     protected _bounds: Rectangle;
@@ -371,6 +376,12 @@ declare abstract class RenderableComponent extends Component {
     protected onBecameInvisible(): void;
     abstract render(camera: Camera): any;
     isVisibleFromCamera(camera: Camera): boolean;
+    onEntityTransformChanged(comp: ComponentTransform): void;
+}
+declare enum SpriteEffects {
+    none = 0,
+    flipHorizontally = 1,
+    flipVertically = 2
 }
 declare class SpriteRenderer extends RenderableComponent {
     private _sprite;
@@ -378,6 +389,8 @@ declare class SpriteRenderer extends RenderableComponent {
     readonly bounds: any;
     sprite: egret.DisplayObject;
     setSprite(sprite: egret.DisplayObject): SpriteRenderer;
+    origin: Vector2;
+    setOrigin(origin: Vector2): this;
     render(camera: Camera): void;
 }
 interface ITriggerListener {
@@ -538,6 +551,14 @@ declare class Matcher {
     static empty(): Matcher;
     IsIntersted(e: Entity): boolean;
 }
+declare class RenderableComponentList {
+    private _components;
+    readonly count: number;
+    readonly buffer: IRenderable[];
+    add(component: IRenderable): void;
+    remove(component: IRenderable): void;
+    updateList(): void;
+}
 declare class Time {
     static unscaledDeltaTime: any;
     static deltaTime: number;
@@ -546,6 +567,25 @@ declare class Time {
     private static _lastTime;
     static update(currentTime: number): void;
 }
+declare abstract class Renderer {
+    camera: Camera;
+    onAddedToScene(scene: Scene): void;
+    abstract render(scene: Scene): any;
+    protected renderAfterStateCheck(renderable: IRenderable, cam: Camera): void;
+}
+declare class DefaultRenderer extends Renderer {
+    render(scene: Scene): void;
+}
+interface IRenderable {
+    bounds: Rectangle;
+    enabled: boolean;
+    isVisible: boolean;
+    isVisibleFromCamera(camera: Camera): any;
+    render(camera: Camera): any;
+}
+declare class ScreenSpaceRenderer extends Renderer {
+    render(scene: Scene): void;
+}
 declare class Flags {
     static isFlagSet(self: number, flag: number): boolean;
     static isUnshiftedFlagSet(self: number, flag: number): boolean;

source/bin/framework.js

@@ -1062,9 +1062,11 @@ var Scene = (function (_super) {
     __extends(Scene, _super);
     function Scene(displayObject) {
         var _this = _super.call(this) || this;
+        _this._renderers = [];
         displayObject.stage.addChild(_this);
         _this._projectionMatrix = new Matrix2D(0, 0, 0, 0, 0, 0);
         _this.entityProcessors = new EntityProcessorList();
+        _this.renderableComponents = new RenderableComponentList();
         _this.entities = new EntityList(_this);
         _this.addEventListener(egret.Event.ACTIVATE, _this.onActive, _this);
         _this.addEventListener(egret.Event.DEACTIVATE, _this.onDeactive, _this);
@@ -1106,7 +1108,27 @@ var Scene = (function (_super) {
         SceneManager.setActiveScene(this);
         return this;
     };
+    Scene.prototype.addRenderer = function (renderer) {
+        this._renderers.push(renderer);
+        this._renderers.sort();
+        renderer.onAddedToScene(this);
+        return renderer;
+    };
+    Scene.prototype.getRenderer = function (type) {
+        for (var i = 0; i < this._renderers.length; i++) {
+            if (this._renderers[i] instanceof type)
+                return this._renderers[i];
+        }
+        return null;
+    };
+    Scene.prototype.removeRenderer = function (renderer) {
+        this._renderers.remove(renderer);
+    };
     Scene.prototype.initialize = function () {
+        if (this._renderers.length == 0) {
+            this.addRenderer(new DefaultRenderer());
+            console.warn("场景开始时没有渲染器 自动添加DefaultRenderer以保证能够正常渲染");
+        }
         this.camera = this.createEntity("camera").getOrCreateComponent(new Camera());
         Physics.reset();
         if (this.entityProcessors)
@@ -1128,6 +1150,7 @@ var Scene = (function (_super) {
         this.entities.update();
         if (this.entityProcessors)
             this.entityProcessors.lateUpdate();
+        this.renderableComponents.updateList();
     };
     Scene.prototype.prepRenderState = function () {
         this._projectionMatrix.m11 = 2 / this.stage.width;
@@ -1766,8 +1789,17 @@ var RenderableComponent = (function (_super) {
         this.isVisible = camera.bounds.intersects(this.bounds);
         return this.isVisible;
     };
+    RenderableComponent.prototype.onEntityTransformChanged = function (comp) {
+        this._areBoundsDirty = true;
+    };
     return RenderableComponent;
 }(Component));
+var SpriteEffects;
+(function (SpriteEffects) {
+    SpriteEffects[SpriteEffects["none"] = 0] = "none";
+    SpriteEffects[SpriteEffects["flipHorizontally"] = 1] = "flipHorizontally";
+    SpriteEffects[SpriteEffects["flipVertically"] = 2] = "flipVertically";
+})(SpriteEffects || (SpriteEffects = {}));
 var SpriteRenderer = (function (_super) {
     __extends(SpriteRenderer, _super);
     function SpriteRenderer() {
@@ -1802,6 +1834,23 @@ var SpriteRenderer = (function (_super) {
             this._origin = new Vector2(this._sprite.anchorOffsetX, this._sprite.anchorOffsetY);
         return this;
     };
+    Object.defineProperty(SpriteRenderer.prototype, "origin", {
+        get: function () {
+            return this._origin;
+        },
+        set: function (value) {
+            this.setOrigin(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SpriteRenderer.prototype.setOrigin = function (origin) {
+        if (this._origin != origin) {
+            this._origin = origin;
+            this._areBoundsDirty = true;
+        }
+        return this;
+    };
     SpriteRenderer.prototype.render = function (camera) {
         if (!this.sprite)
             return;
@@ -2598,6 +2647,34 @@ var Matcher = (function () {
     };
     return Matcher;
 }());
+var RenderableComponentList = (function () {
+    function RenderableComponentList() {
+        this._components = [];
+    }
+    Object.defineProperty(RenderableComponentList.prototype, "count", {
+        get: function () {
+            return this._components.length;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(RenderableComponentList.prototype, "buffer", {
+        get: function () {
+            return this._components;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    RenderableComponentList.prototype.add = function (component) {
+        this._components.push(component);
+    };
+    RenderableComponentList.prototype.remove = function (component) {
+        this._components.remove(component);
+    };
+    RenderableComponentList.prototype.updateList = function () {
+    };
+    return RenderableComponentList;
+}());
 var Time = (function () {
     function Time() {
     }
@@ -2615,6 +2692,39 @@ var Time = (function () {
     Time._lastTime = 0;
     return Time;
 }());
+var Renderer = (function () {
+    function Renderer() {
+    }
+    Renderer.prototype.onAddedToScene = function (scene) { };
+    Renderer.prototype.renderAfterStateCheck = function (renderable, cam) {
+        renderable.render(cam);
+    };
+    return Renderer;
+}());
+var DefaultRenderer = (function (_super) {
+    __extends(DefaultRenderer, _super);
+    function DefaultRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DefaultRenderer.prototype.render = function (scene) {
+        var cam = this.camera ? this.camera : scene.camera;
+        for (var i = 0; i < scene.renderableComponents.count; i++) {
+            var renderable = scene.renderableComponents.buffer[i];
+            if (renderable.enabled && renderable.isVisibleFromCamera(cam))
+                this.renderAfterStateCheck(renderable, cam);
+        }
+    };
+    return DefaultRenderer;
+}(Renderer));
+var ScreenSpaceRenderer = (function (_super) {
+    __extends(ScreenSpaceRenderer, _super);
+    function ScreenSpaceRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ScreenSpaceRenderer.prototype.render = function (scene) {
+    };
+    return ScreenSpaceRenderer;
+}(Renderer));
 var Flags = (function () {
     function Flags() {
     }

source/src/ECS/Components/RenderableComponent.ts

@@ -1,7 +1,7 @@
 /** 
  * 所有可渲染组件的基类 
  */
-abstract class RenderableComponent extends Component {
+abstract class RenderableComponent extends Component implements IRenderable {
     private _isVisible: boolean;
     protected _areBoundsDirty = true;
     protected _bounds: Rectangle;
@@ -60,4 +60,8 @@ abstract class RenderableComponent extends Component {
         this.isVisible = camera.bounds.intersects(this.bounds);
         return this.isVisible;
     }
+
+    public onEntityTransformChanged(comp: ComponentTransform){
+        this._areBoundsDirty = true;
+    }
 }

source/src/ECS/Components/SpriteEffects.ts

@@ -0,0 +1,5 @@
+enum SpriteEffects {
+    none = 0,
+    flipHorizontally = 1,
+    flipVertically = 2
+}

source/src/ECS/Components/SpriteRenderer.ts

@@ -31,6 +31,20 @@ class SpriteRenderer extends RenderableComponent {
         return this;
     }
 
+    public get origin(){
+        return this._origin;
+    }
+    public set origin(value: Vector2){
+        this.setOrigin(value);
+    }
+    public setOrigin(origin: Vector2){
+        if (this._origin != origin){
+            this._origin = origin;
+            this._areBoundsDirty = true;
+        }
+        return this;
+    }
+
     public render(camera: Camera) {
         if (!this.sprite)
             return;

source/src/ECS/Scene.ts

@@ -1,49 +1,52 @@
 /** 场景 */
 class Scene extends egret.DisplayObjectContainer {
-   public camera: Camera; 
+   public camera: Camera;
    public readonly entities: EntityList;
+   public readonly renderableComponents: RenderableComponentList;
 
    private _projectionMatrix: Matrix2D;
    private _transformMatrix: Matrix2D;
    private _matrixTransformMatrix: Matrix2D;
+   private _renderers: Renderer[] = [];
 
    public readonly entityProcessors: EntityProcessorList;
 
-   constructor(displayObject: egret.DisplayObject){
+   constructor(displayObject: egret.DisplayObject) {
       super();
       displayObject.stage.addChild(this);
       this._projectionMatrix = new Matrix2D(0, 0, 0, 0, 0, 0);
       this.entityProcessors = new EntityProcessorList();
+      this.renderableComponents = new RenderableComponentList();
       this.entities = new EntityList(this);
-      
+
       this.addEventListener(egret.Event.ACTIVATE, this.onActive, this);
       this.addEventListener(egret.Event.DEACTIVATE, this.onDeactive, this);
       this.addEventListener(egret.Event.ENTER_FRAME, this.update, this);
    }
 
-   public createEntity(name: string){
+   public createEntity(name: string) {
       let entity = new Entity(name);
       entity.transform.position = new Vector2(0, 0);
       return this.addEntity(entity);
    }
 
-   public addEntity(entity: Entity){
+   public addEntity(entity: Entity) {
       this.entities.add(entity);
       entity.scene = this;
 
-      for (let i = 0; i < entity.transform.childCount; i ++)
+      for (let i = 0; i < entity.transform.childCount; i++)
          this.addEntity(entity.transform.getChild(i).entity);
 
       return entity;
    }
 
-   public destroyAllEntities(){
+   public destroyAllEntities() {
-      for (let i = 0; i < this.entities.count; i ++){
+      for (let i = 0; i < this.entities.count; i++) {
          this.entities.buffer[i].destory();
       }
    }
 
-   public findEntity(name: string): Entity{
+   public findEntity(name: string): Entity {
       return this.entities.findEntity(name);
    }
 
@@ -51,13 +54,13 @@ class Scene extends egret.DisplayObjectContainer {
     * 在场景中添加一个EntitySystem处理器
     * @param processor 处理器
     */
-   public addEntityProcessor(processor: EntitySystem){
+   public addEntityProcessor(processor: EntitySystem) {
       processor.scene = this;
       this.entityProcessors.add(processor);
       return processor;
    }
 
-   public removeEntityProcessor(processor: EntitySystem){
+   public removeEntityProcessor(processor: EntitySystem) {
       this.entityProcessors.remove(processor);
    }
 
@@ -65,14 +68,40 @@ class Scene extends egret.DisplayObjectContainer {
       return this.entityProcessors.getProcessor<T>();
    }
 
-   public setActive(): Scene{
+   public setActive(): Scene {
       SceneManager.setActiveScene(this);
 
       return this;
    }
 
+   public addRenderer<T extends Renderer>(renderer: T) {
+      this._renderers.push(renderer);
+      this._renderers.sort();
+
+      renderer.onAddedToScene(this);
+
+      return renderer;
+   }
+
+   public getRenderer<T extends Renderer>(type): T{
+      for (let i = 0; i < this._renderers.length; i ++){
+         if (this._renderers[i] instanceof type)
+            return this._renderers[i] as T;
+      }
+
+      return null;
+   }
+
+   public removeRenderer(renderer: Renderer){
+      this._renderers.remove(renderer);
+   }
+
    /** 初始化场景 */
-   public initialize(){
+   public initialize() {
+      if (this._renderers.length == 0) {
+         this.addRenderer(new DefaultRenderer());
+         console.warn("场景开始时没有渲染器 自动添加DefaultRenderer以保证能够正常渲染");
+      }
       /** 初始化默认相机 */
       this.camera = this.createEntity("camera").getOrCreateComponent(new Camera());
 
@@ -83,19 +112,19 @@ class Scene extends egret.DisplayObjectContainer {
    }
 
    /** 场景激活 */
-   public onActive(){
+   public onActive() {
-      
+
    }
 
    /** 场景失去焦点 */
-   public onDeactive(){
+   public onDeactive() {
 
    }
 
-   public update(){
+   public update() {
       Time.update(egret.getTimer());
 
-      for (let i = GlobalManager.globalManagers.length - 1; i >= 0; i --){
+      for (let i = GlobalManager.globalManagers.length - 1; i >= 0; i--) {
          if (GlobalManager.globalManagers[i].enabled)
             GlobalManager.globalManagers[i].update();
       }
@@ -109,9 +138,11 @@ class Scene extends egret.DisplayObjectContainer {
 
       if (this.entityProcessors)
          this.entityProcessors.lateUpdate();
+
+      this.renderableComponents.updateList();
    }
 
-   public prepRenderState(){
+   public prepRenderState() {
       this._projectionMatrix.m11 = 2 / this.stage.width;
       this._projectionMatrix.m22 = -2 / this.stage.height;
 
@@ -119,7 +150,7 @@ class Scene extends egret.DisplayObjectContainer {
       this._matrixTransformMatrix = Matrix2D.multiply(this._transformMatrix, this._projectionMatrix);
    }
 
-   public destory(){
+   public destory() {
       this.removeEventListener(egret.Event.DEACTIVATE, this.onDeactive, this);
       this.removeEventListener(egret.Event.ACTIVATE, this.onActive, this);
 

source/src/ECS/Utils/RenderableComponentList.ts

@@ -0,0 +1,22 @@
+class RenderableComponentList {
+    private _components: IRenderable[] = [];
+    public get count(){
+        return this._components.length;
+    }
+
+    public get buffer(){
+        return this._components;
+    }
+
+    public add(component: IRenderable){
+        this._components.push(component);
+    }
+
+    public remove(component: IRenderable){
+        this._components.remove(component);
+    }
+
+    public updateList(){
+
+    }
+}

source/src/Graphics/Renderers/DefaultRenderer.ts

@@ -0,0 +1,12 @@
+///<reference path="./Renderer.ts" />
+class DefaultRenderer extends Renderer {
+    public render(scene: Scene) {
+        let cam = this.camera ? this.camera : scene.camera;
+
+        for (let i = 0; i < scene.renderableComponents.count; i++){
+            let renderable = scene.renderableComponents.buffer[i];
+            if (renderable.enabled && renderable.isVisibleFromCamera(cam))
+                this.renderAfterStateCheck(renderable, cam);
+        }
+    }
+}

source/src/Graphics/Renderers/IRenderable.ts

@@ -0,0 +1,7 @@
+interface IRenderable {
+    bounds: Rectangle;
+    enabled: boolean;
+    isVisible: boolean;
+    isVisibleFromCamera(camera: Camera);
+    render(camera: Camera);
+}

source/src/Graphics/Renderers/Renderer.ts

@@ -0,0 +1,32 @@
+/**
+ * 渲染器被添加到场景中并处理所有对RenderableComponent的实际调用
+ */
+abstract class Renderer {
+    /** 
+     * 渲染器用于渲染的摄像机(实际上是用于剔除的变换矩阵和边界)
+     * 不是必须的
+     * Renderer子类可以选择调用beginRender时使用的摄像头
+     */
+    public camera: Camera;
+
+    /**
+     * 当渲染器被添加到场景时调用
+     * @param scene 
+     */
+    public onAddedToScene(scene: Scene){}
+
+    /**
+     * 
+     * @param scene 
+     */
+    public abstract render(scene: Scene);
+    
+    /**
+     * 
+     * @param renderable 
+     * @param cam 
+     */
+    protected renderAfterStateCheck(renderable: IRenderable, cam: Camera){
+        renderable.render(cam);
+    }
+}

source/src/Graphics/Renderers/ScreenSpaceRenderer.ts

@@ -0,0 +1,7 @@
+/**
+ * 渲染器使用自己的不移动的摄像机进行渲染。
+ */
+class ScreenSpaceRenderer extends Renderer {
+    public render(scene: Scene) {
+    }
+}