added 'align' to SpriteText

sequoiar · Jul 29, 2011 · e5b1968 · e5b1968
1 parent 591804f
commit e5b1968
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/spriteText/demo.js b/spriteText/demo.js
@@ -23,15 +23,17 @@ window.onload = (function() {
             // Write some Text (Canvas) using the SyntaxTerror Font (32x32)
             var txt2 = "SyntaxTerror (Canvas)!";
             var ts2 = 32;
-            var text2 = Crafty.e("2D, Canvas, SpriteText")
-                        .attr({x: 0, y: 100, w: txt2.length*ts2, h: ts2})
+            var text2 = Crafty.e("2D, Canvas, SpriteText, Color")
+                        .attr({x: 0, y: 100, w: txt2.length*ts2 + 100, h: ts2})
                         .registerFont("SyntaxTerror", ts2, "../img/OSDM_Fnt32x32_SyntaxTerror-Copy2.png")
-                        .text(txt2);
+                        .text(txt2)
+                        .color("yellow");
 
             // Add the Mouse Component and change text on Click
             text2.addComponent("Mouse");
             text2.bind("Click", function (e) {
-                text2.text("clicked!");
+                text2.align(text2.align() === "right" ? "left" : "right");
+                //text2.font("BlueBubble");
             });
 
             // Write some Text (DOM) using the SyntaxTerror Font (32x32)
@@ -45,9 +47,10 @@ window.onload = (function() {
             // Add the Mouse Component and change text and font on Click
             text3.addComponent("Mouse");
             text3.bind("Click", function (e) {
-                text3.font("BlueBubble")
+                text3.font("BlueBubble");
                 text3.text("Clicked and Font changed!");
             });
+
         }
     );
 });
diff --git a/spriteText/spriteText.js b/spriteText/spriteText.js
@@ -10,20 +10,24 @@ Crafty.c("SpriteText", {
 
     init: function() {
         this.bind("EnterFrame", function(obj) {
-            var txt = this._text.split(""), // String to Array
-                tileSize = this._registeredSpriteFonts[this._font],
-                l, pos, type, e, chExists, ch;
-            if (tileSize && this._oldText !== this._text) {
-                this._oldText = this._text;
+            var tileSize = this._registeredSpriteFonts[this._font],
+                txt, l, pos, type, e, chExists, ch, startx, textwidth;
+            if (tileSize && this._changed) {
+                txt = this._text.split(""); // String to Array
                 // destory entities from previous rendering
                 for (i in this._entities) {
                     this._entities[i].destroy();
                 }
                 this._entities = [];
+
                 // create new entities
+                startx = 0;
+                textwidth = this._text.length * tileSize;
+                if (this._align === "center") startx = (this.w - textwidth) / 2;
+                if (this._align === "right") startx = (this.w - textwidth);
                 for (i in txt) {
                     l = txt[i];
-                    posx = this.x + i * tileSize;
+                    posx = startx + i * tileSize;
                     type = obj.type === "DOM" ? "DOM" : "Canvas";
                     chExists = this.charName(this._font, l) in Crafty.components(); // check if letter exists in Sprite
                     ch = chExists ? l : l.toUpperCase(); // if letter does not exist, try uppercase
@@ -37,22 +41,36 @@ Crafty.c("SpriteText", {
     /**@
      * Sets the Text.
      * @param text the Text
+     * @return entity, if parameter was passed, current value otherwise
      */
     text: function(text) {
-        if(text === null || text === undefined) return this._text;
+        if(text === undefined) return this._text;
         this._text = text;
         this.trigger("Change");
         return this;
     },
     /**@
      * Sets the Font.
      * @param font the Font
+     * @return entity, if parameter was passed, current value otherwise
      */
     font: function(font) {
+        if(font === undefined) return this._font;
         this._font = font;
         this.trigger("Change");
         return this;
     },
+    /**@
+     * Sets the Alignment (left, center, right)
+     * @param align the Alignment
+     * @return entity, if parameter was passed, current value otherwise
+     */
+    align: function(align) {
+        if(align === undefined) return this._align;
+        this._align = align;
+        this.trigger("Change");
+        return this;
+    },
     /**@
      * Registers and sets a new Font so it can be used in the SpriteText component.
      * Fonts are only registered once and are then usably from every SpriteText entity.