about
history
syntax
visu
arcade
goodies
wrappers
efficiency
examples
experiments
tabageos
tutorials
actiontad logo white

Understanding the tabageos library of code

With these core classes any 2D HTML5 game can be made;
tabageos.BlitMath tabageos.GeometricMath tabageos.TweenMath
tabageos.WayDeterminer tabageos.CanvasObject tabageos.CanvasObjectContainer
tabageos.Rectangle tabageos.MoverPoint tabageos.Traveler tabageos.WDTraveler

Just about all the tbgs.js Classes opperate in much the same way as their AS3 counterparts,
as such you can still use the AS3 docuimentation for reference.
However the tbgs.js BlitMath class has .functionAssignments and .dispatchFunctionAssignments()
and a few added methods, the new code in BlitMath is exposed in tbgs.js

A quick example tabageos.Traveler demonstration

		var so;
		var root;
		var title;
		var engine;
		var timer;
		var t;
		var circ;
		var circLayer;
		var fRect;
		var trs = [];
		var circs = [];
		function init() {
			root = new tabageos.CanvasObjectContainer("root", 500, 500, null, "#FFffff");
			title = new tabageos.ScreenSkeleton(null, null, 500, 500, null, "#0000ff");
			title.floor.writeText("Title Screen", 215, 24, "Times", 24, "#000000");
			title.floor.writeText("Play!", 250 - 10, 250, "Times", 30, "#FF0000");
			engine = new tabageos.CanvasObjectContainer(null, 500, 500, null, "#6495ed");
			circLayer = new tabageos.CanvasObject(null, 500, 500);
			
			so = new tabageos.IrisScreenOrganizer(root, [title, engine]);
			title._screenOrg = so;
			title.establishClickArea("titleClick", this, "startButtonClick", 240,335,250-24,250);
			
			so.changeScreen(0);//0 is the title screen
		}
		function startButtonClick(e) {
			so.removeEventListener(tabageos.ScreenChangeEvent.SCREEN_CHANGE, "afterScreenChange", this);
			so.addEventListener(tabageos.ScreenChangeEvent.SCREEN_CHANGE, "startSomething", this);
			so.changeScreen(1);//1 is the engine
		}
		function startSomething(e) {

			so.removeEventListener(tabageos.ScreenChangeEvent.SCREEN_CHANGE, "startSomething", this);
			engine.addChild(circLayer);
			fRect = new tabageos.Rectangle(0,0,500,500);
			
			while(trs.length < 20) {
				var newTr = new tabageos.Traveler(1,1,5,20);
				trs.push(newTr);
				newTr.maxSpeed = Math.floor(Math.random() * 9) + 2;
				newTr.setWallObject( new tabageos.Rectangle(0,0,500,500) );
			}
			while(circs.length < 7) {
				circ = new tabageos.Traveler(1,1,7,7);
				circ.x = Math.floor(Math.random() * 450);
				circ.y = Math.floor(Math.random() * 500);
				circLayer.drawCircle(circ.x, circ.y, 7, "#FF0000");
				circs.push(circ);
			}
			timer = new tabageos.IntervalController(16.6,0);
			timer.addEventListener(tabageos.IntervalEvent.INTERVAL, "loop", this);
			timer.start();
		}
		function loop(e) {
			engine.floor.drawRect(fRect, "#6495ed");
			var mp = tabageos.MouseController.mouseMoverPoint();
			var i = 0;
			
			for (i = 0; i < trs.length; i++) {
				t = trs[i];
				t.easeTo(mp);
				t.avoid(circs);//avoid then separate will look like basic hit detection and response
				t.separate(circs);
				t.flock(trs);
				t.move();
				engine.floor.drawTriangle(t.x, t.y, 5, t.x < mp.x ? 20 : -20, null, true);
			}
			
		}
		
	
live example

More Examples

BlitMath BasicCamera and Travelers example

RotatingShooter example

The tbgs.js file is included in the full actiontad library; tabageos main page