entityjs 0.2.2 → 0.3.0

data/src/display/align.js

@@ -0,0 +1,45 @@
+/*
+The align component contains helper methods for positioning entities relative to system size.
+*/
+re.c('align')
+.requires('draw')
+.defines({
+    
+    alignHor:function(o){
+        o = 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;
+        return this;
+    },
+    
+    alignRight:function(x){
+        x = 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;
+        return this;
+    },
+    
+    alignTop:function(y){
+        y = y || 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;
+        return this;
+    }
+    
+});

data/src/display/circle.js

@@ -0,0 +1,33 @@
+/*
+The circle component draws a rectangle on screen.
+*/
+re.c('circle')
+.requires('draw')
+.defaults({
+    color:'#82d5f4'
+})
+.defines({
+    
+    draw:function(c){
+        
+        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);
+        
+        c.closePath();
+        
+        c.fill();
+        return this;
+    },
+    
+    radius:function(r){
+        if(re.is(r)){
+            this.sizeX = this.sizeY = r;
+            return this;
+        }
+        return this.sizeX;
+    }
+    
+});

data/src/{entityjs/display → display}/group.js

@@ -1,63 +1,63 @@
-re.c('group')
-.inherit({
-	posX:0,
-	posY:0
-})
-.extend({
-	
-	group:function(){
-		
-		for(var i=0; i<arguments.length; i++){
-			arguments[i].comp('group').group
-		}
-		
-	},
-	
-	ungroup:function(e){
-	
-	},
-	
-	/*
-	Overwrite old screen functions
-	*/
-	getScreenX:function(){
-		var x = this.posX;
-		if(this.group) x += this.group.posX;
-		if(this.screen) x += this.screen.posX;
-		return x;
-	},
-	
-	getScreenY:function(){
-		var y = this.posY;
-		if(this.group) y += this.group.posY;
-		if(this.screen) y += this.screen.posY;
-		return y;
-	},
-	
-	/*group:null,*/
-	
-	getGroupX:function(){
-		var x = this.posX;
-		if(this.group){
-			x += this.group.posX;
-		}
-		return x;
-	},
-	
-	getGroupY:function(){
-		var y = this.posY;
-		if(this.group){
-			y += this.group.posY;
-		}
-		return y;
-	},
-	
-	setGroupX:function(x){
-	
-	},
-	
-	setGroupY:function(y){
-	
-	}
-	
+re.c('group')
+.defaults({
+	posX:0,
+	posY:0
+})
+.defines({
+	
+	group:function(){
+		
+		for(var i=0; i<arguments.length; i++){
+			arguments[i].comp('group').group
+		}
+		
+	},
+	
+	ungroup:function(e){
+	
+	},
+	
+	/*
+	Overwrite old screen functions
+	*/
+	getScreenX:function(){
+		var x = this.posX;
+		if(this.group) x += this.group.posX;
+		if(this.screen) x += this.screen.posX;
+		return x;
+	},
+	
+	getScreenY:function(){
+		var y = this.posY;
+		if(this.group) y += this.group.posY;
+		if(this.screen) y += this.screen.posY;
+		return y;
+	},
+	
+	/*group:null,*/
+	
+	getGroupX:function(){
+		var x = this.posX;
+		if(this.group){
+			x += this.group.posX;
+		}
+		return x;
+	},
+	
+	getGroupY:function(){
+		var y = this.posY;
+		if(this.group){
+			y += this.group.posY;
+		}
+		return y;
+	},
+	
+	setGroupX:function(x){
+	
+	},
+	
+	setGroupY:function(y){
+	
+	}
+	
 });

data/src/display/image.js

@@ -0,0 +1,35 @@
+/*
+The image component draws an image on screen.
+
+
+FUTURE - add bitdata component for image manipulation.
+*/
+re.c('image')
+.requires('draw')
+.defines({
+	
+	image:function(b){
+    if(re.is(b)){
+      this.attr({_image:b, sizeX:b.width, sizeY:b.height});
+  		return this;
+    }
+    return this._image;
+	},
+	
+	visible:function(){
+		return this._image && this.parent('draw', 'visible');
+	},
+	
+	draw:function(c){
+		c.drawImage(this._image, -this.regX, -this.regY, this.sizeX, this.sizeY);
+		return this;
+	}
+	
+})
+.init(function(){
+	
+	if(this._image){
+		this.image(this._image);
+	}
+	
+});

data/src/display/imgtext.js

@@ -0,0 +1,102 @@
+/*
+The imgfont component writes text on the screen using a sprite image.
+This is a faster approach than using the text component for now.
+Plus you don't have to worry about the font not being supported.
+
+@usage
+//Must be created as a component to implement the imgtext array.
+//imgtext is an array of all characters and defines the width
+//of each.
+
+re.c('serif')
+.requires('imgtext font serif.png')
+.defines('imgtext', [4,4,2,4,3,5,6,7,8,3,4,5])
+
+re.e('serif')
+.text('This displays on screen')
+
+//find all fonts
+re('font')
+
+*could be turned in to a special sprite component but wouldn't
+be very useful.
+*/
+
+re.c('imgtext')
+.requires('draw')
+.interfaces('imgtext')
+.defaults({
+  //remove empty characters in ascii
+	charOffset:32
+	
+})
+.defines({
+	
+	visible:function(){
+		return this._text && this._image && this.parent('draw', 'visible');
+	},
+	
+	draw:function(c){
+	
+		var slot = 0, charWidth, code, charPos;
+		
+		for(var i=0, l = this._text.length; i<l; ++i){
+			
+			//get char code
+			code = this._text.charCodeAt(i) - this.charOffset;
+			
+			//find width of character
+			charWidth = this.imgtext[code];
+			
+			//find source character position
+			if(!this.charCache[code]){
+				charPos = 0;
+				for(var p=0; p<code; ++p){
+					charPos += this.imgtext[p]+1;
+				}
+				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);
+			
+			//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.sizeX = t;
+  		
+  		if(this._image){
+  			this.sizeY = this._image.height;
+  		} else {
+  			this.sizeY = 0;
+  		}
+      
+      return this;
+    }
+		return this._text;
+	}
+	
+})
+.init(function(){
+	
+	if(!this.charCache){
+		this.charCache = {};
+	}
+	this.text('');
+});

data/src/{entityjs/display → display}/rect.js

@@ -1,19 +1,19 @@
-/*
-The rect component draws a rectangle on screen.
-*/
-re.c('rect')
-.require('draw')
-.inherit({
-	color:'#82d5f4'
-})
-.extend({
-	
-	draw:function(c){
-		
-		c.fillStyle = this.color;
-		
-		c.fillRect(-this.regX, -this.regY, this.sizeX, this.sizeY);
-		
-	}
-	
+/*
+The rect component draws a rectangle on screen.
+*/
+re.c('rect')
+.requires('draw')
+.defaults({
+	color:'#82d5f4'
+})
+.defines({
+  
+  draw:function(c){
+		
+		c.fillStyle = this.color;
+		
+		c.fillRect(-this.regX, -this.regY, this.sizeX, this.sizeY);
+		return this;
+	}
+  
 });

data/src/display/screen.js

@@ -0,0 +1,57 @@
+/*
+The screen component is used for scrolling or shaking all visible objects. 
+It simply offsets pos values upon rendering.
+
+This is useful for setting up a tile-based game.
+*/
+re.c('screen')
+.requires('hit')
+.defines({
+    
+    pos:function(x, y){
+      if(!arguments.length){
+        return this;
+      }
+      if(arguments.length == 1){
+          y = x.posY;
+          x = x.posX;
+      }
+      
+      this.posX = x - this.regX;
+      this.posY = y - this.regY;
+      
+      return this;
+    },
+    
+    toScreenX:function(x){
+        return x + this.posX + this.offX;
+    },
+    
+    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)};
+    }
+    
+})
+.defaults({
+    
+    posX:0,
+    posY:0,
+    
+    regX:0,
+    regY:0,
+    
+    sizeX:0,
+    sizeY:0,
+    
+    offX:0,
+    offY:0
+    
+});

data/src/display/sprite.js

@@ -0,0 +1,54 @@
+/*
+The sprite object definess a drawable image for an entity.
+
+@usage
+var sprite = re.e('sprite player.png');
+
+//move to frame 3
+sprite.fra(3)
+
+//get current frame
+sprite.fra()
+
+//manually move to frame
+sprite.attr({fraX:0, fraY:1});
+
+//add animation
+sprite.comp('flicker')
+//add animation
+sprite.flicker('run', -1, 400, [0, 2, 3, 4])
+//play
+sprite.flicker('run')
+*/
+
+re.c('sprite')
+.requires('image bisect')
+.defaults({
+    
+    frameX:0,
+    frameY:0
+    
+})
+.defines({
+    
+    frame:function(i){
+      if(re.is(i)){
+        this.frameX = this.biToTileX(i);
+        this.frameY = this.biToTileY(i);
+        return this;
+      }
+      return this.tileToBi(this.frameX, this.frameY);
+    },
+    
+    draw:function(c){
+        c.drawImage(this._image, this.frameX * this.sizeX, this.frameY * this.sizeY, this.sizeX, this.sizeY, -this.regX, -this.regY, this.sizeX, this.sizeY);
+        
+        return this;
+    },
+    
+    //implement for flicker
+    flick:function(c){
+        this.frame(c);
+    }
+    
+});

data/src/display/text.js

@@ -0,0 +1,44 @@
+/*
+The text component displays font on screen using the canvas font api.
+
+//create font
+re.e('text')
+.defines({
+	text:'Texting Message',
+	textColor:'#ff0000'
+});
+
+TODO implement size
+
+*/
+re.c('text')
+.requires('draw')
+.defaults({
+	font:"14px sans-serif",
+	textColor:'#000000',
+	textAlign:'',
+	font_text:''
+})
+.defines({
+	
+	visible:function(){
+		return this._text && this.parent('draw', 'visible')
+	},
+	
+	text:function(t){
+    if(re.is(t)){
+  		this._text = t;
+      return this;
+    }
+		return this._text;
+	},
+	
+	draw:function(c){
+		
+		c.font = this.font;
+		c.fillStyle = this.textColor;
+		c.fillText(this._text, -this.regX, -this.regY);
+		return this;
+	}
+	
+});