mirror of
https://github.com/photonstorm/phaser
synced 2024-12-26 04:53:38 +00:00
103 lines
4.6 KiB
JavaScript
103 lines
4.6 KiB
JavaScript
/**
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
* @copyright 2022 Photon Storm Ltd.
|
|
* @license {@link https://opensource.org/licenses/MIT|MIT License}
|
|
*/
|
|
|
|
var NineSlice = require('./NineSlice');
|
|
var GameObjectFactory = require('../GameObjectFactory');
|
|
|
|
/**
|
|
* A Nine Slice Game Object allows you to display a texture-based object that
|
|
* can be stretched both horizontally and vertically, but that retains
|
|
* fixed-sized corners. The dimensions of the corners are set via the
|
|
* parameters to this class.
|
|
*
|
|
* This is extremely useful for UI and button like elements, where you need
|
|
* them to expand to accommodate the content without distorting the texture.
|
|
*
|
|
* The texture you provide for this Game Object should be based on the
|
|
* following layout structure:
|
|
*
|
|
* ```
|
|
* A B
|
|
* +---+----------------------+---+
|
|
* C | 1 | 2 | 3 |
|
|
* +---+----------------------+---+
|
|
* | | | |
|
|
* | 4 | 5 | 6 |
|
|
* | | | |
|
|
* +---+----------------------+---+
|
|
* D | 7 | 8 | 9 |
|
|
* +---+----------------------+---+
|
|
* ```
|
|
*
|
|
* When changing this objects width and / or height:
|
|
*
|
|
* areas 1, 3, 7 and 9 (the corners) will remain unscaled
|
|
* areas 2 and 8 will be stretched horizontally only
|
|
* areas 4 and 6 will be stretched vertically only
|
|
* area 5 will be stretched both horizontally and vertically
|
|
*
|
|
* You can also create a 3 slice Game Object:
|
|
*
|
|
* This works in a similar way, except you can only stretch it horizontally.
|
|
* Therefore, it requires less configuration:
|
|
*
|
|
* ```
|
|
* A B
|
|
* +---+----------------------+---+
|
|
* | | | |
|
|
* C | 1 | 2 | 3 |
|
|
* | | | |
|
|
* +---+----------------------+---+
|
|
* ```
|
|
*
|
|
* When changing this objects width (you cannot change its height)
|
|
*
|
|
* areas 1 and 3 will remain unscaled
|
|
* area 2 will be stretched horizontally
|
|
*
|
|
* The above configuration concept is adapted from the Pixi NineSlicePlane.
|
|
*
|
|
* To specify a 3 slice object instead of a 9 slice you should only
|
|
* provide the `leftWidth` and `rightWidth` parameters. To create a 9 slice
|
|
* you must supply all parameters.
|
|
*
|
|
* The _minimum_ width this Game Object can be is the total of
|
|
* `leftWidth` + `rightWidth`. The _minimum_ height this Game Object
|
|
* can be is the total of `topHeight` + `bottomHeight`.
|
|
* If you need to display this object at a smaller size, you can scale it.
|
|
*
|
|
* In terms of performance, using a 3 slice Game Object is the equivalent of
|
|
* having 3 Sprites in a row. Using a 9 slice Game Object is the equivalent
|
|
* of having 9 Sprites in a row. The vertices of this object are all batched
|
|
* together and can co-exist with other Sprites and graphics on the display
|
|
* list, without incurring any additional overhead.
|
|
*
|
|
* As of Phaser 3.60 this Game Object is WebGL only.
|
|
*
|
|
* @method Phaser.GameObjects.GameObjectFactory#nineslice
|
|
* @webglOnly
|
|
* @since 3.60.0
|
|
*
|
|
* @param {number} x - The horizontal position of the center of this Game Object in the world.
|
|
* @param {number} y - The vertical position of the center of this Game Object in the world.
|
|
* @param {(string|Phaser.Textures.Texture)} texture - The key, or instance of the Texture this Game Object will use to render with, as stored in the Texture Manager.
|
|
* @param {(string|number)} [frame] - An optional frame from the Texture this Game Object is rendering with.
|
|
* @param {number} [width=256] - The width of the Nine Slice Game Object. You can adjust the width post-creation.
|
|
* @param {number} [height=256] - The height of the Nine Slice Game Object. If this is a 3 slice object the height will be fixed to the height of the texture and cannot be changed.
|
|
* @param {number} [leftWidth=10] - The size of the left vertical column (A).
|
|
* @param {number} [rightWidth=10] - The size of the right vertical column (B).
|
|
* @param {number} [topHeight=0] - The size of the top horiztonal row (C). Set to zero or undefined to create a 3 slice object.
|
|
* @param {number} [bottomHeight=0] - The size of the bottom horiztonal row (D). Set to zero or undefined to create a 3 slice object.
|
|
*
|
|
* @return {Phaser.GameObjects.NineSlice} The Game Object that was created.
|
|
*/
|
|
if (typeof WEBGL_RENDERER)
|
|
{
|
|
GameObjectFactory.register('nineslice', function (x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight)
|
|
{
|
|
return this.displayList.add(new NineSlice(this.scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight));
|
|
});
|
|
}
|