修复transform 不更新问题

优化transform 性能问题

demo/libs/framework/framework.d.ts

@@ -63,6 +63,12 @@ declare class SceneManager {
     static setActiveScene(scene: Scene): Scene;
     static getActiveScene(): Scene;
 }
+declare enum DirtyType {
+    clean = 0,
+    positionDirty = 1,
+    scaleDirty = 2,
+    rotationDirty = 3
+}
 declare class Transform {
     readonly entity: Entity;
     private _children;
@@ -80,6 +86,14 @@ declare class Transform {
     private _position;
     private _scale;
     private _localTransform;
+    private _hierachyDirty;
+    private _localDirty;
+    private _localPositionDirty;
+    private _localScaleDirty;
+    private _localRotationDirty;
+    private _positionDirty;
+    private _worldToLocalDirty;
+    private _worldInverseDirty;
     readonly childCount: number;
     constructor(entity: Entity);
     getChild(index: number): Transform;

demo/libs/framework/framework.js

@@ -289,6 +289,7 @@ var Entity = (function () {
     };
     Entity.prototype.update = function () {
         this.components.forEach(function (component) { return component.update(); });
+        this.transform.updateTransform();
     };
     Entity.prototype.destory = function () {
         this.scene.entities.remove(this);
@@ -377,6 +378,13 @@ var SceneManager = (function () {
     SceneManager._loadedScenes = new Map();
     return SceneManager;
 }());
+var DirtyType;
+(function (DirtyType) {
+    DirtyType[DirtyType["clean"] = 0] = "clean";
+    DirtyType[DirtyType["positionDirty"] = 1] = "positionDirty";
+    DirtyType[DirtyType["scaleDirty"] = 2] = "scaleDirty";
+    DirtyType[DirtyType["rotationDirty"] = 3] = "rotationDirty";
+})(DirtyType || (DirtyType = {}));
 var Transform = (function () {
     function Transform(entity) {
         this._localRotation = 0;
@@ -451,6 +459,7 @@ var Transform = (function () {
         if (localPosition == this._localPosition)
             return this;
         this._localPosition = localPosition;
+        this._localDirty = this._positionDirty = this._localPositionDirty = this._localRotationDirty = this._localScaleDirty = true;
         return this;
     };
     Transform.prototype.setPosition = function (position) {
@@ -473,20 +482,41 @@ var Transform = (function () {
         return this;
     };
     Transform.prototype.updateTransform = function () {
+        if (this._hierachyDirty != DirtyType.clean) {
+            if (this.parent)
+                this.parent.updateTransform();
+            if (this._localDirty) {
+                if (this._localPositionDirty) {
                     this._translationMatrix = Matrix2D.createTranslation(this._localPosition.x, this._localPosition.y);
+                    this._localPositionDirty = false;
+                }
+                if (this._localRotationDirty) {
                     this._rotationMatrix = Matrix2D.createRotation(this._localRotation);
+                    this._localRotationDirty = false;
+                }
+                if (this._localScaleDirty) {
                     this._scaleMatrix = Matrix2D.createScale(this._localScale.x, this._localScale.y);
+                    this._localScaleDirty = false;
+                }
                 this._localTransform = Matrix2D.multiply(this._scaleMatrix, this._rotationMatrix);
                 this._localTransform = Matrix2D.multiply(this._localTransform, this._translationMatrix);
                 if (!this.parent) {
                     this._worldTransform = this._localTransform;
                     this._rotation = this._localRotation;
                     this._scale = this._localScale;
+                    this._worldInverseDirty = true;
                 }
-        else {
+                this._localDirty = false;
+            }
+            if (this.parent) {
                 this._worldTransform = Matrix2D.multiply(this._localTransform, this.parent._worldTransform);
                 this._rotation = this._localRotation + this.parent._rotation;
                 this._scale = Vector2.multiply(this.parent._scale, this._localScale);
+                this._worldInverseDirty = true;
+            }
+            this._worldToLocalDirty = true;
+            this._positionDirty = true;
+            this._hierachyDirty = DirtyType.clean;
         }
     };
     return Transform;

source/bin/framework.d.ts

@@ -63,6 +63,12 @@ declare class SceneManager {
     static setActiveScene(scene: Scene): Scene;
     static getActiveScene(): Scene;
 }
+declare enum DirtyType {
+    clean = 0,
+    positionDirty = 1,
+    scaleDirty = 2,
+    rotationDirty = 3
+}
 declare class Transform {
     readonly entity: Entity;
     private _children;
@@ -80,6 +86,14 @@ declare class Transform {
     private _position;
     private _scale;
     private _localTransform;
+    private _hierachyDirty;
+    private _localDirty;
+    private _localPositionDirty;
+    private _localScaleDirty;
+    private _localRotationDirty;
+    private _positionDirty;
+    private _worldToLocalDirty;
+    private _worldInverseDirty;
     readonly childCount: number;
     constructor(entity: Entity);
     getChild(index: number): Transform;

source/bin/framework.js

@@ -289,6 +289,7 @@ var Entity = (function () {
     };
     Entity.prototype.update = function () {
         this.components.forEach(function (component) { return component.update(); });
+        this.transform.updateTransform();
     };
     Entity.prototype.destory = function () {
         this.scene.entities.remove(this);
@@ -377,6 +378,13 @@ var SceneManager = (function () {
     SceneManager._loadedScenes = new Map();
     return SceneManager;
 }());
+var DirtyType;
+(function (DirtyType) {
+    DirtyType[DirtyType["clean"] = 0] = "clean";
+    DirtyType[DirtyType["positionDirty"] = 1] = "positionDirty";
+    DirtyType[DirtyType["scaleDirty"] = 2] = "scaleDirty";
+    DirtyType[DirtyType["rotationDirty"] = 3] = "rotationDirty";
+})(DirtyType || (DirtyType = {}));
 var Transform = (function () {
     function Transform(entity) {
         this._localRotation = 0;
@@ -451,6 +459,7 @@ var Transform = (function () {
         if (localPosition == this._localPosition)
             return this;
         this._localPosition = localPosition;
+        this._localDirty = this._positionDirty = this._localPositionDirty = this._localRotationDirty = this._localScaleDirty = true;
         return this;
     };
     Transform.prototype.setPosition = function (position) {
@@ -473,20 +482,41 @@ var Transform = (function () {
         return this;
     };
     Transform.prototype.updateTransform = function () {
+        if (this._hierachyDirty != DirtyType.clean) {
+            if (this.parent)
+                this.parent.updateTransform();
+            if (this._localDirty) {
+                if (this._localPositionDirty) {
                     this._translationMatrix = Matrix2D.createTranslation(this._localPosition.x, this._localPosition.y);
+                    this._localPositionDirty = false;
+                }
+                if (this._localRotationDirty) {
                     this._rotationMatrix = Matrix2D.createRotation(this._localRotation);
+                    this._localRotationDirty = false;
+                }
+                if (this._localScaleDirty) {
                     this._scaleMatrix = Matrix2D.createScale(this._localScale.x, this._localScale.y);
+                    this._localScaleDirty = false;
+                }
                 this._localTransform = Matrix2D.multiply(this._scaleMatrix, this._rotationMatrix);
                 this._localTransform = Matrix2D.multiply(this._localTransform, this._translationMatrix);
                 if (!this.parent) {
                     this._worldTransform = this._localTransform;
                     this._rotation = this._localRotation;
                     this._scale = this._localScale;
+                    this._worldInverseDirty = true;
                 }
-        else {
+                this._localDirty = false;
+            }
+            if (this.parent) {
                 this._worldTransform = Matrix2D.multiply(this._localTransform, this.parent._worldTransform);
                 this._rotation = this._localRotation + this.parent._rotation;
                 this._scale = Vector2.multiply(this.parent._scale, this._localScale);
+                this._worldInverseDirty = true;
+            }
+            this._worldToLocalDirty = true;
+            this._positionDirty = true;
+            this._hierachyDirty = DirtyType.clean;
         }
     };
     return Transform;

source/src/ECS/Entity.ts

@@ -51,6 +51,7 @@ class Entity {
 
     public update(){
         this.components.forEach(component => component.update());
+        this.transform.updateTransform();
     }
 
     public destory(){

source/src/ECS/Transform.ts

@@ -1,3 +1,10 @@
+enum DirtyType{
+    clean,
+    positionDirty,
+    scaleDirty,
+    rotationDirty,
+}
+
 class Transform {
     /** 相关联的实体 */
     public readonly entity: Entity;
@@ -21,6 +28,14 @@ class Transform {
     private _scale: Vector2;
 
     private _localTransform;
+    private _hierachyDirty: DirtyType;
+    private _localDirty: boolean;
+    private _localPositionDirty: boolean;
+    private _localScaleDirty: boolean;
+    private _localRotationDirty: boolean;
+    private _positionDirty: boolean;
+    private _worldToLocalDirty: boolean;
+    private _worldInverseDirty: boolean;
 
     public get childCount(){
         return this._children.length;
@@ -89,6 +104,7 @@ class Transform {
             return this;
 
         this._localPosition = localPosition;
+        this._localDirty = this._positionDirty = this._localPositionDirty = this._localRotationDirty = this._localScaleDirty = true;
 
         return this;
     }
@@ -116,12 +132,27 @@ class Transform {
     }
 
     public updateTransform(){
+        if (this._hierachyDirty != DirtyType.clean){
             if (this.parent)
                 this.parent.updateTransform();
 
+            if (this._localDirty){
+                if (this._localPositionDirty){
                     this._translationMatrix = Matrix2D.createTranslation(this._localPosition.x, this._localPosition.y);
+                    this._localPositionDirty = false;
+                }
+
+                if (this._localRotationDirty){
                     this._rotationMatrix = Matrix2D.createRotation(this._localRotation);
+                    this._localRotationDirty = false;
+                }
+                
+
+                if (this._localScaleDirty){
                     this._scaleMatrix = Matrix2D.createScale(this._localScale.x, this._localScale.y);
+                    this._localScaleDirty = false;
+                }
+                
 
                 this._localTransform = Matrix2D.multiply(this._scaleMatrix, this._rotationMatrix);
                 this._localTransform = Matrix2D.multiply(this._localTransform, this._translationMatrix);
@@ -130,11 +161,24 @@ class Transform {
                     this._worldTransform = this._localTransform;
                     this._rotation = this._localRotation;
                     this._scale = this._localScale;
-        }else{
+                    this._worldInverseDirty = true;
+                }
+
+                this._localDirty = false;
+            }
+           
+            if (this.parent){
                 this._worldTransform = Matrix2D.multiply(this._localTransform, this.parent._worldTransform);
     
                 this._rotation = this._localRotation + this.parent._rotation;
                 this._scale = Vector2.multiply( this.parent._scale, this._localScale);
-        }
+                this._worldInverseDirty = true;
+            }
+            
+            this._worldToLocalDirty = true;
+            this._positionDirty = true;
+            this._hierachyDirty = DirtyType.clean;
+        }
+        
     }
 }