entityjs 0.2.2

data/src/entityjs/cycle/draw.js

@@ -0,0 +1,185 @@
+re.c('draw')
+.global({
+	listeners:[],
+	
+	draw:function(s){
+		var l = this.listeners;
+		
+		for(var k=0, le = l.length, b; k < le; ++k){
+			b = l[k];
+			
+			if(b && b.sys == s && b.drawing && b.isVisible()){
+				/*if(!b.canvasCache){
+					b.draw_render(c);
+				} else {
+					b.signal('draw', c);
+				}*/
+				b.draw_render(s.context);
+				
+			}
+		}
+		
+	}
+	
+})
+.implement('draw')
+.init(function(c){
+	
+	c.listeners.push(this);
+	
+	//set default screen
+	this.screen = re.screen;
+	
+})
+.dispose(function(c){
+	
+	c.listeners.splice(c.listeners.indexOf(this), 1);
+	
+})
+.inherit({
+	
+	sys:re.sys,
+	drawing:true,
+	rotation:0,
+	alpha:1,
+	
+	scaleX:1,
+	scaleY:1,
+	
+	posX:0,
+	posY:0,
+	
+	sizeX:1,
+	sizeY:1,
+	
+	regX:0,
+	regY:0
+	
+})
+.extend({
+	
+	cache:function(){
+		if(!this.image) return this;
+		
+		this.clearCache();
+		
+		var c = re.$new('canvas');
+		var s = Math.max(this.image.width, this.image.height);
+		c.width = s;
+		c.height = s;
+		
+		this.draw_render(c.getContext(re.sys.contextType));
+		
+		this.canvasCache = c;
+		
+		return this;
+	},
+	
+	clearCache:function(){
+		this.canvasCache = null;
+	},
+	
+	drawFirst:function(){
+		var l = re.c('draw').listeners;
+		
+		l.splice(l.indexOf(this), 1);
+		
+		l.unshift(this);
+		return this;
+	},
+	
+	drawLast:function(){
+		var l = re.c('draw').listeners;
+		
+		l.splice(l.indexOf(this), 1);
+		
+		l.push(this);
+		return this;
+	},
+	
+	drawAfter:function(en){
+		var l = re.c('draw').listeners;
+		var him = l.indexOf(en);
+		var me = l.indexOf(this);
+		
+		if(him > me){
+			//swap
+			var t = l[him];
+			l[him] = l[me];
+			l[me] = t;
+		}
+		
+		return this;
+	},
+	
+	drawBefore:function(en){
+		
+		var l = re.c('draw').listeners;
+		var him = l.indexOf(en);
+		var me = l.indexOf(this);
+		
+		if(him < me){
+			//swap	
+			var t = l[him];
+			l[him] = l[me];
+			l[me] = t;
+		}
+		
+		return this;
+	},
+	
+	getScreenX:function(){
+		var x = this.posX;
+		if(this.screen) x -= this.screen.posX;
+		return x;
+	},
+	
+	getScreenY:function(){
+		var y = this.posY;
+		if(this.screen) y -= this.screen.posY;
+		return y;
+	},
+	
+	/*
+	Returns true or false wether the object is visible on screen.
+	*/
+	isVisible:function(){
+		
+		return (!this.screen || this.screen.touches(this.posX - this.regX, this.posY - this.regY, this.sizeX, this.sizeY));
+		
+	}
+	
+})
+.namespace({
+	
+	render:function(c){
+		if(!c) c = this.sys.context;
+		
+		this.draw_before(c);
+			this.draw(c);
+		this.draw_after(c);
+	},
+	
+	before:function(c){
+		
+		c.save();
+		
+		if(this.alpha != 1)
+			c.globalAlpha = this.alpha;
+		
+		c.translate(this.getScreenX(), this.getScreenY());
+		
+		if(this.rotation != 0)
+			c.rotate(this.rotation * Math.PI / 180);
+		
+		
+		if(this.scaleX != 1 || this.scaleY != 1)
+			c.scale(this.scaleX, this.scaleY);
+		
+	},
+	
+	after:function(c){
+		c.restore();
+	}
+	
+});

data/src/entityjs/cycle/ticker.js

@@ -0,0 +1,27 @@
+/*
+The ticker component calculates time between steps for animation or special effects.
+*/
+re.c('ticker')
+.inherit({
+	time:0,
+	maxTick:0.05
+})
+.init(function(){
+	this.lastTime = Date.now();
+})
+.extend({
+
+	tick:function(){
+		var wall = Date.now();
+		var delta = (wall - this.lastTime) / 1000;
+		
+		this.lastTime = wall;
+		
+		var timeDelta = Math.min(delta, this.maxTick);
+		
+		this.time += timeDelta;
+		
+		return timeDelta;
+	}
+	
+});

