Moved crop UV handler to the Frame method. Cleaner and easier.

Author: photonstorm

CHANGELOG.md

@@ -46,12 +46,15 @@ There is a third game config property called `pixelArt`. If set to `true` it's t
 
 The Texture Tint Pipeline has been rewritten to tidy up hundreds of lines of duplicate code and to move the responsibility of drawing to the Game Objects themselves. Previously, had you excluded say Tilemaps from your build of Phaser, the renderer would still include masses of code dealing with the drawing of them. Now, this task has been moved to the Game Objects and the pipeline just provides a set of clean utility functions for batching, flushing and drawing.
 
+* You can now set the WebGL batch size in the Game Config via the property `batchSize`. The default is 2000 before the batch will flush, which is a happy average between desktop and mobile. If targeting desktop specifically, you may wish to increase this value to reduce draw calls.
 * The `batchTileSprite` method has been removed from the `TextureTintPipeline` class, because it is now handled internally by the Game Object itself.
 * The `drawStaticTilemapLayer` method has been removed from the `TextureTintPipeline` class, because it is now handled internally by the Game Object itself.
 * The `batchText` method has been removed from the `TextureTintPipeline` class, because it is now handled internally by the Game Object itself.
 * The `batchDynamicTilemapLayer` method has been removed from the `TextureTintPipeline` class, because it is now handled internally by the Game Object itself.
+* The shader has a new attribute: `tintEffect`. This is a single FLOAT.
+* The vertex size has increased by 1 FLOAT to account for the extra shader attribute.
 
-Due to the changes in the Texture Tint Pipeline the Texture Frame class has also been updated. The following changes concern the Frame UV data:
+Due to the changes in the Texture Tint Pipeline the `Textures.Frame` class has also been updated. The following changes concern the Frame UV data:
 
 * Previously, the UV data spanned 8 properties: `x0`, `y0`, `x1`, `y1`, `x2`, `y2`, `x3` and `y3` and was stored in the `data.uvs` object. These have been replaced with directly accessible properties: `u0`, `v0`, `u1` and `v1`. These 4 properties are used directly in all renderer code now. Although it was clearer having 8 properties, 4 of them were just duplicates, so we've traded a little clarity for a smaller overall object and less dictionary look-ups.
 * `Frame.uvs` (and the corresponding `Frame.data.uvs`) object has been removed.
@@ -68,6 +71,7 @@ The Tint component documentation has been overhauled to explain these difference
 
 ### New Features
 
+* You can now crop Sprites and Images using the new `setCrop` method. The crop is a rectangle that limits the area of the texture frame that is visible during rendering. Cropping a Game Object does not change its size, dimensions, physics body or hit area, it just changes what is shown when rendered. This is ideal for hiding part of a Sprite without using a mask, or for effects like displaying a progress bar. Cropping works even when the Game Object is flipped.
 * `Graphics.fillRoundedRect` will draw a stroked rounded rectangle to a Graphics object. The radius of the corners can be either a number, or an object, allowing you to specify different radius per corner (thanks @TadejZupancic)
 * `Graphics.strokeRoundedRect` will draw a filled rounded rectangle to a Graphics object. The radius of the corners can be either a number, or an object, allowing you to specify different radius per corner (thanks @TadejZupancic)
 * `ParticleEmitter.stop` is a new chainable method to stop a particle emitter. It's the same as setting `on` to `false` but means you don't have to break the method flow to do so (thanks @samme)
