wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-07-04 17:20:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

BitmapText updated and bought in-line with the new Text class. Moved to use the new Bitmap Text XML loader which should work fine on CocoonJS now and also supports multiple bitmap fonts per cache.

Browse Source
This commit is contained in:
photonstorm
2014-02-14 03:34:35 +00:00
parent 58e44f75e3
commit 24f2e2a46d
12 changed files with 498 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gameobjects/BitmapText.js
+236 -98
View File
@@ -19,15 +19,17 @@
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {number} x - X position of the new bitmapText object.
* @param {number} y - Y position of the new bitmapText object.
* @param {string} text - The actual text that will be written.
* @param {object} style - The style object containing style attributes like font, font size , etc.
* @param {string} font - The key of the BitmapFont as stored in Game.Cache.
* @param {string} [text] - The actual text that will be rendered. Can be set later via BitmapText.text.
* @param {number} [size] - The size the font will be rendered in, in pixels.
*/
Phaser.BitmapText = function (game, x, y, text, style) {
Phaser.BitmapText = function (game, x, y, font, text, size) {
x = x || 0;
y = y || 0;
font = font || '';
text = text || '';
style = style || '';
size = size || 32;
/**
* @property {Phaser.Game} game - A reference to the currently running Game.
@@ -40,17 +42,6 @@ Phaser.BitmapText = function (game, x, y, text, style) {
*/
this.exists = true;
/**
* @property {boolean} alive - This is a handy little var your game can use to determine if a sprite is alive or not, it doesn't effect rendering.
* @default
*/
this.alive = true;
/**
* @property {Phaser.Group} group - The parent Group of this BitmapText.
*/
this.group = null;
/**
* @property {string} name - The user defined name given to this BitmapText.
* @default
@@ -63,62 +54,55 @@ Phaser.BitmapText = function (game, x, y, text, style) {
*/
this.type = Phaser.BITMAPTEXT;
PIXI.BitmapText.call(this, text, style);
/**
* @property {Phaser.Point} world - The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container.
*/
this.world = new Phaser.Point(x, y);
/**
* @property {number} position.x - The x position of this object.
* An object that is fixed to the camera ignores the position of any ancestors in the display list and uses its x/y coordinates as offsets from the top left of the camera.
* @property {boolean} fixedToCamera - Fixes this object to the Camera.
* @default
*/
this.position.x = x;
/**
* @property {number} position.y - The y position of this object.
*/
this.position.y = y;
this.fixedToCamera = false;
/**
* The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
*
* @property {Phaser.Point} anchor - The anchor around which rotation and scaling takes place.
*/
this.anchor = new Phaser.Point();
/**
* @property {Phaser.Point} scale - The scale of the object when rendered. By default it's set to 1 (no scale). You can modify it via scale.x or scale.y or scale.setTo(x, y). A value of 1 means no change to the scale, 0.5 means "half the size", 2 means "twice the size", etc.
*/
this.scale = new Phaser.Point(1, 1);
/**
* @property {object} _cache - A mini cache for storing all of the calculated values.
* @property {string} _text - Internal cache var.
* @private
*/
this._cache = {
this._text = text;
dirty: false,
/**
* @property {string} _font - Internal cache var.
* @private
*/
this._font = font;
// Transform cache
a00: 1,
a01: 0,
a02: x,
a10: 0,
a11: 1,
a12: y,
id: 1,
/**
* @property {number} _fontSize - Internal cache var.
* @private
*/
this._fontSize = size;
// The previous calculated position
x: -1,
y: -1,
/**
* @property {number} lineSpacing - Additional spacing (in pixels) between each line of text if multi-line.
* @private
*/
this._lineSpacing = 0;
// The actual scale values based on the worldTransform
scaleX: 1,
scaleY: 1
/**
* @property {Phaser.Events} events - The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components.
*/
this.events = new Phaser.Events(this);
};
/**
* @property {Phaser.InputHandler|null} input - The Input Handler for this object. Needs to be enabled with image.inputEnabled = true before you can use it.
*/
this.input = null;
this._cache.x = this.x;
this._cache.y = this.y;
PIXI.BitmapText.call(this, text);
this.position.set(x, y);
};
@@ -126,43 +110,78 @@ Phaser.BitmapText.prototype = Object.create(PIXI.BitmapText.prototype);
Phaser.BitmapText.prototype.constructor = Phaser.BitmapText;
/**
* Automatically called by World.update
* @method Phaser.BitmapText.prototype.update
* Set the style of the text
* style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
* [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
*
* @method setStyle
* @param style {Object} The style parameters, contained as properties of an object
*/
Phaser.BitmapText.prototype.setStyle = function() {
// style = style || {};
// style.align = style.align || 'left';
this.style = { align: 'left' };
this.fontName = this._font;
this.fontSize = this._fontSize;
// var font = style.font.split(' ');
// this.fontName = font[font.length - 1];
// this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
this.dirty = true;
// this.tint = style.tint;
};
/**
* Automatically called by World.preUpdate.
* @method Phaser.BitmapText.prototype.preUpdate
*/
Phaser.BitmapText.prototype.update = function() {
Phaser.BitmapText.prototype.preUpdate = function () {
if (!this.exists)
if (!this.exists || !this.parent.exists)
{
return;
// Reset the renderOrderID
return false;
}
this._cache.dirty = false;
this._cache.x = this.x;
this._cache.y = this.y;
if (this.position.x != this._cache.x || this.position.y != this._cache.y)
{
this.position.x = this._cache.x;
this.position.y = this._cache.y;
this._cache.dirty = true;
}
this.pivot.x = this.anchor.x * this.width;
this.pivot.y = this.anchor.y * this.height;
this.world.setTo(this.game.camera.x + this.worldTransform.tx, this.game.camera.y + this.worldTransform.ty);
}
/**
* @method Phaser.Text.prototype.destroy
* Override and use this function in your own custom objects to handle any update requirements you may have.
*
* @method Phaser.BitmapText#update
* @memberof Phaser.BitmapText
*/
Phaser.BitmapText.prototype.update = function() {
}
/**
* Automatically called by World.postUpdate.
* @method Phaser.BitmapText.prototype.postUpdate
*/
Phaser.BitmapText.prototype.postUpdate = function () {
if (this.exists)
{
if (this.fixedToCamera)
{
// this.position.x = this.game.camera.view.x + this.x;
// this.position.y = this.game.camera.view.y + this.y;
}
}
}
/**
* @method Phaser.BitmapText.prototype.destroy
*/
Phaser.BitmapText.prototype.destroy = function() {
if (this.group)
{
this.group.remove(this);
}
if (this.canvas && this.canvas.parentNode)
{
this.canvas.parentNode.removeChild(this.canvas);
@@ -173,14 +192,60 @@ Phaser.BitmapText.prototype.destroy = function() {
this.context = null;
}
this.exists = false;
if (this.filters)
{
this.filters = null;
}
this.group = null;
if (this.parent)
{
this.parent.remove(this);
}
this.texture.destroy();
if (this.canvas.parentNode)
{
this.canvas.parentNode.removeChild(this.canvas);
}
else
{
this.canvas = null;
this.context = null;
}
this.exists = false;
this.visible = false;
this.game = null;
}
/**
* Indicates the rotation of the BitmapText, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
* @name Phaser.BitmapText#align
* @property {string} align - Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text.
*/
Object.defineProperty(Phaser.BitmapText.prototype, 'align', {
get: function() {
return this.style.align;
},
set: function(value) {
if (value !== this.style.align)
{
this.style.align = value;
this.dirty = true;
}
}
});
/**
* Indicates the rotation of the Text, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
* Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90.
* If you wish to work in radians instead of degrees use the property Sprite.rotation instead.
* @name Phaser.BitmapText#angle
@@ -199,35 +264,108 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'angle', {
});
/**
* The x coordinate of this object in world space.
* @name Phaser.BitmapText#x
* @property {number} x - The x coordinate of this object in world space.
* @name Phaser.BitmapText#font
* @property {string} font - The font the text will be rendered in, i.e. 'Arial'. Must be loaded in the browser before use.
*/
Object.defineProperty(Phaser.BitmapText.prototype, 'x', {
Object.defineProperty(Phaser.BitmapText.prototype, 'font', {
get: function() {
return this.position.x;
return this._font;
},
set: function(value) {
this.position.x = value;
if (value !== this._font)
{
this._font = value.trim();
this.style.font = this._fontSize + "px '" + this._font + "'";
this.dirty = true;
}
}
});
/**
* The y coordinate of this object in world space.
* @name Phaser.BitmapText#y
* @property {number} y - The y coordinate of this object in world space.
* @name Phaser.BitmapText#fontSize
* @property {number} fontSize - The size of the font in pixels.
*/
Object.defineProperty(Phaser.BitmapText.prototype, 'y', {
Object.defineProperty(Phaser.BitmapText.prototype, 'fontSize', {
get: function() {
return this.position.y;
return this._fontSize;
},
set: function(value) {
this.position.y = value;
value = parseInt(value);
if (value !== this._fontSize)
{
this._fontSize = value;
this.style.font = this._fontSize + "px '" + this._font + "'";
this.dirty = true;
}
}
});
/**
* The text string to be displayed by this Text object, taking into account the style settings.
* @name Phaser.BitmapText#text
* @property {string} text - The text string to be displayed by this Text object, taking into account the style settings.
*/
Object.defineProperty(Phaser.BitmapText.prototype, 'text', {
get: function() {
return this._text;
},
set: function(value) {
if (value !== this._text)
{
this._text = value.toString() || ' ';
this.dirty = true;
}
}
});
/**
* By default a Text object won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is
* activated for this object and it will then start to process click/touch events and more.
*
* @name Phaser.BitmapText#inputEnabled
* @property {boolean} inputEnabled - Set to true to allow this object to receive input events.
*/
Object.defineProperty(Phaser.BitmapText.prototype, "inputEnabled", {
get: function () {
return (this.input && this.input.enabled);
},
set: function (value) {
if (value)
{
if (this.input === null)
{
this.input = new Phaser.InputHandler(this);
this.input.start();
}
}
else
{
if (this.input && this.input.enabled)
{
this.input.stop();
}
}
}
});