data/src/entityjs/cycle/tween.js

@@ -0,0 +1,61 @@
+/*
+The tween component tweens properties of entities to the given value over a period of time.
+
+This is useful for animations.
+
+re.e('tween')
+.tween(0.8, {x:10});
+
+*/
+re.c('tween')
+.require('update')
+.global({
+	
+	tween:function(obj, time, props){
+		return obj.comp('tween')
+		.tween(time, props);
+	}
+	
+})
+.namespace({
+
+	update:function(t){
+		
+		
+		
+	}
+
+})
+.inherit({
+	
+	tweening:false
+	
+})
+.extend({
+	
+	tween:function(time, props){
+		this.time = time || 5;
+		
+		if(this.tweening){
+			this.removeSignal('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;
+	}
+	
+})
+.init(function(){
+	
+	this.tween_props = {};
+	
+});
+re.tween = re.c('tween').tween;

data/src/entityjs/cycle/update.js

@@ -0,0 +1,86 @@
+/*
+The update component calls update signals to all listening entities.
+*/
+re.c('update')
+.global({
+	listeners:[],
+	update:function(s,t){
+		var l = this.listeners;
+		
+		for(var k=0, le = l.length, b; k < le; ++k){
+			b = l[k];
+			
+			if(b && b.sys == s && b.updating){
+				b.signal('update', t, s.time);
+			}
+		}
+		
+	}
+})
+.inherit({
+	updating:true,
+	sys:re.sys
+})
+.extend(function(){
+	
+	var l = re.c('update').listeners;
+	
+	return {
+	updateFirst:function(){
+		
+		l.splice(l.indexOf(this), 1);
+		
+		l.unshift(this);
+		
+		return this;
+	},
+	
+	updateLast:function(){
+		
+		l.splice(l.indexOf(this), 1);
+		
+		l.push(l);
+		
+		return this;
+	},
+	
+	updateAfter:function(e){
+		
+		var him = l.indexOf(e);
+		var me = l.indexOf(this);
+		
+		if(him > me){
+			//swap
+			var t = l[him];
+			l[him] = l[me];
+			l[me] = t;
+		}
+		
+		return this;
+	},
+	
+	updateBefore:function(e){
+		
+		var him = l.indexOf(e);
+		var me = l.indexOf(this);
+		
+		if(him < me){
+			//swap	
+			var t = l[him];
+			l[him] = l[me];
+			l[me] = t;
+		}
+		
+		return this;
+	}
+	
+	};
+	
+}())
+.init(function(c){
+	c.listeners.push(this);
+})
+.dispose(function(c){
+	
+	c.listeners.splice(c.listeners.indexOf(this), 1);
+});

data/src/entityjs/cycle/wait.js

@@ -0,0 +1,22 @@
+/*
+The wait component delays function calls.
+*/
+re.c('wait')
+.require('update')
+.extend({
+	
+	wait:function(time, callback){
+		var c = 0;
+		
+		this.addSignal('update',  function(t){
+			c += t;
+			
+			if(c >= time){
+				this.callback.apply(this, Array.prototype.slice.call(arguments, 2));
+				return false;
+			}
+		});
+		
+	}
+	
+});

data/src/entityjs/cycle/worker.js

@@ -0,0 +1,9 @@
+/*
+The worker component will contain an interface for the new HTML5 webworker.
+
+TODO
+*//*
+re.c('worker')
+.init(function(){
+	throw 'Not implemented';
+});*/

data/src/entityjs/display/anchor.js

@@ -0,0 +1,53 @@
+/*
+The anchor component contains helper methods for positioning entities relative to system size.
+*/
+re.c('anchor')
+.extend({
+	
+	centerX:function(o){
+		o = o || 0;
+		this.posX = Math.floor(re.sys.sizeX * 0.5 - this.sizeX * 0.5 + o);
+		
+		return this;
+	},
+	
+	centerY:function(o){
+		o = o || 0;
+		this.posY = Math.floor(re.sys.sizeY * 0.5 - this.sizeY * 0.5 + o);
+		return this;
+	},
+	
+	right:function(x){
+		x = x || 0;
+		this.posX = Math.floor(re.sys.sizeX - this.sizeX + x);
+		return this;
+	},
+	
+	left:function(x){
+		x = x || 0;
+		this.posX = Math.floor(x);
+		return this;
+	},
+	
+	top:function(y){
+		y = y || 0;
+		this.posY = Math.floor(y);
+		return this;
+	},
+	
+	bottom:function(y){
+		y = y || 0;
+		this.posY = Math.floor(re.sys.sizeY - this.sizeY + y);
+		return this;
+	}
+	
+})
+.inherit({
+	
+	sizeX:0,
+	sizeY:0,
+	
+	posX:0,
+	posY:0
+	
+});

data/src/entityjs/display/bitfont.js

@@ -0,0 +1,93 @@
+/*
+The bitfont 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 user not supporting the
+wanted font.
+
+*/
+
+re.c('bitfont')
+.require('draw')
+.inherit({
+	
+	text:'',
+	//default width if charwidths not extendd
+	charOffset:32
+	
+})
+.extend({
+	
+	isVisible:function(){
+		return this.text.length != 0 && this.bitmap && this.parent('draw', 'isVisible');
+	},
+	
+	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.charWidths[code];
+			
+			//find source character position
+			if(!this.charCache[code]){
+				charPos = 0;
+				for(var p=0; p<code; ++p){
+					charPos += this.charWidths[p]+1;
+				}
+				this.charCache[code] = charPos;
+			}
+			
+			c.drawImage(this.bitmap, this.charCache[code], 0, charWidth, this.bitmap.height, -this.regX + slot, -this.regY, charWidth, this.bitmap.height);
+			
+			//append to next character slot
+			slot += charWidth;
+			
+		}
+		
+		this.sizeX = slot;
+		this.sizeY = this.bitmap.height;
+	
+	
+	},
+	
+	updateSize:function(){
+		
+		var t = 0;
+		//TODO size is slightly off 
+		for(var p=0; p<this.text.length; p++){
+			t += this.charWidths[p];
+		}
+		
+		this.sizeX = t;
+		
+		if(this.bitmap){
+			this.sizeY = this.bitmap.height;
+		} else {
+			this.sizeY = 0;
+		}
+		return this;
+	},
+	
+	setText:function(text){
+		
+		this.text = text;
+		this.updateSize();
+		
+		return this;
+	}
+	
+})
+.init(function(){
+	
+	if(!this.charCache){
+		this.charCache = {};
+	}
+	
+	this.updateSize();
+	
+});

