mirror of
https://github.com/photonstorm/phaser
synced 2024-12-03 09:59:42 +00:00
Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object.
This commit is contained in:
photonstorm
parent
b38b00c2c1
commit
15b83e1c88
9 changed files with 597 additions and 10 deletions
|
|
@ -96,6 +96,7 @@ module.exports = function (grunt) {
|
|||
'src/gameobjects/Graphics.js',
|
||||
'src/gameobjects/RenderTexture.js',
|
||||
'src/gameobjects/SpriteBatch.js',
|
||||
'src/gameobjects/BitmapFont.js',
|
||||
|
||||
'src/system/Canvas.js',
|
||||
'src/system/StageScaleMode.js',
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ New features:
|
|||
* BitmapText now uses the new XML parser which should work under CocoonJS without clashes.
|
||||
* BitmapText signature changed so you can support fonts with spaces in their names.
|
||||
* Loader.bitmapFont now has 2 extra parameters: xSpacing and ySpacing. These allow you to add extra spacing to each letter or line of the font.
|
||||
* Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object.
|
||||
|
||||
|
||||
Updates:
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@
|
|||
<script src="$path/src/gameobjects/Graphics.js"></script>
|
||||
<script src="$path/src/gameobjects/RenderTexture.js"></script>
|
||||
<script src="$path/src/gameobjects/SpriteBatch.js"></script>
|
||||
<script src="$path/src/gameobjects/BitmapFont.js"></script>
|
||||
|
||||
<script src="$path/src/system/Canvas.js"></script>
|
||||
<script src="$path/src/system/StageScaleMode.js"></script>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ function create() {
|
|||
function change() {
|
||||
|
||||
text.align = 'center';
|
||||
|
||||
text2.tint = Math.random() * 0xFFFFFF;
|
||||
|
||||
}
|
||||
|
|
|
|||
41
examples/wip/bitmaptext2.js
Normal file
41
examples/wip/bitmaptext2.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('font', 'assets/fonts/gold_font.png');
|
||||
|
||||
}
|
||||
|
||||
var font;
|
||||
|
||||
function create() {
|
||||
|
||||
// text = game.add.bitmapText(100, 100, 'carrier', 'Phaser and Pixi\nrocking!', 32);
|
||||
|
||||
font = new Phaser.BitmapFont(game, 'font', 16, 16, "! :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0);
|
||||
|
||||
font.text = "using bitmap fonts rocks";
|
||||
|
||||
game.world.add(font);
|
||||
|
||||
// font = new FlxBitmapFont(AssetsRegistry.goldFontPNG, 16, 16, "! :() ,?." + FlxBitmapFont.TEXT_SET10, 20, 0, 0);
|
||||
// font.setText("using bitmap fonts\nin flixel is", true, 0, 8, FlxBitmapFont.ALIGN_CENTER, false);
|
||||
|
||||
|
||||
// game.input.onDown.add(change, this);
|
||||
|
||||
}
|
||||
|
||||
function change() {
|
||||
|
||||
// text.align = 'center';
|
||||
// text2.tint = Math.random() * 0xFFFFFF;
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// text.text = 'Phaser & Pixi\nrocking!\n' + Math.round(game.time.now);
|
||||
|
||||
}
|
||||
|
|
@ -35,7 +35,8 @@ var Phaser = Phaser || {
|
|||
CANVAS_FILTER: 14,
|
||||
WEBGL_FILTER: 15,
|
||||
ELLIPSE: 16,
|
||||
SPRITEBATCH: 16,
|
||||
SPRITEBATCH: 17,
|
||||
BITMAPFONT: 18,
|
||||
|
||||
NONE: 0,
|
||||
LEFT: 1,
|
||||
|
|
|
|||
|
|
@ -144,6 +144,27 @@ Phaser.BitmapData.prototype = {
|
|||
|
||||
},
|
||||
|
||||
/**
|
||||
* Resizes the BitmapData.
|
||||
* @method Phaser.BitmapData#resize
|
||||
*/
|
||||
resize: function (width, height) {
|
||||
|
||||
if (width !== this.width || height !== this.height)
|
||||
{
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
this.textureFrame.width = width;
|
||||
this.textureFrame.height = height;
|
||||
this.imageData = this.context.getImageData(0, 0, width, height);
|
||||
}
|
||||
|
||||
this._dirty = true;
|
||||
|
||||
},
|
||||
|
||||
refreshBuffer: function () {
|
||||
|
||||
this.imageData = this.context.getImageData(0, 0, this.width, this.height);
|
||||
|
|
@ -246,6 +267,12 @@ Phaser.BitmapData.prototype = {
|
|||
|
||||
},
|
||||
|
||||
copyPixels: function (source, area, destX, destY) {
|
||||
|
||||
this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
|
||||
* This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.
|
||||
|
|
|
|||
520
src/gameobjects/BitmapFont.js
Normal file
520
src/gameobjects/BitmapFont.js
Normal file
|
|
@ -0,0 +1,520 @@
|
|||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @class Phaser.BitmapFont
|
||||
* @constructor
|
||||
* @param {Phaser.Game} game - Current game instance.
|
||||
* @param {string} key - The font set graphic set as stored in the Game.Cache.
|
||||
* @param {number} characterWidth - The width of each character in the font set.
|
||||
* @param {number} characterHeight - The height of each character in the font set.
|
||||
* @param {string} chars - The characters used in the font set, in display order. You can use the TEXT_SET consts for common font set arrangements.
|
||||
* @param {number} charsPerRow - The number of characters per row in the font set.
|
||||
* @param {number} [xSpacing=0] - If the characters in the font set have horizontal spacing between them set the required amount here.
|
||||
* @param {number} [ySpacing=0] - If the characters in the font set have vertical spacing between them set the required amount here.
|
||||
* @param {number} [xOffset=0] - If the font set doesn't start at the top left of the given image, specify the X coordinate offset here.
|
||||
* @param {number} [yOffset=0] - If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here.
|
||||
*/
|
||||
Phaser.BitmapFont = function (game, key, characterWidth, characterHeight, chars, charsPerRow, xSpacing, ySpacing, xOffset, yOffset) {
|
||||
|
||||
/**
|
||||
* @property {number} characterWidth - The width of each character in the font set.
|
||||
*/
|
||||
this.characterWidth = characterWidth;
|
||||
|
||||
/**
|
||||
* @property {number} characterHeight - The height of each character in the font set.
|
||||
*/
|
||||
this.characterHeight = characterHeight;
|
||||
|
||||
/**
|
||||
* @property {number} characterSpacingX - If the characters in the font set have horizontal spacing between them set the required amount here.
|
||||
*/
|
||||
this.characterSpacingX = xSpacing || 0;
|
||||
|
||||
/**
|
||||
* @property {number} characterSpacingY - If the characters in the font set have vertical spacing between them set the required amount here.
|
||||
*/
|
||||
this.characterSpacingY = ySpacing || 0;
|
||||
|
||||
/**
|
||||
* @property {number} characterPerRow - The number of characters per row in the font set.
|
||||
*/
|
||||
this.characterPerRow = charsPerRow;
|
||||
|
||||
/**
|
||||
* @property {number} offsetX - If the font set doesn't start at the top left of the given image, specify the X coordinate offset here.
|
||||
*/
|
||||
this.offsetX = xOffset || 0;
|
||||
|
||||
/**
|
||||
* @property {number} offsetY - If the font set doesn't start at the top left of the given image, specify the Y coordinate offset here.
|
||||
*/
|
||||
this.offsetY = yOffset || 0;
|
||||
|
||||
/**
|
||||
* @property {string} align - Alignment of the text when multiLine = true or a fixedWidth is set. Set to BitmapFont.ALIGN_LEFT (default), BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER.
|
||||
*/
|
||||
this.align = "left";
|
||||
|
||||
/**
|
||||
* @property {boolean} multiLine - If set to true all carriage-returns in text will form new lines (see align). If false the font will only contain one single line of text (the default)
|
||||
* @default
|
||||
*/
|
||||
this.multiLine = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} autoUpperCase - Automatically convert any text to upper case. Lots of old bitmap fonts only contain upper-case characters, so the default is true.
|
||||
* @default
|
||||
*/
|
||||
this.autoUpperCase = true;
|
||||
|
||||
/**
|
||||
* @property {number} customSpacingX - Adds horizontal spacing between each character of the font, in pixels.
|
||||
* @default
|
||||
*/
|
||||
this.customSpacingX = 0;
|
||||
|
||||
/**
|
||||
* @property {number} customSpacingY - Adds vertical spacing between each line of multi-line text, set in pixels.
|
||||
* @default
|
||||
*/
|
||||
this.customSpacingY = 0;
|
||||
|
||||
/**
|
||||
* If you need this BitmapFont image to have a fixed width you can set the width in this value.
|
||||
* If text is wider than the width specified it will be cropped off.
|
||||
* @property {number} fixedWidth
|
||||
*/
|
||||
this.fixedWidth = 0;
|
||||
|
||||
/**
|
||||
* @property {HTMLImage} fontSet - A reference to the image stored in the Game.Cache that contains the font.
|
||||
*/
|
||||
this.fontSet = game.cache.getImage(key);
|
||||
|
||||
/**
|
||||
* @property {string} _text - The text of the font image.
|
||||
* @private
|
||||
*/
|
||||
this._text = '';
|
||||
|
||||
/**
|
||||
* @property {array} grabData - An array of rects for faster character pasting.
|
||||
* @private
|
||||
*/
|
||||
this.grabData = [];
|
||||
|
||||
// Now generate our rects for faster copying later on
|
||||
var currentX = this.offsetX;
|
||||
var currentY = this.offsetY;
|
||||
var r = 0;
|
||||
|
||||
for (var c = 0; c < chars.length; c++)
|
||||
{
|
||||
// The rect is hooked to the ASCII value of the character
|
||||
this.grabData[chars.charCodeAt(c)] = new Phaser.Rectangle(currentX, currentY, this.characterWidth, this.characterHeight);
|
||||
|
||||
r++;
|
||||
|
||||
if (r == this.characterPerRow)
|
||||
{
|
||||
r = 0;
|
||||
currentX = this.offsetX;
|
||||
currentY += this.characterHeight + this.characterSpacingY;
|
||||
}
|
||||
else
|
||||
{
|
||||
currentX += this.characterWidth + this.characterSpacingX;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @property {Phaser.BitmapData} bmd - The internal BitmapData to which the font is rendered.
|
||||
*/
|
||||
this.bmd = new Phaser.BitmapData(game, this.characterWidth, this.characterHeight);
|
||||
|
||||
Phaser.Image.call(this, game, 0, 0, this.bmd);
|
||||
|
||||
/**
|
||||
* @property {number} type - Base Phaser object type.
|
||||
*/
|
||||
this.type = Phaser.BITMAPFONT;
|
||||
|
||||
};
|
||||
|
||||
Phaser.BitmapFont.prototype = Object.create(Phaser.Image.prototype);
|
||||
Phaser.BitmapFont.prototype.constructor = Phaser.BitmapFont;
|
||||
|
||||
/**
|
||||
* Align each line of multi-line text to the left.
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.ALIGN_LEFT = "left";
|
||||
|
||||
/**
|
||||
* Align each line of multi-line text to the right.
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.ALIGN_RIGHT = "right";
|
||||
|
||||
/**
|
||||
* Align each line of multi-line text in the center.
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.ALIGN_CENTER = "center";
|
||||
|
||||
/**
|
||||
* Text Set 1 = !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET1 = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
|
||||
|
||||
/**
|
||||
* Text Set 2 = !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET2 = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
/**
|
||||
* Text Set 3 = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET3 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
|
||||
|
||||
/**
|
||||
* Text Set 4 = ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET4 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789";
|
||||
|
||||
/**
|
||||
* Text Set 5 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET5 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ.,/() '!?-*:0123456789";
|
||||
|
||||
/**
|
||||
* Text Set 6 = ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.'
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET6 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ!?:;0123456789\"(),-.' ";
|
||||
|
||||
/**
|
||||
* Text Set 7 = AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-'39
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET7 = "AGMSY+:4BHNTZ!;5CIOU.?06DJPV,(17EKQW\")28FLRX-'39";
|
||||
|
||||
/**
|
||||
* Text Set 8 = 0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET8 = "0123456789 .ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
/**
|
||||
* Text Set 9 = ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'\"?!
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET9 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ()-0123456789.:,'\"?!";
|
||||
|
||||
/**
|
||||
* Text Set 10 = ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET10 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
/**
|
||||
* Text Set 11 = ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()':;0123456789
|
||||
* @constant
|
||||
* @type {string}
|
||||
*/
|
||||
Phaser.BitmapFont.TEXT_SET11 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ.,\"-+!?()':;0123456789";
|
||||
|
||||
/**
|
||||
* If you need this FlxSprite to have a fixed width and custom alignment you can set the width here.<br>
|
||||
* If text is wider than the width specified it will be cropped off.
|
||||
*
|
||||
* @method Phaser.BitmapFont#setFixedWidth
|
||||
* @memberof Phaser.BitmapFont
|
||||
* @param {number} width - Width in pixels of this BitmapFont. Set to zero to disable and re-enable automatic resizing.
|
||||
* @param {string} [lineAlignment='left'] - Align the text within this width. Set to BitmapFont.ALIGN_LEFT (default), BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER.
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.setFixedWidth = function (width, lineAlignment) {
|
||||
|
||||
if (typeof lineAlignment === 'undefined') { lineAlignment = 'left'; }
|
||||
|
||||
this.fixedWidth = width;
|
||||
this.align = lineAlignment;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* A helper function that quickly sets lots of variables at once, and then updates the text.
|
||||
*
|
||||
* @method Phaser.BitmapFont#setText
|
||||
* @memberof Phaser.BitmapFont
|
||||
* @param {string} content - The text of this sprite.
|
||||
* @param {boolean} [multiLine=false] - Set to true if you want to support carriage-returns in the text and create a multi-line sprite instead of a single line.
|
||||
* @param {number} [characterSpacing=0] - To add horizontal spacing between each character specify the amount in pixels.
|
||||
* @param {number} [lineSpacing=0] - To add vertical spacing between each line of text, set the amount in pixels.
|
||||
* @param {string} [lineAlignment='left'] - Align each line of multi-line text. Set to BitmapFont.ALIGN_LEFT, BitmapFont.ALIGN_RIGHT or BitmapFont.ALIGN_CENTER.
|
||||
* @param {boolean} [allowLowerCase=false] - Lots of bitmap font sets only include upper-case characters, if yours needs to support lower case then set this to true.
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.setFixedWidth = function (content, multiLine, characterSpacing, lineSpacing, lineAlignment, allowLowerCase) {
|
||||
|
||||
this.multiLine = multiLine || false;
|
||||
this.customSpacingX = characterSpacing || 0;
|
||||
this.customSpacingY = lineSpacing || 0;
|
||||
this.align = lineAlignment || 'left';
|
||||
|
||||
if (allowLowerCase)
|
||||
{
|
||||
this.autoUpperCase = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.autoUpperCase = true;
|
||||
}
|
||||
|
||||
if (content.length > 0)
|
||||
{
|
||||
this.text = content;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the BitmapData of the Sprite with the text
|
||||
*
|
||||
* @method Phaser.BitmapFont#buildBitmapFontText
|
||||
* @memberof Phaser.BitmapFont
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.buildBitmapFontText = function () {
|
||||
|
||||
var cx = 0;
|
||||
var cy = 0;
|
||||
|
||||
if (this.multiLine)
|
||||
{
|
||||
var lines = this._text.split("\n");
|
||||
|
||||
if (this.fixedWidth > 0)
|
||||
{
|
||||
this.bmd.resize(fixedWidth, (lines.length * (this.characterHeight + this.customSpacingY)) - this.customSpacingY);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.bmd.resize(this.getLongestLine() * (this.characterWidth + this.customSpacingX), (lines.length * (this.characterHeight + this.customSpacingY)) - this.customSpacingY);
|
||||
}
|
||||
|
||||
// Loop through each line of text
|
||||
for (var i = 0; i < lines.length; i++)
|
||||
{
|
||||
// This line of text is held in lines[i] - need to work out the alignment
|
||||
switch (this.align)
|
||||
{
|
||||
case Phaser.BitmapFont.ALIGN_LEFT:
|
||||
cx = 0;
|
||||
break;
|
||||
|
||||
case Phaser.BitmapFont.ALIGN_RIGHT:
|
||||
cx = this.bmd.width - (lines[i].length * (this.characterWidth + this.customSpacingX));
|
||||
break;
|
||||
|
||||
case Phaser.BitmapFont.ALIGN_CENTER:
|
||||
cx = (this.bmd.width / 2) - ((lines[i].length * (this.characterWidth + this.customSpacingX)) / 2);
|
||||
cx += this.customSpacingX / 2;
|
||||
break;
|
||||
}
|
||||
|
||||
// Sanity checks
|
||||
if (cx < 0)
|
||||
{
|
||||
cx = 0;
|
||||
}
|
||||
|
||||
this.pasteLine(lines[i], cx, cy, this.customSpacingX);
|
||||
|
||||
cy += this.characterHeight + this.customSpacingY;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.fixedWidth > 0)
|
||||
{
|
||||
this.bmd.resize(fixedWidth, this.characterHeight);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.bmd.resize(this._text.length * (this.characterWidth + this.customSpacingX), this.characterHeight);
|
||||
}
|
||||
|
||||
switch (this.align)
|
||||
{
|
||||
case Phaser.BitmapFont.ALIGN_LEFT:
|
||||
cx = 0;
|
||||
break;
|
||||
|
||||
case Phaser.BitmapFont.ALIGN_RIGHT:
|
||||
cx = this.bmd.width - (this._text.length * (this.characterWidth + this.customSpacingX));
|
||||
break;
|
||||
|
||||
case Phaser.BitmapFont.ALIGN_CENTER:
|
||||
cx = (this.bmd.width / 2) - ((this._text.length * (this.characterWidth + this.customSpacingX)) / 2);
|
||||
cx += this.customSpacingX / 2;
|
||||
break;
|
||||
}
|
||||
|
||||
this.pasteLine(this._text, cx, 0, this.customSpacingX);
|
||||
}
|
||||
|
||||
this.bmd.render();
|
||||
|
||||
this.width = this.bmd.width;
|
||||
this.height = this.bmd.height;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal function that takes a single line of text (2nd parameter) and pastes it into the BitmapData at the given coordinates.
|
||||
* Used by getLine and getMultiLine
|
||||
*
|
||||
* @method Phaser.BitmapFont#buildBitmapFontText
|
||||
* @memberof Phaser.BitmapFont
|
||||
* @param {string} line - The single line of text to paste.
|
||||
* @param {number} x - The x coordinate.
|
||||
* @param {number} y - The y coordinate.
|
||||
* @param {number} customSpacingX - Custom X spacing.
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.pasteLine = function (line, x, y, customSpacingX) {
|
||||
|
||||
for (var c = 0; c < line.length; c++)
|
||||
{
|
||||
// If it's a space then there is no point copying, so leave a blank space
|
||||
if (line.charAt(c) == " ")
|
||||
{
|
||||
x += this.characterWidth + this.customSpacingX;
|
||||
}
|
||||
else
|
||||
{
|
||||
// If the character doesn't exist in the font then we don't want a blank space, we just want to skip it
|
||||
if (this.grabData[line.charCodeAt(c)])
|
||||
{
|
||||
this.bmd.copyPixels(this.fontSet, this.grabData[line.charCodeAt(c)], x, y);
|
||||
|
||||
x += this.characterWidth + this.customSpacingX;
|
||||
|
||||
if (x > this.bmd.width)
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Works out the longest line of text in _text and returns its length
|
||||
*
|
||||
* @method Phaser.BitmapFont#getLongestLine
|
||||
* @memberof Phaser.BitmapFont
|
||||
* @return {number} The length of the longest line of text.
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.getLongestLine = function () {
|
||||
|
||||
var longestLine = 0;
|
||||
|
||||
if (this._text.length > 0)
|
||||
{
|
||||
var lines = this._text.split("\n");
|
||||
|
||||
for (var i = 0; i < lines.length; i++)
|
||||
{
|
||||
if (lines[i].length > longestLine)
|
||||
{
|
||||
longestLine = lines[i].length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return longestLine;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal helper function that removes all unsupported characters from the _text String, leaving only characters contained in the font set.
|
||||
*
|
||||
* @method Phaser.BitmapFont#removeUnsupportedCharacters
|
||||
* @memberof Phaser.BitmapFont
|
||||
* @protected
|
||||
* @param {boolean} [stripCR=true] - Should it strip carriage returns as well?
|
||||
* @return {string} A clean version of the string.
|
||||
*/
|
||||
Phaser.BitmapFont.prototype.removeUnsupportedCharacters = function (stripCR) {
|
||||
|
||||
var newString = "";
|
||||
|
||||
for (var c = 0; c < this._text.length; c++)
|
||||
{
|
||||
if (this.grabData[this._text.charCodeAt(c)] || this._text.charCodeAt(c) == 32 || (!stripCR && this._text.charAt(c) === "\n"))
|
||||
{
|
||||
newString = newString.concat(this._text.charAt(c));
|
||||
}
|
||||
}
|
||||
|
||||
return newString;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name Phaser.BitmapText#text
|
||||
* @property {string} text - Set this value to update the text in this sprite. Carriage returns are automatically stripped out if multiLine is false. Text is converted to upper case if autoUpperCase is true.
|
||||
*/
|
||||
Object.defineProperty(Phaser.BitmapFont.prototype, "text", {
|
||||
|
||||
get: function () {
|
||||
|
||||
return this._text;
|
||||
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
|
||||
var newText;
|
||||
|
||||
if (this.autoUpperCase)
|
||||
{
|
||||
newText = value.toUpperCase();
|
||||
}
|
||||
else
|
||||
{
|
||||
newText = value;
|
||||
}
|
||||
|
||||
if (newText !== this._text)
|
||||
{
|
||||
this._text = newText;
|
||||
|
||||
this.removeUnsupportedCharacters(this.multiLine);
|
||||
|
||||
this.buildBitmapFontText();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -116,13 +116,9 @@ Phaser.BitmapText.prototype = Object.create(PIXI.BitmapText.prototype);
|
|||
Phaser.BitmapText.prototype.constructor = Phaser.BitmapText;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
* @method setStyle
|
||||
* @private
|
||||
*/
|
||||
Phaser.BitmapText.prototype.setStyle = function() {
|
||||
|
||||
this.style = { align: this._align };
|
||||
|
|
@ -220,7 +216,7 @@ Object.defineProperty(Phaser.BitmapText.prototype, 'align', {
|
|||
if (value !== this._align)
|
||||
{
|
||||
this._align = value;
|
||||
this.dirty = true;
|
||||
this.setStyle();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue