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.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -0,0 +1,110 @@
<?xml version="1.0"?>
<font>
<info face="Carrier Command" size="32" bold="0" italic="0" charset="" unicode="1" stretchH="100" smooth="0" aa="1" padding="0,0,0,0" spacing="1,1" outline="0"/>
<common lineHeight="32" base="32" scaleW="512" scaleH="256" pages="1" packed="0" alphaChnl="0" redChnl="4" greenChnl="4" blueChnl="4"/>
<pages>
<page id="0" file="carrier_command_0.png" />
</pages>
<chars count="100">
<char id="32" x="194" y="160" width="18" height="1" xoffset="-6" yoffset="31" xadvance="38" page="0" chnl="15" />
<char id="33" x="440" y="128" width="7" height="31" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="34" x="54" y="160" width="19" height="12" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="35" x="96" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="37" x="128" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="39" x="74" y="160" width="7" height="12" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="40" x="384" y="128" width="13" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="41" x="398" y="128" width="13" height="31" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="42" x="256" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="43" x="288" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="44" x="40" y="160" width="13" height="13" xoffset="6" yoffset="19" xadvance="38" page="0" chnl="15" />
<char id="45" x="82" y="160" width="31" height="7" xoffset="0" yoffset="13" xadvance="38" page="0" chnl="15" />
<char id="46" x="186" y="160" width="7" height="6" xoffset="12" yoffset="26" xadvance="38" page="0" chnl="15" />
<char id="47" x="416" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="48" x="448" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="49" x="224" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="50" x="0" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="51" x="32" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="52" x="64" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="53" x="96" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="54" x="128" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="55" x="160" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="56" x="192" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="57" x="224" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="58" x="0" y="160" width="7" height="19" xoffset="12" yoffset="7" xadvance="38" page="0" chnl="15" />
<char id="59" x="464" y="128" width="13" height="25" xoffset="6" yoffset="7" xadvance="38" page="0" chnl="15" />
<char id="60" x="244" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="61" x="478" y="128" width="31" height="19" xoffset="0" yoffset="7" xadvance="38" page="0" chnl="15" />
<char id="62" x="264" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="63" x="416" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="64" x="448" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="65" x="480" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="66" x="0" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="67" x="32" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="68" x="64" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="69" x="96" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="70" x="128" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="71" x="160" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="72" x="192" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="73" x="284" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="74" x="256" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="75" x="288" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="76" x="320" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="77" x="352" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="78" x="384" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="79" x="416" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="80" x="448" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="81" x="480" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="82" x="0" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="83" x="32" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="84" x="384" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="85" x="96" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="86" x="128" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="87" x="160" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="88" x="192" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="89" x="224" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="90" x="256" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="91" x="412" y="128" width="13" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="92" x="288" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="93" x="426" y="128" width="13" height="31" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="95" x="154" y="160" width="31" height="6" xoffset="0" yoffset="26" xadvance="38" page="0" chnl="15" />
<char id="97" x="320" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="98" x="352" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="99" x="384" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="100" x="416" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="101" x="448" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="102" x="480" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="103" x="0" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="104" x="32" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="105" x="344" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="106" x="64" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="107" x="96" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="108" x="128" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="109" x="160" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="110" x="192" y="128" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="111" x="0" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="112" x="32" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="113" x="64" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="114" x="160" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="115" x="192" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="116" x="224" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="117" x="320" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="118" x="352" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="119" x="480" y="0" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="120" x="256" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="121" x="288" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="122" x="320" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="123" x="364" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="124" x="448" y="128" width="7" height="31" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="125" x="304" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="160" x="213" y="160" width="18" height="1" xoffset="-6" yoffset="31" xadvance="38" page="0" chnl="15" />
<char id="166" x="456" y="128" width="7" height="31" xoffset="12" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="171" x="352" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="172" x="8" y="160" width="31" height="13" xoffset="0" yoffset="13" xadvance="38" page="0" chnl="15" />
<char id="173" x="114" y="160" width="31" height="7" xoffset="0" yoffset="13" xadvance="38" page="0" chnl="15" />
<char id="177" x="324" y="128" width="19" height="31" xoffset="6" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="183" x="146" y="160" width="7" height="7" xoffset="12" yoffset="13" xadvance="38" page="0" chnl="15" />
<char id="187" x="384" y="32" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="215" x="224" y="64" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
<char id="247" x="64" y="96" width="31" height="31" xoffset="0" yoffset="1" xadvance="38" page="0" chnl="15" />
</chars>
</font>