data/src/entityjs/display/bitmap.js

@@ -0,0 +1,37 @@
+/*
+The bitmap component draws an image on screen.
+
+
+FUTURE - add bitdata component for image manipulation.
+*/
+re.c('bitmap')
+.require('draw')
+.extend({
+	
+	setBitmap:function(b){
+		this.bitmap = b;
+		if(b){
+			this.sizeX = b.width;
+			this.sizeY = b.height;
+		}
+		return this;
+	},
+	
+	isVisible:function(){
+		return this.bitmap && this.parent('draw', 'isVisible');
+	},
+	
+	draw:function(c){
+		
+		c.drawImage(this.bitmap, -this.regX, -this.regY, this.sizeX, this.sizeY);
+		return this;
+	}
+	
+})
+.init(function(){
+	
+	if(this.bitmap){
+		this.setBitmap(this.bitmap);
+	}
+	
+});

data/src/entityjs/display/circle.js

@@ -0,0 +1,30 @@
+/*
+The circle component draws a rectangle on screen.
+*/
+re.c('circle')
+.require('draw')
+.inherit({
+	color:'#82d5f4'
+})
+.extend({
+	
+	draw:function(c){
+		
+		c.fillStyle = this.color;
+		
+		c.beginPath();
+		
+			c.arc(-this.regX, -this.regY, this.sizeX, 0, Math.PI*2, true);
+		
+		c.closePath();
+		
+		c.fill();
+		
+	},
+	
+	setRadius:function(r){
+		this.sizeX = this.sizeY = r;
+		return this;
+	}
+	
+});

data/src/entityjs/display/font.js

@@ -0,0 +1,41 @@
+/*
+The font component displays font on screen using the canvas font api.
+
+//create font
+re.e('font')
+.extend({
+	text:'Texting Message',
+	textColor:'#ff0000'
+});
+
+TODO implement size
+
+*/
+re.c('font')
+.require('draw')
+.inherit({
+	font:"14px sans-serif",
+	textColor:'#000000',
+	textAlign:'',
+	text:''
+})
+.extend({
+	
+	isVisible:function(){
+		return this.text.length != 0;
+	},
+	
+	setText:function(t){
+		this.text = t;
+		return this;
+	},
+	
+	draw:function(c){
+		
+		c.font = this.font;
+		c.fillStyle = this.textColor;
+		c.fillText(this.text, -this.regX, -this.regY);
+		
+	}
+	
+});

data/src/entityjs/display/group.js

@@ -0,0 +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){
+	
+	}
+	
+});