NineSlice improvements

src/gameobjects/nineslice/NineSlice.js

@@ -7,10 +7,14 @@
 var DefaultNineSliceNodes = require('../../renderer/webgl/renderNodes/defaults/DefaultQuadNodes');
 var Class = require('../../utils/Class');
 var Components = require('../components');
+var Frame = require('../../textures/Frame');
 var GameObject = require('../GameObject');
 var NineSliceRender = require('./NineSliceRender');
 var Vertex = require('./NineSliceVertex');
 
+//  bitmask flag for GameObject.renderMask
+var _FLAG = 8; // 1000
+
 /**
  * @classdesc
  * A Nine Slice Game Object allows you to display a texture-based object that
@@ -428,8 +432,8 @@ var NineSlice = new Class({
                 if (height === undefined) { height = 256; }
             }
 
-            this._width = width;
-            this._height = height;
+            this._width = Math.max(width, leftWidth + rightWidth);
+            this._height = Math.max(height, topHeight + bottomHeight);
 
             this.leftWidth = leftWidth;
             this.rightWidth = rightWidth;
@@ -739,9 +743,7 @@ var NineSlice = new Class({
 
         set: function (value)
         {
-            this._width = Math.max(value, this.leftWidth + this.rightWidth);
-
-            this.updateVertices();
+            this.setSize(value, this.height);
         }
 
     },
@@ -774,9 +776,7 @@ var NineSlice = new Class({
         {
             if (!this.is3Slice)
             {
-                this._height = Math.max(value, this.topHeight + this.bottomHeight);
-
-                this.updateVertices();
+                this.setSize(this.width, value);
             }
         }
 
@@ -855,8 +855,10 @@ var NineSlice = new Class({
      */
     setSize: function (width, height)
     {
-        this.width = width;
-        this.height = height;
+        if (width !== this.width) { this._width = Math.max(width, this.leftWidth + this.rightWidth); }
+        if (height !== this.height) { this._height = Math.max(height, this.topHeight + this.bottomHeight); }
+
+        this.updateVertices();
 
         this.updateDisplayOrigin();
 
@@ -968,6 +970,76 @@ var NineSlice = new Class({
         return this.updateDisplayOrigin();
     },
 
+    /**
+     * Sets the frame this Game Object will use to render with.
+     *
+     * If you pass a string or index then the Frame has to belong to the current Texture being used
+     * by this Game Object.
+     *
+     * If you pass a Frame instance, then the Texture being used by this Game Object will also be updated.
+     *
+     * 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.NineSlice#setFrame
+     * @since 3.60.0
+     *
+     * @param {(string|number|Phaser.Textures.Frame)} frame - The name or index of the frame within the Texture, or a Frame instance.
+     * @param {boolean} [updateSize=true] - Should this call adjust the size of the Game Object?
+     * @param {boolean} [updateOrigin=true] - Should this call adjust the origin of the Game Object?
+     *
+     * @return {this} This Game Object instance.
+     */
+    setFrame: function (frame, updateSize, updateOrigin)
+    {
+        if (updateSize === undefined) { updateSize = true; }
+        if (updateOrigin === undefined) { updateOrigin = true; }
+
+        if (frame instanceof Frame)
+        {
+            this.texture = this.scene.sys.textures.get(frame.texture.key);
+
+            this.frame = frame;
+        }
+        else
+        {
+            this.frame = this.texture.get(frame);
+        }
+
+        if (!this.frame.cutWidth || !this.frame.cutHeight)
+        {
+            this.renderFlags &= ~_FLAG;
+        }
+        else
+        {
+            this.renderFlags |= _FLAG;
+        }
+
+        if (this._sizeComponent && updateSize)
+        {
+            this.setSizeToFrame();
+        }
+        else
+        {
+            this.updateUVs();
+        }
+
+        if (this._originComponent && updateOrigin)
+        {
+            if (this.frame.customPivot)
+            {
+                this.setOrigin(this.frame.pivotX, this.frame.pivotY);
+            }
+            else
+            {
+                this.updateDisplayOrigin();
+            }
+        }
+
+        return this;
+    },
+
     /**
      * This method is included but does nothing for the Nine Slice Game Object,
      * because the size of the object isn't based on the texture frame.