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

Using tabageos.BlitMath and tabageos.BasicCamera to create a large scene

Click and drag to move the scene around

One key difference with arrays for BlitMath is that they use [y,x] pairs instead of [x,y].
The TileSetPainter application was used to easily generate the array.
		
		
				var map = [  
				[ [13,10], [13,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [14,10], [14,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [7,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [13,7], [13,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,46], [1,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [14,7], [14,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [2,46], [2,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,1], [10,2], [10,2], [10,2], [4,46], [4,47], [1,1], [1,1], [1,1], [1,1], [1,1], [10,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,13], [4,14], [1,16], [19,7], [19,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,4], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,1], [11,2], [11,2], [11,2], [5,46], [5,47], [1,1], [1,1], [2,2], [2,2], [2,2], [11,1], [17,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [5,13], [5,14], [2,16], [20,7], [20,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,4], [1,1] ],
				[ [10,10], [10,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [7,13], [7,14], [1,16], [1,17], [4,19], [4,20], [2,2], [8,4], [8,4], [10,4], [7,19], [7,20], [1,16], [1,17], [1,16], [1,17], [4,22], [4,23], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [11,10], [11,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [8,13], [8,14], [2,16], [2,16], [5,19], [5,20], [1,1], [8,4], [8,5], [11,4], [8,19], [8,20], [2,16], [2,17], [2,17], [2,17], [5,22], [5,23], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [10,10], [10,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [7,22], [7,23], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [11,10], [11,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [8,22], [8,23], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [10,10], [10,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [11,10], [11,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [10,10], [10,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,1], [4,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [11,10], [11,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,1], [4,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,1], [4,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,46], [1,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,1], [4,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [2,46], [2,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,4], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [4,46], [4,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,4], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [5,46], [5,47], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,4] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,4] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,4] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [17,10], [17,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,4] ],
				[ [1,1], [17,10], [17,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,31], [10,32], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,31], [11,32], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,4] ],
				[ [1,1], [13,1], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [19,28], [19,29], [1,2], [1,2], [19,31], [19,32], [1,1], [19,10], [19,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,4] ],
				[ [1,1], [14,1], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [20,28], [20,29], [1,2], [1,2], [20,31], [20,32], [1,1], [20,10], [20,11], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [10,4], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [11,4], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [13,22], [13,23], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [7,2], [7,2], [7,2], [1,1], [14,22], [14,23], [1,1], [1,1], [1,1], [7,46], [7,47] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [7,1], [8,2], [8,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [8,46], [8,47] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [10,1], [1,1], [10,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [10,10], [10,11], [1,1], [1,1], [1,1], [1,1], [1,1], [10,7], [10,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [11,1], [1,1], [11,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ],
				[ [1,1], [1,1], [13,2], [13,2], [11,10], [11,11], [1,1], [1,1], [1,1], [1,1], [1,1], [11,7], [11,8], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1], [1,1] ]
		];
		
		var root;
		var timer;
		var cameraLayer;
		var camera;
		var img;
		var mp;
		var mouseIsDown = 0;
		var charLayer;
		var wanderer;
		var charAnimationSpecs = {left:[10,[34,34]], right:[10,[34,34]]};//[y,[x sequence]]
		var pathFollower;
		var path = [new tabageos.MoverPoint(320,192), new tabageos.MoverPoint(320,224), 
					new tabageos.MoverPoint(320,250), new tabageos.MoverPoint(352,250), 
					new tabageos.MoverPoint(384,250), new tabageos.MoverPoint(416,250), 
					new tabageos.MoverPoint(448,250) ];
		
		
		function init() {
			//create a CanvasObjectContainer, it represents an html div element
			//and it has addChild and removeChild methods.
			root = new tabageos.CanvasObjectContainer("root", 1280, 1280, null, "#FFffff");
			//root.floor is a CanvasObject, "root" is the id of the div the floor canvas will be in, 
			//you can also pass null, and in that case a div is created for you.
			//because i wanted the game to be in a certain place on the page i used a premade div.
			//In this example we are not using a tabageos.ScreenSkeleton
			//when using a ScreenSkeleton, the visible display order of children added to the ScreenSkeleton
			//is automatically taken care of. 
			//In this example we need to manually turn off the display of the root canvas;
			root.floor.canvas.setAttribute("style", "display:none");
			
			//not displayed or even added to the page at all.
			charLayer = new tabageos.CanvasObject(null, 1280, 1280);
			
			//this is the only layer that will be displayed
			//CanvasObject holds reference to a canvas element and has a copyPixels method.
			cameraLayer = new tabageos.CanvasObject(null, 500, 500);
			
			img = new Image();
			img.src = "medieval_tilesheet.png";//Thanks to www.Kenny.nl for the free graphics.
			//it was used as is, perferably you would set up your tileset to fit 
			//in the tileWidth and Height you define.
			img.onload = function(e) { 
				var justGrass = [];//creating a map of just plain grass tiles
				for (var i = 0; i < map.length; i++) {
					justGrass.push([]);
					for (var a = 0; a < map[i].length; a++) {
						justGrass[i].push( [1,1] );
					}
				}
				
				//draw just grass tiles first
				tabageos.BlitMath.specificPatternBlit(root.floor, img, justGrass, 32,32);
				//then draw the rest of the map on top
				tabageos.BlitMath.specificPatternBlit(root.floor, img, map, 32,32);
			}
			
			camera = new tabageos.BasicCamera(cameraLayer, root.floor, charLayer);
			//the camera.v is the cameras viewport area
			camera.v.width = 1280-500; camera.v.height = 1280-500;
			//adds the camera to the display list by adding it to the root div.
			root.addChild(cameraLayer);
			//in this example the game is not at the top of the page, 
			//so we need to change its position style property
			cameraLayer.canvas.setAttribute("style", "position:relative");//default is absolute
			
			//next we set up the mouse position as a tageos.MoverPoint
			//the MouseController Class does many things automatically
			//you can, without any set up, grab the mouse cords via 
			//tabageos.MouseController.mouseX() and .mouseY()
			//or get it in this manner as a tabageos.MoverPoint object;
			mp = tabageos.MouseController.mouseMoverPoint();
			//now when we say mp.whatever we are really saying 
			//tabageos.MouseController.mouseMoverPoint().whatever because MouseController is static.
			
			document.addEventListener("mouseup", handleMouseUp, false);
			document.addEventListener("mousedown", handleMouseDown, false);
			document.addEventListener("mousemove", dragCamera, false);
			
			document.addEventListener("touchstart", handleMouseDown, false);
			document.addEventListener("touchend", handleMouseUp, false);
			document.addEventListener("touchmove", dragCamera, false);
			
			//a tabageos.WayDeterminer is used for collision detection and response.
			var npcWayDeterminer = new tabageos.WayDeterminer(0, root.floor);
			//By default WayDeterminer.wayIsClear uses context.getImageData/putImageData
			//and not all browsers support that.
			//In this example we override the wayIsClear method and make our own collision logic.
			//wayIsClear should return true if the way is clear, 
			//in this case as long as the tile is a normal grass tile: [1,1] the way is clear.
			npcWayDeterminer.wayIsClear = function(x,y) {
				var td = tabageos.BlitMath.getTileDataAt(x,y, map, 32, 32);
				return (td != null && td.value[0] == 1 && td.value[1] == 1);
			};
			
			//set up of the wandering npc
			//there is no AnimatedBlittedTraveler in tbgs.js just Traveler > BlittedTraveler > WDTraveler > TravelerWithGravity.  WDTraveler > RotatingTraveler > RotatingShooter. TravelerWithGravity > SceneryThrower/SceneryObject
			wanderer = new tabageos.WDTraveler(npcWayDeterminer, img, charLayer, null, 164, 64, 32, 32);
			wanderer.fromWidthOffset = 32;//i did not edit the tile set at all, it is spaced for 64 by 64, 
			//yet we're using tiles of 32x32 
			wanderer.fromHeightOffset = 32;//so we give the npc a 32 width and height offset.
			//please see the com.actiontad.geometric.AnimatedBlittedTraveler documention 
			//for more info on how the animationSpecs object works.
			wanderer.animationSpecs = charAnimationSpecs;
			//just about all the tabageos JavaScript classes opperate in much the same way 
			//as their AS3 counterparts, as such you can still use the AS3 documentation for reference.
			wanderer.currentAnimation = "left";
			wanderer.maxForce = 50;
			wanderer.maxSpeed = 8;
			wanderer.animate();//creates the fromRect that we left null during construction.
			
			//this one is not going to do any collision detection just follow a path
			pathFollower = new tabageos.BlittedTraveler(img, charLayer, new tabageos.Rectangle(34*32,10*32,64,64), 164, 64, 32, 32);
			pathFollower.maxForce = 500;
			pathFollower.maxSpeed = 7;
			pathFollower.easeProximity = 100;//tighter easeTo behavior, default is 2.
			pathFollower.fromWidthOffset = 32;
			pathFollower.fromHeightOffset = 32;
			pathFollower.setPathIndex(0);//._pathIndex
			
			timer = new tabageos.IntervalController(16.6,0);//default is 60 frames per second, see IntervalController.js for more info
			//'this' is the object that contains the function. The "loop" function in this example;
			timer.addEventListener(tabageos.IntervalEvent.INTERVAL, "loop", this);
			timer.start();
		}
		function handleMouseDown(e) {
			mouseIsDown = 1;
		}
		function handleMouseUp(e) {
			mouseIsDown = 0;
			camera.releaseDrag();
		}
		function dragCamera(e) {
			if(mouseIsDown == 1) { 
				var point = new tabageos.MoverPoint();
				if(e && e.targetTouches && e.targetTouches.length) {
					var i = 0;
					for (i; i < e.targetTouches.length; i++) {
						var touches = e.targetTouches[i];
						var tx = touches.pageX;
						var ty = touches.pageY;
						point.x = tx; point.y = ty;
					}
				} else {
					point = mp.clone();
				}
				//dragPos:MoverPoint, dragSpeed:int, limitX:int, limitY:int, tweenTime:int, easeType:String
				camera.drag(point,52, 0,0,66, "Linear");
			}
		}
		function loop(e) {
			//update - TimeKeeper has been updated, calling TimeKeeper.keepTime() is no longer needed.
			
			charLayer.context.clearRect(0,0,1280,1280);
			cameraLayer.context.clearRect(0,0,500,500);
			
			wanderer.wander();
			//if the way is not clear go the opposite way
			if(!wanderer._moveX) wanderer._veloc.x = -wanderer._veloc.x;
			if(!wanderer._moveY) wanderer._veloc.y = -wanderer._veloc.y;
			
			wanderer.move();//finalizes and actually performs the moving and collision detection
			wanderer.blitt();//draws the npc onto the charLayer
			
			pathFollower.followPath(path,false);//we could set this to true, 
			//but such a loop makes it circle back to the beginning of the path,
			//so in this example it would go off the actual path and onto the grass to start over -
			pathFollower.move();
			pathFollower.blitt();
			if(pathFollower._pathIndex >= 6) {
				//- so instead when the path is complete we reverse the path points themselves and start over
				//this produces the effect of the char walking back and forth on the same path.
				var reverse = []; var pi;
				while(path.length > 0) {
					reverse.push(path.pop());
				} path = reverse;
				pathFollower._pathIndex = 0;
			}
			//draws from the root and charLayer into the cameraLayer,
			//limiting the draw area to the cameras viewport area.
			camera.justRender();
			
		}

init();
	


tabageos (tbgs.js) is in the full actiontad library; tabageos main page
The array of the scene was easily drawn using the TileSetPainter