Added tileScaleX and tileScaleY support for Tile Sprites

Author: photonstorm

CHANGELOG.md

@@ -52,6 +52,7 @@ There is a third game config property called `pixelArt`. If set to `true` it's t
 * `ScenePlugin.sleep` (and the corresponding methods in Scene Systems and the Scene Manager) now has a new optional `data` argument, which is passed to the target Scene and emitted in its 'sleep' event.
 * `ScenePlugin.wake` (and the corresponding methods in Scene Systems and the Scene Manager) now has a new optional `data` argument, which is passed to the target Scene and emitted in its 'wake' event.
 * `ScenePlugin.setActive` now has a new optional `data` argument, which is passed to the target Scene and emitted in its 'pause' or 'resume' events.
+* `TileSprite.tileScaleX` and `tileScaleY` are two new properties that allow you to control the scale of the texture within the Tile Sprite. This impacts the way the repeating texture is scaled, and is independent to scaling the Tile Sprite itself. It works in both Canvas and WebGL mode.
 
 ### Updates
 
@@ -62,6 +63,7 @@ There is a third game config property called `pixelArt`. If set to `true` it's t
 * If the Blitter object has no Bob's to render it will now abort immediately, avoiding several context calls in Canvas mode.
 * `Scene.run` will now pass the optional `data` object in all cases, no matter if it's waking, resuming or starting a Scene (thanks @rook2pawn)
 * `ScenePlugin.start` and `ScenePlugin.restart` will now always queue the op with the Scene Manager, regardless of the state of the Scene, in order to avoid issues where plugins carry on running for a frame before closing down. Fix #3776 (thanks @jjalonso)
+* The `batchTileSprite` method has been removed from the `TextureTintPipeline` class, because it is now handled internally bu the Tile Sprite object itself.
 
 ### Bug Fixes
 

src/gameobjects/tilesprite/TileSprite.js

@@ -19,7 +19,21 @@ var TileSpriteRender = require('./TileSpriteRender');
  * The texture can be scrolled and scaled independently of the TileSprite itself. Textures will automatically wrap and
  * are designed so that you can create game backdrops using seamless textures as a source.
  *
- * [description]
+ * You shouldn't ever create a TileSprite any larger than your actual screen size. If you want to create a large repeating background
+ * that scrolls across the whole map of your game, then you create a TileSprite that fits the screen size and then use the `tilePosition`
+ * property to scroll the texture as the player moves. If you create a TileSprite that is thousands of pixels in size then it will 
+ * consume huge amounts of memory and cause performance issues. Remember: use `tilePosition` to scroll your texture and `tileScale` to
+ * adjust the scale of the texture - don't resize the sprite itself or make it larger than it needs.
+ * 
+ * An important note about Tile Sprites and NPOT textures: Internally, TileSprite textures use GL_REPEAT to provide
+ * seamless repeating of the textures. This, combined with the way in which the textures are handled in WebGL, means
+ * they need to be POT (power-of-two) sizes in order to wrap. If you provide a NPOT (non power-of-two) texture to a
+ * TileSprite it will generate a POT sized canvas and draw your texture to it, scaled up to the POT size. It's then
+ * scaled back down again during rendering to the original dimensions. While this works, in that it allows you to use
+ * any size texture for a Tile Sprite, it does mean that NPOT textures are going to appear anti-aliased when rendered,
+ * due to the interpolation that took place when it was resized into a POT texture. This is especially visible in
+ * pixel art graphics. If you notice it and it becomes an issue, the only way to avoid it is to ensure that you
+ * provide POT textures for Tile Sprites.
  *
  * @class TileSprite
  * @extends Phaser.GameObjects.GameObject
