Now supports origin component

This commit is contained in:
Richard Davey 2022-12-08 16:19:29 +00:00
parent 45c0c23f6f
commit 2d409cbe54
2 changed files with 96 additions and 35 deletions

View file

@ -65,7 +65,6 @@ var Vertex = require('../../geom/mesh/Vertex');
* @extends Phaser.GameObjects.Components.FX
* @extends Phaser.GameObjects.Components.GetBounds
* @extends Phaser.GameObjects.Components.Mask
* @extends Phaser.GameObjects.Components.Origin
* @extends Phaser.GameObjects.Components.Pipeline
* @extends Phaser.GameObjects.Components.ScrollFactor
* @extends Phaser.GameObjects.Components.Texture
@ -120,6 +119,9 @@ var NineSlice = new Class({
this._width = width;
this._height = height;
this._originX = 0.5;
this._originY = 0.5;
this.vertices = [];
for (var i = 0; i < 54; i++)
@ -263,15 +265,17 @@ var NineSlice = new Class({
{
var width = this.width;
var height = this.height;
var originX = this.originX;
var originY = this.originY;
var verts = this.vertices;
verts[offset + 0].resize(x1, y1, width, height);
verts[offset + 1].resize(x1, y2, width, height);
verts[offset + 2].resize(x2, y1, width, height);
verts[offset + 3].resize(x1, y2, width, height);
verts[offset + 4].resize(x2, y2, width, height);
verts[offset + 5].resize(x2, y1, width, height);
verts[offset + 0].resize(x1, y1, width, height, originX, originY);
verts[offset + 1].resize(x1, y2, width, height, originX, originY);
verts[offset + 2].resize(x2, y1, width, height, originX, originY);
verts[offset + 3].resize(x1, y2, width, height, originX, originY);
verts[offset + 4].resize(x2, y2, width, height, originX, originY);
verts[offset + 5].resize(x2, y1, width, height, originX, originY);
},
updateQuadUVs: function (offset, u1, v1, u2, v2)
@ -537,6 +541,87 @@ var NineSlice = new Class({
this.displayHeight = height;
return this;
},
/**
* The horizontal origin of this Game Object.
* The origin maps the relationship between the size and position of the Game Object.
* The default value is 0.5, meaning all Game Objects are positioned based on their center.
* Setting the value to 0 means the position now relates to the left of the Game Object.
*
* @name Phaser.GameObjects.Components.Origin#originX
* @type {number}
* @since 3.60.0
*/
originX: {
get: function ()
{
return this._originX;
},
set: function (value)
{
this._originX = value;
this.updateVertices();
}
},
/**
* The vertical origin of this Game Object.
* The origin maps the relationship between the size and position of the Game Object.
* The default value is 0.5, meaning all Game Objects are positioned based on their center.
* Setting the value to 0 means the position now relates to the top of the Game Object.
*
* @name Phaser.GameObjects.Components.Origin#originY
* @type {number}
* @since 3.60.0
*/
originY: {
get: function ()
{
return this._originY;
},
set: function (value)
{
this._originY = value;
this.updateVertices();
}
},
/**
* Sets the origin of this Game Object.
*
* The values are given in the range 0 to 1.
*
* @method Phaser.GameObjects.Components.Origin#setOrigin
* @since 3.60.0
*
* @param {number} [x=0.5] - The horizontal origin value.
* @param {number} [y=x] - The vertical origin value. If not defined it will be set to the value of `x`.
*
* @return {this} This Game Object instance.
*/
setOrigin: function (x, y)
{
if (x === undefined) { x = 0.5; }
if (y === undefined) { y = x; }
this._originX = x;
this._originY = y;
this.updateVertices();
return this.updateDisplayOrigin();
},
preDestroy: function ()
{
this.vertices = [];
}
});

View file

@ -35,19 +35,7 @@ var NineSliceWebGLRenderer = function (renderer, src, camera, parentMatrix)
var pipeline = renderer.pipelines.set(src.pipeline, src);
// var test = {
// x: src.x,
// y: src.y,
// rotation: src.rotation,
// scaleX: src.scaleX,
// scaleY: src.scaleY,
// scrollFactorX: src.scrollFactorX,
// scrollFactorY: src.scrollFactorY
// };
// var calcMatrix = GetCalcMatrix(test, camera, parentMatrix).calc;
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix, false).calc;
var textureUnit = pipeline.setGameObject(src);
@ -56,18 +44,6 @@ var NineSliceWebGLRenderer = function (renderer, src, camera, parentMatrix)
var vertexOffset = (pipeline.vertexCount * pipeline.currentShader.vertexComponentCount) - 1;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var a = calcMatrix.a;
var b = calcMatrix.b;
var c = calcMatrix.c;
var d = calcMatrix.d;
// var e = -dx + calcMatrix.e;
// var f = -dy + calcMatrix.f;
var e = calcMatrix.e;
var f = calcMatrix.f;
var roundPixels = camera.roundPixels;
var tintEffect = src.tintFill;
@ -86,7 +62,7 @@ var NineSliceWebGLRenderer = function (renderer, src, camera, parentMatrix)
for (var i = 0; i < totalVerts; i++)
{
var vert = verts[i].update(a, b, c, d, e, f, roundPixels, alpha);
var vert = verts[i];
if (i === flushCount)
{
@ -100,8 +76,8 @@ var NineSliceWebGLRenderer = function (renderer, src, camera, parentMatrix)
vertexOffset = 0;
}
F32[++vertexOffset] = vert.tx;
F32[++vertexOffset] = vert.ty;
F32[++vertexOffset] = calcMatrix.getXRound(vert.vx, vert.vy, roundPixels);
F32[++vertexOffset] = calcMatrix.getYRound(vert.vx, vert.vy, roundPixels);
F32[++vertexOffset] = vert.u;
F32[++vertexOffset] = vert.v;
F32[++vertexOffset] = textureUnit;