View file

@ -0,0 +1,34 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.bitmapFont('desyrel', 'assets/fonts/desyrel.png', 'assets/fonts/desyrel.xml');
game.load.bitmapFont('carrier', 'assets/fonts/carrier_command.png', 'assets/fonts/carrier_command.xml');
}
var text;
var text2;
function create() {
text = game.add.bitmapText(200, 100, 'carrier', 'Phaser & Pixi\nrocking!', 32);
text2 = game.add.bitmapText(200, 300, 'desyrel', 'Phaser & Pixi\nrocking!', 32);
// text.tint = Math.random() * 0xFFFFFF;
game.input.onDown.add(change, this);
}
function change() {
text.fontSize++;
}
function update() {
// text.text = 'Phaser & Pixi\nrocking!\n' + Math.round(game.time.now);
}

View file

@ -3,7 +3,7 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
function preload() {
game.load.image('maggot', 'assets/sprites/maggot.png');
game.load.image('maggot', 'assets/sprites/ilkke.png');
}
@ -16,7 +16,7 @@ function create() {
batch = game.add.spriteBatch();
var total = (game.renderType === Phaser.WEBGL) ? 10000 : 100;
var total = (game.renderType === Phaser.WEBGL) ? 1500 : 100;
for (var i = 0; i < total; i++)
{
@ -42,8 +42,8 @@ function update() {
function updateMaggot(dude) {
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05
dude.direction += dude.turningSpeed * 0.01;
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.15
dude.direction += dude.turningSpeed * 0.02;
dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
dude.rotation = -dude.direction + Math.PI;

62
labs/code/005 ilkkeee.js Normal file
View file

@ -0,0 +1,62 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('maggot', 'assets/sprites/ilkke.png');
}
var batch;
var dudeBoundsPadding = 100;
var dudeBounds = new Phaser.Rectangle(-dudeBoundsPadding, -dudeBoundsPadding, 800 + dudeBoundsPadding * 2, 600 + dudeBoundsPadding * 2);
var tick = 0;
function create() {
batch = game.add.spriteBatch();
var total = (game.renderType === Phaser.WEBGL) ? 1500 : 100;
for (var i = 0; i < total; i++)
{
var dude = batch.create(game.world.randomX, game.world.randomY, 'maggot');
dude.anchor.set(0.5);
dude.scale.set(0.8 + Math.random() * 0.3);
dude.direction = Math.random() * Math.PI * 2;
dude.turningSpeed = Math.random() - 0.8;
dude.speed = (2 + Math.random() * 2) * 0.2;
dude.offset = Math.random() * 100;
}
}
function update() {
batch.forEach(updateMaggot, this, false);
tick += 0.1;
}
function updateMaggot(dude) {
dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.15
dude.direction += dude.turningSpeed * 0.02;
dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
dude.rotation = -dude.direction + Math.PI;
// wrap the dudes by testing their bounds..
if (dude.position.x < dudeBounds.x)
dude.position.x += dudeBounds.width;
else if (dude.position.x > dudeBounds.x + dudeBounds.width)
dude.position.x -= dudeBounds.width;
if (dude.position.y < dudeBounds.y)
dude.position.y += dudeBounds.height;
else if (dude.position.y > dudeBounds.y + dudeBounds.height)
dude.position.y -= dudeBounds.height;
}

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();
}
}
}
});

View file