@@ -102,6 +116,26 @@ var TileSprite = new Class({
          */
         this.tilePositionY = 0;
 
+        /**
+         * The horizontal scale of the Tile Sprite texture.
+         *
+         * @name Phaser.GameObjects.TileSprite#tileScaleX
+         * @type {number}
+         * @default 1
+         * @since 3.11.0
+         */
+        this.tileScaleX = 1;
+
+        /**
+         * The vertical scale of the Tile Sprite texture.
+         *
+         * @name Phaser.GameObjects.TileSprite#tileScaleY
+         * @type {number}
+         * @default 1
+         * @since 3.11.0
+         */
+        this.tileScaleY = 1;
+
         /**
          * Whether the Tile Sprite has changed in some way, requiring an re-render of its tile texture.
          *
@@ -116,9 +150,10 @@ var TileSprite = new Class({
 
         /**
          * The texture that the Tile Sprite is rendered to, which is then rendered to a Scene.
+         * In WebGL this is a WebGLTexture. In Canvas it's a Canvas Fill Pattern.
          *
          * @name Phaser.GameObjects.TileSprite#tileTexture
-         * @type {?WebGLTexture}
+         * @type {?(WebGLTexture|CanvasPattern)}
          * @default null
          * @since 3.0.0
          */
@@ -165,7 +200,7 @@ var TileSprite = new Class({
          * @default null
          * @since 3.0.0
          */
-        this.canvasPattern = null;
+        // this.canvasPattern = null;
 
         /**
          * The Canvas that the TileSprite's texture is rendered to.
@@ -185,6 +220,14 @@ var TileSprite = new Class({
          */
         this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
 
+        /**
+         * The previous Texture Frame being used.
+         *
+         * @name Phaser.GameObjects.Components.Texture#oldFrame
+         * @type {Phaser.Textures.Frame}
+         * @private
+         * @since 3.0.0
+         */
         this.oldFrame = null;
 
         this.updateTileTexture();
@@ -236,42 +279,42 @@ var TileSprite = new Class({
      */
     updateTileTexture: function ()
     {
-        if (!this.dirty && this.oldFrame === this.frame)
+        var frame = this.frame;
+
+        if (!this.dirty && this.oldFrame === frame)
         {
             return;
         }
 
-        this.oldFrame = this.frame;
+        this.oldFrame = frame;
 
-        this.canvasBufferCtx.clearRect(0, 0, this.canvasBuffer.width, this.canvasBuffer.height);
+        var ctx = this.canvasBufferCtx;
+        var canvas = this.canvasBuffer;
 
-        if (this.renderer.gl)
-        {
-            this.canvasBufferCtx.drawImage(
-                this.frame.source.image,
-                this.frame.cutX, this.frame.cutY,
-                this.frame.cutWidth, this.frame.cutHeight,
-                0, 0,
-                this.potWidth, this.potHeight
-            );
-
-            this.tileTexture = this.renderer.canvasToTexture(this.canvasBuffer, this.tileTexture);
-        }
-        else
+        var fw = this.potWidth;
+        var fh = this.potHeight;
+
+        if (!this.renderer.gl)
         {
-            this.canvasBuffer.width = this.frame.cutWidth;
-            this.canvasBuffer.height = this.frame.cutHeight;
-            this.canvasBufferCtx.drawImage(
-                this.frame.source.image,
-                this.frame.cutX, this.frame.cutY,
-                this.frame.cutWidth, this.frame.cutHeight,
-                0, 0,
-                this.frame.cutWidth, this.frame.cutHeight
-            );
-
-            this.canvasPattern = this.canvasBufferCtx.createPattern(this.canvasBuffer, 'repeat');
+            fw = frame.cutWidth;
+            fh = frame.cutHeight;
         }
 
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        canvas.width = fw;
+        canvas.height = fh;
+
+        ctx.drawImage(
+            frame.source.image,
+            frame.cutX, frame.cutY,
+            frame.cutWidth, frame.cutHeight,
+            0, 0,
+            fw, fh
+        );
+
+        this.tileTexture = (this.renderer.gl) ? this.renderer.canvasToTexture(canvas, this.tileTexture) : ctx.createPattern(canvas, 'repeat');
+
         this.dirty = false;
     },
 
@@ -291,7 +334,7 @@ var TileSprite = new Class({
 
         CanvasPool.remove(this.canvasBuffer);
 
-        this.canvasPattern = null;
+        this.tileTexture = null;
         this.canvasBufferCtx = null;
         this.canvasBuffer = null;
 

src/gameobjects/tilesprite/TileSpriteCanvasRenderer.js

@@ -99,6 +99,7 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
     if (parentMatrix !== undefined)
     {
         var matrix = parentMatrix.matrix;
+
         ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
     }
 
@@ -116,9 +117,12 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
     ctx.translate(-(src.originX * src.width), -(src.originY * src.height));
 
     // Draw
+
+    ctx.scale(src.tileScaleX, src.tileScaleY);
+
     ctx.translate(-this.tilePositionX, -this.tilePositionY);
-    ctx.fillStyle = src.canvasPattern;
-    ctx.fillRect(this.tilePositionX, this.tilePositionY, src.width, src.height);
+    ctx.fillStyle = src.tileTexture;
+    ctx.fillRect(this.tilePositionX, this.tilePositionY, src.width / src.tileScaleX, src.height / src.tileScaleY);
 
     ctx.restore();
 };

src/gameobjects/tilesprite/TileSpriteWebGLRenderer.js

@@ -5,6 +5,7 @@
  */
 
 var GameObject = require('../GameObject');
+var Utils = require('../../renderer/webgl/Utils');
 
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
@@ -30,7 +31,29 @@ var TileSpriteWebGLRenderer = function (renderer, src, interpolationPercentage,
 
     src.updateTileTexture();
 
-    this.pipeline.batchTileSprite(this, camera, parentMatrix);
+    var getTint = Utils.getTintAppendFloatAlpha;
+
+    this.pipeline.batchTexture(
+        src,
+        src.tileTexture,
+        src.frame.width * src.tileScaleX, src.frame.height * src.tileScaleY,
+        src.x, src.y,
+        src.width, src.height,
+        src.scaleX, src.scaleY,
+        src.rotation,
+        src.flipX, src.flipY,
+        src.scrollFactorX, src.scrollFactorY,
+        src.originX * src.width, src.originY * src.height,
+        0, 0, src.width, src.height,
+        getTint(src._tintTL, camera.alpha * src._alphaTL),
+        getTint(src._tintTR, camera.alpha * src._alphaTR),
+        getTint(src._tintBL, camera.alpha * src._alphaBL),
+        getTint(src._tintBR, camera.alpha * src._alphaBR),
+        (src.tilePositionX % src.frame.width) / src.frame.width,
+        (src.tilePositionY % src.frame.height) / src.frame.height,
+        camera,
+        parentMatrix
+    );
 };
 
 module.exports = TileSpriteWebGLRenderer;

src/renderer/webgl/WebGLRenderer.js

@@ -1120,14 +1120,10 @@ var WebGLRenderer = new Class({
             wrap = gl.REPEAT;
         }
 
-        if (scaleMode === CONST.ScaleModes.LINEAR)
+        if (scaleMode === CONST.ScaleModes.LINEAR && this.config.antialias)
         {
             filter = gl.LINEAR;
         }
-        else if (scaleMode === CONST.ScaleModes.NEAREST || !this.config.antialias)
-        {
-            filter = gl.NEAREST;
-        }
 
         if (!source && typeof width === 'number' && typeof height === 'number')
         {
@@ -1157,7 +1153,7 @@ var WebGLRenderer = new Class({
      * @param {object} pixels - pixel data
      * @param {integer} width - Width of the texture in pixels
      * @param {integer} height - Height of the texture in pixels
-     * @param {boolean} pma - Does the texture hace premultiplied alpha.
+     * @param {boolean} pma - Does the texture have premultiplied alpha?
      *
      * @return {WebGLTexture} Raw WebGLTexture
      */