#19 实现精灵平铺效果

source/src/ECS/Components/Mesh.ts

@@ -11,6 +11,7 @@ module es {
 
         public setTexture(texture: egret.Texture): Mesh {
             this._mesh.texture = texture;
+            this._mesh.$renderNode = new egret.sys.RenderNode();
 
             return this;
         }

source/src/ECS/Components/ScrollingSpriteRenderer.ts

@@ -1,37 +1,38 @@
 ///<reference path="./TiledSpriteRenderer.ts"/>
 module es {
     export class ScrollingSpriteRenderer extends TiledSpriteRenderer {
+        /**
+         *  x自动滚动速度(以像素/s为单位)
+         */
         public scrollSpeedX = 15;
+        /**
+         * 自动滚动的y速度(以像素/s为单位)
+         */
         public scroolSpeedY = 0;
+
+        public get textureScale(): Vector2 {
+            return this._textureScale;
+        }
+
+        public set textureScale(value: Vector2){
+            this._textureScale = value;
+
+            // 重新计算我们的inverseTextureScale和源矩形大小
+            this._inverseTexScale = new Vector2(1 / this._textureScale.x, 1 / this._textureScale.y);
+        }
+
         private _scrollX = 0;
         private _scrollY = 0;
 
+        constructor(sprite: Sprite) {
+            super(sprite);
+        }
+
         public update() {
             this._scrollX += this.scrollSpeedX * Time.deltaTime;
             this._scrollY += this.scroolSpeedY * Time.deltaTime;
-            this.sourceRect.x = this._scrollX;
-            this.sourceRect.y = this._scrollY;
-        }
-
-        public render(camera: Camera) {
-            if (!this.sprite)
-                return;
-
-            super.render(camera);
-
-            let renderTexture = new egret.RenderTexture();
-            let cacheBitmap = new egret.DisplayObjectContainer();
-            cacheBitmap.removeChildren();
-            cacheBitmap.addChild(this.leftTexture);
-            cacheBitmap.addChild(this.rightTexture);
-
-            this.leftTexture.x = this.sourceRect.x;
-            this.rightTexture.x = this.sourceRect.x - this.sourceRect.width;
-            this.leftTexture.y = this.sourceRect.y;
-            this.rightTexture.y = this.sourceRect.y;
-
-            cacheBitmap.cacheAsBitmap = true;
-            renderTexture.drawToTexture(cacheBitmap, new egret.Rectangle(0, 0, this.sourceRect.width, this.sourceRect.height));
+            this._sourceRect.x = this._scrollX;
+            this._sourceRect.y = this._scrollY;
         }
     }
 }

source/src/ECS/Components/TiledSpriteRenderer.ts

@@ -1,60 +1,113 @@
 ///<reference path="./SpriteRenderer.ts" />
 module es {
+    import Bitmap = egret.Bitmap;
+
     /**
      * 滚动由两张图片组合而成
      */
     export class TiledSpriteRenderer extends SpriteRenderer {
-        protected sourceRect: Rectangle;
-        protected leftTexture: egret.Bitmap;
-        protected rightTexture: egret.Bitmap;
+        public get bounds(): Rectangle {
+            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.width, this.height);
+                    this._areBoundsDirty = false;
+                }
+            }
+
+            return this._bounds;
+        }
+
+        /**
+         * 纹理滚动的x值
+         */
+        public get scrollX() {
+            return this._sourceRect.x;
+        }
+
+        /**
+         * 纹理滚动的x值
+         * @param value
+         */
+        public set scrollX(value: number) {
+            this._sourceRect.x = value;
+        }
+
+        /**
+         * 纹理滚动的y值
+         */
+        public get scrollY() {
+            return this._sourceRect.y;
+        }
+
+        /**
+         * 纹理滚动的y值
+         * @param value
+         */
+        public set scrollY(value: number) {
+            this._sourceRect.y = value;
+        }
+
+        /**
+         * 纹理比例尺
+         */
+        public get textureScale(): Vector2 {
+            return this._textureScale;
+        }
+
+        /**
+         * 纹理比例尺
+         * @param value
+         */
+        public set textureScale(value: Vector2) {
+            this._textureScale = value;
+
+            // 重新计算我们的inverseTextureScale和源矩形大小
+            this._inverseTexScale = new Vector2(1 / this._textureScale.x, 1 / this._textureScale.y);
+            this._sourceRect.width = this._sprite.sourceRect.width * this._inverseTexScale.x;
+            this._sourceRect.height = this._sprite.sourceRect.height * this._inverseTexScale.y;
+        }
+
+        /**
+         * 覆盖宽度值，这样TiledSprite可以有一个独立于其纹理的宽度
+         */
+        public get width(): number{
+            return this._sourceRect.width;
+        }
+
+        public set width(value: number) {
+            this._areBoundsDirty = true;
+            this._sourceRect.width = value;
+        }
+
+        public get height(): number {
+            return this._sourceRect.height;
+        }
+
+        public set height(value: number) {
+            this._areBoundsDirty = true;
+            this._sourceRect.height = value;
+        }
+
+        protected _sourceRect: Rectangle = new Rectangle();
+        protected _textureScale = Vector2.one;
+        protected _inverseTexScale = Vector2.one;
 
         constructor(sprite: Sprite) {
             super(sprite);
 
-            this.leftTexture = new egret.Bitmap();
-            this.rightTexture = new egret.Bitmap();
-            this.leftTexture.texture = sprite.texture2D;
-            this.rightTexture.texture = sprite.texture2D;
+            this._sourceRect = sprite.sourceRect;
 
-            this.setSprite(sprite);
-            this.sourceRect = sprite.sourceRect;
-        }
-
-        public get scrollX() {
-            return this.sourceRect.x;
-        }
-
-        public set scrollX(value: number) {
-            this.sourceRect.x = value;
-        }
-
-        public get scrollY() {
-            return this.sourceRect.y;
-        }
-
-        public set scrollY(value: number) {
-            this.sourceRect.y = value;
+            let bitmap = this.displayObject as Bitmap;
+            bitmap.$fillMode = egret.BitmapFillMode.REPEAT;
         }
 
         public render(camera: es.Camera) {
-            if (!this.sprite)
-                return;
+            let bitmap = this.displayObject as Bitmap;
+            bitmap.width = this.width;
+            bitmap.height = this.height;
 
             super.render(camera);
-
-            let renderTexture = new egret.RenderTexture();
-            let cacheBitmap = new egret.DisplayObjectContainer();
-            cacheBitmap.removeChildren();
-            cacheBitmap.addChild(this.leftTexture);
-            cacheBitmap.addChild(this.rightTexture);
-
-            this.leftTexture.x = this.sourceRect.x;
-            this.rightTexture.x = this.sourceRect.x - this.sourceRect.width;
-            this.leftTexture.y = this.sourceRect.y;
-            this.rightTexture.y = this.sourceRect.y;
-
-            cacheBitmap.cacheAsBitmap = true;
-            renderTexture.drawToTexture(cacheBitmap, new egret.Rectangle(0, 0, this.sourceRect.width, this.sourceRect.height));
         }
     }
 }