Merge pull request #22 from esengine/develop

#21 新增gapXY用于平铺/滚动间距

demo/libs/framework/framework.d.ts

@@ -125,6 +125,7 @@ declare module es {
         static lerp(value1: Vector2, value2: Vector2, amount: number): Vector2;
         static transform(position: Vector2, matrix: Matrix2D): Vector2;
         static distance(value1: Vector2, value2: Vector2): number;
+        static angle(from: Vector2, to: Vector2): number;
         static negate(value: Vector2): Vector2;
         add(value: Vector2): Vector2;
         divide(value: Vector2): Vector2;
@@ -597,10 +598,14 @@ declare module es {
         textureScale: Vector2;
         width: number;
         height: number;
+        gapXY: Vector2;
         protected _sourceRect: Rectangle;
         protected _textureScale: Vector2;
         protected _inverseTexScale: Vector2;
+        private _gapX;
+        private _gapY;
         constructor(sprite: Sprite);
+        setGapXY(value: Vector2): TiledSpriteRenderer;
         render(camera: es.Camera): void;
     }
 }

demo/libs/framework/framework.js

@@ -718,6 +718,11 @@ var es;
             var v1 = value1.x - value2.x, v2 = value1.y - value2.y;
             return Math.sqrt((v1 * v1) + (v2 * v2));
         };
