phaser
Version:
A fast, free and fun HTML5 Game Framework for Desktop and Mobile web browsers from the team at Phaser Studio Inc.
283 lines (234 loc) • 7.37 kB
JavaScript
/**
* @author Richard Davey <rich@phaser.io>
* @copyright 2013-2025 Phaser Studio Inc.
* @license {@link https://opensource.org/licenses/MIT|MIT License}
*/
var StarRender = require('./StarRender');
var Class = require('../../../utils/Class');
var Earcut = require('../../../geom/polygon/Earcut');
var Shape = require('../Shape');
/**
* @classdesc
* The Star Shape is a Game Object that can be added to a Scene, Group or Container. You can
* treat it like any other Game Object in your game, such as tweening it, scaling it, or enabling
* it for input or physics. It provides a quick and easy way for you to render this shape in your
* game without using a texture, while still taking advantage of being fully batched in WebGL.
*
* This shape supports both fill and stroke colors.
*
* As the name implies, the Star shape will display a star in your game. You can control several
* aspects of it including the number of points that constitute the star. The default is 5. If
* you change it to 4 it will render as a diamond. If you increase them, you'll get a more spiky
* star shape.
*
* You can also control the inner and outer radius, which is how 'long' each point of the star is.
* Modify these values to create more interesting shapes.
*
* @class Star
* @extends Phaser.GameObjects.Shape
* @memberof Phaser.GameObjects
* @constructor
* @since 3.13.0
*
* @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
* @param {number} [x=0] - The horizontal position of this Game Object in the world.
* @param {number} [y=0] - The vertical position of this Game Object in the world.
* @param {number} [points=5] - The number of points on the star.
* @param {number} [innerRadius=32] - The inner radius of the star.
* @param {number} [outerRadius=64] - The outer radius of the star.
* @param {number} [fillColor] - The color the star will be filled with, i.e. 0xff0000 for red.
* @param {number} [fillAlpha] - The alpha the star will be filled with. You can also set the alpha of the overall Shape using its `alpha` property.
*/
var Star = new Class({
Extends: Shape,
Mixins: [
StarRender
],
initialize:
function Star (scene, x, y, points, innerRadius, outerRadius, fillColor, fillAlpha)
{
if (x === undefined) { x = 0; }
if (y === undefined) { y = 0; }
if (points === undefined) { points = 5; }
if (innerRadius === undefined) { innerRadius = 32; }
if (outerRadius === undefined) { outerRadius = 64; }
Shape.call(this, scene, 'Star', null);
/**
* Private internal value.
* The number of points in the star.
*
* @name Phaser.GameObjects.Star#_points
* @type {number}
* @private
* @since 3.13.0
*/
this._points = points;
/**
* Private internal value.
* The inner radius of the star.
*
* @name Phaser.GameObjects.Star#_innerRadius
* @type {number}
* @private
* @since 3.13.0
*/
this._innerRadius = innerRadius;
/**
* Private internal value.
* The outer radius of the star.
*
* @name Phaser.GameObjects.Star#_outerRadius
* @type {number}
* @private
* @since 3.13.0
*/
this._outerRadius = outerRadius;
this.setPosition(x, y);
this.setSize(outerRadius * 2, outerRadius * 2);
if (fillColor !== undefined)
{
this.setFillStyle(fillColor, fillAlpha);
}
this.updateDisplayOrigin();
this.updateData();
},
/**
* Sets the number of points that make up the Star shape.
* This call can be chained.
*
* @method Phaser.GameObjects.Star#setPoints
* @since 3.13.0
*
* @param {number} value - The amount of points the Star will have.
*
* @return {this} This Game Object instance.
*/
setPoints: function (value)
{
this._points = value;
return this.updateData();
},
/**
* Sets the inner radius of the Star shape.
* This call can be chained.
*
* @method Phaser.GameObjects.Star#setInnerRadius
* @since 3.13.0
*
* @param {number} value - The amount to set the inner radius to.
*
* @return {this} This Game Object instance.
*/
setInnerRadius: function (value)
{
this._innerRadius = value;
return this.updateData();
},
/**
* Sets the outer radius of the Star shape.
* This call can be chained.
*
* @method Phaser.GameObjects.Star#setOuterRadius
* @since 3.13.0
*
* @param {number} value - The amount to set the outer radius to.
*
* @return {this} This Game Object instance.
*/
setOuterRadius: function (value)
{
this._outerRadius = value;
return this.updateData();
},
/**
* The number of points that make up the Star shape.
*
* @name Phaser.GameObjects.Star#points
* @type {number}
* @default 5
* @since 3.13.0
*/
points: {
get: function ()
{
return this._points;
},
set: function (value)
{
this._points = value;
this.updateData();
}
},
/**
* The inner radius of the Star shape.
*
* @name Phaser.GameObjects.Star#innerRadius
* @type {number}
* @default 32
* @since 3.13.0
*/
innerRadius: {
get: function ()
{
return this._innerRadius;
},
set: function (value)
{
this._innerRadius = value;
this.updateData();
}
},
/**
* The outer radius of the Star shape.
*
* @name Phaser.GameObjects.Star#outerRadius
* @type {number}
* @default 64
* @since 3.13.0
*/
outerRadius: {
get: function ()
{
return this._outerRadius;
},
set: function (value)
{
this._outerRadius = value;
this.updateData();
}
},
/**
* Internal method that updates the data and path values.
*
* @method Phaser.GameObjects.Star#updateData
* @private
* @since 3.13.0
*
* @return {this} This Game Object instance.
*/
updateData: function ()
{
var path = [];
var points = this._points;
var innerRadius = this._innerRadius;
var outerRadius = this._outerRadius;
var rot = Math.PI / 2 * 3;
var step = Math.PI / points;
// So origin 0.5 = the center of the star
var x = outerRadius;
var y = outerRadius;
path.push(x, y + -outerRadius);
for (var i = 0; i < points; i++)
{
path.push(x + Math.cos(rot) * outerRadius, y + Math.sin(rot) * outerRadius);
rot += step;
path.push(x + Math.cos(rot) * innerRadius, y + Math.sin(rot) * innerRadius);
rot += step;
}
path.push(x, y + -outerRadius);
this.pathIndexes = Earcut(path);
this.pathData = path;
return this;
}
});
module.exports = Star;