新增跟随相机

demo/libs/framework/framework.d.ts

@@ -303,6 +303,7 @@ declare class Transform {
     setLocalPosition(localPosition: Vector2): this;
     setPosition(position: Vector2): this;
     setDirty(dirtyFlagType: DirtyType): void;
+    roundPosition(): void;
     updateTransform(): void;
 }
 declare class Camera extends Component {
@@ -323,6 +324,7 @@ declare class Camera extends Component {
     minimumZoom: number;
     maximumZoom: number;
     origin: Vector2;
+    position: Vector2;
     readonly transformMatrix: Matrix2D;
     readonly inverseTransformMatrix: Matrix2D;
     constructor();
@@ -344,6 +346,29 @@ declare class CameraInset {
     top: any;
     bottom: any;
 }
+declare class FollowCamera extends Component {
+    camera: Camera;
+    followLerp: number;
+    deadzone: Rectangle;
+    focusOffset: Vector2;
+    mapLockEnabled: boolean;
+    mapSize: Vector2;
+    private _targetEntity;
+    private _cameraStyle;
+    private _worldSpaceDeadZone;
+    private _desiredPositionDelta;
+    private _targetCollider;
+    constructor(targetEntity: Entity, cameraStyle?: CameraStyle);
+    onAddedToEntity(): void;
+    follow(targetEntity: Entity, cameraStyle?: CameraStyle): void;
+    update(): void;
+    private clampToMapSize;
+    private updateFollow;
+}
+declare enum CameraStyle {
+    lockOn = 0,
+    cameraWindow = 1
+}
 declare class Mesh extends Component {
     private _verts;
     private _primitiveCount;
@@ -647,9 +672,11 @@ declare class Rectangle {
     readonly bottom: number;
     readonly center: Vector2;
     location: Vector2;
+    size: Vector2;
     constructor(x?: number, y?: number, width?: number, height?: number);
     intersects(value: Rectangle): boolean;
     contains(value: Vector2): boolean;
+    containsRect(value: Rectangle): boolean;
     static fromMinMax(minX: number, minY: number, maxX: number, maxY: number): Rectangle;
     getClosestPointOnRectangleBorderToPoint(point: Point): {
         res: Vector2;
@@ -676,9 +703,11 @@ declare class Vector2 {
     static subtract(value1: Vector2, value2: Vector2): Vector2;
     normalize(): void;
     length(): number;
+    round(): Vector2;
     static normalize(value: Vector2): Vector2;
     static dot(value1: Vector2, value2: Vector2): number;
     static distanceSquared(value1: Vector2, value2: Vector2): number;
+    static clamp(value1: Vector2, min: Vector2, max: Vector2): Vector2;
     static lerp(value1: Vector2, value2: Vector2, amount: number): Vector2;
     static transform(position: Vector2, matrix: Matrix2D): Vector2;
     static distance(value1: Vector2, value2: Vector2): number;

demo/libs/framework/framework.js

@@ -1162,8 +1162,8 @@ var Scene = (function (_super) {
         }
     };
     Scene.prototype.prepRenderState = function () {
-        this._projectionMatrix.m11 = 2 / this.stage.width;
+        this._projectionMatrix.m11 = 2 / this.stage.stageWidth;
-        this._projectionMatrix.m22 = -2 / this.stage.height;
+        this._projectionMatrix.m22 = -2 / this.stage.stageHeight;
         this._transformMatrix = this.camera.transformMatrix;
         this._matrixTransformMatrix = Matrix2D.multiply(this._transformMatrix, this._projectionMatrix);
     };
@@ -1464,6 +1464,9 @@ var Transform = (function () {
             }
         }
     };
+    Transform.prototype.roundPosition = function () {
+        this.position = this._position.round();
+    };
     Transform.prototype.updateTransform = function () {
         if (this._hierachyDirty != DirtyType.clean) {
             if (this.parent)
@@ -1600,6 +1603,16 @@ var Camera = (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Camera.prototype, "position", {
+        get: function () {
+            return this.entity.transform.position;
+        },
+        set: function (value) {
+            this.entity.transform.position = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Camera.prototype, "transformMatrix", {
         get: function () {
             if (this._areBoundsDirty)
@@ -1696,6 +1709,103 @@ var CameraInset = (function () {
     }
     return CameraInset;
 }());
+var FollowCamera = (function (_super) {
+    __extends(FollowCamera, _super);
+    function FollowCamera(targetEntity, cameraStyle) {
+        if (cameraStyle === void 0) { cameraStyle = CameraStyle.lockOn; }
+        var _this = _super.call(this) || this;
+        _this.followLerp = 0.1;
+        _this.deadzone = new Rectangle();
+        _this.focusOffset = new Vector2();
+        _this.mapSize = new Vector2();
+        _this._worldSpaceDeadZone = new Rectangle();
+        _this._desiredPositionDelta = new Vector2();
+        _this._targetEntity = targetEntity;
+        _this._cameraStyle = cameraStyle;
+        _this.camera = null;
+        return _this;
+    }
+    FollowCamera.prototype.onAddedToEntity = function () {
+        if (!this.camera)
+            this.camera = this.entity.scene.camera;
+        this.follow(this._targetEntity, this._cameraStyle);
+    };
+    FollowCamera.prototype.follow = function (targetEntity, cameraStyle) {
+        if (cameraStyle === void 0) { cameraStyle = CameraStyle.cameraWindow; }
+        this._targetEntity = targetEntity;
+        this._cameraStyle = cameraStyle;
+        var cameraBounds = this.camera.bounds;
+        switch (this._cameraStyle) {
+            case CameraStyle.cameraWindow:
+                var w = cameraBounds.width / 6;
+                var h = cameraBounds.height / 3;
+                this.deadzone = new Rectangle((cameraBounds.width - w) / 2, (cameraBounds.height - h) / 2, w, h);
+                break;
+            case CameraStyle.lockOn:
+                this.deadzone = new Rectangle(cameraBounds.width / 2, cameraBounds.height / 2, 10, 10);
+                break;
+        }
+    };
+    FollowCamera.prototype.update = function () {
+        var halfScreen = Vector2.multiply(this.camera.bounds.size, new Vector2(0.5));
+        this._worldSpaceDeadZone.x = this.camera.position.x - halfScreen.x + this.deadzone.x + this.focusOffset.x;
+        this._worldSpaceDeadZone.y = this.camera.position.y - halfScreen.y + this.deadzone.y + this.focusOffset.y;
+        this._worldSpaceDeadZone.width = this.deadzone.width;
+        this._worldSpaceDeadZone.height = this.deadzone.height;
+        if (this._targetEntity)
+            this.updateFollow();
+        this.camera.position = Vector2.lerp(this.camera.position, Vector2.add(this.camera.position, this._desiredPositionDelta), this.followLerp);
+        this.camera.entity.transform.roundPosition();
+        if (this.mapLockEnabled) {
+            this.camera.position = this.clampToMapSize(this.camera.position);
+            this.camera.entity.transform.roundPosition();
+        }
+    };
+    FollowCamera.prototype.clampToMapSize = function (position) {
+        var halfScreen = Vector2.multiply(new Vector2(this.camera.bounds.width, this.camera.bounds.height), new Vector2(0.5));
+        var cameraMax = new Vector2(this.mapSize.x - halfScreen.x, this.mapSize.y - halfScreen.y);
+        return Vector2.clamp(position, halfScreen, cameraMax);
+    };
+    FollowCamera.prototype.updateFollow = function () {
+        this._desiredPositionDelta.x = this._desiredPositionDelta.y = 0;
+        if (this._cameraStyle == CameraStyle.lockOn) {
+            var targetX = this._targetEntity.transform.position.x;
+            var targetY = this._targetEntity.transform.position.y;
+            if (this._worldSpaceDeadZone.x > targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+            else if (this._worldSpaceDeadZone.x < targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+            if (this._worldSpaceDeadZone.y < targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+            else if (this._worldSpaceDeadZone.y > targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+        }
+        else {
+            if (!this._targetCollider) {
+                this._targetCollider = this._targetEntity.getComponent(Collider);
+                if (!this._targetCollider)
+                    return;
+            }
+            var targetBounds = this._targetEntity.getComponent(Collider).bounds;
+            if (!this._worldSpaceDeadZone.containsRect(targetBounds)) {
+                if (this._worldSpaceDeadZone.left > targetBounds.left)
+                    this._desiredPositionDelta.x = targetBounds.left - this._worldSpaceDeadZone.left;
+                else if (this._worldSpaceDeadZone.right < targetBounds.right)
+                    this._desiredPositionDelta.x = targetBounds.right - this._worldSpaceDeadZone.right;
+                if (this._worldSpaceDeadZone.bottom < targetBounds.bottom)
+                    this._desiredPositionDelta.y = targetBounds.bottom - this._worldSpaceDeadZone.bottom;
+                else if (this._worldSpaceDeadZone.top > targetBounds.top)
+                    this._desiredPositionDelta.y = targetBounds.top - this._worldSpaceDeadZone.top;
+            }
+        }
+    };
+    return FollowCamera;
+}(Component));
+var CameraStyle;
+(function (CameraStyle) {
+    CameraStyle[CameraStyle["lockOn"] = 0] = "lockOn";
+    CameraStyle[CameraStyle["cameraWindow"] = 1] = "cameraWindow";
+})(CameraStyle || (CameraStyle = {}));
 var Mesh = (function (_super) {
     __extends(Mesh, _super);
     function Mesh() {
@@ -3025,6 +3135,17 @@ var Rectangle = (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Rectangle.prototype, "size", {
+        get: function () {
+            return new Vector2(this.width, this.height);
+        },
+        set: function (value) {
+            this.width = value.x;
+            this.height = value.y;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Rectangle.prototype.intersects = function (value) {
         return value.left < this.right &&
             this.left < value.right &&
@@ -3036,6 +3157,11 @@ var Rectangle = (function () {
             (this.y <= value.y)) &&
             (value.y < (this.y + this.height)));
     };
+    Rectangle.prototype.containsRect = function (value) {
+        return ((((this.x <= value.x) && (value.x < (this.x + this.width))) &&
+            (this.y <= value.y)) &&
+            (value.y < (this.y + this.height)));
+    };
     Rectangle.fromMinMax = function (minX, minY, maxX, maxY) {
         return new Rectangle(minX, minY, maxX - minX, maxY - minY);
     };
@@ -3208,6 +3334,9 @@ var Vector2 = (function () {
     Vector2.prototype.length = function () {
         return Math.sqrt((this.x * this.x) + (this.y * this.y));
     };
+    Vector2.prototype.round = function () {
+        return new Vector2(Math.round(this.x), Math.round(this.y));
+    };
     Vector2.normalize = function (value) {
         var val = 1 / Math.sqrt((value.x * value.x) + (value.y * value.y));
         value.x *= val;
@@ -3221,6 +3350,9 @@ var Vector2 = (function () {
         var v1 = value1.x - value2.x, v2 = value1.y - value2.y;
         return (v1 * v1) + (v2 * v2);
     };
+    Vector2.clamp = function (value1, min, max) {
+        return new Vector2(MathHelper.clamp(value1.x, min.x, max.x), MathHelper.clamp(value1.y, min.y, max.y));
+    };
     Vector2.lerp = function (value1, value2, amount) {
         return new Vector2(MathHelper.lerp(value1.x, value2.x, amount), MathHelper.lerp(value1.y, value2.y, amount));
     };

demo/src/Main.ts

@@ -104,6 +104,7 @@ class Main extends eui.UILayer {
         player.addComponent(new SpriteRenderer()).setSprite(image);
         player.addComponent(new SpawnComponent(EnemyType.worm));
         player.addComponent(new PlayerController());
+        player.addComponent(new FollowCamera(player)).focusOffset = new Vector2(this.stage.stageWidth / 2, this.stage.stageHeight / 2);
 
         for (let i = 0; i < 20; i ++){
             let image = new eui.Image(RES.getRes("checkbox_select_disabled_png"));
@@ -113,9 +114,6 @@ class Main extends eui.UILayer {
             player2.transform.position = new Vector2(Math.random() * 100 * i, Math.random() * 100 * i);
         }
 
-
-        scene.camera.setPosition(new Vector2(-200, -200));
-
         // Main.emitter.addObserver(CoreEmitterType.Update, ()=>{
         //     console.log("update emitter");
         // });

demo/src/game/PlayerController.ts

@@ -22,8 +22,8 @@ class PlayerController extends Component {
         if (this.down){
             let camera = SceneManager.getActiveScene().camera;
             let worldVec = camera.screenToWorldPoint(this.touchPoint);
-            console.log(worldVec, camera.transform.position);
+            this.entity.position = Vector2.lerp(this.entity.position, Vector2.add(worldVec, 
-            camera.transform.position = Vector2.lerp(camera.transform.position, worldVec, Time.deltaTime);
+            new Vector2(this.entity.scene.stage.stageWidth / 2, this.entity.scene.stage.stageHeight / 2)), Time.deltaTime);
         }
     }
 }

source/bin/framework.d.ts

@@ -303,6 +303,7 @@ declare class Transform {
     setLocalPosition(localPosition: Vector2): this;
     setPosition(position: Vector2): this;
     setDirty(dirtyFlagType: DirtyType): void;
+    roundPosition(): void;
     updateTransform(): void;
 }
 declare class Camera extends Component {
@@ -323,6 +324,7 @@ declare class Camera extends Component {
     minimumZoom: number;
     maximumZoom: number;
     origin: Vector2;
+    position: Vector2;
     readonly transformMatrix: Matrix2D;
     readonly inverseTransformMatrix: Matrix2D;
     constructor();
@@ -344,6 +346,29 @@ declare class CameraInset {
     top: any;
     bottom: any;
 }
+declare class FollowCamera extends Component {
+    camera: Camera;
+    followLerp: number;
+    deadzone: Rectangle;
+    focusOffset: Vector2;
+    mapLockEnabled: boolean;
+    mapSize: Vector2;
+    private _targetEntity;
+    private _cameraStyle;
+    private _worldSpaceDeadZone;
+    private _desiredPositionDelta;
+    private _targetCollider;
+    constructor(targetEntity: Entity, cameraStyle?: CameraStyle);
+    onAddedToEntity(): void;
+    follow(targetEntity: Entity, cameraStyle?: CameraStyle): void;
+    update(): void;
+    private clampToMapSize;
+    private updateFollow;
+}
+declare enum CameraStyle {
+    lockOn = 0,
+    cameraWindow = 1
+}
 declare class Mesh extends Component {
     private _verts;
     private _primitiveCount;
@@ -647,9 +672,11 @@ declare class Rectangle {
     readonly bottom: number;
     readonly center: Vector2;
     location: Vector2;
+    size: Vector2;
     constructor(x?: number, y?: number, width?: number, height?: number);
     intersects(value: Rectangle): boolean;
     contains(value: Vector2): boolean;
+    containsRect(value: Rectangle): boolean;
     static fromMinMax(minX: number, minY: number, maxX: number, maxY: number): Rectangle;
     getClosestPointOnRectangleBorderToPoint(point: Point): {
         res: Vector2;
@@ -676,9 +703,11 @@ declare class Vector2 {
     static subtract(value1: Vector2, value2: Vector2): Vector2;
     normalize(): void;
     length(): number;
+    round(): Vector2;
     static normalize(value: Vector2): Vector2;
     static dot(value1: Vector2, value2: Vector2): number;
     static distanceSquared(value1: Vector2, value2: Vector2): number;
+    static clamp(value1: Vector2, min: Vector2, max: Vector2): Vector2;
     static lerp(value1: Vector2, value2: Vector2, amount: number): Vector2;
     static transform(position: Vector2, matrix: Matrix2D): Vector2;
     static distance(value1: Vector2, value2: Vector2): number;

source/bin/framework.js

@@ -1162,8 +1162,8 @@ var Scene = (function (_super) {
         }
     };
     Scene.prototype.prepRenderState = function () {
-        this._projectionMatrix.m11 = 2 / this.stage.width;
+        this._projectionMatrix.m11 = 2 / this.stage.stageWidth;
-        this._projectionMatrix.m22 = -2 / this.stage.height;
+        this._projectionMatrix.m22 = -2 / this.stage.stageHeight;
         this._transformMatrix = this.camera.transformMatrix;
         this._matrixTransformMatrix = Matrix2D.multiply(this._transformMatrix, this._projectionMatrix);
     };
@@ -1464,6 +1464,9 @@ var Transform = (function () {
             }
         }
     };
+    Transform.prototype.roundPosition = function () {
+        this.position = this._position.round();
+    };
     Transform.prototype.updateTransform = function () {
         if (this._hierachyDirty != DirtyType.clean) {
             if (this.parent)
@@ -1600,6 +1603,16 @@ var Camera = (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Camera.prototype, "position", {
+        get: function () {
+            return this.entity.transform.position;
+        },
+        set: function (value) {
+            this.entity.transform.position = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Camera.prototype, "transformMatrix", {
         get: function () {
             if (this._areBoundsDirty)
@@ -1696,6 +1709,103 @@ var CameraInset = (function () {
     }
     return CameraInset;
 }());
+var FollowCamera = (function (_super) {
+    __extends(FollowCamera, _super);
+    function FollowCamera(targetEntity, cameraStyle) {
+        if (cameraStyle === void 0) { cameraStyle = CameraStyle.lockOn; }
+        var _this = _super.call(this) || this;
+        _this.followLerp = 0.1;
+        _this.deadzone = new Rectangle();
+        _this.focusOffset = new Vector2();
+        _this.mapSize = new Vector2();
+        _this._worldSpaceDeadZone = new Rectangle();
+        _this._desiredPositionDelta = new Vector2();
+        _this._targetEntity = targetEntity;
+        _this._cameraStyle = cameraStyle;
+        _this.camera = null;
+        return _this;
+    }
+    FollowCamera.prototype.onAddedToEntity = function () {
+        if (!this.camera)
+            this.camera = this.entity.scene.camera;
+        this.follow(this._targetEntity, this._cameraStyle);
+    };
+    FollowCamera.prototype.follow = function (targetEntity, cameraStyle) {
+        if (cameraStyle === void 0) { cameraStyle = CameraStyle.cameraWindow; }
+        this._targetEntity = targetEntity;
+        this._cameraStyle = cameraStyle;
+        var cameraBounds = this.camera.bounds;
+        switch (this._cameraStyle) {
+            case CameraStyle.cameraWindow:
+                var w = cameraBounds.width / 6;
+                var h = cameraBounds.height / 3;
+                this.deadzone = new Rectangle((cameraBounds.width - w) / 2, (cameraBounds.height - h) / 2, w, h);
+                break;
+            case CameraStyle.lockOn:
+                this.deadzone = new Rectangle(cameraBounds.width / 2, cameraBounds.height / 2, 10, 10);
+                break;
+        }
+    };
+    FollowCamera.prototype.update = function () {
+        var halfScreen = Vector2.multiply(this.camera.bounds.size, new Vector2(0.5));
+        this._worldSpaceDeadZone.x = this.camera.position.x - halfScreen.x + this.deadzone.x + this.focusOffset.x;
+        this._worldSpaceDeadZone.y = this.camera.position.y - halfScreen.y + this.deadzone.y + this.focusOffset.y;
+        this._worldSpaceDeadZone.width = this.deadzone.width;
+        this._worldSpaceDeadZone.height = this.deadzone.height;
+        if (this._targetEntity)
+            this.updateFollow();
+        this.camera.position = Vector2.lerp(this.camera.position, Vector2.add(this.camera.position, this._desiredPositionDelta), this.followLerp);
+        this.camera.entity.transform.roundPosition();
+        if (this.mapLockEnabled) {
+            this.camera.position = this.clampToMapSize(this.camera.position);
+            this.camera.entity.transform.roundPosition();
+        }
+    };
+    FollowCamera.prototype.clampToMapSize = function (position) {
+        var halfScreen = Vector2.multiply(new Vector2(this.camera.bounds.width, this.camera.bounds.height), new Vector2(0.5));
+        var cameraMax = new Vector2(this.mapSize.x - halfScreen.x, this.mapSize.y - halfScreen.y);
+        return Vector2.clamp(position, halfScreen, cameraMax);
+    };
+    FollowCamera.prototype.updateFollow = function () {
+        this._desiredPositionDelta.x = this._desiredPositionDelta.y = 0;
+        if (this._cameraStyle == CameraStyle.lockOn) {
+            var targetX = this._targetEntity.transform.position.x;
+            var targetY = this._targetEntity.transform.position.y;
+            if (this._worldSpaceDeadZone.x > targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+            else if (this._worldSpaceDeadZone.x < targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+            if (this._worldSpaceDeadZone.y < targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+            else if (this._worldSpaceDeadZone.y > targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+        }
+        else {
+            if (!this._targetCollider) {
+                this._targetCollider = this._targetEntity.getComponent(Collider);
+                if (!this._targetCollider)
+                    return;
+            }
+            var targetBounds = this._targetEntity.getComponent(Collider).bounds;
+            if (!this._worldSpaceDeadZone.containsRect(targetBounds)) {
+                if (this._worldSpaceDeadZone.left > targetBounds.left)
+                    this._desiredPositionDelta.x = targetBounds.left - this._worldSpaceDeadZone.left;
+                else if (this._worldSpaceDeadZone.right < targetBounds.right)
+                    this._desiredPositionDelta.x = targetBounds.right - this._worldSpaceDeadZone.right;
+                if (this._worldSpaceDeadZone.bottom < targetBounds.bottom)
+                    this._desiredPositionDelta.y = targetBounds.bottom - this._worldSpaceDeadZone.bottom;
+                else if (this._worldSpaceDeadZone.top > targetBounds.top)
+                    this._desiredPositionDelta.y = targetBounds.top - this._worldSpaceDeadZone.top;
+            }
+        }
+    };
+    return FollowCamera;
+}(Component));
+var CameraStyle;
+(function (CameraStyle) {
+    CameraStyle[CameraStyle["lockOn"] = 0] = "lockOn";
+    CameraStyle[CameraStyle["cameraWindow"] = 1] = "cameraWindow";
+})(CameraStyle || (CameraStyle = {}));
 var Mesh = (function (_super) {
     __extends(Mesh, _super);
     function Mesh() {
@@ -3025,6 +3135,17 @@ var Rectangle = (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Rectangle.prototype, "size", {
+        get: function () {
+            return new Vector2(this.width, this.height);
+        },
+        set: function (value) {
+            this.width = value.x;
+            this.height = value.y;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Rectangle.prototype.intersects = function (value) {
         return value.left < this.right &&
             this.left < value.right &&
@@ -3036,6 +3157,11 @@ var Rectangle = (function () {
             (this.y <= value.y)) &&
             (value.y < (this.y + this.height)));
     };
+    Rectangle.prototype.containsRect = function (value) {
+        return ((((this.x <= value.x) && (value.x < (this.x + this.width))) &&
+            (this.y <= value.y)) &&
+            (value.y < (this.y + this.height)));
+    };
     Rectangle.fromMinMax = function (minX, minY, maxX, maxY) {
         return new Rectangle(minX, minY, maxX - minX, maxY - minY);
     };
@@ -3208,6 +3334,9 @@ var Vector2 = (function () {
     Vector2.prototype.length = function () {
         return Math.sqrt((this.x * this.x) + (this.y * this.y));
     };
+    Vector2.prototype.round = function () {
+        return new Vector2(Math.round(this.x), Math.round(this.y));
+    };
     Vector2.normalize = function (value) {
         var val = 1 / Math.sqrt((value.x * value.x) + (value.y * value.y));
         value.x *= val;
@@ -3221,6 +3350,9 @@ var Vector2 = (function () {
         var v1 = value1.x - value2.x, v2 = value1.y - value2.y;
         return (v1 * v1) + (v2 * v2);
     };
+    Vector2.clamp = function (value1, min, max) {
+        return new Vector2(MathHelper.clamp(value1.x, min.x, max.x), MathHelper.clamp(value1.y, min.y, max.y));
+    };
     Vector2.lerp = function (value1, value2, amount) {
         return new Vector2(MathHelper.lerp(value1.x, value2.x, amount), MathHelper.lerp(value1.y, value2.y, amount));
     };

source/src/ECS/Components/Camera.ts

@@ -88,6 +88,14 @@ class Camera extends Component {
         }
     }
 
+    public get position(){
+        return this.entity.transform.position;
+    }
+
+    public set position(value: Vector2){
+        this.entity.transform.position = value;
+    }
+
     public get transformMatrix(){
         if (this._areBoundsDirty)
             this.updateMatrixes();

source/src/ECS/Components/FollowCamera.ts

@@ -0,0 +1,115 @@
+class FollowCamera extends Component {
+    public camera: Camera;
+    public followLerp = 0.1;
+    public deadzone: Rectangle = new Rectangle();
+    public focusOffset: Vector2 = new Vector2();
+    public mapLockEnabled: boolean;
+    public mapSize: Vector2 = new Vector2();
+
+    private _targetEntity: Entity;
+    private _cameraStyle: CameraStyle;
+    private _worldSpaceDeadZone: Rectangle = new Rectangle();
+    private _desiredPositionDelta: Vector2 = new Vector2();
+    private _targetCollider: Collider;
+
+    constructor(targetEntity: Entity, cameraStyle: CameraStyle = CameraStyle.lockOn){
+        super();
+
+        this._targetEntity = targetEntity;
+        this._cameraStyle = cameraStyle;
+        this.camera = null;
+    }
+
+    public onAddedToEntity(){
+        if (!this.camera)
+            this.camera = this.entity.scene.camera;
+
+        this.follow(this._targetEntity, this._cameraStyle);
+    }
+
+    public follow(targetEntity: Entity, cameraStyle: CameraStyle = CameraStyle.cameraWindow){
+        this._targetEntity = targetEntity;
+        this._cameraStyle = cameraStyle;
+        let cameraBounds = this.camera.bounds;
+
+        switch (this._cameraStyle){
+            case CameraStyle.cameraWindow:
+                let w = cameraBounds.width / 6;
+                let h = cameraBounds.height / 3;
+                this.deadzone = new Rectangle((cameraBounds.width - w) / 2, (cameraBounds.height - h) / 2, w, h);
+                break;
+            case CameraStyle.lockOn:
+                this.deadzone = new Rectangle(cameraBounds.width / 2, cameraBounds.height / 2, 10, 10);
+                break;
+        }
+    }
+
+    public update(){
+        let halfScreen = Vector2.multiply(this.camera.bounds.size, new Vector2(0.5));
+        this._worldSpaceDeadZone.x = this.camera.position.x - halfScreen.x + this.deadzone.x + this.focusOffset.x;
+        this._worldSpaceDeadZone.y = this.camera.position.y - halfScreen.y + this.deadzone.y + this.focusOffset.y;
+        this._worldSpaceDeadZone.width = this.deadzone.width;
+        this._worldSpaceDeadZone.height = this.deadzone.height;
+
+        if (this._targetEntity)
+            this.updateFollow();
+
+        this.camera.position = Vector2.lerp(this.camera.position, Vector2.add(this.camera.position, this._desiredPositionDelta), this.followLerp);
+        this.camera.entity.transform.roundPosition();
+
+        if (this.mapLockEnabled){
+            this.camera.position = this.clampToMapSize(this.camera.position);
+            this.camera.entity.transform.roundPosition();
+        }
+    }
+
+    private clampToMapSize(position: Vector2){
+        let halfScreen = Vector2.multiply(new Vector2(this.camera.bounds.width, this.camera.bounds.height), new Vector2(0.5));
+        let cameraMax = new Vector2(this.mapSize.x - halfScreen.x, this.mapSize.y - halfScreen.y);
+
+        return Vector2.clamp(position, halfScreen, cameraMax);
+    }
+
+    private updateFollow(){
+        this._desiredPositionDelta.x = this._desiredPositionDelta.y = 0;
+
+        if (this._cameraStyle == CameraStyle.lockOn){
+            let targetX = this._targetEntity.transform.position.x;
+            let targetY = this._targetEntity.transform.position.y;
+
+            if (this._worldSpaceDeadZone.x > targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+            else if(this._worldSpaceDeadZone.x < targetX)
+                this._desiredPositionDelta.x = targetX - this._worldSpaceDeadZone.x;
+
+            if (this._worldSpaceDeadZone.y < targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+            else if(this._worldSpaceDeadZone.y > targetY)
+                this._desiredPositionDelta.y = targetY - this._worldSpaceDeadZone.y;
+        } else {
+            if (!this._targetCollider){
+                this._targetCollider = this._targetEntity.getComponent<Collider>(Collider);
+                if (!this._targetCollider)
+                    return;
+            }
+
+            let targetBounds = this._targetEntity.getComponent<Collider>(Collider).bounds;
+            if (!this._worldSpaceDeadZone.containsRect(targetBounds)){
+                if (this._worldSpaceDeadZone.left > targetBounds.left)
+                    this._desiredPositionDelta.x = targetBounds.left - this._worldSpaceDeadZone.left;
+                else if(this._worldSpaceDeadZone.right < targetBounds.right)
+                    this._desiredPositionDelta.x = targetBounds.right - this._worldSpaceDeadZone.right;
+
+                if (this._worldSpaceDeadZone.bottom < targetBounds.bottom)
+                    this._desiredPositionDelta.y = targetBounds.bottom - this._worldSpaceDeadZone.bottom;
+                else if(this._worldSpaceDeadZone.top > targetBounds.top)
+                    this._desiredPositionDelta.y = targetBounds.top - this._worldSpaceDeadZone.top;
+            }
+        }
+    }
+}
+
+enum CameraStyle {
+    lockOn,
+    cameraWindow,
+}

source/src/ECS/Scene.ts

@@ -155,8 +155,8 @@ class Scene extends egret.DisplayObjectContainer {
    }
 
    public prepRenderState() {
-      this._projectionMatrix.m11 = 2 / this.stage.width;
+      this._projectionMatrix.m11 = 2 / this.stage.stageWidth;
-      this._projectionMatrix.m22 = -2 / this.stage.height;
+      this._projectionMatrix.m22 = -2 / this.stage.stageHeight;
 
       this._transformMatrix = this.camera.transformMatrix;
       this._matrixTransformMatrix = Matrix2D.multiply(this._transformMatrix, this._projectionMatrix);

source/src/ECS/Transform.ts

@@ -283,6 +283,10 @@ class Transform {
         }
     }
 
+    public roundPosition(){
+        this.position = this._position.round();
+    }
+
     public updateTransform(){
         if (this._hierachyDirty != DirtyType.clean){
             if (this.parent)

source/src/Math/Rectangle.ts

@@ -36,6 +36,15 @@ class Rectangle {
         this.y = value.y;
     }
 
+    public get size() {
+        return new Vector2(this.width, this.height);
+    }
+
+    public set size(value: Vector2) {
+        this.width = value.x;
+        this.height = value.y;
+    }
+
     constructor(x?: number, y?: number, width?: number, height?: number) {
         this.x = x ? x : 0;
         this.y = y ? y : 0;
@@ -56,6 +65,12 @@ class Rectangle {
             (value.y < (this.y + this.height)));
     }
 
+    public containsRect(value: Rectangle) {
+        return ((((this.x <= value.x) && (value.x < (this.x + this.width))) &&
+            (this.y <= value.y)) &&
+            (value.y < (this.y + this.height)));
+    }
+
     public static fromMinMax(minX: number, minY: number, maxX: number, maxY: number) {
         return new Rectangle(minX, minY, maxX - minX, maxY - minY);
     }

source/src/Math/Vector2.ts

@@ -93,6 +93,11 @@ class Vector2 {
         return Math.sqrt((this.x * this.x) + (this.y * this.y));
     }
 
+    /** 对x和y值四舍五入 */
+    public round(): Vector2{
+        return new Vector2(Math.round(this.x), Math.round(this.y));
+    }
+
     /**
      * 创建一个新的Vector2
      * 它包含来自另一个向量的标准化值。
@@ -124,6 +129,17 @@ class Vector2 {
         return (v1 * v1) + (v2 * v2);
     }
 
+    /**
+     * 
+     * @param value1 
+     * @param min 
+     * @param max 
+     */
+    public static clamp(value1: Vector2, min: Vector2, max: Vector2){
+        return new Vector2(MathHelper.clamp(value1.x, min.x, max.x),
+            MathHelper.clamp(value1.y, min.y, max.y));
+    }
+
     /**
      * 包含指定向量的线性插值
      * @param value1 第一个向量