@ -263,16 +263,17 @@ Phaser.GameObjectFactory.prototype = {
* @method Phaser.GameObjectFactory#bitmapText
* @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.
* @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
* @return {Phaser.BitmapText} The newly created bitmapText object.
*/
bitmapText: function (x, y, text, style, group) {
bitmapText: function (x, y, font, text, size, group) {
if (typeof group === 'undefined') { group = this.world; }
return this.world.add(new Phaser.BitmapText(this.game, x, y, text, style));
return this.world.add(new Phaser.BitmapText(this.game, x, y, font, text, size));
},

View file

@ -6,8 +6,10 @@
/**
* Phaser SpriteBatch constructor.
*
* @classdesc The SpriteBatch class is a really fast version of the DisplayObjectContainer built solely for speed, so use when you need a lot of sprites or particles.
* @class Phaser.SpriteBatch
* @classdesc A Group is a container for display objects that allows for fast pooling and object recycling. Groups can be nested within other Groups and have their own local transforms.
* @extends Phaser.Group
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
* @param {Phaser.Group|Phaser.Sprite} parent - The parent Group, DisplayObject or DisplayObjectContainer that this Group will be added to. If undefined or null it will use game.world.
@ -28,8 +30,6 @@ Phaser.SpriteBatch = function (game, parent, name, addToStage) {
};
// Phaser.SpriteBatch.prototype = Object.create(Phaser.Group.prototype);
Phaser.SpriteBatch.prototype = Phaser.Utils.extend(true, Phaser.SpriteBatch.prototype, Phaser.Group.prototype, PIXI.SpriteBatch.prototype);
Phaser.SpriteBatch.prototype.constructor = Phaser.SpriteBatch;

View file

@ -1,327 +0,0 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2014 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* A RenderTexture is a special texture that allows any displayObject to be rendered to it.
* @class Phaser.RenderTexture
* @constructor
* @param {Phaser.Game} game - Current game instance.
* @param {string} key - Asset key for the render texture.
* @param {number} width - the width of the render texture.
* @param {number} height - the height of the render texture.
*/
Phaser.RenderTexture = function (game, key, width, height) {
/**
* @property {Phaser.Game} game - A reference to the currently running game.
*/
this.game = game;
/**
* @property {string} name - the name of the object.
*/
this.name = key;
PIXI.EventTarget.call(this);
/**
* @property {number} width - the width.
*/
this.width = width || 100;
/**
* @property {number} height - the height.
*/
this.height = height || 100;
/**
* @property {PIXI.mat3} indetityMatrix - Matrix object.
*/
this.indetityMatrix = PIXI.mat3.create();
/**
* @property {PIXI.Rectangle} frame - The frame for this texture.
*/
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
/**
* @property {number} type - Base Phaser object type.
*/
this.type = Phaser.RENDERTEXTURE;
this._tempPoint = { x: 0, y: 0 };
if (PIXI.gl)
{
this.initWebGL();
}
else
{
this.initCanvas();
}
};
Phaser.RenderTexture.prototype = Object.create(PIXI.Texture.prototype);
Phaser.RenderTexture.prototype.constructor = PIXI.RenderTexture;
/**
* This function will draw the display object to the texture. If the display object is a Group or has children it will
* draw all children as well.
*
* @method Phaser.RenderTexture#render
* @memberof Phaser.RenderTexture
* @param {DisplayObject} displayObject - The display object to render this texture on.
* @param {Phaser.Point} [position] - Where to draw the display object.
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered.
*/
Phaser.RenderTexture.prototype.render = function(displayObject, position, clear, renderHidden) {
if (typeof position === 'undefined') { position = false; }
if (typeof clear === 'undefined') { clear = false; }
if (typeof renderHidden === 'undefined') { renderHidden = false; }
if (PIXI.gl)
{
this.renderWebGL(displayObject, position, clear, renderHidden);
}
else
{
this.renderCanvas(displayObject, position, clear, renderHidden);
}
}
/**
* This function will draw the display object to the texture at the given x/y coordinates.
* If the display object is a Group or has children it will draw all children as well.
*
* @method Phaser.RenderTexture#renderXY
* @memberof Phaser.RenderTexture
* @param {DisplayObject} displayObject - The display object to render this texture on.
* @param {number} x - The x coordinate to draw the display object at.
* @param {number} y - The y coordinate to draw the display object at.
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered.
*/
Phaser.RenderTexture.prototype.renderXY = function(displayObject, x, y, clear, renderHidden) {
this._tempPoint.x = x;
this._tempPoint.y = y;
this.render(displayObject, this._tempPoint, clear, renderHidden);
}
/**
* Initializes the webgl data for this texture
*
* @method Phaser.RenderTexture#initWebGL
* @memberof Phaser.RenderTexture
* @private
*/
Phaser.RenderTexture.prototype.initWebGL = function() {
var gl = PIXI.gl;
this.glFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture();
this.baseTexture.width = this.width;
this.baseTexture.height = this.height;
this.baseTexture._glTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
this.baseTexture.isRender = true;
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
// create a projection matrix..
this.projection = new PIXI.Point(this.width/2 , -this.height/2);
// set the correct render function..
// this.render = this.renderWebGL;
}
/**
* Resizes the RenderTexture.
*
* @method Phaser.RenderTexture#resize
* @memberof Phaser.RenderTexture
*/
Phaser.RenderTexture.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
if(PIXI.gl)
{
this.projection.x = this.width/2
this.projection.y = -this.height/2;
var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
}
else
{
this.frame.width = this.width
this.frame.height = this.height;
this.renderer.resize(this.width, this.height);
}
}
/**
* Initializes the canvas data for this texture
*
* @method Phaser.RenderTexture#initCanvas
* @memberof Phaser.RenderTexture
* @private
*/
Phaser.RenderTexture.prototype.initCanvas = function()
{
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0);
this.baseTexture = new PIXI.BaseTexture(this.renderer.view);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
// this.render = this.renderCanvas;
}
/**
* This function will draw the display object to the texture.
*
* @method Phaser.RenderTexture#renderWebGL
* @memberof Phaser.RenderTexture
* @private
* @param {DisplayObject} displayObject - The display object to render this texture on.
* @param {Phaser.Point} [position] - Where to draw the display object.
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered.
*/
Phaser.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear, renderHidden)
{
var gl = PIXI.gl;
// enable the alpha color mask..
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if (clear)
{
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
// THIS WILL MESS WITH HIT TESTING!
var children = displayObject.children;
//TODO -? create a new one??? dont think so!
var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
// modify to flip...
displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * -2;
if (position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y;
}
PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount;
for (var i = 0, j = children.length; i < j; i++)
{
children[i].updateTransform();
}
var renderGroup = displayObject.__renderGroup;
if (renderGroup)
{
if (displayObject == renderGroup.root)
{
renderGroup.render(this.projection, this.glFramebuffer);
}
else
{
renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer);
}
}
else
{
if (!this.renderGroup)
{
this.renderGroup = new PIXI.WebGLRenderGroup(gl);
}
this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection, this.glFramebuffer);
}
displayObject.worldTransform = originalWorldTransform;
}
/**
* This function will draw the display object to the texture.
*
* @method Phaser.RenderTexture#renderCanvas
* @memberof Phaser.RenderTexture
* @private
* @param {DisplayObject} displayObject - The display object to render this texture on.
* @param {Phaser.Point} [position] - Where to draw the display object.
* @param {boolean} [clear=false] - If true the texture will be cleared before the displayObject is drawn.
* @param {boolean} [renderHidden=false] - If true displayObjects that have their visible property set to false will still be rendered.
*/
Phaser.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear, renderHidden)
{
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
if (position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y;
}
for (var i = 0, j = children.length; i < j; i++)
{
children[i].updateTransform();
}
if (clear)
{
this.renderer.context.clearRect(0, 0, this.width, this.height);
}
this.renderer.renderDisplayObject(displayObject, renderHidden);
this.renderer.context.setTransform(1, 0, 0, 1, 0, 0);
}