@@ -77,7 +81,6 @@ The Tint component documentation has been overhauled to explain these difference
 * `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.
-* You can now set the WebGL batch size in the Game Config via the property `batchSize`. The default is 2000 before the batch will flush, which is a happy average between desktop and mobile. If targeting desktop specifically, you may wish to increase this value to reduce draw calls.
 * `TransformMatrix.copyFrom` is a new method that will copy the given matrix into the values of the current one.
 * `TransformMatrix.multiplyWithOffset` is a new method that will multiply the given matrix with the current one, factoring in an additional offset to the results. This is used internally by the renderer code in various places.
 

src/gameobjects/components/Texture.js

@@ -53,7 +53,7 @@ var Texture = {
      * @private
      * @since 3.11.0
      */
-    _crop: { u0: 0, v0: 0, u1: 0, v1: 0, width: 0, height: 0, x: 0, y: 0 },
+    _crop: { u0: 0, v0: 0, u1: 0, v1: 0, width: 0, height: 0, x: 0, y: 0, flipX: false, flipY: false },
 
     /**
      * Applies a crop to a texture based Game Object, such as a Sprite or Image.
@@ -91,7 +91,7 @@ var Texture = {
         }
         else if (this.frame)
         {
-            this._crop = this.frame.getCropUVs(this._crop, x, y, width, height);
+            this.frame.setCropUVs(this._crop, x, y, width, height, this.flipX, this.flipY);
 
             this.isCropped = true;
         }
@@ -171,6 +171,11 @@ var Texture = {
             }
         }
 
+        if (this.isCropped)
+        {
+            this.frame.updateCropUVs(this._crop, this.flipX, this.flipY);
+        }
+
         return this;
     }
 

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -637,12 +637,19 @@ var TextureTintPipeline = new Class({
         {
             var crop = sprite._crop;
 
+            if (crop.flipX !== sprite.flipX || crop.flipY !== sprite.flipY)
+            {
+                frame.updateCropUVs(crop, sprite.flipX, sprite.flipY);
+            }
+
             u0 = crop.u0;
             v0 = crop.v0;
             u1 = crop.u1;
             v1 = crop.v1;
+
             frameWidth = crop.width;
             frameHeight = crop.height;
+
             frameX = crop.x;
             frameY = crop.y;
 
@@ -722,29 +729,6 @@ var TextureTintPipeline = new Class({
 
         var tintEffect = (sprite._isTinted && sprite.tintFill);
 
-        if (sprite.isCropped && (sprite.flipX || sprite.flipY))
-        {
-            var ox = 0;
-            var oy = 0;
-            var textureSourceWidth = frame.source.width;
-            var textureSourceHeight = frame.source.height;
-
-            if (sprite.flipX)
-            {
-                ox = (textureSourceWidth + frameWidth) - (crop.x * 2);
-            }
-
-            if (sprite.flipY)
-            {
-                oy = (textureSourceHeight + frameHeight) - (crop.y * 2);
-            }
-
-            u0 = (crop.x + ox) / textureSourceWidth;
-            v0 = (crop.y + oy) / textureSourceHeight;
-            u1 = (crop.x + ox + crop.width) / textureSourceWidth;
-            v1 = (crop.y + oy + crop.height) / textureSourceHeight;
-        }
-
         this.batchVertices(tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3, u0, v0, u1, v1, tintTL, tintTR, tintBL, tintBR, tintEffect);
     },
 

src/textures/Frame.js

@@ -458,18 +458,20 @@ var Frame = new Class({
      * This is called directly by the Game Object Texture Components `setCrop` method.
      * Please use that method to crop a Game Object.
      *
-     * @method Phaser.Textures.Frame#getCropUVs
+     * @method Phaser.Textures.Frame#setCropUVs
      * @since 3.11.0
      * 
      * @param {object} crop - The crop data object. This is the `GameObject._crop` property.
      * @param {number} x - The x coordinate to start the crop from. Cannot be negative or exceed the Frame width.
      * @param {number} y - The y coordinate to start the crop from. Cannot be negative or exceed the Frame height.
      * @param {number} width - The width of the crop rectangle. Cannot exceed the Frame width.
      * @param {number} height - The height of the crop rectangle. Cannot exceed the Frame height.
+     * @param {boolean} flipX - Does the parent Game Object have flipX set?
+     * @param {boolean} flipY - Does the parent Game Object have flipY set?
      *
      * @return {object} The updated crop data object.
      */
-    getCropUVs: function (crop, x, y, width, height)
+    setCropUVs: function (crop, x, y, width, height, flipX, flipY)
     {
         //  Clamp the input values
 
@@ -490,19 +492,52 @@ var Frame = new Class({
 
         var tw = this.source.width;
         var th = this.source.height;
+        var ox = 0;
+        var oy = 0;
+
+        if (flipX)
+        {
+            ox = (tw - width) - (x * 2);
+        }
+
+        if (flipY)
+        {
+            oy = (th - height) - (y * 2);
+        }
+
+        crop.u0 = (x + ox) / tw;
+        crop.v0 = (y + oy) / th;
+        crop.u1 = (x + ox + width) / tw;
+        crop.v1 = (y + oy + height) / th;
 
-        crop.u0 = (x / tw);
-        crop.v0 = (y / th);
-        crop.u1 = (x + width) / tw;
-        crop.v1 = (y + height) / th;
         crop.width = width;
         crop.height = height;
         crop.x = x;
         crop.y = y;
+        crop.flipX = flipX;
+        crop.flipY = flipY;
 
         return crop;
     },
 
+    /**
+     * Takes a crop data object and recalculates the UVs based on the dimensions inside the crop object.
+     * Called automatically by `setFrame`.
+     *
+     * @method Phaser.Textures.Frame#updateCropUVs
+     * @since 3.11.0
+     * 
+     * @param {object} crop - The crop data object. This is the `GameObject._crop` property.
+     * @param {boolean} flipX - Does the parent Game Object have flipX set?
+     * @param {boolean} flipY - Does the parent Game Object have flipY set?
+     *
+     * @return {object} The updated crop data object.
+     */
+    updateCropUVs: function (crop, flipX, flipY)
+    {
+        return this.setCropUVs(crop, crop.x, crop.y, crop.width, crop.height, flipX, flipY);
+    },
+
     /**
      * Updates the internal WebGL UV cache and the drawImage cache.
      *