新增postProcessor用于处理屏幕特效

demo/libs/framework/framework.d.ts

@@ -212,10 +212,13 @@ declare class Scene extends egret.DisplayObjectContainer {
     readonly entities: EntityList;
     readonly renderableComponents: RenderableComponentList;
     readonly content: ContentManager;
+    enablePostProcessing: boolean;
     private _projectionMatrix;
     private _transformMatrix;
     private _matrixTransformMatrix;
     private _renderers;
+    private _postProcessors;
+    private _afterPostProcessorRenderer;
     private _didSceneBegin;
     readonly entityProcessors: EntityProcessorList;
     constructor(displayObject: egret.DisplayObject);
@@ -236,6 +239,7 @@ declare class Scene extends egret.DisplayObjectContainer {
     protected onDeactive(): void;
     protected unload(): void;
     update(): void;
+    postRender(): void;
     render(): void;
 }
 declare class SceneManager {
@@ -414,6 +418,9 @@ declare abstract class RenderableComponent extends Component implements IRendera
     isVisibleFromCamera(camera: Camera): boolean;
     onEntityTransformChanged(comp: ComponentTransform): void;
 }
+declare class ScreenSpaceCamera extends Camera {
+    protected updateMatrixes(): void;
+}
 declare class Sprite {
     texture2D: egret.Texture;
     readonly sourceRect: Rectangle;
@@ -610,6 +617,17 @@ declare class Time {
     private static _lastTime;
     static update(currentTime: number): void;
 }
+declare class PostProcessor {
+    enable: boolean;
+    effect: egret.CustomFilter;
+    scene: Scene;
+    shape: egret.Shape;
+    constructor(effect?: egret.CustomFilter);
+    onAddedToScene(scene: Scene): void;
+    process(source: egret.DisplayObject): void;
+    protected drawFullscreenQuad(texture: egret.DisplayObject, effect?: egret.CustomFilter): void;
+    unload(): void;
+}
 declare abstract class Renderer {
     camera: Camera;
     onAddedToScene(scene: Scene): void;
@@ -686,6 +704,7 @@ declare class MathHelper {
     static lerp(value1: number, value2: number, amount: number): number;
     static clamp(value: number, min: number, max: number): number;
     static pointOnCirlce(circleCenter: Vector2, radius: number, angleInDegrees: number): Vector2;
+    static isEven(value: number): boolean;
 }
 declare class Matrix2D {
     m11: number;

demo/libs/framework/framework.js

@@ -1079,7 +1079,10 @@ var Scene = (function (_super) {
     __extends(Scene, _super);
     function Scene(displayObject) {
         var _this = _super.call(this) || this;
+        _this.enablePostProcessing = true;
         _this._renderers = [];
+        _this._postProcessors = [];
+        _this._afterPostProcessorRenderer = [];
         displayObject.stage.addChild(_this);
         _this._projectionMatrix = new Matrix2D(0, 0, 0, 0, 0, 0);
         _this.entityProcessors = new EntityProcessorList();
@@ -1157,6 +1160,9 @@ var Scene = (function (_super) {
         for (var i = 0; i < this._renderers.length; i++) {
             this._renderers[i].unload();
         }
+        for (var i = 0; i < this._postProcessors.length; i++) {
+            this._postProcessors[i].unload();
+        }
         this.entities.removeAllEntities();
         Physics.clear();
         this.camera.destory();
@@ -1182,6 +1188,26 @@ var Scene = (function (_super) {
             this.entityProcessors.lateUpdate();
         this.renderableComponents.updateList();
     };
+    Scene.prototype.postRender = function () {
+        var enabledCounter = 0;
+        if (this.enablePostProcessing) {
+            for (var i = 0; i < this._postProcessors.length; i++) {
+                if (this._postProcessors[i].enable) {
+                    var isEven = MathHelper.isEven(enabledCounter);
+                    enabledCounter++;
+                    this._postProcessors[i].process(this);
+                }
+            }
+        }
+        for (var i = 0; i < this._afterPostProcessorRenderer.length; i++) {
+            if (i == 0) {
+            }
+            if (this._afterPostProcessorRenderer[i].camera) {
+                this._afterPostProcessorRenderer[i].camera.forceMatrixUpdate();
+            }
+            this._afterPostProcessorRenderer[i].render(this);
+        }
+    };
     Scene.prototype.render = function () {
         for (var i = 0; i < this._renderers.length; i++) {
             if (this._renderers[i].camera)
@@ -1247,18 +1273,21 @@ var SceneManager = (function () {
         if (this.sceneTransition) {
             this.sceneTransition.preRender();
             if (this._scene && !this.sceneTransition.hasPreviousSceneRender) {
-                this.scene.render();
+                this._scene.render();
+                this._scene.postRender();
                 this.sceneTransition.onBeginTransition();
             }
             else if (this.sceneTransition) {
                 if (this._scene && this.sceneTransition.isNewSceneLoaded) {
                     this._scene.render();
+                    this._scene.postRender();
                 }
                 this.sceneTransition.render();
             }
         }
-        else if (this.scene) {
-            this.scene.render();
+        else if (this._scene) {
+            this._scene.render();
+            this._scene.postRender();
         }
     };
     SceneManager.startSceneTransition = function (sceneTransition) {
@@ -2006,6 +2035,15 @@ var RenderableComponent = (function (_super) {
     };
     return RenderableComponent;
 }(Component));
+var ScreenSpaceCamera = (function (_super) {
+    __extends(ScreenSpaceCamera, _super);
+    function ScreenSpaceCamera() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ScreenSpaceCamera.prototype.updateMatrixes = function () {
+    };
+    return ScreenSpaceCamera;
+}(Camera));
 var Sprite = (function () {
     function Sprite(texture, sourceRect, origin) {
         if (sourceRect === void 0) { sourceRect = new Rectangle(texture.textureWidth, texture.textureHeight); }
@@ -2949,6 +2987,36 @@ var Time = (function () {
     Time._lastTime = 0;
     return Time;
 }());
+var PostProcessor = (function () {
+    function PostProcessor(effect) {
+        if (effect === void 0) { effect = null; }
+        this.effect = effect;
+    }
+    PostProcessor.prototype.onAddedToScene = function (scene) {
+        this.scene = scene;
+        this.shape = new egret.Shape();
+        scene.addChild(this.shape);
+    };
+    PostProcessor.prototype.process = function (source) {
+        this.drawFullscreenQuad(source, this.effect);
+    };
+    PostProcessor.prototype.drawFullscreenQuad = function (texture, effect) {
+        if (effect === void 0) { effect = null; }
+        this.shape.graphics.clear();
+        this.shape.graphics.beginFill(0x000000, 1);
+        this.shape.graphics.drawRect(0, 0, texture.width, texture.height);
+        this.shape.graphics.endFill();
+        this.shape.filters = [effect];
+    };
+    PostProcessor.prototype.unload = function () {
+        if (this.effect) {
+            this.effect = null;
+        }
+        this.scene = null;
+        this.scene.removeChild(this.shape);
+    };
+    return PostProcessor;
+}());
 var Renderer = (function () {
     function Renderer() {
     }
@@ -3194,6 +3262,9 @@ var MathHelper = (function () {
         var radians = MathHelper.toRadians(angleInDegrees);
         return new Vector2(Math.cos(radians) * radians + circleCenter.x, Math.sin(radians) * radians + circleCenter.y);
     };
+    MathHelper.isEven = function (value) {
+        return value % 2 == 0;
+    };
     MathHelper.Epsilon = 0.00001;
     MathHelper.Rad2Deg = 57.29578;
     MathHelper.Deg2Rad = 0.0174532924;

source/bin/framework.d.ts

@@ -212,10 +212,13 @@ declare class Scene extends egret.DisplayObjectContainer {
     readonly entities: EntityList;
     readonly renderableComponents: RenderableComponentList;
     readonly content: ContentManager;
+    enablePostProcessing: boolean;
     private _projectionMatrix;
     private _transformMatrix;
     private _matrixTransformMatrix;
     private _renderers;
+    private _postProcessors;
+    private _afterPostProcessorRenderer;
     private _didSceneBegin;
     readonly entityProcessors: EntityProcessorList;
     constructor(displayObject: egret.DisplayObject);
@@ -236,6 +239,7 @@ declare class Scene extends egret.DisplayObjectContainer {
     protected onDeactive(): void;
     protected unload(): void;
     update(): void;
+    postRender(): void;
     render(): void;
 }
 declare class SceneManager {
@@ -414,6 +418,9 @@ declare abstract class RenderableComponent extends Component implements IRendera
     isVisibleFromCamera(camera: Camera): boolean;
     onEntityTransformChanged(comp: ComponentTransform): void;
 }
+declare class ScreenSpaceCamera extends Camera {
+    protected updateMatrixes(): void;
+}
 declare class Sprite {
     texture2D: egret.Texture;
     readonly sourceRect: Rectangle;
@@ -610,6 +617,17 @@ declare class Time {
     private static _lastTime;
     static update(currentTime: number): void;
 }
+declare class PostProcessor {
+    enable: boolean;
+    effect: egret.CustomFilter;
+    scene: Scene;
+    shape: egret.Shape;
+    constructor(effect?: egret.CustomFilter);
+    onAddedToScene(scene: Scene): void;
+    process(source: egret.DisplayObject): void;
+    protected drawFullscreenQuad(texture: egret.DisplayObject, effect?: egret.CustomFilter): void;
+    unload(): void;
+}
 declare abstract class Renderer {
     camera: Camera;
     onAddedToScene(scene: Scene): void;
@@ -686,6 +704,7 @@ declare class MathHelper {
     static lerp(value1: number, value2: number, amount: number): number;
     static clamp(value: number, min: number, max: number): number;
     static pointOnCirlce(circleCenter: Vector2, radius: number, angleInDegrees: number): Vector2;
+    static isEven(value: number): boolean;
 }
 declare class Matrix2D {
     m11: number;

source/bin/framework.js

@@ -1079,7 +1079,10 @@ var Scene = (function (_super) {
     __extends(Scene, _super);
     function Scene(displayObject) {
         var _this = _super.call(this) || this;
+        _this.enablePostProcessing = true;
         _this._renderers = [];
+        _this._postProcessors = [];
+        _this._afterPostProcessorRenderer = [];
         displayObject.stage.addChild(_this);
         _this._projectionMatrix = new Matrix2D(0, 0, 0, 0, 0, 0);
         _this.entityProcessors = new EntityProcessorList();
@@ -1157,6 +1160,9 @@ var Scene = (function (_super) {
         for (var i = 0; i < this._renderers.length; i++) {
             this._renderers[i].unload();
         }
+        for (var i = 0; i < this._postProcessors.length; i++) {
+            this._postProcessors[i].unload();
+        }
         this.entities.removeAllEntities();
         Physics.clear();
         this.camera.destory();
@@ -1182,6 +1188,26 @@ var Scene = (function (_super) {
             this.entityProcessors.lateUpdate();
         this.renderableComponents.updateList();
     };
+    Scene.prototype.postRender = function () {
+        var enabledCounter = 0;
+        if (this.enablePostProcessing) {
+            for (var i = 0; i < this._postProcessors.length; i++) {
+                if (this._postProcessors[i].enable) {
+                    var isEven = MathHelper.isEven(enabledCounter);
+                    enabledCounter++;
+                    this._postProcessors[i].process(this);
+                }
+            }
+        }
+        for (var i = 0; i < this._afterPostProcessorRenderer.length; i++) {
+            if (i == 0) {
+            }
+            if (this._afterPostProcessorRenderer[i].camera) {
+                this._afterPostProcessorRenderer[i].camera.forceMatrixUpdate();
+            }
+            this._afterPostProcessorRenderer[i].render(this);
+        }
+    };
     Scene.prototype.render = function () {
         for (var i = 0; i < this._renderers.length; i++) {
             if (this._renderers[i].camera)
@@ -1247,18 +1273,21 @@ var SceneManager = (function () {
         if (this.sceneTransition) {
             this.sceneTransition.preRender();
             if (this._scene && !this.sceneTransition.hasPreviousSceneRender) {
-                this.scene.render();
+                this._scene.render();
+                this._scene.postRender();
                 this.sceneTransition.onBeginTransition();
             }
             else if (this.sceneTransition) {
                 if (this._scene && this.sceneTransition.isNewSceneLoaded) {
                     this._scene.render();
+                    this._scene.postRender();
                 }
                 this.sceneTransition.render();
             }
         }
-        else if (this.scene) {
-            this.scene.render();
+        else if (this._scene) {
+            this._scene.render();
+            this._scene.postRender();
         }
     };
     SceneManager.startSceneTransition = function (sceneTransition) {
@@ -2006,6 +2035,15 @@ var RenderableComponent = (function (_super) {
     };
     return RenderableComponent;
 }(Component));
+var ScreenSpaceCamera = (function (_super) {
+    __extends(ScreenSpaceCamera, _super);
+    function ScreenSpaceCamera() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ScreenSpaceCamera.prototype.updateMatrixes = function () {
+    };
+    return ScreenSpaceCamera;
+}(Camera));
 var Sprite = (function () {
     function Sprite(texture, sourceRect, origin) {
         if (sourceRect === void 0) { sourceRect = new Rectangle(texture.textureWidth, texture.textureHeight); }
@@ -2949,6 +2987,36 @@ var Time = (function () {
     Time._lastTime = 0;
     return Time;
 }());
+var PostProcessor = (function () {
+    function PostProcessor(effect) {
+        if (effect === void 0) { effect = null; }
+        this.effect = effect;
+    }
+    PostProcessor.prototype.onAddedToScene = function (scene) {
+        this.scene = scene;
+        this.shape = new egret.Shape();
+        scene.addChild(this.shape);
+    };
+    PostProcessor.prototype.process = function (source) {
+        this.drawFullscreenQuad(source, this.effect);
+    };
+    PostProcessor.prototype.drawFullscreenQuad = function (texture, effect) {
+        if (effect === void 0) { effect = null; }
+        this.shape.graphics.clear();
+        this.shape.graphics.beginFill(0x000000, 1);
+        this.shape.graphics.drawRect(0, 0, texture.width, texture.height);
+        this.shape.graphics.endFill();
+        this.shape.filters = [effect];
+    };
+    PostProcessor.prototype.unload = function () {
+        if (this.effect) {
+            this.effect = null;
+        }
+        this.scene = null;
+        this.scene.removeChild(this.shape);
+    };
+    return PostProcessor;
+}());
 var Renderer = (function () {
     function Renderer() {
     }
@@ -3194,6 +3262,9 @@ var MathHelper = (function () {
         var radians = MathHelper.toRadians(angleInDegrees);
         return new Vector2(Math.cos(radians) * radians + circleCenter.x, Math.sin(radians) * radians + circleCenter.y);
     };
+    MathHelper.isEven = function (value) {
+        return value % 2 == 0;
+    };
     MathHelper.Epsilon = 0.00001;
     MathHelper.Rad2Deg = 57.29578;
     MathHelper.Deg2Rad = 0.0174532924;

source/src/ECS/Components/ScreenSpaceCamera.ts

@@ -0,0 +1,5 @@
+class ScreenSpaceCamera extends Camera {
+    protected updateMatrixes(){
+        
+    }
+}

source/src/ECS/Scene.ts

@@ -4,11 +4,14 @@ class Scene extends egret.DisplayObjectContainer {
    public readonly entities: EntityList;
    public readonly renderableComponents: RenderableComponentList;
    public readonly content: ContentManager;
+   public enablePostProcessing = true;
 
    private _projectionMatrix: Matrix2D;
    private _transformMatrix: Matrix2D;
    private _matrixTransformMatrix: Matrix2D;
    private _renderers: Renderer[] = [];
+   private _postProcessors: PostProcessor[] = [];
+   private _afterPostProcessorRenderer: Renderer[] = [];
    private _didSceneBegin;
 
    public readonly entityProcessors: EntityProcessorList;
@@ -79,8 +82,8 @@ class Scene extends egret.DisplayObjectContainer {
       return renderer;
    }
 
-   public getRenderer<T extends Renderer>(type): T{
-      for (let i = 0; i < this._renderers.length; i ++){
+   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;
       }
@@ -88,11 +91,11 @@ class Scene extends egret.DisplayObjectContainer {
       return null;
    }
 
-   public removeRenderer(renderer: Renderer){
+   public removeRenderer(renderer: Renderer) {
       this._renderers.remove(renderer);
    }
 
-   public begin(){
+   public begin() {
       if (this._renderers.length == 0) {
          this.addRenderer(new DefaultRenderer());
          console.warn("场景开始时没有渲染器 自动添加DefaultRenderer以保证能够正常渲染");
@@ -111,15 +114,20 @@ class Scene extends egret.DisplayObjectContainer {
       this.onStart();
    }
 
-   public end(){
+   public end() {
       this._didSceneBegin = false;
 
       this.removeEventListener(egret.Event.DEACTIVATE, this.onDeactive, this);
       this.removeEventListener(egret.Event.ACTIVATE, this.onActive, this);
 
-      for (let i = 0; i < this._renderers.length; i ++){
+      for (let i = 0; i < this._renderers.length; i++) {
          this._renderers[i].unload();
       }
+
+      for (let i = 0; i < this._postProcessors.length; i++) {
+         this._postProcessors[i].unload();
+      }
+
       this.entities.removeAllEntities();
 
       Physics.clear();
@@ -134,7 +142,7 @@ class Scene extends egret.DisplayObjectContainer {
       this.unload();
    }
 
-   protected onStart(){
+   protected onStart() {
 
    }
 
@@ -148,7 +156,7 @@ class Scene extends egret.DisplayObjectContainer {
 
    }
 
-   protected unload(){ }
+   protected unload() { }
 
    public update() {
       this.entities.updateLists();
@@ -164,8 +172,33 @@ class Scene extends egret.DisplayObjectContainer {
       this.renderableComponents.updateList();
    }
 
-   public render(){
-      for (let i = 0; i <this._renderers.length; i ++){
+   public postRender() {
+      let enabledCounter = 0;
+      if (this.enablePostProcessing) {
+         for (let i = 0; i < this._postProcessors.length; i++) {
+            if (this._postProcessors[i].enable) {
+               let isEven = MathHelper.isEven(enabledCounter);
+               enabledCounter ++;
+
+               this._postProcessors[i].process(this);
+            }
+         }
+      }
+
+      for (let i = 0; i < this._afterPostProcessorRenderer.length; i ++){
+         if (i == 0){
+            // TODO: 设置渲染对象
+         }
+
+         if (this._afterPostProcessorRenderer[i].camera){
+            this._afterPostProcessorRenderer[i].camera.forceMatrixUpdate();
+         }
+         this._afterPostProcessorRenderer[i].render(this);
+      }
+   }
+
+   public render() {
+      for (let i = 0; i < this._renderers.length; i++) {
          if (this._renderers[i].camera)
             this._renderers[i].camera.forceMatrixUpdate();
          this.camera.forceMatrixUpdate();

source/src/ECS/SceneManager.ts

@@ -68,17 +68,20 @@ class SceneManager {
             this.sceneTransition.preRender();
 
             if (this._scene && !this.sceneTransition.hasPreviousSceneRender){
-                this.scene.render();
+                this._scene.render();
+                this._scene.postRender();
                 this.sceneTransition.onBeginTransition();
             } else if (this.sceneTransition) {
                 if (this._scene && this.sceneTransition.isNewSceneLoaded) {
                     this._scene.render();
+                    this._scene.postRender();
                 }
     
                 this.sceneTransition.render();
             }
-        } else if (this.scene) {
-            this.scene.render();
+        } else if (this._scene) {
+            this._scene.render();
+            this._scene.postRender();
         }
     }
 

source/src/Graphics/PostProcessing/PostProcessor.ts

@@ -0,0 +1,37 @@
+class PostProcessor {
+    public enable: boolean;
+    public effect: egret.CustomFilter;
+    public scene: Scene;
+    public shape: egret.Shape;
+
+    constructor(effect: egret.CustomFilter = null){
+        this.effect = effect;
+    }
+
+    public onAddedToScene(scene: Scene){
+        this.scene = scene;
+        this.shape = new egret.Shape();
+        scene.addChild(this.shape);
+    }
+
+    public process(source: egret.DisplayObject){
+        this.drawFullscreenQuad(source, this.effect);
+    }
+
+    protected drawFullscreenQuad(texture: egret.DisplayObject, effect: egret.CustomFilter = null){
+        this.shape.graphics.clear();
+        this.shape.graphics.beginFill(0x000000, 1);
+        this.shape.graphics.drawRect(0, 0, texture.width, texture.height);
+        this.shape.graphics.endFill();
+        this.shape.filters = [effect];
+    }
+
+    public unload(){
+        if (this.effect){
+            this.effect = null;
+        }
+
+        this.scene = null;
+        this.scene.removeChild(this.shape);
+    }
+}

source/src/Math/MathHelper.ts

@@ -49,4 +49,8 @@ class MathHelper {
         let radians = MathHelper.toRadians(angleInDegrees);
         return new Vector2(Math.cos(radians) * radians + circleCenter.x, Math.sin(radians) * radians + circleCenter.y);
     }
+
+    public static isEven(value: number){
+        return value % 2 == 0;
+    }
 }