#19 滚动精灵支持

demo/libs/framework/framework.d.ts

@@ -609,8 +609,12 @@ declare module es {
         scrollSpeedX: number;
         scroolSpeedY: number;
         textureScale: Vector2;
+        scrollWidth: number;
+        scrollHeight: number;
         private _scrollX;
         private _scrollY;
+        private _scrollWidth;
+        private _scrollHeight;
         constructor(sprite: Sprite);
         update(): void;
     }

demo/libs/framework/framework.js

@@ -2764,7 +2764,6 @@ var es;
         __extends(TiledSpriteRenderer, _super);
         function TiledSpriteRenderer(sprite) {
             var _this = _super.call(this, sprite) || this;
-            _this._sourceRect = new es.Rectangle();
             _this._textureScale = es.Vector2.one;
             _this._inverseTexScale = es.Vector2.one;
             _this._sourceRect = sprite.sourceRect;
@@ -2841,10 +2840,11 @@ var es;
             configurable: true
         });
         TiledSpriteRenderer.prototype.render = function (camera) {
+            _super.prototype.render.call(this, camera);
             var bitmap = this.displayObject;
             bitmap.width = this.width;
             bitmap.height = this.height;
-            _super.prototype.render.call(this, camera);
+            bitmap.scrollRect = this._sourceRect;
         };
         return TiledSpriteRenderer;
     }(es.SpriteRenderer));
@@ -2860,6 +2860,10 @@ var es;
             _this.scroolSpeedY = 0;
             _this._scrollX = 0;
             _this._scrollY = 0;
