Merge pull request #537 from excaliburjs/fix-spritefont-textalign

Fix spritefont textalign #484
excaliburjs · Nov 25, 2015 · 64e7059 · 64e7059
2 parents 3a70c3d + 4d0f6e6
commit 64e7059
Show file tree

Hide file tree

Showing 9 changed files with 11,541 additions and 10,875 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "simple"
   ],
   "scripts": {
-    "preinstall": "npm install -g typescript@1.5.3&&npm install -g istanbul"
+    "preinstall": "npm install -g typescript@1.6.2&&npm install -g istanbul"
   },
   "devDependencies": {
     "grunt": "0.4.5",

diff --git a/sandbox/web/Excalibur.js b/sandbox/web/Excalibur.js
diff --git a/sandbox/web/tests/input/index.ts b/sandbox/web/tests/input/index.ts
@@ -15,21 +15,21 @@ box.on("update", (ue: ex.UpdateEvent) => {
    var axesLeftY = pad1.getAxes(ex.Input.Axes.LeftStickY);
 
    // Right/Left
-   if (game.input.keyboard.isKeyPressed(ex.Input.Keys.Right) ||
+   if (game.input.keyboard.isHeld(ex.Input.Keys.Right) ||
        pad1.isButtonPressed(ex.Input.Buttons.DpadRight)) {
       box.dx = 20;
-   } else if (game.input.keyboard.isKeyPressed(ex.Input.Keys.Left) ||
+   } else if (game.input.keyboard.isHeld(ex.Input.Keys.Left) ||
       pad1.isButtonPressed(ex.Input.Buttons.DpadLeft)) {
       box.dx = -20;
    } else if (!axesLeftX && !axesLeftY) {
       box.dx = 0;
    }
 
    // Up/Down
-   if (game.input.keyboard.isKeyPressed(ex.Input.Keys.Up) ||
+   if (game.input.keyboard.isHeld(ex.Input.Keys.Up) ||
        pad1.isButtonPressed(ex.Input.Buttons.DpadUp)) {
       box.dy = -20;
-   } else if (game.input.keyboard.isKeyPressed(ex.Input.Keys.Down) ||
+   } else if (game.input.keyboard.isHeld(ex.Input.Keys.Down) ||
       pad1.isButtonPressed(ex.Input.Buttons.DpadDown)) {
       box.dy = 20;
    } else if (!axesLeftY && !axesLeftX) {

diff --git a/sandbox/web/tests/spritefont/spritefont.html b/sandbox/web/tests/spritefont/spritefont.html
@@ -9,13 +9,58 @@
     <br/>
     <button id="lighten">Less Opaque</button>
     <button id="darken">More Opaque</button>
+    <br/>
 
     <label for="text">Text:</label>
-    <input id="text" type="text" />
+    <input id="text" type="text" value="This is a sprite Font test" />
 
     <label for="color">Color:</label>
     <input id="color" type="text"/>
     <button id="setcolor">Set Color</button>
+
+    <br/>
+
+    <label for="textalign">Text Align:</label>
+    <select id="textalign">
+       <option value="Left">Left</option>
+       <option value="Right">Right</option>
+       <option value="Center">Center</option>
+       <option value="Start">Start</option>
+       <option value="End">End</option>
+    </select>
+
+    <label for="basealign">Base Align:</label>
+    <select id="basealign">
+       <option value="Bottom">Bottom</option>
+       <option value="Top">Top</option>
+       <option value="Middle">Middle</option>
+       <option value="Hanging">Hanging</option>
+       <option value="Alphabetic">Alphabetic</option>
+       <option value="Ideographic">Ideographic</option>
+    </select>
+
+    <br/>
+    <label for="fontsize">Font Size</label>
+    <select id="fontsize">
+       <option value="10">10</option>
+       <option value="18">18</option>
+       <option value="26">26</option>
+       <option value="34">34</option>
+       <option value="42">42</option>
+       <option value="50">50</option>
+    </select>
+
+    <label for="letterspacing">Letter Spacing:</label>
+    <input id="letterspacing" type="text" value="-20"/>
+
+    <br/>
+    <label for="textshadow">Text Shadow</label>
+    <input type="checkbox" id="textshadow" />
+
+    <br/>
+    <label for="textshadowcolor">Text Shadow Color:</label>
+    <input id="textshadowcolor" type="text" />
+    <button id="setshadowcolor">Set Color</button>
 
     <script src="../../Excalibur.js"></script>
     <script src="spritefont.js"></script>

diff --git a/sandbox/web/tests/spritefont/spritefont.js b/sandbox/web/tests/spritefont/spritefont.js
@@ -1,15 +1,18 @@
+/// <reference path="../../../../dist/Excalibur.d.ts" />
 var game = new ex.Engine({
     width: 600,
     height: 400,
     canvasElementId: "game",
-    pointerScope: 0 /* Canvas */
+    pointerScope: ex.Input.PointerScope.Canvas
 });
 var spriteFontTex = new ex.Texture('spritefont.png');
 var label = null;
 game.start(spriteFontTex).then(function () {
     var spriteFont = new ex.SpriteFont(spriteFontTex, '0123456789abcdefghijklmnopqrstuvwxyz,!\'&."?- ', true, 16, 3, 16, 16);
-    label = new ex.Label("This is a test!?!", 10, game.height / 2, null, spriteFont);
+    label = new ex.Label("This is a sprite Font test", game.width / 2, game.height / 2, null, spriteFont);
     label.color = ex.Color.Azure.clone();
+    label.letterSpacing = -20;
+    label.fontSize = 10;
     game.add(label);
 });
 document.getElementById('lighten').addEventListener('click', function () {
@@ -26,4 +29,23 @@ document.getElementById('setcolor').addEventListener('click', function () {
 document.getElementById('text').addEventListener('keyup', function () {
     label.text = document.getElementById('text').value;
 });
-//# sourceMappingURL=spritefont.js.map
+document.getElementById('textalign').addEventListener('change', function (evt) {
+    label.textAlign = ex.TextAlign[evt.currentTarget.value];
+});
+document.getElementById('basealign').addEventListener('change', function (evt) {
+    label.baseAlign = ex.BaseAlign[evt.currentTarget.value];
+});
+document.getElementById('fontsize').addEventListener('change', function (evt) {
+    label.fontSize = evt.currentTarget.value;
+});
+document.getElementById('letterspacing').addEventListener('keyup', function (evt) {
+    label.letterSpacing = parseFloat(evt.currentTarget.value);
+});
+document.getElementById('textshadow').addEventListener('change', function (evt) {
+    var val = (evt.currentTarget.checked);
+    label.useTextShadow(val);
+});
+document.getElementById('setshadowcolor').addEventListener('click', function () {
+    var text = document.getElementById('textshadowcolor').value;
+    label.setTextShadow(5, 5, ex.Color.fromHex(text));
+});
diff --git a/sandbox/web/tests/spritefont/spritefont.ts b/sandbox/web/tests/spritefont/spritefont.ts
@@ -1,22 +1,24 @@
 
+/// <reference path="../../../../dist/Excalibur.d.ts" />
+
 var game = new ex.Engine({
    width: 600,
    height: 400,
    canvasElementId: "game",
    pointerScope: ex.Input.PointerScope.Canvas
 });
 
-
-
 var spriteFontTex = new ex.Texture('spritefont.png');
 var label : ex.Label = null;
 
 game.start(spriteFontTex).then(() => {
 
    var spriteFont = new ex.SpriteFont(spriteFontTex, '0123456789abcdefghijklmnopqrstuvwxyz,!\'&."?- ', true, 16, 3, 16, 16);
 
-   label = new ex.Label("This is a test!?!", 10, game.height / 2, null, spriteFont);
+   label = new ex.Label("This is a sprite Font test", game.width / 2, game.height / 2, null, spriteFont);
    label.color = ex.Color.Azure.clone();
+   label.letterSpacing = -20;
+   label.fontSize = 10;
    game.add(label);
 
 });
@@ -37,4 +39,30 @@ document.getElementById('setcolor').addEventListener('click', function() {
 
 document.getElementById('text').addEventListener('keyup', function() {
    label.text = (<any>document.getElementById('text')).value;
+});
+
+document.getElementById('textalign').addEventListener('change', function (evt) {
+   label.textAlign = (<any>ex.TextAlign)[(<any>evt.currentTarget).value];
+});
+
+document.getElementById('basealign').addEventListener('change', function (evt) {
+   label.baseAlign = (<any>ex.BaseAlign)[(<any>evt.currentTarget).value];
+});
+
+document.getElementById('fontsize').addEventListener('change', function (evt) {
+   label.fontSize = (<any>evt.currentTarget).value;
+});
+
+document.getElementById('letterspacing').addEventListener('keyup', function (evt) {
+   label.letterSpacing = parseFloat((<any>evt.currentTarget).value);
+});
+
+document.getElementById('textshadow').addEventListener('change', function (evt) {
+   var val = <boolean>((<any>evt.currentTarget).checked);
+   label.useTextShadow(val);
+});
+
+document.getElementById('setshadowcolor').addEventListener('click', function () {
+   var text = (<any>document.getElementById('textshadowcolor')).value;
+   label.setTextShadow(5, 5, ex.Color.fromHex(text));
 });