diff --git a/package.json b/package.json index 0c94464..7bb42a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "momentumengine", - "version": "0.2.1", + "version": "0.3.0", "description": "An ES6 game and animation engine.", "main": "src/es6.js", "repository": { diff --git a/src/classes/text.js b/src/classes/text.js index 98a51c0..5063d3d 100644 --- a/src/classes/text.js +++ b/src/classes/text.js @@ -17,6 +17,7 @@ class Text extends Entity { this.textAlign = "start"; this.textBaseline = "alphabetic"; this.direction = "inherit"; + this.letterSpacing = 0; } @@ -30,6 +31,46 @@ class Text extends Entity { } + _renderText (text, x, y, letterSpacing, renderFunc) { + + // Code modified from original by David Hong (sozonov): https://jsfiddle.net/sozonov/mg1jkz3q/ + + if (!text || typeof text !== "string" || text.length === 0) { + return false; + } + + let characters = text.split(""), + index = 0, + current, + currentPosition = x, + align = 1; + + if (this.textAlign === "right") { + characters = characters.reverse(); + align = -1; + } else if (this.textAlign === "center") { + + let totalWidth = 0; + + for (let i = 0; i < characters.length; i++) { + totalWidth += (this._game.context.measureText(characters[i]).width + letterSpacing); + } + + currentPosition = x - (totalWidth / 2); + + } + + while (index < text.length) { + + current = characters[index++]; + renderFunc(current, currentPosition, y); + currentPosition += (align * (this._game.context.measureText(current).width + letterSpacing)); + + } + + } + + render () { if (this._game) { @@ -42,12 +83,12 @@ class Text extends Entity { if (this.font.fill) { this._game.context.fillStyle = this.font.fill; - this._game.context.fillText(this.text, this.relativeLeft, this.relativeTop); + this._renderText(this.text, this.relativeLeft, this.relativeTop, this.letterSpacing, this._game.context.fillText.bind(this._game.context)); } if (this.font.stroke) { this._game.context.strokeStyle = this.font.stroke; - this._game.context.strokeText(this.text, this.relativeLeft, this.relativeTop); + this._renderText(this.text, this.relativeLeft, this.relativeTop, this.letterSpacing, this._game.context.strokeText.bind(this._game.context)); } return true;