Skip to content

Commit 1f4c0b5

Browse files
photonstormphotonstorm
committed
Added Curve Shape object
1 parent ef558fe commit 1f4c0b5

6 files changed

Lines changed: 341 additions & 0 deletions

File tree

‎src/gameobjects/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ var GameObjects = {
4040

4141
Shape: require('./shape/Shape'),
4242
Arc: require('./shape/arc/Arc'),
43+
Curve: require('./shape/curve/Curve'),
4344
Ellipse: require('./shape/ellipse/Ellipse'),
4445
IsoBox: require('./shape/isobox/IsoBox'),
4546
IsoTriangle: require('./shape/isotriangle/IsoTriangle'),
@@ -69,6 +70,7 @@ var GameObjects = {
6970

7071
// Shapes
7172
Arc: require('./shape/arc/ArcFactory'),
73+
Curve: require('./shape/curve/CurveFactory'),
7274
Ellipse: require('./shape/ellipse/EllipseFactory'),
7375
IsoBox: require('./shape/isobox/IsoBoxFactory'),
7476
IsoTriangle: require('./shape/isotriangle/IsoTriangleFactory'),

‎src/gameobjects/shape/curve/Curve.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var Class = require('../../../utils/Class');
8+
var CurveRender = require('./CurveRender');
9+
var Earcut = require('../../../geom/polygon/Earcut');
10+
var Rectangle = require('../../../geom/rectangle/Rectangle');
11+
var Shape = require('../Shape');
12+
13+
/**
14+
* @classdesc
15+
*
16+
* @class Curve
17+
* @extends Phaser.GameObjects.Shape
18+
* @memberOf Phaser.GameObjects
19+
* @constructor
20+
* @since 3.13.0
21+
*
22+
* @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
23+
* @param {number} x - The horizontal position of this Game Object in the world.
24+
* @param {number} y - The vertical position of this Game Object in the world.
25+
*/
26+
var Curve = new Class({
27+
28+
Extends: Shape,
29+
30+
Mixins: [
31+
CurveRender
32+
],
33+
34+
initialize:
35+
36+
function Curve (scene, x, y, curve, fillColor, fillAlpha)
37+
{
38+
if (x === undefined) { x = 0; }
39+
if (y === undefined) { y = 0; }
40+
41+
Shape.call(this, scene, 'Curve', curve);
42+
43+
// The number of points used to draw the curve. Higher values create smoother renders at the cost of more triangles being drawn.
44+
this._smoothness = 32;
45+
46+
this._curveBounds = new Rectangle();
47+
48+
this.closePath = false;
49+
50+
this.setPosition(x, y);
51+
52+
if (fillColor !== undefined)
53+
{
54+
this.setFillStyle(fillColor, fillAlpha);
55+
}
56+
57+
this.updateData();
58+
},
59+
60+
smoothness: {
61+
62+
get: function ()
63+
{
64+
return this._smoothness;
65+
},
66+
67+
set: function (value)
68+
{
69+
this._smoothness = value;
70+
71+
this.updateData();
72+
}
73+
74+
},
75+
76+
setSmoothness: function (value)
77+
{
78+
this._smoothness = value;
79+
80+
return this.updateData();
81+
},
82+
83+
setClosePath: function (value)
84+
{
85+
this.closePath = value;
86+
87+
return this;
88+
},
89+
90+
updateData: function ()
91+
{
92+
var bounds = this._curveBounds;
93+
var smoothness = this._smoothness;
94+
95+
// Update the bounds in case the underlying data has changed
96+
this.data.getBounds(bounds, smoothness);
97+
98+
this.setSize(bounds.width, bounds.height);
99+
this.updateDisplayOrigin();
100+
101+
var path = [];
102+
var points = this.data.getPoints(smoothness);
103+
104+
for (var i = 0; i < points.length; i++)
105+
{
106+
path.push(points[i].x, points[i].y);
107+
}
108+
109+
path.push(points[0].x, points[0].y);
110+
111+
this.pathIndexes = Earcut(path);
112+
this.pathData = path;
113+
114+
return this;
115+
}
116+
117+
});
118+
119+
module.exports = Curve;

‎src/gameobjects/shape/curve/CurveCanvasRenderer.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
/**
8+
* Renders this Game Object with the Canvas Renderer to the given Camera.
9+
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
10+
* This method should not be called directly. It is a utility function of the Render module.
11+
*
12+
* @method Phaser.GameObjects.Curve#renderCanvas
13+
* @since 3.13.0
14+
* @private
15+
*
16+
* @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
17+
* @param {Phaser.GameObjects.Curve} src - The Game Object being rendered in this call.
18+
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
19+
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
20+
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
21+
*/
22+
var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
23+
{
24+
};
25+
26+
module.exports = CurveCanvasRenderer;

‎src/gameobjects/shape/curve/CurveFactory.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var GameObjectFactory = require('../../GameObjectFactory');
8+
var Curve = require('./Curve');
9+
10+
/**
11+
* Creates a new Curve Shape Game Object and adds it to the Scene.
12+
*
13+
* Note: This method will only be available if the Curve Game Object has been built into Phaser.
14+
*
15+
* @method Phaser.GameObjects.GameObjectFactory#curve
16+
* @since 3.13.0
17+
*
18+
* @param {number} [x=0] - The horizontal position of this Game Object in the world.
19+
* @param {number} [y=0] - The vertical position of this Game Object in the world.
20+
* @param {any} [curve] - The Curve object to use to create the Shape.
21+
* @param {number} [fillColor=0xffffff] - The color the curve will be filled with, i.e. 0xff0000 for red.
22+
* @param {number} [fillAlpha=1] - The alpha the curve will be filled with. You can also set the alpha of the overall Shape using its `alpha` property.
23+
*
24+
* @return {Phaser.GameObjects.Curve} The Game Object that was created.
25+
*/
26+
GameObjectFactory.register('curve', function (x, y, curve, fillColor, fillAlpha)
27+
{
28+
return this.displayList.add(new Curve(this.scene, x, y, curve, fillColor, fillAlpha));
29+
});

‎src/gameobjects/shape/curve/CurveRender.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var renderWebGL = require('../../../utils/NOOP');
8+
var renderCanvas = require('../../../utils/NOOP');
9+
10+
if (typeof WEBGL_RENDERER)
11+
{
12+
renderWebGL = require('./CurveWebGLRenderer');
13+
}
14+
15+
if (typeof CANVAS_RENDERER)
16+
{
17+
renderCanvas = require('./CurveCanvasRenderer');
18+
}
19+
20+
module.exports = {
21+
22+
renderWebGL: renderWebGL,
23+
renderCanvas: renderCanvas
24+
25+
};

‎src/gameobjects/shape/curve/CurveWebGLRenderer.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var Utils = require('../../../renderer/webgl/Utils');
8+
9+
/**
10+
* Renders this Game Object with the WebGL Renderer to the given Camera.
11+
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
12+
* This method should not be called directly. It is a utility function of the Render module.
13+
*
14+
* @method Phaser.GameObjects.Polygon#renderWebGL
15+
* @since 3.13.0
16+
* @private
17+
*
18+
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
19+
* @param {Phaser.GameObjects.Polygon} src - The Game Object being rendered in this call.
20+
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
21+
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
22+
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
23+
*/
24+
var PolygonWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
25+
{
26+
var pipeline = this.pipeline;
27+
28+
var camMatrix = pipeline._tempMatrix1;
29+
var shapeMatrix = pipeline._tempMatrix2;
30+
var calcMatrix = pipeline._tempMatrix3;
31+
32+
renderer.setPipeline(pipeline);
33+
34+
shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
35+
36+
camMatrix.copyFrom(camera.matrix);
37+
38+
if (parentMatrix)
39+
{
40+
// Multiply the camera by the parent matrix
41+
camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
42+
43+
// Undo the camera scroll
44+
shapeMatrix.e = src.x;
45+
shapeMatrix.f = src.y;
46+
}
47+
else
48+
{
49+
shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
50+
shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
51+
}
52+
53+
camMatrix.multiply(shapeMatrix, calcMatrix);
54+
55+
var i;
56+
var dx = src._displayOriginX + src._curveBounds.x;
57+
var dy = src._displayOriginY + src._curveBounds.y;
58+
59+
var alpha = camera.alpha * src.alpha;
60+
61+
var path = src.pathData;
62+
63+
if (src.isFilled)
64+
{
65+
var fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha);
66+
67+
var pathIndexes = src.pathIndexes;
68+
69+
for (i = 0; i < pathIndexes.length; i += 3)
70+
{
71+
var p0 = pathIndexes[i] * 2;
72+
var p1 = pathIndexes[i + 1] * 2;
73+
var p2 = pathIndexes[i + 2] * 2;
74+
75+
var x0 = path[p0 + 0] - dx;
76+
var y0 = path[p0 + 1] - dy;
77+
var x1 = path[p1 + 0] - dx;
78+
var y1 = path[p1 + 1] - dy;
79+
var x2 = path[p2 + 0] - dx;
80+
var y2 = path[p2 + 1] - dy;
81+
82+
var tx0 = calcMatrix.getX(x0, y0);
83+
var ty0 = calcMatrix.getY(x0, y0);
84+
85+
var tx1 = calcMatrix.getX(x1, y1);
86+
var ty1 = calcMatrix.getY(x1, y1);
87+
88+
var tx2 = calcMatrix.getX(x2, y2);
89+
var ty2 = calcMatrix.getY(x2, y2);
90+
91+
pipeline.batchTri(tx0, ty0, tx1, ty1, tx2, ty2, 0, 0, 1, 1, fillTintColor, fillTintColor, fillTintColor, pipeline.tintEffect);
92+
}
93+
}
94+
95+
if (src.isStroked)
96+
{
97+
var strokeTint = pipeline.strokeTint;
98+
var strokeTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.strokeColor, src.strokeAlpha * alpha);
99+
100+
strokeTint.TL = strokeTintColor;
101+
strokeTint.TR = strokeTintColor;
102+
strokeTint.BL = strokeTintColor;
103+
strokeTint.BR = strokeTintColor;
104+
105+
var pathLength = path.length - 1;
106+
var lineWidth = src.lineWidth;
107+
var halfLineWidth = lineWidth / 2;
108+
109+
var px1 = path[0] - dx;
110+
var py1 = path[1] - dy;
111+
112+
if (!src.closePath)
113+
{
114+
pathLength -= 2;
115+
}
116+
117+
for (i = 2; i < pathLength; i += 2)
118+
{
119+
var px2 = path[i] - dx;
120+
var py2 = path[i + 1] - dy;
121+
122+
pipeline.batchLine(
123+
px1,
124+
py1,
125+
px2,
126+
py2,
127+
halfLineWidth,
128+
halfLineWidth,
129+
lineWidth,
130+
i - 2,
131+
(src.closePath) ? (i === pathLength - 1) : false
132+
);
133+
134+
px1 = px2;
135+
py1 = py2;
136+
}
137+
}
138+
};
139+
140+
module.exports = PolygonWebGLRenderer;

0 commit comments

Comments
 (0)