entityjs 0.3.1 → 0.3.2

data/src/core/re.js

@@ -7,7 +7,7 @@ Licensed under MIT http://entityjs.com/license
 
 */
 re = function(selector){
-    return new re.query(selector);
+  return new re.query(selector);
 };
 
 //automatically filled when compiled
@@ -19,17 +19,17 @@ re._e = [];
 re._c = {};
 
 re.ready = function(r){
-    re.listener('load', r);
+  re.listener('load', r);
 };
 
 /*
 The $ method is used for selecting ids and tags.
 */
 re.$ = function(s){
-  return re.$.c[s] = re.$.c[s] || ((s.charAt(0) == '#') ? document.getElementById(s.substr(1)) : document.getElementsByTagName(s)[0]);
+  return re.$._[s] = re.$._[s] || ((s.charAt(0) == '#') ? document.getElementById(s.substr(1)) : document.getElementsByTagName(s)[0]);
 };
 //caches dom queries
-re.$.c = {};
+re.$._ = {};
 
 re.$new = function(n){
     return document.createElement(n);
@@ -38,8 +38,8 @@ re.$new = function(n){
 /*
 Special polyfills and object additions
 */
-re.listener = function(t, c){
-  window.addEventListener(t, c, true);
+re.listener = function(t, c, context){
+  (context || window).addEventListener(t, c, true);
 };
 
 /*

data/src/core/system.js

@@ -51,7 +51,7 @@ re.c('system')
             
         }
         
-        return this;
+        return  this;
     },
     
     loop:function(m){
@@ -68,22 +68,16 @@ re.c('system')
     
     //scale is currently not implemented!
     init:function(canvasId, scale, contextType){
-        //init listeners
-        if(re._c.keyboard){
-          re._c.keyboard.i();
-        }
-        if(re._c.mouse){
-          re._c.mouse.i();
-        }
-        if(re._c.touch){
-          re._c.touch.i();
-        }
         
         //add comps here because system is defined earlier than other comps
         this.comp('polyfill tick timestep');
         
         //setup canvas
-        this.canvas = re.$(canvasId);
+        if(re.is(canvasId, 'htmlcanvaselement')){
+          this.canvas = canvasId;
+        } else {
+          this.canvas = re.$(canvasId);
+        }
         
         this.scale = scale || 1;
         
@@ -94,6 +88,17 @@ re.c('system')
         this.sizeX = s.sizeX = this.canvas.width;
         this.sizeY = s.sizeY = this.canvas.height;
         
+        //init listeners
+        if(re._c.keyboard){
+          re._c.keyboard.i();
+        }
+        if(re._c.mouse){
+          re._c.mouse.i();
+        }
+        if(re._c.touch){
+          re._c.touch.i();
+        }
+        
         return this;
     },
     

data/src/cycle/tween.js

@@ -4,58 +4,120 @@ The tween component tweens properties of entities to the given value over a peri
 This is useful for animations.
 
 re.e('tween')
-.tween(0.8, {x:10});
+.tween(800, {x:10})
+.wait(500)
+
+EVENTS:
+tween:start
+tween:finish
+tween:update
 
 */
 re.c('tween')
 .requires('update')
-.statics({
-	
-	tween:function(obj, time, props){
-		return obj.comp('tween')
-		.tween(time, props);
-	}
-	
-})
 .namespaces({
 
 	update:function(t){
+		if(!this.tweening) return;
 		
-		
-		
+    this.tween_time += t;
+    
+    var elapsed = this.tween_time / this.tween_t;
+    
+    if(elapsed > 1) elapsed = 1;
+    
+    //easing function
+    value = this.tweenEase(elapsed);
+    
+    //advance
+    for(var i in this.tween_d){
+      
+      //set deltas
+      var ease = this.tween_s[i] + this.tween_d[i] * value;
+      if(re.is(this[i], 'function')){
+        this[i](ease);
+      } else {
+        this[i] = ease;
+      }
+    }
+    
+    this.trigger('tween:update', value);
+    
+    if(elapsed == 1){
+      
+      this.tweening = false;
+      
+      this.trigger('tween:finish');
+      
+      //remove from queue
+      var next = this.tween_queue.shift();
+      
+      if(next){
+        this.tween.apply(this, next);
+      }
+      
+    }
+    
 	}
 
 })
 .defaults({
 	
-	tweening:false
+	tweening:false,
+  
+  tweenEase:function(v){
+    return v;
+  }
 	
 })
 .defines({
 	
 	tween:function(time, props){
-		this.time = time || 5;
-		
-		if(this.tweening){
-			this.unbind('update', this.tween_update);
-		}
-		
-		//collect properties
-		for(var i in props){
-			
-			if(!props.hasOwnProperty(i)) continue;
-			
-			this.tween_props[i] = {s:re.sys.stepSize, i:props[i]};
-			
-		}
-		
-		return this;
+    if(this.tweening){
+      this.tween_queue.push(arguments);
+      return;
+    }
+    
+    //accepts ms or seconds
+    if(time >= 30){
+      time /= 1000;
+    }
+    
+    var maxTime = (time || 1) / (re.sys.stepSize * 60);
+    this.tween_time = 0;
+    //steps are substracted until it reaches zero
+    
+    var deltas = {};
+    var starts = {};
+    for(var i in props){
+      var value = this[i];
+      if(re.is(value, 'function')) value = value();
+      
+      deltas[i] = props[i] - value;
+      starts[i] = value;
+    }
+    
+    //tween initial values
+    this.tween_s = starts;
+    //tween deltas
+    this.tween_d = deltas;
+    //tween maximum time
+    this.tween_t = maxTime;
+    
+    
+    this.tweening = true;
+    
+    return this.trigger('tween:start', starts);
 	}
-	
+  
 })
 .init(function(){
 	
-	this.tween_props = {};
+  this.on('update', this.tween_update);
+  this.tween_queue = [];
 	
 });
-re.tween = re.c('tween').tween;
+
+re.tween = function(obj, time, props){
+  return obj.comp('tween').tween(time, props);
+};

data/src/display/align.js

@@ -8,40 +8,45 @@ re.c('align')
 .requires('draw')
 .defines({
     
+  align:function(x, y){
+    this.alignHor(x);
+    return this.alignVer(y);
+  },
+  
     alignHor:function(o){
         o = o || 0;
-        this.posX = re.sys.sizeX * 0.5 - (this.sizeX + this.regX)*0.5 + o | 0;
+        this.posX = re.sys.sizeX * 0.5 - (this.sizeX - this.regX)*0.5 + o | 0;
         
         return this;
     },
     
     alignVer:function(o){
         o = o || 0;
-        this.posY = re.sys.sizeY * 0.5 - (this.sizeY + this.regY)*0.5 + o | 0;
+        this.posY = re.sys.sizeY * 0.5 - (this.sizeY - this.regY)*0.5 + o | 0;
         return this;
     },
     
     alignRight:function(x){
         x = x || 0;
-        this.posX = re.sys.sizeX - (this.sizeX + this.regX) + x | 0;
+        this.posX = re.sys.sizeX - (this.sizeX - this.regX) + x | 0;
         return this;
     },
     
     alignLeft:function(x){
         x = x || 0;
-        this.posX = x + this.sizeX - (this.sizeX + this.regX) | 0;
+        this.posX = x + this.sizeX - (this.sizeX - this.regX) | 0;
         return this;
     },
     
     alignTop:function(y){
         y = y || 0;
-        this.posY = y + this.sizeY - (this.sizeY + this.regY) | 0;
+        this.posY = y + this.sizeY - (this.sizeY - this.regY) | 0;
         return this;
     },
     
     alignBottom:function(y){
         y = y || 0;
-        this.posY = re.sys.sizeY - (this.sizeY + this.regY) + y | 0;
+        this.posY = re.sys.sizeY - (this.sizeY - this.regY) + y | 0;
         return this;
     }
     

data/src/display/circle.js

@@ -13,8 +13,9 @@ re.c('circle')
         c.fillStyle = this.color;
         
         c.beginPath();
-        
-            c.arc(-this.regX + this.sizeX * 0.5, -this.regY + this.sizeX * 0.5, this.sizeX, 0, Math.PI*2, true);
+            var r = this.radius();
+            
+            c.arc(-this.regX + r , -this.regY + r , r, 0, Math.PI*2, true);
         
         c.closePath();
         
@@ -24,10 +25,10 @@ re.c('circle')
     
     radius:function(r){
         if(re.is(r)){
-            this.sizeX = this.sizeY = r;
+            this.sizeX = this.sizeY = r * 2;
             return this;
         }
-        return this.sizeX;
+        return this.sizeX * 0.5;
     }
     
 });

data/src/display/imgtext.js

@@ -20,6 +20,8 @@ re('font')
 
 *could be turned in to a special sprite component but wouldn't
 be very useful.
+
+
 */
 
 re.c('imgtext')
@@ -27,8 +29,8 @@ re.c('imgtext')
 .interfaces('imgtext')
 .defaults({
   //remove empty characters in ascii
-	charOffset:32
-	
+	charOffset:32,
+	lineHeight:15
 })
 .defines({
 	
@@ -37,13 +39,22 @@ re.c('imgtext')
 	},
 	
 	draw:function(c){
+	  
+    for(var i=0; i<this.text_lines.length; i++){
+      this.drawText(c, this.text_lines[i], i * this.lineHeight);
+    }
+		
+	  return this;
+	},
 	
+  drawText:function(c, text, yPos){
+    
 		var slot = 0, charWidth, code, charPos;
 		
-		for(var i=0, l = this._text.length; i<l; ++i){
+		for(var i=0, l = text.length; i<l; ++i){
 			
 			//get char code
-			code = this._text.charCodeAt(i) - this.charOffset;
+			code = text.charCodeAt(i) - this.charOffset;
 			
 			//find width of character
 			charWidth = this.imgtext[code];
@@ -57,35 +68,35 @@ re.c('imgtext')
 				this.charCache[code] = charPos;
 			}
 			
-			c.drawImage(this._image, this.charCache[code], 0, charWidth, this._image.height, -this.regX + slot, -this.regY, charWidth, this._image.height);
+			c.drawImage(this._image, this.charCache[code], 0, charWidth, this._image.height, -this.regX + slot, -this.regY + yPos, charWidth, this._image.height);
 			
 			//append to next character slot
 			slot += charWidth;
 			
 		}
-		
-		this.sizeX = slot;
-		this.sizeY = this._image.height;
-	  return this;
-	},
-	
+  },
+  
 	text:function(t){
 		if(re.is(t)){
   		this._text = t;
       
-  		var t = 0;
-  		//TODO size is slightly off 
-  		for(var p=0; p<this._text.length; p++){
-  			t += this.imgtext[p];
-  		}
+      this.text_lines = this._text.split('\n');
+      
+  		this.sizeX = 0;
   		
-  		this.sizeX = t;
+      //find the longest line and set that as the width
+      for(var i in this.text_lines){
+    		var w = 0;
+    		//TODO size is slightly off 
+    		for(var p=0; p<this.text_lines[i].length; p++){
+    			w += this.imgtext[p];
+    		}
+        if(w > this.sizeX){
+          this.sizeX = w;
+        }
+      }
   		
-  		if(this._image){
-  			this.sizeY = this._image.height;
-  		} else {
-  			this.sizeY = 0;
-  		}
+      this.sizeY = this.text_lines.length * this.lineHeight;
       
       return this;
     }

data/src/display/screen.js

@@ -29,14 +29,6 @@ re.c('screen')
     
     toScreenY:function(y){
         return y + this.posY + this.offY;
-    },
-    
-    toScreen:function(x, y){
-      if(arguments.length==1){
-          y = x.posY || x.y;
-          x = x.posX || x.x;
-      }
-      return {x: this.toScreenX(x), y: this.toScreenY(y)};
     }
     
 })

data/src/display/text.js

@@ -16,18 +16,43 @@ re.c('text')
 .defaults({
 	font:"14px sans-serif",
 	textColor:'#000000',
-	textAlign:'',
-	font_text:''
+	textAlign:'left',
+  textBaseline:'top',
+  lineHeight:15
 })
 .defines({
 	
 	visible:function(){
-		return this._text && this.parent('draw', 'visible')
+		return this._text && this.parent('draw', 'visible');
 	},
 	
 	text:function(t){
     if(re.is(t)){
+      t += '';
+      this.text_lines = t.split('\n');
   		this._text = t;
+      //set text width
+      if(re.sys.context){
+        var c = re.sys.context;
+        c.save();
+        c.font = this.font;
+        
+        this.sizeX = 0;
+        
+        var w = 0;
+        for(var i in this.text_lines){
+          w = c.measureText(this.text_lines[i]).width;
+          if(w > this.sizeX){
+            this.sizeX = w;
+          }
+        }
+        
+        c.restore();
+      }
+      
+      //set height
+      this.sizeY = this.text_lines.length * this.lineHeight;
+      
       return this;
     }
 		return this._text;
@@ -37,7 +62,15 @@ re.c('text')
 		
 		c.font = this.font;
 		c.fillStyle = this.textColor;
-		c.fillText(this._text, -this.regX, -this.regY);
+    c.textAlign = this.textAlgin;
+    c.textBaseline = this.textBaseline;
+    
+    //multi-line
+    var lines = this.text_lines;
+    for(var i=0, l=lines.length; i<l; i++){
+  		c.fillText(lines[i], -this.regX, -this.regY + (i * this.lineHeight));
+    }
+    
 		return this;
 	}
 	

data/src/input/keyboard.js

@@ -113,8 +113,10 @@ re.c('keyboard')
 	event: function(e){
 		var that = re._c.keyboard;
 		
+    var tagName = (e.target || e.srcElement || {}).tagName;
+    
     //disable keyboard keys if focus lost
-		if(re.is(document.activeElement, 'htmlinputelement') || re.is(document.activeElement, 'htmltextareaelement')){
+		if(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'){
 			return;
 		}
 		
@@ -122,10 +124,14 @@ re.c('keyboard')
     
 		var key = that.keyCodes[c];
 		
-		if(re.pressed.d){
+		if(re.pressed && re.pressed.d){
 			re.pressed.d[key] = (e.type == 'keydown');
 		}
-
+    
+    if(re.preventDefault && re.preventDefault.d[key]){
+      e.preventDefault();
+    }
+    
 		for(var k=0; k<that.l.length; k++){
 			that.l[k]
 			.trigger(e.type, key, e)
@@ -136,8 +142,12 @@ re.c('keyboard')
 	
   //initialize function
 	i:function(){
-		re.listener('keydown', this.event, false);
-		re.listener('keyup', this.event, false);
+		re.listener('keydown', this.event);
+		re.listener('keyup', this.event);
+    //reset all keys
+    re.listener('focus', function(){
+      re.pressed.d = {};
+    });
 	}
 
 })

data/src/input/mouse.js

@@ -51,32 +51,21 @@ re.c('mouse')
     event:function(e, extra){
         
         //calculate mouse coordinate
-        var x;
-        var y;
+        var x = e.offsetX;
+        var y = e.offsetY;
         
-        if(e.pageX){
-            x = e.pageX;
-            y = e.pageY;
-        } else {
-            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
-        }
-        
-        x -= re.sys.canvas.offsetLeft;
-        y -= re.sys.canvas.offsetTop;
+        var that = re.c('mouse');
         
-        //ignore if off canvas
-        if(x < 0 || y < 0 || y > re.sys.sizeY || x > re.sys.sizeX){
-            return;
+        /*
+        if(re.preventDefault && re.preventDefault.d[key]){
+          e.preventDefault();
         }
+        */
         
-        var that = re.c('mouse');
-        
-        //FUTURE automatically transform screen coordinates?
         var c, t, obj;
         for(var i=0; i<that.l.length; i++){
           t = that.l[i];
-          obj = {x:x, y:y};
+          obj = {posX:x, posY:y};
           obj.screenX = re.screen.toScreenX(x);
           obj.screenY = re.screen.toScreenY(y);
           
@@ -90,12 +79,13 @@ re.c('mouse')
     },
     
     i:function(){
-      re.listener('mousedown', this.press, false);
-      re.listener('mouseup', this.press, false);
-      re.listener('mousemove', this.event, false);
-      re.listener('click', this.event, false);
-      re.listener('dblclick', this.event, false);
-      re.listener('contextmenu', this.event, false);
+      var c = re.sys.canvas;
+      re.listener('mousedown', this.press, c);
+      re.listener('mouseup', this.press, c);
+      re.listener('mousemove', this.event, c);
+      re.listener('click', this.event, c);
+      re.listener('dblclick', this.event, c);
+      re.listener('contextmenu', this.event, c);
     }
     
 })

data/src/input/preventdefault.js

@@ -0,0 +1,11 @@
+/*
+The PreventDefault method prevents defaults for input events.
+*/
+re.preventDefault = function(pres){
+  if(re.is(pres, 'string')) pres = pres.split(' ');
+  
+  for(var i in pres){
+    re.preventDefault.d[pres[i]] = 1;
+  }
+};
+re.preventDefault.d = {};

data/src/math/body.js

@@ -20,37 +20,56 @@ padX:2 //pushes the body in 2 pixels on both right and left
 re.c('body')
 .defines({
 	
-	hit:function(x, y, w, h){
+	hit:function(x, y, w, h, rx, ry){
     if(re.is(x,'object')){
-      y = x.posY;
-      w = x.sizeX;
-      h = x.sizeY;
-      x = x.posX;
+      y = x.posY || x.y;
+      w = x.sizeX || x.w;
+      h = x.sizeY || x.h;
+      rx = x.regX || 0;
+      ry = x.regY || 0;
+      x = x.posX || x.x;
     }
+    
+    rx = rx || 0;
+    ry = ry || 0;
+    
+    var regX = this.regX ||0;
+    var regY = this.regY ||0;
+    
 		return !
 		(
-		x > this.posX + this.bodyX - this.padX  ||
-		x + w < this.posX + this.padX ||
-		y > this.posY + this.bodyY - this.padY||
-		y + h < this.posY + this.padY
+		x - rx > this.posX + this.bodyX - this.padX - regX  ||
+		x + w -rx < this.posX + this.padX - regX ||
+		y -ry > this.posY + this.bodyY - this.padY - regY ||
+		y + h - ry < this.posY + this.padY - regY
 		);
 	},
 	
-	hitBody:function(x, y, bx, by, px, py){
+	hitBody:function(x, y, bx, by, px, py, rx, ry){
     if(re.is(x,'object')){
-      y = x.posY;
+      y = x.posY || x.y;
       bx = x.bodyX;
       by = x.bodyY;
       px = x.padX;
       py = x.padY;
-      x = x.posX;
+      rx = x.regX || 0;
+      ry = x.regY || 0;
+      x = x.posX || x.x;
     }
+    
+    rx = rx || 0;
+    ry = ry || 0;
+    
+    var regX = this.regX ||0;
+    var regY = this.regY ||0;
+    
+    
 		return !
 		(
-		x + px > this.posX + this.bodyX + this.padX ||
-		x + bx - px < this.posX + this.padX ||
-		y + py > this.posY + this.bodyY - this.padY ||
-		y + by - py < this.posY + this.padY
+		x + px - rx> this.posX + this.bodyX + this.padX -regX ||
+		x + bx - px -rx < this.posX + this.padX -regX ||
+		y + py -ry > this.posY + this.bodyY - this.padY - regY ||
+		y + by - py -ry < this.posY + this.padY - regY
 		);
 	}