+        Vector2.angle = function (from, to) {
+            from = Vector2.normalize(from);
+            to = Vector2.normalize(to);
+            return Math.acos(es.MathHelper.clamp(Vector2.dot(from, to), -1, 1)) * es.MathHelper.Rad2Deg;
+        };
         Vector2.negate = function (value) {
             var result = new Vector2();
             result.x = -value.x;
@@ -2760,12 +2765,16 @@ var es;
 })(es || (es = {}));
 var es;
 (function (es) {
+    var Bitmap = egret.Bitmap;
+    var RenderTexture = egret.RenderTexture;
     var TiledSpriteRenderer = (function (_super) {
         __extends(TiledSpriteRenderer, _super);
         function TiledSpriteRenderer(sprite) {
             var _this = _super.call(this, sprite) || this;
             _this._textureScale = es.Vector2.one;
             _this._inverseTexScale = es.Vector2.one;
+            _this._gapX = 0;
+            _this._gapY = 0;
             _this._sourceRect = sprite.sourceRect;
             var bitmap = _this.displayObject;
             bitmap.$fillMode = egret.BitmapFillMode.REPEAT;
@@ -2839,6 +2848,34 @@ var es;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(TiledSpriteRenderer.prototype, "gapXY", {
+            get: function () {
+                return new es.Vector2(this._gapX, this._gapY);
+            },
+            set: function (value) {
+                this._gapX = value.x;
+                this._gapY = value.y;
+                var renderTexture = new RenderTexture();
+                var newRectangle = this.sprite.sourceRect;
+                newRectangle.x = 0;
+                newRectangle.y = 0;
+                newRectangle.width += this._gapX;
+                newRectangle.height += this._gapY;
+                renderTexture.drawToTexture(this.displayObject, newRectangle);
+                if (!this.displayObject) {
+                    this.displayObject = new Bitmap(renderTexture);
+                }
+                else {
+                    this.displayObject.texture = renderTexture;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TiledSpriteRenderer.prototype.setGapXY = function (value) {
+            this.gapXY = value;
+            return this;
+        };
         TiledSpriteRenderer.prototype.render = function (camera) {
             _super.prototype.render.call(this, camera);
             var bitmap = this.displayObject;

demo/src/game/MainScene.ts

@@ -12,10 +12,10 @@ module scene {
         public async onStart() {
             let sprite = new es.Sprite(RES.getRes("checkbox_select_disabled_png"));
             let bg = this.createEntity("bg");
-            bg.addComponent(new es.SpriteRenderer()).setSprite(sprite).setColor(0xff0000);
+            // bg.addComponent(new es.SpriteRenderer()).setSprite(sprite).setColor(0xff0000);
             bg.addComponent(new component.PlayerController());
             bg.addComponent(new es.Mover());
-            bg.addComponent(new es.ScrollingSpriteRenderer(sprite));
+            bg.addComponent(new es.ScrollingSpriteRenderer(sprite)).setGapXY(new es.Vector2(10, 0));
             bg.addComponent(new es.BoxCollider());
             bg.position = new es.Vector2(Math.random() * 200, Math.random() * 200);
 

source/bin/framework.d.ts

@@ -125,6 +125,7 @@ declare module es {
         static lerp(value1: Vector2, value2: Vector2, amount: number): Vector2;
         static transform(position: Vector2, matrix: Matrix2D): Vector2;
         static distance(value1: Vector2, value2: Vector2): number;
+        static angle(from: Vector2, to: Vector2): number;
         static negate(value: Vector2): Vector2;
         add(value: Vector2): Vector2;
         divide(value: Vector2): Vector2;
@@ -597,10 +598,14 @@ declare module es {
         textureScale: Vector2;
         width: number;
         height: number;
+        gapXY: Vector2;
         protected _sourceRect: Rectangle;
         protected _textureScale: Vector2;
         protected _inverseTexScale: Vector2;
+        private _gapX;
+        private _gapY;
         constructor(sprite: Sprite);
+        setGapXY(value: Vector2): TiledSpriteRenderer;
         render(camera: es.Camera): void;
     }
 }

source/bin/framework.js

@@ -718,6 +718,11 @@ var es;
             var v1 = value1.x - value2.x, v2 = value1.y - value2.y;
             return Math.sqrt((v1 * v1) + (v2 * v2));
         };
+        Vector2.angle = function (from, to) {
+            from = Vector2.normalize(from);
+            to = Vector2.normalize(to);
+            return Math.acos(es.MathHelper.clamp(Vector2.dot(from, to), -1, 1)) * es.MathHelper.Rad2Deg;
+        };
         Vector2.negate = function (value) {
             var result = new Vector2();
             result.x = -value.x;
@@ -2760,12 +2765,16 @@ var es;
 })(es || (es = {}));
 var es;
 (function (es) {
+    var Bitmap = egret.Bitmap;
+    var RenderTexture = egret.RenderTexture;
     var TiledSpriteRenderer = (function (_super) {
         __extends(TiledSpriteRenderer, _super);
         function TiledSpriteRenderer(sprite) {
             var _this = _super.call(this, sprite) || this;
             _this._textureScale = es.Vector2.one;
             _this._inverseTexScale = es.Vector2.one;
+            _this._gapX = 0;
+            _this._gapY = 0;
             _this._sourceRect = sprite.sourceRect;
             var bitmap = _this.displayObject;
             bitmap.$fillMode = egret.BitmapFillMode.REPEAT;
@@ -2839,6 +2848,34 @@ var es;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(TiledSpriteRenderer.prototype, "gapXY", {
+            get: function () {
+                return new es.Vector2(this._gapX, this._gapY);
+            },
+            set: function (value) {
+                this._gapX = value.x;
+                this._gapY = value.y;
+                var renderTexture = new RenderTexture();
+                var newRectangle = this.sprite.sourceRect;
+                newRectangle.x = 0;
+                newRectangle.y = 0;
+                newRectangle.width += this._gapX;
+                newRectangle.height += this._gapY;
+                renderTexture.drawToTexture(this.displayObject, newRectangle);
+                if (!this.displayObject) {
+                    this.displayObject = new Bitmap(renderTexture);
+                }
+                else {
+                    this.displayObject.texture = renderTexture;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TiledSpriteRenderer.prototype.setGapXY = function (value) {
+            this.gapXY = value;
+            return this;
+        };
         TiledSpriteRenderer.prototype.render = function (camera) {
             _super.prototype.render.call(this, camera);
             var bitmap = this.displayObject;

source/src/ECS/Components/TiledSpriteRenderer.ts

@@ -1,6 +1,7 @@
 ///<reference path="./SpriteRenderer.ts" />
 module es {
     import Bitmap = egret.Bitmap;
+    import RenderTexture = egret.RenderTexture;
 
     /**
      * 滚动由两张图片组合而成
@@ -89,9 +90,34 @@ module es {
             this._sourceRect.height = value;
         }
 
+        public get gapXY(): Vector2{
+            return new Vector2(this._gapX, this._gapY);
+        }
+
+        public set gapXY(value: Vector2){
+            this._gapX = value.x;
+            this._gapY = value.y;
+
+            let renderTexture = new RenderTexture();
+            let newRectangle = this.sprite.sourceRect;
+            newRectangle.x = 0;
+            newRectangle.y = 0;
+            newRectangle.width += this._gapX;
+            newRectangle.height += this._gapY;
+            renderTexture.drawToTexture(this.displayObject, newRectangle);
+
+            if (!this.displayObject){
+                this.displayObject = new Bitmap(renderTexture);
+            }else{
+                (this.displayObject as Bitmap).texture = renderTexture;
+            }
+        }
+
         protected _sourceRect: Rectangle;
         protected _textureScale = Vector2.one;
         protected _inverseTexScale = Vector2.one;
+        private _gapX = 0;
+        private _gapY = 0;
 
         constructor(sprite: Sprite) {
             super(sprite);
@@ -101,6 +127,15 @@ module es {
             bitmap.$fillMode = egret.BitmapFillMode.REPEAT;
         }
 
+        /**
+         * 设置间隔
+         * @param value
+         */
+        public setGapXY(value: Vector2): TiledSpriteRenderer {
+            this.gapXY = value;
+            return this;
+        }
+
         public render(camera: es.Camera) {
             super.render(camera);
 

source/src/Math/Vector2.ts

@@ -154,6 +154,17 @@ module es {
             return Math.sqrt((v1 * v1) + (v2 * v2));
         }
 
+        /**
+         * 返回两个向量之间的角度，单位是度数
+         * @param from
+         * @param to
+         */
+        public static angle(from: Vector2, to: Vector2): number{
+            from = Vector2.normalize(from);
+            to = Vector2.normalize(to);
+            return Math.acos(MathHelper.clamp(Vector2.dot(from, to), -1, 1)) * MathHelper.Rad2Deg;
+        }
+
         /**
          * 矢量反演的结果
          * @param value