From 24f2e2a46de77cbd78157e3adc7c54f537cd713c Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 14 Feb 2014 03:34:35 +0000 Subject: [PATCH] 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. --- examples/assets/fonts/carrier_command.png | Bin 0 -> 2592 bytes examples/assets/fonts/carrier_command.xml | 110 +++++++ examples/wip/bitmaptext1.js | 34 +++ examples/wip/spritebatch1.js | 8 +- labs/code/005 ilkkeee.js | 62 ++++ src/gameobjects/BitmapText.js | 334 +++++++++++++++------- src/gameobjects/GameObjectFactory.js | 9 +- src/gameobjects/SpriteBatch.js | 6 +- src/gameobjects/old_RenderTexture.js | 327 --------------------- src/input/Mouse.js | 12 +- src/loader/LoaderParser.js | 74 ++--- {src/gameobjects => wip}/old_Sprite.js | 0 12 files changed, 498 insertions(+), 478 deletions(-) create mode 100644 examples/assets/fonts/carrier_command.png create mode 100644 examples/assets/fonts/carrier_command.xml create mode 100644 examples/wip/bitmaptext1.js create mode 100644 labs/code/005 ilkkeee.js delete mode 100644 src/gameobjects/old_RenderTexture.js rename {src/gameobjects => wip}/old_Sprite.js (100%) diff --git a/examples/assets/fonts/carrier_command.png b/examples/assets/fonts/carrier_command.png new file mode 100644 index 0000000000000000000000000000000000000000..d52ff7cb33185233f3007c749a9d82398367ecf7 GIT binary patch literal 2592 zcmeHJ`%_wX9=&SK!>!piDRE62lWex@RGrMMHaL_rNi40!{J6@(9Z@emCJE zxX26@J?sUiiak&4g(WO$E#E<+LaYE_rokbwhqtXC(-*LwP;Apdr5wz zTT%!z%J3@wYTROxdEy1tB}9`$$68Kx*a5l0HgPt>HDS5T`=3oq$Q(zg zxdzXUX1l$hT0Y6z1GG(kY~hNhC#Y%N^*k%9Ty#_0_eG5^I+AiqQ0&%EwfHjaw?kfJ z#O5J`tlGZZ-}`+q+i~2(_~>Gu6;i;gM8E1;UyDg~t!RG{?GPiKd)w`itcTlo1eQ{jTp> zm2TA*BKzH&Da9-&2g^L4bMg1HXa}jIVkQ^MuM?FDZJC%|j8fr11##hUocvJCL+}Tq zRh2{djq>J`?H87mr=W^HFJtaE$`!Rdm6km#l2~y=u_s_e5q;DY=sv`$fVBbYstCZ} zC+AfBpk$CN$<#c%0SpU_#oQirBHX*EAt_eRX|getvsuY!+Enr}{zUrS#;3X`(VLmS z3sHq(TA3>xMw`YLlf4kK`ENpN#_Mo`6jkQb8e~K(zdm(gt?BMtAsn%G1$Gs}rgaWTX{PTUHYVJ~$ro>`JR7)i)OwL86KcZ10aqclQO2YjpVYzQba35<;l}HU6|F zUglC-4f-Cc1RyO4er~bqeweG6IapYH-;1OpBd_2W_FoW7s^7B@d_a{)$peD z2G&S$g<0SA6S&Wt7BRLOm|4kj*xV!QWM@oFP^Mz?@ zLs(mD)$^R^3zo&l`9i7Ig!Z0(AUC*xxo8r)iimJn;S=(vcX)xjOtx8QlB$O|{;}G2XqP_Hv@6TI<`3 zD%}$-GX}(g*hm94@)gxW{gCqqwB3Je_9rjbvoV|I@K}O0)Bn{Hg`#~lCvgJh$zDYZ zcwxh_yO#pmZ0#GOC($1BvTv0ux*92Cx8^U;>&>!5Hf69R&7m~Sfh{DY_xN@~2R!}ic+J|V7Cd(R?`?(I`B}|+`ikr-9_pb$MoQ1Z z^>pE75Y30L2Cmt*2iAry;+?fiBQ%7+Lb;HT6g2%j`7}!OgwS-L6ybe_f z)W@nQv@YPTy+*>Pi5OaYxYSkW{R;*)y99U1<;Ar4QSnP2vCP<@mm7+Z2tMv!v_bU7 zU9KL#Ah(tz792a188z<+0CVA6>Q~YR=u`3$FA_Uay=aZunh4EOx}u)x!-1IuW#-@^ z02yDZZ+#WPr9A$WR%{)ZpOlO#aU=Bi+h$0L1aiJH+nsZg!WlW2>bkv6jG*CK59P%! z^;eVwu)O}9C`DzGJa~{0Swt6>_0LZGE6FiR^?XNE8+w@!QI;$`c2Z7Nkba-WBqLvI z>Bu*2Ths$a%iCS4K$wxSCdOR!K6-w9h)4F2re>E^aLaY7S1Ul(icRvZ4L>lN96XR} zMzV#!t}9Xy*4PL?Xf`bsr5xfGe$svtaM}8qncWWPc~|C$BC#<6=!DlWE}c$RwPSAH zy3HF;0_!$EOAfYOwx5SBnb^7`{{NMA5jW^EAa#|!CHsU^s%=LlApA_!X<^70U;i65 CSQLH$ literal 0 HcmV?d00001 diff --git a/examples/assets/fonts/carrier_command.xml b/examples/assets/fonts/carrier_command.xml new file mode 100644 index 00000000..a86d5dea --- /dev/null +++ b/examples/assets/fonts/carrier_command.xml @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/wip/bitmaptext1.js b/examples/wip/bitmaptext1.js new file mode 100644 index 00000000..30b8fc4d --- /dev/null +++ b/examples/wip/bitmaptext1.js @@ -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); + +} diff --git a/examples/wip/spritebatch1.js b/examples/wip/spritebatch1.js index 07968109..51f8033d 100644 --- a/examples/wip/spritebatch1.js +++ b/examples/wip/spritebatch1.js @@ -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; diff --git a/labs/code/005 ilkkeee.js b/labs/code/005 ilkkeee.js new file mode 100644 index 00000000..51f8033d --- /dev/null +++ b/labs/code/005 ilkkeee.js @@ -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; + +} diff --git a/src/gameobjects/BitmapText.js b/src/gameobjects/BitmapText.js index 2bab27f2..b8e340cb 100644 --- a/src/gameobjects/BitmapText.js +++ b/src/gameobjects/BitmapText.js @@ -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(); + } + } } }); diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 39787fc2..9165bd58 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -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)); }, diff --git a/src/gameobjects/SpriteBatch.js b/src/gameobjects/SpriteBatch.js index 3eda688e..dcb19509 100644 --- a/src/gameobjects/SpriteBatch.js +++ b/src/gameobjects/SpriteBatch.js @@ -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; diff --git a/src/gameobjects/old_RenderTexture.js b/src/gameobjects/old_RenderTexture.js deleted file mode 100644 index b6eab596..00000000 --- a/src/gameobjects/old_RenderTexture.js +++ /dev/null @@ -1,327 +0,0 @@ -/** -* @author Richard Davey -* @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); - -} diff --git a/src/input/Mouse.js b/src/input/Mouse.js index a5fd29fe..0a429375 100644 --- a/src/input/Mouse.js +++ b/src/input/Mouse.js @@ -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); } diff --git a/src/loader/LoaderParser.js b/src/loader/LoaderParser.js index 5de53f8a..096ea854 100644 --- a/src/loader/LoaderParser.js +++ b/src/loader/LoaderParser.js @@ -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 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; } diff --git a/src/gameobjects/old_Sprite.js b/wip/old_Sprite.js similarity index 100% rename from src/gameobjects/old_Sprite.js rename to wip/old_Sprite.js