diff --git a/v3/src/checksum.js b/v3/src/checksum.js index a18b9ef66..761cb9e1f 100644 --- a/v3/src/checksum.js +++ b/v3/src/checksum.js @@ -1,4 +1,4 @@ var CHECKSUM = { -build: 'e88b07b0-fd52-11e6-8ceb-d72e0efa2ca0' +build: '24668b80-fe14-11e6-9463-35f4273cae70' }; module.exports = CHECKSUM; \ No newline at end of file diff --git a/v3/src/gameobjects/bitmaptext/BitmapText.js b/v3/src/gameobjects/bitmaptext/BitmapText.js new file mode 100644 index 000000000..64d992fb4 --- /dev/null +++ b/v3/src/gameobjects/bitmaptext/BitmapText.js @@ -0,0 +1,40 @@ +var Class = require('../../utils/Class'); +var GameObject = require('../GameObject'); +var Components = require('../../components'); +var Render = require('./BitmapTextRender'); + +var BitmapText = new Class({ + + Mixins: [ + Components.Transform, + Components.Texture, + Components.Size, + Components.Alpha, + Components.BlendMode, + Components.Visible, + Render + ], + + initialize: + + function BitmapText (state, x, y, font, text, size, align) + { + if (text === undefined) { text = ''; } + if (size === undefined) { size = 32; } + if (align === undefined) { align = 'left'; } + + GameObject.call(this, state); + + this.fontData = this.state.sys.cache.bitmapFont.get(font); + + this.text = text; + + this.fontSize = size; + + this.setTexture(font); + this.setPosition(x, y); + } + +}); + +module.exports = BitmapText; diff --git a/v3/src/gameobjects/text/BitmapTextCanvasRenderer.js b/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js similarity index 83% rename from v3/src/gameobjects/text/BitmapTextCanvasRenderer.js rename to v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js index e96c946c6..f30a43ae1 100644 --- a/v3/src/gameobjects/text/BitmapTextCanvasRenderer.js +++ b/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js @@ -1,38 +1,51 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, camera) { - if (this.renderMask !== this.renderFlags) + var text = src.text; + var textLength = text.length; + + if (this.renderMask !== this.renderFlags || textLength === 0) { return; } var textureFrame = src.frame; + var cameraScrollX = camera.scrollX; var cameraScrollY = camera.scrollY; - var text = src.text; - var textLength = text.length; + var chars = src.fontData.chars; var lineHeight = src.fontData.lineHeight; - var srcX = src.x; + + var srcX = src.x; var srcY = src.y; + var xAdvance = 0; var yAdvance = 0; + var indexCount = 0; var charCode = 0; + var glyph = null; var glyphX = 0; var glyphY = 0; var glyphW = 0; var glyphH = 0; + var x = 0; var y = 0; + var lastGlyph = null; var lastCharCode = 0; + var ctx = renderer.currentContext; var image = src.frame.source.image; - var textureData = src.texture.source[textureFrame.sourceIndex]; + var textureX = textureFrame.cutX; var textureY = textureFrame.cutY; + var scaleX = src.scaleX * (src.fontSize / src.fontData.size); + var scaleY = src.scaleY * (src.fontSize / src.fontData.size); + // Blend Mode if (renderer.currentBlendMode !== src.blendMode) { @@ -56,6 +69,7 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, for (var index = 0; index < textLength; ++index) { charCode = text.charCodeAt(index); + if (charCode === 10) { xAdvance = 0; @@ -66,6 +80,7 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, } glyph = chars[charCode]; + if (!glyph) { continue; @@ -73,10 +88,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, glyphX = textureX + glyph.x; glyphY = textureY + glyph.y; + glyphW = glyph.width; glyphH = glyph.height; - x = (srcX + indexCount + glyph.xOffset + xAdvance) - cameraScrollX; - y = (srcY + glyph.yOffset + yAdvance) - cameraScrollY; + + x = srcX + indexCount + glyph.xOffset + xAdvance; + y = srcY + glyph.yOffset + yAdvance; if (lastGlyph !== null) { @@ -84,8 +101,15 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, x += (kerningOffset !== undefined) ? kerningOffset : 0; } + x *= scaleX; + y *= scaleY; + + x -= cameraScrollX; + y -= cameraScrollY; + ctx.save(); ctx.translate(x, y); + ctx.scale(scaleX, scaleY); ctx.drawImage(image, glyphX, glyphY, glyphW, glyphH, 0, 0, glyphW, glyphH); ctx.restore(); diff --git a/v3/src/gameobjects/bitmaptext/BitmapTextFactory.js b/v3/src/gameobjects/bitmaptext/BitmapTextFactory.js new file mode 100644 index 000000000..b6195d8f6 --- /dev/null +++ b/v3/src/gameobjects/bitmaptext/BitmapTextFactory.js @@ -0,0 +1,20 @@ +var BitmapText = require('./BitmapText'); +var FactoryContainer = require('../../gameobjects/FactoryContainer'); + +var BitmapTextFactory = { + + KEY: 'bitmapText', + + add: function (x, y, font, text, size, align) + { + return this.state.children.add(new BitmapText(this.state, x, y, font, text, size, align)); + }, + + make: function (x, y, font, text, size, align) + { + return new BitmapText(this.state, x, y, font, text, size, align); + } + +}; + +module.exports = FactoryContainer.register(BitmapTextFactory); diff --git a/v3/src/gameobjects/text/BitmapTextRender.js b/v3/src/gameobjects/bitmaptext/BitmapTextRender.js similarity index 100% rename from v3/src/gameobjects/text/BitmapTextRender.js rename to v3/src/gameobjects/bitmaptext/BitmapTextRender.js diff --git a/v3/src/gameobjects/text/BitmapTextWebGLRenderer.js b/v3/src/gameobjects/bitmaptext/BitmapTextWebGLRenderer.js similarity index 100% rename from v3/src/gameobjects/text/BitmapTextWebGLRenderer.js rename to v3/src/gameobjects/bitmaptext/BitmapTextWebGLRenderer.js diff --git a/v3/src/gameobjects/text/BitmapText.js b/v3/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js similarity index 64% rename from v3/src/gameobjects/text/BitmapText.js rename to v3/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js index 5ba1fe431..942ba7a02 100644 --- a/v3/src/gameobjects/text/BitmapText.js +++ b/v3/src/gameobjects/bitmaptext/ParseXMLBitmapFont.js @@ -1,10 +1,8 @@ -var Class = require('../../utils/Class'); -var GameObject = require('../GameObject'); -var Components = require('../../components'); -var Render = require('./BitmapTextRender'); - -var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) +var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) { + if (xSpacing === undefined) { xSpacing = 0; } + if (ySpacing === undefined) { ySpacing = 0; } + var data = {}; var info = xml.getElementsByTagName('info')[0]; var common = xml.getElementsByTagName('common')[0]; @@ -23,7 +21,8 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) { var charCode = parseInt(letters[i].getAttribute('id'), 10); - data.chars[charCode] = { + data.chars[charCode] = + { x: x + parseInt(letters[i].getAttribute('x'), 10), y: y + parseInt(letters[i].getAttribute('y'), 10), width: parseInt(letters[i].getAttribute('width'), 10), @@ -47,33 +46,6 @@ var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame) } return data; -} +}; -var BitmapText = new Class({ - - Mixins: [ - Components.Transform, - Components.Texture, - Components.Size, - Components.Alpha, - Components.BlendMode, - Components.Visible, - Render - ], - - initialize: - - function BitmapText (state, x, y, text, key, subKey) - { - GameObject.call(this, state); - - this.text = typeof text === 'string' ? text : ''; - this.fontData = ParseXMLBitmapFont(this.state.sys.cache.xml.get(subKey ? subKey : key), 0, 0); - - this.setTexture(key, subKey); - this.setPosition(x, y); - } - -}); - -module.exports = BitmapText; +module.exports = ParseXMLBitmapFont; diff --git a/v3/src/gameobjects/index.js b/v3/src/gameobjects/index.js index 2d1c99365..9b80ab101 100644 --- a/v3/src/gameobjects/index.js +++ b/v3/src/gameobjects/index.js @@ -5,7 +5,7 @@ require('./blitter/BlitterFactory'); require('./container/ContainerFactory'); require('./image/ImageFactory'); require('./sprite/SpriteFactory'); -require('./text/BitmapTextFactory'); +require('./bitmaptext/BitmapTextFactory'); require('./graphics/GraphicsFactory'); // Phaser.GameObjects @@ -14,7 +14,7 @@ module.exports = { Factory: require('./FactoryContainer'), - BitmapText: require('./text/BitmapText'), + BitmapText: require('./bitmaptext/BitmapText'), Blitter: require('./blitter/Blitter'), Container: require('./container/Container'), Image: require('./image/Image'), diff --git a/v3/src/gameobjects/text/BitmapTextFactory.js b/v3/src/gameobjects/text/BitmapTextFactory.js deleted file mode 100644 index 8b75025b0..000000000 --- a/v3/src/gameobjects/text/BitmapTextFactory.js +++ /dev/null @@ -1,22 +0,0 @@ -var BitmapText = require('./BitmapText'); -var FactoryContainer = require('../../gameobjects/FactoryContainer'); - -var BitmapTextFactory = { - - KEY: 'bitmapText', - - add: function (x, y, text, key, subKey, group) - { - if (group === undefined) { group = this.state; } - - return group.children.add(new BitmapText(this.state, x, y, text, key, subKey)); - }, - - make: function (x, y, text, key, subKey) - { - return new BitmapText(this.state, x, y, text, key, subKey); - } - -}; - -module.exports = FactoryContainer.register(BitmapTextFactory); diff --git a/v3/src/loader/filetypes/BitmapFontFile.js b/v3/src/loader/filetypes/BitmapFontFile.js new file mode 100644 index 000000000..ced6412a8 --- /dev/null +++ b/v3/src/loader/filetypes/BitmapFontFile.js @@ -0,0 +1,20 @@ +var ImageFile = require('./ImageFile.js'); +var XMLFile = require('./XMLFile.js'); + +var BitmapFontFile = function (key, textureURL, xmlURL, path, textureXhrSettings, xmlXhrSettings) +{ + var image = new ImageFile(key, textureURL, path, textureXhrSettings); + var data = new XMLFile(key, xmlURL, path, xmlXhrSettings); + + // Link them together + image.linkFile = data; + data.linkFile = image; + + // Set the type + image.linkType = 'bitmapfont'; + data.linkType = 'bitmapfont'; + + return { texture: image, data: data }; +}; + +module.exports = BitmapFontFile; diff --git a/v3/src/state/systems/Loader.js b/v3/src/state/systems/Loader.js index 3ce23659f..df3f15d7c 100644 --- a/v3/src/state/systems/Loader.js +++ b/v3/src/state/systems/Loader.js @@ -9,8 +9,11 @@ var BinaryFile = require('../../loader/filetypes/BinaryFile'); var GLSLFile = require('../../loader/filetypes/GLSLFile'); var TextFile = require('../../loader/filetypes/TextFile'); var AtlasJSONFile = require('../../loader/filetypes/AtlasJSONFile'); +var BitmapFontFile = require('../../loader/filetypes/BitmapFontFile'); var SpriteSheet = require('../../loader/filetypes/SpriteSheet'); +var ParseXMLBitmapFont = require('../../gameobjects/bitmaptext/ParseXMLBitmapFont'); + var Loader = function (state) { BaseLoader.call(this); @@ -63,6 +66,10 @@ Loader.prototype.file = function (file) entry = this.atlas(file.key, file.textureURL, file.atlasURL, file.textureXhrSettings, file.atlasXhrSettings); break; + case 'bitmapFont': + entry = this.bitmapFont(file.key, file.textureURL, file.xmlURL, file.textureXhrSettings, file.xmlXhrSettings); + break; + case 'multiatlas': entry = this.multiatlas(file.key, file.textureURLs, file.atlasURLs, file.textureXhrSettings, file.atlasXhrSettings); break; @@ -132,6 +139,17 @@ Loader.prototype.atlas = function (key, textureURL, atlasURL, textureXhrSettings return this; }; +Loader.prototype.bitmapFont = function (key, textureURL, xmlURL, textureXhrSettings, xmlXhrSettings) +{ + // Returns an object with two properties: 'texture' and 'data' + var files = new BitmapFontFile(key, textureURL, xmlURL, this.path, textureXhrSettings, xmlXhrSettings); + + this.addFile(files.texture); + this.addFile(files.data); + + return this; +}; + Loader.prototype.multiatlas = function (key, textureURLs, atlasURLs, textureXhrSettings, atlasXhrSettings) { if (typeof textureURLs === 'number') @@ -198,6 +216,8 @@ Loader.prototype.processCallback = function () // Process multiatlas groups first var file; + var fileA; + var fileB; for (var key in this._multilist) { @@ -250,8 +270,9 @@ Loader.prototype.processCallback = function () break; case 'atlasjson': - var fileA = file.fileA; - var fileB = file.fileB; + + fileA = file.fileA; + fileB = file.fileB; if (fileA.type === 'image') { @@ -263,6 +284,23 @@ Loader.prototype.processCallback = function () } break; + case 'bitmapfont': + + fileA = file.fileA; + fileB = file.fileB; + + if (fileA.type === 'image') + { + cache.bitmapFont.add(fileB.key, ParseXMLBitmapFont(fileB.data)); + textures.addImage(fileA.key, fileA.data); + } + else + { + cache.bitmapFont.add(fileA.key, ParseXMLBitmapFont(fileA.data)); + textures.addImage(fileB.key, fileB.data); + } + break; + case 'spritesheet': textures.addSpriteSheet(file.key, file.data, file.config); break; @@ -293,11 +331,6 @@ Loader.prototype.processCallback = function () } }); - // this.video = new BaseCache(); - // this.physics = new BaseCache(); - // this.tilemap = new BaseCache(); - // this.bitmapFont = new BaseCache(); - this.storage.clear(); };