From 3826eb732f9ce5e626b6227a96ab598d2479afcd Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Thu, 2 Mar 2017 04:00:39 +0000 Subject: [PATCH] Working through getting the Bitmap Text size back. --- v3/src/checksum.js | 2 +- v3/src/components/GetBounds.js | 4 +- v3/src/components/Size.js | 25 ++- v3/src/gameobjects/bitmaptext/BitmapText.js | 23 +-- .../bitmaptext/BitmapTextCanvasRenderer.js | 12 ++ .../bitmaptext/GetBitmapTextSize.js | 142 ++++++++++++++++++ v3/src/gameobjects/image/Image.js | 1 + v3/src/gameobjects/sprite/Sprite.js | 1 + 8 files changed, 195 insertions(+), 15 deletions(-) create mode 100644 v3/src/gameobjects/bitmaptext/GetBitmapTextSize.js diff --git a/v3/src/checksum.js b/v3/src/checksum.js index 202f45a7c..71fa08e68 100644 --- a/v3/src/checksum.js +++ b/v3/src/checksum.js @@ -1,4 +1,4 @@ var CHECKSUM = { -build: '923bfa40-feec-11e6-8134-ffb6fa7d3604' +build: '82b2d2f0-fefc-11e6-b3a1-070e51e60e5d' }; module.exports = CHECKSUM; \ No newline at end of file diff --git a/v3/src/components/GetBounds.js b/v3/src/components/GetBounds.js index 4c71ea491..4c45b7efe 100644 --- a/v3/src/components/GetBounds.js +++ b/v3/src/components/GetBounds.js @@ -7,8 +7,8 @@ var GetBounds = { var x = this.x; var y = this.y; - var w = this.width; - var h = this.height; + var w = this.displayWidth; + var h = this.displayHeight; var r = this.rotation; diff --git a/v3/src/components/Size.js b/v3/src/components/Size.js index d9e90a14f..673fa97b9 100644 --- a/v3/src/components/Size.js +++ b/v3/src/components/Size.js @@ -1,6 +1,9 @@ var Size = { - width: { + width: 0, + height: 0, + + displayWidth: { get: function () { @@ -14,7 +17,7 @@ var Size = { }, - height: { + displayHeight: { get: function () { @@ -26,6 +29,24 @@ var Size = { this.scaleY = value / this.frame.realHeight; } + }, + + setSizeToFrame: function (frame) + { + if (frame === undefined) { frame = this.frame; } + + this.width = frame.realWidth; + this.height = frame.realHeight; + + return this; + }, + + setSize: function (width, height) + { + this.width = width; + this.height = height; + + return this; } }; diff --git a/v3/src/gameobjects/bitmaptext/BitmapText.js b/v3/src/gameobjects/bitmaptext/BitmapText.js index 4e2c87b3a..43646eaf9 100644 --- a/v3/src/gameobjects/bitmaptext/BitmapText.js +++ b/v3/src/gameobjects/bitmaptext/BitmapText.js @@ -2,15 +2,17 @@ var Class = require('../../utils/Class'); var GameObject = require('../GameObject'); var Components = require('../../components'); var Render = require('./BitmapTextRender'); +var GetBitmapTextSize = require('./GetBitmapTextSize'); var BitmapText = new Class({ Mixins: [ - Components.Transform, - Components.Texture, - Components.Size, Components.Alpha, Components.BlendMode, + Components.Origin, + Components.Size, + Components.Texture, + Components.Transform, Components.Visible, Render ], @@ -31,11 +33,6 @@ var BitmapText = new Class({ this.fontSize = size; - // Setting these will enable the Size component to work - // then anchorX etc will work too - // this.frame.realWidth = 0; - // this.frame.realHeight = 0; - this.displayCallback; this.setTexture(font); @@ -51,10 +48,16 @@ var BitmapText = new Class({ setText: function (text) { - // this._text = text; - // this.dirty = true; + this.text = text; return this; + }, + + getTextBounds: function () + { + var size = GetBitmapTextSize(this); + + return { x: this.x + size.x, y: this.y + size.y, width: size.width, height: size.height }; } }); diff --git a/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js b/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js index 3bb630cf5..fde99e765 100644 --- a/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js +++ b/v3/src/gameobjects/bitmaptext/BitmapTextCanvasRenderer.js @@ -129,7 +129,19 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage, ctx.translate(x, y); ctx.rotate(rotation); ctx.scale(scale, scale); + + ctx.fillStyle = 'rgb(255,0,255)'; + ctx.fillRect(0, 0, glyphW, glyphH); + + // if (!window.bob) + // { + // window.bob = true; + // console.log('xywh', x, y, glyphW, glyphH); + // console.log('scaled', x * scale, y * scale, glyphW * scale, glyphH * scale); + // } + ctx.drawImage(image, glyphX, glyphY, glyphW, glyphH, 0, 0, glyphW, glyphH); + ctx.restore(); xAdvance += glyph.xAdvance; diff --git a/v3/src/gameobjects/bitmaptext/GetBitmapTextSize.js b/v3/src/gameobjects/bitmaptext/GetBitmapTextSize.js new file mode 100644 index 000000000..7c3ea4124 --- /dev/null +++ b/v3/src/gameobjects/bitmaptext/GetBitmapTextSize.js @@ -0,0 +1,142 @@ + +var GetBitmapTextSize = function (src) +{ + var text = src.text; + var textLength = text.length; + + var bounds = { + x: 0, + y: 0, + width: 0, + height: 0 + }; + + if (textLength === 0) + { + console.log('bailed'); + return bounds; + } + + bounds.x = Number.MAX_VALUE; + bounds.y = Number.MAX_VALUE; + bounds.width = -1; + bounds.height = -1; + + var textureFrame = src.frame; + + var chars = src.fontData.chars; + var lineHeight = src.fontData.lineHeight; + + 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 textureX = textureFrame.cutX; + var textureY = textureFrame.cutY; + + var scale = (src.fontSize / src.fontData.size); + + for (var index = 0; index < textLength; ++index) + { + charCode = text.charCodeAt(index); + + if (charCode === 10) + { + xAdvance = 0; + indexCount = 0; + yAdvance += lineHeight; + lastGlyph = null; + continue; + } + + glyph = chars[charCode]; + + if (!glyph) + { + continue; + } + + glyphX = textureX + glyph.x; + glyphY = textureY + glyph.y; + + glyphW = glyph.width; + glyphH = glyph.height; + + x = indexCount + glyph.xOffset + xAdvance; + y = glyph.yOffset + yAdvance; + + if (lastGlyph !== null) + { + var kerningOffset = glyph.kerning[lastCharCode]; + x += (kerningOffset !== undefined) ? kerningOffset : 0; + } + + x *= scale; + y *= scale; + + // ctx.save(); + // ctx.translate(x, y); + // ctx.rotate(rotation); + // ctx.scale(scale, scale); + + // ctx.fillStyle = 'rgb(255,0,255)'; + // ctx.fillRect(0, 0, glyphW, glyphH); + + // ctx.drawImage(image, glyphX, glyphY, glyphW, glyphH, 0, 0, glyphW, glyphH); + + // var xs = x * scale; + // var ys = y * scale; + + if (bounds.x > x) + { + bounds.x = x; + } + + if (bounds.y > y) + { + bounds.y = y; + } + + var gw = x + (glyphW * scale); + var gh = y + (glyphH * scale); + + if (bounds.width < gw) + { + bounds.width = gw - bounds.x; + } + + if (bounds.height < gh) + { + bounds.height = gh - bounds.y; + } + + // console.log('Letter', text[index]); + // console.log('pos', x, y); + // console.log('wh', glyphW, glyphH); + // console.log('scaled', gw, gh); + // console.log('bounds', bounds.width, bounds.height); + + xAdvance += glyph.xAdvance; + indexCount += 1; + lastGlyph = glyph; + lastCharCode = charCode; + } + + return bounds; +}; + +module.exports = GetBitmapTextSize; diff --git a/v3/src/gameobjects/image/Image.js b/v3/src/gameobjects/image/Image.js index 89cb5b620..4efd47260 100644 --- a/v3/src/gameobjects/image/Image.js +++ b/v3/src/gameobjects/image/Image.js @@ -27,6 +27,7 @@ var Image = new Class({ this.setTexture(texture, frame); this.setPosition(x, y); + this.setSizeToFrame(); this.setOriginToCenter(); } diff --git a/v3/src/gameobjects/sprite/Sprite.js b/v3/src/gameobjects/sprite/Sprite.js index 3766f2d7f..72bd465bd 100644 --- a/v3/src/gameobjects/sprite/Sprite.js +++ b/v3/src/gameobjects/sprite/Sprite.js @@ -27,6 +27,7 @@ var Sprite = new Class({ this.setTexture(texture, frame); this.setPosition(x, y); + this.setSizeToFrame(); this.setOriginToCenter(); }