Shape line2
Introduction¶
A line shape, composed of 4 points
- Author: Rex
- Game object
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.plugin('rexlineshapelugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexlineshapelugin.min.js', true);
- Add line object
var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import LineShapePlugin from 'phaser3-rex-plugins/plugins/line-plugin.js'; var config = { // ... plugins: { global: [{ key: 'rexLineShapePlugin', plugin: LineShapePlugin, start: true }, // ... ] } // ... }; var game = new Phaser.Game(points, lineWidth, color, alpha, lineType);
- Add line object
var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import LineShape from 'phaser3-rex-plugins/plugins/lineshape.js';
- Add line object
var line = new LineShape(points, lineWidth, color, alpha, lineType); scene.add.existing(line);
Install plugin¶
Install plugin in configuration of game
var config = {
// ...
plugins: {
global: [{
key: 'rexLineShapePlugin',
plugin: LineShapePlugin,
start: true
},
// ...
]
}
// ...
};
var game = new Phaser.Game(config);
Create instance¶
var line = scene.add.rexLineShape(points, lineWidth, color, alpha, lineType);
or
var line = scene.add.rexLineShape({
points: [],
lineWidth: 2,
color: 0xffffff,
alpha: 1,
lineType: 0,
pointRadius: 10
});
lineType
:0
or'bezier'
: Bezier line type, default type.1
or'spline'
: Spline line type.2
or'polyline'
,'poly'
: Polygon line type.3
or'straightline'
,'straight'
: Straight line type.
points
: An array with 4{x,y}
elements- Straight line type will use 1st and last
{x, y}
elements
- Straight line type will use 1st and last
lineWidth
: Line width.color
: Stroke color.alpha
: Stroke alpha.pointRadius
: Radius of the point used in interaction detection, default value is10
.
Custom class¶
- Define class
class MyLineShape extends LineShape { constructor(scene, points, lineWidth, color, alpha, lineType) { super(scene, points, lineWidth, color, alpha, lineType); // ... scene.add.existing(this); } // ... // preUpdate(time, delta) {} }
scene.add.existing(gameObject)
: Adds an existing Game Object to this Scene.- If the Game Object renders, it will be added to the Display List.
- If it has a
preUpdate
method, it will be added to the Update List.
- Create instance
var line = new MyLineShape(scene, points, lineWidth, color, alpha, lineType);
Color¶
- Fill color
- Get
var color = line.fillColor; var alpha = line.fillAlpha;
- Set
line.setFillStyle(color, alpha);
- Clear
line.setFillStyle();
- Get
- Stroke color
- Get
var color = line.strokeColor;
- Set
line.setStrokeStyle(lineWidth, color, alpha);
- Clear
line.setStrokeStyle();
- Get
No tint methods
Uses line.setFillStyle(color, alpha)
to change color.
Alpha¶
- Get
var alpha = line.alpha;
- Set
line.setAlpha(alpha); // line.alpha = alpha;
Points¶
- Get
var points = line.points;
- Set
line.setLine(points, lineType);
lineType
:0
or'bezier'
: Bezier line type, default type.1
or'spline'
: Spline line type.2
or'polyline'
,'poly'
: Polygon line type.3
or'straightline'
,'straight'
: Straight line type.
points
: An array with 4{x,y}
elements- Straight line type will use 1st and last
{x, y}
elements
- Straight line type will use 1st and last
Line type¶
- Get
var lineType = line.lineType;
- Set
line.setLineType(lineType);
lineType
:0
or'bezier'
: Bezier line type, default type.1
or'spline'
: Spline line type.2
or'polyline'
,'poly'
: Polygon line type.3
or'straightline'
,'straight'
: Straight line type.
Input event¶
line
.setInteractive()
.on('pointerover', function () {
})
.on('pointerout', function () {
})
Set point radius
line.setPointRadius(radius);
Other properties¶
See game object
Create mask¶
var mask = line.createGeometryMask();
See mask
Shader effects¶
Support postFX effects
Note
No preFX effect support