相机渲染

demo/libs/framework/framework.d.ts

@@ -230,6 +230,7 @@ declare class Scene extends egret.DisplayObjectContainer {
     onActive(): void;
     onDeactive(): void;
     update(): void;
+    render(): void;
     prepRenderState(): void;
     destory(): void;
 }
@@ -309,12 +310,14 @@ declare class Camera extends Component {
     private _origin;
     private _transformMatrix;
     private _inverseTransformMatrix;
+    private _projectionMatrix;
     private _minimumZoom;
     private _maximumZoom;
     private _areMatrixesDirty;
     private _inset;
     private _bounds;
     private _areBoundsDirty;
+    private _isProjectionMatrixDirty;
     readonly bounds: Rectangle;
     zoom: number;
     minimumZoom: number;
@@ -323,6 +326,7 @@ declare class Camera extends Component {
     readonly transformMatrix: Matrix2D;
     readonly inverseTransformMatrix: Matrix2D;
     constructor();
+    onSceneSizeChanged(newWidth: number, newHeight: number): void;
     setMinimumZoom(minZoom: number): Camera;
     setMaximumZoom(maxZoom: number): Camera;
     setZoom(zoom: number): this;
@@ -386,7 +390,7 @@ declare enum SpriteEffects {
 declare class SpriteRenderer extends RenderableComponent {
     private _sprite;
     private _origin;
-    readonly bounds: any;
+    protected getBounds(): Rectangle;
     sprite: egret.DisplayObject;
     setSprite(sprite: egret.DisplayObject): SpriteRenderer;
     origin: Vector2;

demo/libs/framework/framework.js

@@ -1133,6 +1133,7 @@ var Scene = (function (_super) {
         Physics.reset();
         if (this.entityProcessors)
             this.entityProcessors.begin();
+        this.camera.onSceneSizeChanged(this.stage.width, this.stage.height);
     };
     Scene.prototype.onActive = function () {
     };
@@ -1151,6 +1152,12 @@ var Scene = (function (_super) {
         if (this.entityProcessors)
             this.entityProcessors.lateUpdate();
         this.renderableComponents.updateList();
+        this.render();
+    };
+    Scene.prototype.render = function () {
+        for (var i = 0; i < this._renderers.length; i++) {
+            this._renderers[i].render(this);
+        }
     };
     Scene.prototype.prepRenderState = function () {
         this._projectionMatrix.m11 = 2 / this.stage.width;
@@ -1499,12 +1506,17 @@ var Camera = (function (_super) {
     __extends(Camera, _super);
     function Camera() {
         var _this = _super.call(this) || this;
+        _this._origin = Vector2.zero;
         _this._transformMatrix = Matrix2D.identity;
         _this._inverseTransformMatrix = Matrix2D.identity;
+        _this._projectionMatrix = Matrix2D.identity;
         _this._minimumZoom = 0.3;
         _this._maximumZoom = 3;
         _this._areMatrixesDirty = true;
+        _this._inset = new CameraInset();
+        _this._bounds = new Rectangle();
         _this._areBoundsDirty = true;
+        _this._isProjectionMatrixDirty = true;
         _this.setZoom(0);
         return _this;
     }
@@ -1604,6 +1616,12 @@ var Camera = (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Camera.prototype.onSceneSizeChanged = function (newWidth, newHeight) {
+        this._isProjectionMatrixDirty = true;
+        var oldOrigin = this._origin;
+        this.origin = new Vector2(newWidth / 2, newHeight / 2);
+        this.entity.transform.position = Vector2.add(this.entity.transform.position, Vector2.subtract(this._origin, oldOrigin));
+    };
     Camera.prototype.setMinimumZoom = function (minZoom) {
         if (this._zoom < minZoom)
             this._zoom = this.minimumZoom;
@@ -1733,6 +1751,8 @@ var RenderableComponent = (function (_super) {
     function RenderableComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._areBoundsDirty = true;
+        _this._bounds = new Rectangle();
+        _this._localOffset = Vector2.zero;
         return _this;
     }
     Object.defineProperty(RenderableComponent.prototype, "width", {
@@ -1786,8 +1806,7 @@ var RenderableComponent = (function (_super) {
     RenderableComponent.prototype.onBecameVisible = function () { };
     RenderableComponent.prototype.onBecameInvisible = function () { };
     RenderableComponent.prototype.isVisibleFromCamera = function (camera) {
-        this.isVisible = camera.bounds.intersects(this.bounds);
+        return true;
-        return this.isVisible;
     };
     RenderableComponent.prototype.onEntityTransformChanged = function (comp) {
         this._areBoundsDirty = true;
@@ -1805,8 +1824,7 @@ var SpriteRenderer = (function (_super) {
     function SpriteRenderer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SpriteRenderer.prototype, "bounds", {
+    SpriteRenderer.prototype.getBounds = function () {
-        get: function () {
         if (this._areBoundsDirty) {
             if (this._sprite) {
                 this._bounds.calculateBounds(this.entity.transform.position, this._localOffset, this._origin, this.entity.transform.scale, this.entity.transform.rotation, this._sprite.width, this._sprite.height);
@@ -1814,10 +1832,7 @@ var SpriteRenderer = (function (_super) {
             }
             return this.bounds;
         }
-        },
+    };
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SpriteRenderer.prototype, "sprite", {
         get: function () {
             return this._sprite;
@@ -2323,6 +2338,8 @@ var ComponentList = (function () {
     ComponentList.prototype.deregisterAllComponents = function () {
         for (var i = 0; i < this._components.length; i++) {
             var component = this._components[i];
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.remove(component);
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component), false);
             this._entity.scene.entityProcessors.onComponentRemoved(this._entity);
         }
@@ -2330,6 +2347,8 @@ var ComponentList = (function () {
     ComponentList.prototype.registerAllComponents = function () {
         for (var i = 0; i < this._components.length; i++) {
             var component = this._components[i];
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.add(component);
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
             this._entity.scene.entityProcessors.onComponentAdded(this._entity);
         }
@@ -2345,6 +2364,8 @@ var ComponentList = (function () {
         if (this._componentsToAdd.length > 0) {
             for (var i = 0, count = this._componentsToAdd.length; i < count; i++) {
                 var component = this._componentsToAdd[i];
+                if (component instanceof RenderableComponent)
+                    this._entity.scene.renderableComponents.add(component);
                 this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
                 this._entity.scene.entityProcessors.onComponentAdded(this._entity);
                 this._components.push(component);

demo/src/Main.ts

@@ -105,16 +105,15 @@ class Main extends eui.UILayer {
      * Create scene interface
      */
     protected createGameScene(): void {
+        let image = new eui.Image(RES.getRes("checkbox_select_disabled_png"));
+        this.addChild(image);
         let scene = SceneManager.createScene("main", new MainScene(this)).setActive();
         let player = scene.createEntity("player");
-        player.addComponent(new PolygonMesh([new Vector2(0, 0),
+        player.addComponent(new SpriteRenderer()).setSprite(image)
-            new Vector2(10, 0),
-            new Vector2(10, 10),
-            new Vector2(0, 10),
-            new Vector2(0, 0)]));
         player.addComponent(new SpawnComponent(EnemyType.worm));
         player.addComponent(new BoxCollider()).setSize(100, 100).isTrigger = true;
         player.addComponent(new Mover());
+        player.position = new Vector2(100, 100);
 
         let player2 = scene.createEntity("player2");
         player2.addComponent(new BoxCollider()).setSize(99, 99);

demo/src/game/SpawnerComponent.ts

@@ -16,7 +16,7 @@ class SpawnComponent extends Component implements ITriggerListener {
     }
 
     public update() {
-        // console.log("update");
+        console.log("update");
     }
 
     public onTriggerEnter(other: Collider, local: Collider){

source/bin/framework.d.ts

@@ -230,6 +230,7 @@ declare class Scene extends egret.DisplayObjectContainer {
     onActive(): void;
     onDeactive(): void;
     update(): void;
+    render(): void;
     prepRenderState(): void;
     destory(): void;
 }
@@ -309,12 +310,14 @@ declare class Camera extends Component {
     private _origin;
     private _transformMatrix;
     private _inverseTransformMatrix;
+    private _projectionMatrix;
     private _minimumZoom;
     private _maximumZoom;
     private _areMatrixesDirty;
     private _inset;
     private _bounds;
     private _areBoundsDirty;
+    private _isProjectionMatrixDirty;
     readonly bounds: Rectangle;
     zoom: number;
     minimumZoom: number;
@@ -323,6 +326,7 @@ declare class Camera extends Component {
     readonly transformMatrix: Matrix2D;
     readonly inverseTransformMatrix: Matrix2D;
     constructor();
+    onSceneSizeChanged(newWidth: number, newHeight: number): void;
     setMinimumZoom(minZoom: number): Camera;
     setMaximumZoom(maxZoom: number): Camera;
     setZoom(zoom: number): this;
@@ -386,7 +390,7 @@ declare enum SpriteEffects {
 declare class SpriteRenderer extends RenderableComponent {
     private _sprite;
     private _origin;
-    readonly bounds: any;
+    protected getBounds(): Rectangle;
     sprite: egret.DisplayObject;
     setSprite(sprite: egret.DisplayObject): SpriteRenderer;
     origin: Vector2;

source/bin/framework.js

@@ -1133,6 +1133,7 @@ var Scene = (function (_super) {
         Physics.reset();
         if (this.entityProcessors)
             this.entityProcessors.begin();
+        this.camera.onSceneSizeChanged(this.stage.width, this.stage.height);
     };
     Scene.prototype.onActive = function () {
     };
@@ -1151,6 +1152,12 @@ var Scene = (function (_super) {
         if (this.entityProcessors)
             this.entityProcessors.lateUpdate();
         this.renderableComponents.updateList();
+        this.render();
+    };
+    Scene.prototype.render = function () {
+        for (var i = 0; i < this._renderers.length; i++) {
+            this._renderers[i].render(this);
+        }
     };
     Scene.prototype.prepRenderState = function () {
         this._projectionMatrix.m11 = 2 / this.stage.width;
@@ -1499,12 +1506,17 @@ var Camera = (function (_super) {
     __extends(Camera, _super);
     function Camera() {
         var _this = _super.call(this) || this;
+        _this._origin = Vector2.zero;
         _this._transformMatrix = Matrix2D.identity;
         _this._inverseTransformMatrix = Matrix2D.identity;
+        _this._projectionMatrix = Matrix2D.identity;
         _this._minimumZoom = 0.3;
         _this._maximumZoom = 3;
         _this._areMatrixesDirty = true;
+        _this._inset = new CameraInset();
+        _this._bounds = new Rectangle();
         _this._areBoundsDirty = true;
+        _this._isProjectionMatrixDirty = true;
         _this.setZoom(0);
         return _this;
     }
@@ -1604,6 +1616,12 @@ var Camera = (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Camera.prototype.onSceneSizeChanged = function (newWidth, newHeight) {
+        this._isProjectionMatrixDirty = true;
+        var oldOrigin = this._origin;
+        this.origin = new Vector2(newWidth / 2, newHeight / 2);
+        this.entity.transform.position = Vector2.add(this.entity.transform.position, Vector2.subtract(this._origin, oldOrigin));
+    };
     Camera.prototype.setMinimumZoom = function (minZoom) {
         if (this._zoom < minZoom)
             this._zoom = this.minimumZoom;
@@ -1733,6 +1751,8 @@ var RenderableComponent = (function (_super) {
     function RenderableComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._areBoundsDirty = true;
+        _this._bounds = new Rectangle();
+        _this._localOffset = Vector2.zero;
         return _this;
     }
     Object.defineProperty(RenderableComponent.prototype, "width", {
@@ -1786,8 +1806,7 @@ var RenderableComponent = (function (_super) {
     RenderableComponent.prototype.onBecameVisible = function () { };
     RenderableComponent.prototype.onBecameInvisible = function () { };
     RenderableComponent.prototype.isVisibleFromCamera = function (camera) {
-        this.isVisible = camera.bounds.intersects(this.bounds);
+        return true;
-        return this.isVisible;
     };
     RenderableComponent.prototype.onEntityTransformChanged = function (comp) {
         this._areBoundsDirty = true;
@@ -1805,8 +1824,7 @@ var SpriteRenderer = (function (_super) {
     function SpriteRenderer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(SpriteRenderer.prototype, "bounds", {
+    SpriteRenderer.prototype.getBounds = function () {
-        get: function () {
         if (this._areBoundsDirty) {
             if (this._sprite) {
                 this._bounds.calculateBounds(this.entity.transform.position, this._localOffset, this._origin, this.entity.transform.scale, this.entity.transform.rotation, this._sprite.width, this._sprite.height);
@@ -1814,10 +1832,7 @@ var SpriteRenderer = (function (_super) {
             }
             return this.bounds;
         }
-        },
+    };
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SpriteRenderer.prototype, "sprite", {
         get: function () {
             return this._sprite;
@@ -2323,6 +2338,8 @@ var ComponentList = (function () {
     ComponentList.prototype.deregisterAllComponents = function () {
         for (var i = 0; i < this._components.length; i++) {
             var component = this._components[i];
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.remove(component);
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component), false);
             this._entity.scene.entityProcessors.onComponentRemoved(this._entity);
         }
@@ -2330,6 +2347,8 @@ var ComponentList = (function () {
     ComponentList.prototype.registerAllComponents = function () {
         for (var i = 0; i < this._components.length; i++) {
             var component = this._components[i];
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.add(component);
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
             this._entity.scene.entityProcessors.onComponentAdded(this._entity);
         }
@@ -2345,6 +2364,8 @@ var ComponentList = (function () {
         if (this._componentsToAdd.length > 0) {
             for (var i = 0, count = this._componentsToAdd.length; i < count; i++) {
                 var component = this._componentsToAdd[i];
+                if (component instanceof RenderableComponent)
+                    this._entity.scene.renderableComponents.add(component);
                 this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
                 this._entity.scene.entityProcessors.onComponentAdded(this._entity);
                 this._components.push(component);

source/src/ECS/Components/Camera.ts

@@ -1,16 +1,18 @@
 ///<reference path="../Component.ts"/>
 class Camera extends Component {
     private _zoom;
-    private _origin: Vector2;
+    private _origin: Vector2 = Vector2.zero;
     private _transformMatrix: Matrix2D = Matrix2D.identity;
     private _inverseTransformMatrix = Matrix2D.identity;
+    private _projectionMatrix = Matrix2D.identity;
 
     private _minimumZoom = 0.3;
     private _maximumZoom = 3;
     private _areMatrixesDirty = true;
-    private _inset: CameraInset;
+    private _inset: CameraInset = new CameraInset();
-    private _bounds: Rectangle;
+    private _bounds: Rectangle = new Rectangle();
     private _areBoundsDirty = true;
+    private _isProjectionMatrixDirty = true;
 
     public get bounds(){
         if (this._areMatrixesDirty)
@@ -104,6 +106,14 @@ class Camera extends Component {
         this.setZoom(0);
     }
 
+    public onSceneSizeChanged(newWidth: number, newHeight: number){
+        this._isProjectionMatrixDirty = true;
+        let oldOrigin = this._origin;
+        this.origin = new Vector2(newWidth / 2, newHeight / 2);
+
+        this.entity.transform.position = Vector2.add(this.entity.transform.position, Vector2.subtract(this._origin, oldOrigin));
+    }
+
     public setMinimumZoom(minZoom: number): Camera{
         if (this._zoom < minZoom)
             this._zoom = this.minimumZoom;

source/src/ECS/Components/RenderableComponent.ts

@@ -4,8 +4,8 @@
 abstract class RenderableComponent extends Component implements IRenderable {
     private _isVisible: boolean;
     protected _areBoundsDirty = true;
-    protected _bounds: Rectangle;
+    protected _bounds: Rectangle = new Rectangle();
-    protected _localOffset: Vector2;
+    protected _localOffset: Vector2 = Vector2.zero;
 
     public get width(){
         return this.getWidth();
@@ -57,8 +57,10 @@ abstract class RenderableComponent extends Component implements IRenderable {
     public abstract render(camera: Camera);
 
     public isVisibleFromCamera(camera: Camera): boolean{
-        this.isVisible = camera.bounds.intersects(this.bounds);
+        // this.isVisible = camera.bounds.intersects(this.bounds);
-        return this.isVisible;
+        // return this.isVisible;
+
+        return true;
     }
 
     public onEntityTransformChanged(comp: ComponentTransform){

source/src/ECS/Components/SpriteRenderer.ts

@@ -2,7 +2,7 @@ class SpriteRenderer extends RenderableComponent {
     private _sprite: egret.DisplayObject;
     private _origin: Vector2;
 
-    public get bounds(){
+    protected getBounds(){
         if (this._areBoundsDirty){
             if (this._sprite){
                 this._bounds.calculateBounds(this.entity.transform.position, this._localOffset, this._origin,

source/src/ECS/Scene.ts

@@ -109,6 +109,8 @@ class Scene extends egret.DisplayObjectContainer {
 
       if (this.entityProcessors)
          this.entityProcessors.begin();
+
+      this.camera.onSceneSizeChanged(this.stage.width, this.stage.height);
    }
 
    /** 场景激活 */
@@ -140,6 +142,13 @@ class Scene extends egret.DisplayObjectContainer {
          this.entityProcessors.lateUpdate();
 
       this.renderableComponents.updateList();
+      this.render();
+   }
+
+   public render(){
+      for (let i = 0; i <this._renderers.length; i ++){
+         this._renderers[i].render(this);
+      }
    }
 
    public prepRenderState() {

source/src/ECS/Utils/ComponentList.ts

@@ -44,6 +44,9 @@ class ComponentList {
         for (let i = 0; i < this._components.length; i ++){
             let component = this._components[i];
 
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.remove(component);
+
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component), false);
             this._entity.scene.entityProcessors.onComponentRemoved(this._entity);
         }
@@ -53,6 +56,9 @@ class ComponentList {
         for (let i = 0; i < this._components.length; i ++){
             let component = this._components[i];
 
+            if (component instanceof RenderableComponent)
+                this._entity.scene.renderableComponents.add(component);
+
             this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
             this._entity.scene.entityProcessors.onComponentAdded(this._entity);
         }
@@ -71,7 +77,8 @@ class ComponentList {
         if (this._componentsToAdd.length > 0){
             for (let i = 0, count = this._componentsToAdd.length; i < count; i ++){
                 let component = this._componentsToAdd[i];
-
+                if (component instanceof RenderableComponent)
+                    this._entity.scene.renderableComponents.add(component);
                 this._entity.componentBits.set(ComponentTypeManager.getIndexFor(component));
                 this._entity.scene.entityProcessors.onComponentAdded(this._entity);