The Quad Game Object now has a new setFrame method that allows you to change the frame being rendered by the Quad, including using frames that are part of a texture atlas. Fix phaserjs#3161

Author: photonstorm

CHANGELOG.md

@@ -108,6 +108,7 @@ There is a new Game Object Component called `TextureCrop`. It replaces the Textu
 * `TransformMatrix.e` and `TransformMatrix.f` are two new properties that are an alias for the `tx` and `ty` values.
 * `Graphics.arc` has a new optional argument `overshoot`. This is a small value that is added onto the end of the `endAngle` and allows you to extend the arc further than the default 360 degrees. You may wish to do this if you're trying to draw an arc with an especially thick line stroke, to ensure there are no gaps. Fix #3798 (thanks @jjalonso)
 * The TextureManager Sprite Sheet Parser will now throw a concise console warning if you specify invalid frame sizes that would result in no frames being generated (thanks @andygroff)
+* The `Quad` Game Object now has a new `setFrame` method that allows you to change the frame being rendered by the Quad, including using frames that are part of a texture atlas. Fix #3161 (thanks @halgorithm)
 
 ### Bug Fixes
 

src/gameobjects/mesh/Mesh.js

@@ -73,12 +73,6 @@ var Mesh = new Class({
     {
         GameObject.call(this, scene, 'Mesh');
 
-        this.setTexture(texture, frame);
-        this.setPosition(x, y);
-        this.setSizeToFrame();
-        this.setOrigin();
-        this.initPipeline('TextureTintPipeline');
-
         if (vertices.length !== uv.length)
         {
             throw new Error('Mesh Vertex count must match UV count');
@@ -159,6 +153,12 @@ var Mesh = new Class({
          * @since 3.11.0
          */
         this.tintFill = false;
+
+        this.setTexture(texture, frame);
+        this.setPosition(x, y);
+        this.setSizeToFrame();
+        this.setOrigin();
+        this.initPipeline('TextureTintPipeline');
     }
 
 });

src/gameobjects/quad/Quad.js

@@ -54,6 +54,7 @@ var Quad = new Class({
             0, 0, // br
             0, 0 // tr
         ];
+
         var uv = [
             0, 0, // tl
             0, 1, // bl
@@ -62,6 +63,7 @@ var Quad = new Class({
             1, 1, // br
             1, 0 // tr
         ];
+
         var colors = [
             0xffffff, // tl
             0xffffff, // bl
@@ -70,6 +72,7 @@ var Quad = new Class({
             0xffffff, // br
             0xffffff // tr
         ];
+
         var alphas = [
             1, // tl
             1, // bl
@@ -84,6 +87,65 @@ var Quad = new Class({
         this.resetPosition();
     },
 
+    /**
+     * Sets the frame this Game Object will use to render with.
+     *
+     * The Frame has to belong to the current Texture being used.
+     *
+     * It can be either a string or an index.
+     *
+     * Calling `setFrame` will modify the `width` and `height` properties of your Game Object.
+     * It will also change the `origin` if the Frame has a custom pivot point, as exported from packages like Texture Packer.
+     *
+     * @method Phaser.GameObjects.Quad#setFrame
+     * @since 3.11.0
+     *
+     * @param {(string|integer)} frame - The name or index of the frame within the Texture.
+     *
+     * @return {this} This Game Object instance.
+     */
+    setFrame: function (frame)
+    {
+        this.frame = this.texture.get(frame);
+
+        if (!this.frame.cutWidth || !this.frame.cutHeight)
+        {
+            this.renderFlags &= ~8;
+        }
+        else
+        {
+            this.renderFlags |= 8;
+        }
+
+        frame = this.frame;
+
+        //   TL
+        this.uv[0] = frame.u0;
+        this.uv[1] = frame.v0;
+
+        //   BL
+        this.uv[2] = frame.u0;
+        this.uv[3] = frame.v1;
+
+        //   BR
+        this.uv[4] = frame.u1;
+        this.uv[5] = frame.v1;
+
+        //   TL
+        this.uv[6] = frame.u0;
+        this.uv[7] = frame.v0;
+
+        //   BR
+        this.uv[8] = frame.u1;
+        this.uv[9] = frame.v1;
+
+        //   TR
+        this.uv[10] = frame.u1;
+        this.uv[11] = frame.v0;
+
+        return this;
+    },
+
     /**
      * The top-left x vertex of this Quad.
      *