+            _this._scrollWidth = 0;
+            _this._scrollHeight = 0;
+            _this._scrollWidth = _this.width;
+            _this._scrollHeight = _this.height;
             return _this;
         }
         Object.defineProperty(ScrollingSpriteRenderer.prototype, "textureScale", {
@@ -2873,18 +2877,35 @@ var es;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ScrollingSpriteRenderer.prototype, "scrollWidth", {
+            get: function () {
+                return this._scrollWidth;
+            },
+            set: function (value) {
+                this._scrollWidth = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ScrollingSpriteRenderer.prototype, "scrollHeight", {
+            get: function () {
+                return this._scrollHeight;
+            },
+            set: function (value) {
+                this._scrollHeight = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         ScrollingSpriteRenderer.prototype.update = function () {
             if (!this.sprite)
                 return;
             this._scrollX += this.scrollSpeedX * es.Time.deltaTime;
             this._scrollY += this.scroolSpeedY * es.Time.deltaTime;
-            var newRectangle = this.displayObject.scrollRect;
+            this._sourceRect.x = this._scrollX;
-            if (!this.displayObject.scrollRect) {
+            this._sourceRect.y = this._scrollY;
-                newRectangle = new egret.Rectangle();
+            this._sourceRect.width = this._scrollWidth + this._scrollX;
-            }
+            this._sourceRect.height = this._scrollHeight + this._scrollY;
-            newRectangle.x = this._scrollX;
-            newRectangle.y = this._scrollY;
-            this.displayObject.scrollRect = newRectangle;
         };
         return ScrollingSpriteRenderer;
     }(es.TiledSpriteRenderer));

demo/src/game/MainScene.ts

@@ -19,13 +19,13 @@ module scene {
             bg.addComponent(new es.BoxCollider());
             bg.position = new es.Vector2(Math.random() * 200, Math.random() * 200);
 
-            // for (let i = 0; i < 20; i++) {
+            for (let i = 0; i < 20; i++) {
-            //     let sprite = new es.Sprite(RES.getRes("checkbox_select_disabled_png"));
+                let sprite = new es.Sprite(RES.getRes("checkbox_select_disabled_png"));
-            //     let player2 = this.createEntity("player2");
+                let player2 = this.createEntity("player2");
-            //     player2.addComponent(new es.SpriteRenderer()).setSprite(sprite);
+                player2.addComponent(new es.SpriteRenderer()).setSprite(sprite);
-            //     player2.position = new es.Vector2(Math.random() * 1000, Math.random() * 1000);
+                player2.position = new es.Vector2(Math.random() * 1000, Math.random() * 1000);
-            //     player2.addComponent(new es.BoxCollider());
+                player2.addComponent(new es.BoxCollider());
-            // }
+            }
 
             this.camera.follow(bg, es.CameraStyle.lockOn);
 

source/bin/framework.d.ts

@@ -609,8 +609,12 @@ declare module es {
         scrollSpeedX: number;
         scroolSpeedY: number;
         textureScale: Vector2;
+        scrollWidth: number;
+        scrollHeight: number;
         private _scrollX;
         private _scrollY;
+        private _scrollWidth;
+        private _scrollHeight;
         constructor(sprite: Sprite);
         update(): void;
     }

source/bin/framework.js

@@ -2764,7 +2764,6 @@ var es;
         __extends(TiledSpriteRenderer, _super);
         function TiledSpriteRenderer(sprite) {
             var _this = _super.call(this, sprite) || this;
-            _this._sourceRect = new es.Rectangle();
             _this._textureScale = es.Vector2.one;
             _this._inverseTexScale = es.Vector2.one;
             _this._sourceRect = sprite.sourceRect;
@@ -2841,10 +2840,11 @@ var es;
             configurable: true
         });
         TiledSpriteRenderer.prototype.render = function (camera) {
+            _super.prototype.render.call(this, camera);
             var bitmap = this.displayObject;
             bitmap.width = this.width;
             bitmap.height = this.height;
-            _super.prototype.render.call(this, camera);
+            bitmap.scrollRect = this._sourceRect;
         };
         return TiledSpriteRenderer;
     }(es.SpriteRenderer));
@@ -2860,6 +2860,10 @@ var es;
             _this.scroolSpeedY = 0;
             _this._scrollX = 0;
             _this._scrollY = 0;
+            _this._scrollWidth = 0;
+            _this._scrollHeight = 0;
+            _this._scrollWidth = _this.width;
+            _this._scrollHeight = _this.height;
             return _this;
         }
         Object.defineProperty(ScrollingSpriteRenderer.prototype, "textureScale", {
@@ -2873,18 +2877,35 @@ var es;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ScrollingSpriteRenderer.prototype, "scrollWidth", {
+            get: function () {
+                return this._scrollWidth;
+            },
+            set: function (value) {
+                this._scrollWidth = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ScrollingSpriteRenderer.prototype, "scrollHeight", {
+            get: function () {
+                return this._scrollHeight;
+            },
+            set: function (value) {
+                this._scrollHeight = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         ScrollingSpriteRenderer.prototype.update = function () {
             if (!this.sprite)
                 return;
             this._scrollX += this.scrollSpeedX * es.Time.deltaTime;
             this._scrollY += this.scroolSpeedY * es.Time.deltaTime;
-            var newRectangle = this.displayObject.scrollRect;
+            this._sourceRect.x = this._scrollX;
-            if (!this.displayObject.scrollRect) {
+            this._sourceRect.y = this._scrollY;
-                newRectangle = new egret.Rectangle();
+            this._sourceRect.width = this._scrollWidth + this._scrollX;
-            }
+            this._sourceRect.height = this._scrollHeight + this._scrollY;
-            newRectangle.x = this._scrollX;
-            newRectangle.y = this._scrollY;
-            this.displayObject.scrollRect = newRectangle;
         };
         return ScrollingSpriteRenderer;
     }(es.TiledSpriteRenderer));

source/src/ECS/Components/ScrollingSpriteRenderer.ts

@@ -1,5 +1,7 @@
 ///<reference path="./TiledSpriteRenderer.ts"/>
 module es {
+    import Bitmap = egret.Bitmap;
+
     export class ScrollingSpriteRenderer extends TiledSpriteRenderer {
         /**
          *  x自动滚动速度(以像素/s为单位)
@@ -21,11 +23,32 @@ module es {
             this._inverseTexScale = new Vector2(1 / this._textureScale.x, 1 / this._textureScale.y);
         }
 
+        public set scrollWidth(value: number){
+            this._scrollWidth = value;
+        }
+
+        public get scrollWidth(){
+            return this._scrollWidth;
+        }
+
+        public set scrollHeight(value: number){
+            this._scrollHeight = value;
+        }
+
+        public get scrollHeight(){
+            return this._scrollHeight;
+        }
+
         private _scrollX = 0;
         private _scrollY = 0;
+        private _scrollWidth = 0;
+        private _scrollHeight = 0;
 
         constructor(sprite: Sprite) {
             super(sprite);
+
+            this._scrollWidth = this.width;
+            this._scrollHeight = this.height;
         }
 
         public update() {
@@ -34,13 +57,11 @@ module es {
 
             this._scrollX += this.scrollSpeedX * Time.deltaTime;
             this._scrollY += this.scroolSpeedY * Time.deltaTime;
-            let newRectangle: egret.Rectangle = this.displayObject.scrollRect;
+
-            if (!this.displayObject.scrollRect){
+            this._sourceRect.x = this._scrollX;
-                newRectangle = new egret.Rectangle();
+            this._sourceRect.y = this._scrollY;
-            }
+            this._sourceRect.width = this._scrollWidth + this._scrollX;
-            newRectangle.x = this._scrollX;
+            this._sourceRect.height = this._scrollHeight + this._scrollY;
-            newRectangle.y = this._scrollY;
-            this.displayObject.scrollRect = newRectangle;
         }
     }
 }

source/src/ECS/Components/TiledSpriteRenderer.ts

@@ -89,7 +89,7 @@ module es {
             this._sourceRect.height = value;
         }
 
-        protected _sourceRect: Rectangle = new Rectangle();
+        protected _sourceRect: Rectangle;
         protected _textureScale = Vector2.one;
         protected _inverseTexScale = Vector2.one;
 
@@ -97,17 +97,17 @@ module es {
             super(sprite);
 
             this._sourceRect = sprite.sourceRect;
-
             let bitmap = this.displayObject as Bitmap;
             bitmap.$fillMode = egret.BitmapFillMode.REPEAT;
         }
 
         public render(camera: es.Camera) {
+            super.render(camera);
+
             let bitmap = this.displayObject as Bitmap;
             bitmap.width = this.width;
             bitmap.height = this.height;
-
+            bitmap.scrollRect = this._sourceRect;
-            super.render(camera);
         }
     }
 }