View file

@ -145,9 +145,9 @@ Phaser.Mouse.prototype = {
return _this.onMouseUp(event);
};
document.addEventListener('mousedown', this._onMouseDown, true);
document.addEventListener('mousemove', this._onMouseMove, true);
document.addEventListener('mouseup', this._onMouseUp, true);
this.game.canvas.addEventListener('mousedown', this._onMouseDown, true);
this.game.canvas.addEventListener('mousemove', this._onMouseMove, true);
this.game.canvas.addEventListener('mouseup', this._onMouseUp, true);
},
@ -320,9 +320,9 @@ Phaser.Mouse.prototype = {
*/
stop: function () {
document.removeEventListener('mousedown', this._onMouseDown, true);
document.removeEventListener('mousemove', this._onMouseMove, true);
document.removeEventListener('mouseup', this._onMouseUp, true);
this.game.canvas.removeEventListener('mousedown', this._onMouseDown, true);
this.game.canvas.removeEventListener('mousemove', this._onMouseMove, true);
this.game.canvas.removeEventListener('mouseup', this._onMouseUp, true);
}

View file

@ -14,69 +14,71 @@ Phaser.LoaderParser = {
/**
* Parse frame data from an XML file.
* @method Phaser.LoaderParser.bitmapFont
* @param {Phaser.Game} game - A reference to the current game.
* @param {object} xml - XML data you want to parse.
* @return {FrameData} Generated FrameData object.
* @param {string} cacheKey - The key of the texture this font uses in the cache.
*/
bitmapFont: function (game, xml, cacheKey) {
// Malformed?
if (!xml.getElementsByTagName('font'))
if (!xml || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS)
{
console.warn("Phaser.LoaderParser.bitmapFont: Invalid XML given, missing <font> tag");
return;
if (typeof(window.DOMParser) === 'function')
{
var domparser = new DOMParser();
xml = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');
}
else
{
var div = document.createElement('div');
div.innerHTML = this.ajaxRequest.responseText;
xml = div;
}
}
var texture = PIXI.TextureCache[cacheKey];
var data = {};
var info = xml.getElementsByTagName("info")[0];
var common = xml.getElementsByTagName("common")[0];
data.font = info.attributes.getNamedItem("face").nodeValue;
data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
var info = xml.getElementsByTagName('info')[0];
var common = xml.getElementsByTagName('common')[0];
data.font = info.getAttribute('face');
data.size = parseInt(info.getAttribute('size'), 10);
data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
data.chars = {};
//parse letters
var letters = xml.getElementsByTagName("char");
var letters = xml.getElementsByTagName('char');
var texture = PIXI.TextureCache[cacheKey];
for (var i = 0; i < letters.length; i++)
{
var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
var charCode = parseInt(letters[i].getAttribute('id'), 10);
var textureRect = {
x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
};
// Note: This means you can only have 1 BitmapFont loaded at once!
// Need to replace this with our own handler soon.
PIXI.TextureCache[charCode] = new PIXI.Texture(texture, textureRect);
var textureRect = new PIXI.Rectangle(
parseInt(letters[i].getAttribute('x'), 10),
parseInt(letters[i].getAttribute('y'), 10),
parseInt(letters[i].getAttribute('width'), 10),
parseInt(letters[i].getAttribute('height'), 10)
);
data.chars[charCode] = {
xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
kerning: {},
texture:new PIXI.Texture(texture, textureRect)
texture: PIXI.TextureCache[cacheKey] = new PIXI.Texture(texture, textureRect)
};
}
//parse kernings
var kernings = xml.getElementsByTagName("kerning");
var kernings = xml.getElementsByTagName('kerning');
for (i = 0; i < kernings.length; i++)
{
var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
var first = parseInt(kernings[i].getAttribute('first'), 10);
var second = parseInt(kernings[i].getAttribute('second'), 10);
var amount = parseInt(kernings[i].getAttribute('amount'), 10);
data.chars[second].kerning[first] = amount;
}
PIXI.BitmapText.fonts[data.font] = data;
PIXI.BitmapText.fonts[cacheKey] = data;
}