Rendering maps(Still very buggy)

index.html

@@ -14,9 +14,11 @@
 		<script src="src/config.js"></script>
 		<script src="src/config/animations.js"></script>
 		<script src="src/config/image_files.js"></script>
+		<script src="src/config/maps.js"></script>
 
 		<!-- Loads Engine components Here -->
 		<script src="src/engine/preload_files.js"></script>
+		<script src="src/engine/prerender_maps.js"></script>
 
 		<!-- Loads Components Here -->
 		<script src="src/components/sprite.js"></script>

main.js

@@ -3,25 +3,31 @@
 'use strict';
 
 var entities;
+var map = {};
 
 function init(){
 	Game.context = Game.canvas.getContext('2d');
-	preload();
-	entities = _.range(100).map(function(){return {};});
+	entities = _.range(1000).map(function(){return {};});
+	Game.components.position(map, 0,0);
+	Game.components.sprite(map, 'initial');
+
 	_.each(entities, function(e){ 
 		Game.components.position(e, ((Math.random()*10)|0)*16, ((Math.random()*10)|0)*16);
 		Game.components.frame(e, ((Math.random()*8)|0)*16, ((Math.random()*4)|0)*16, 16, 16);
 		Game.components.frame_animation(e, 0, 5, Game.config.animations.blowhard_spritesheet.walk_down);
-		Game.components.velocity(e, 0, 0);
-		Game.components.acceleration(e, Math.random()*1, Math.random()*1);
+		Game.components.velocity(e, 0, 1);
+		// Game.components.acceleration(e, Math.random()*1, Math.random()*1);
 		Game.components.sprite(e, "blowhard_spritesheet");
 	});
-// 
+	entities[0] = map;	
 	preload(gameLoop);
 }
 
 function preload(done){
-	Game.engine.preloadFiles(Game.config.image_files, done);
+	Game.engine.preloadFiles(Game.config.image_files, function(){
+		Game.engine.prerenderMaps();
+		done();
+	});
 }
 
 function gameLoop(){

src/config/maps.js

@@ -7,10 +7,19 @@ Game.config.maps = {
 			height: 16,
 		},
 		int_to_tile:{
-			'0': [32,48,16,16],
-			'1': [64,48,16,16]
+			'0': [32,48],
+			'1': [64,48]
 		},
 		tile_map: [
+			[0,1,0,0,0,0,0,1,0,0,0,0,0,0],
+			[0,1,0,0,0,0,0,1,0,0,0,0,0,0],
+			[0,1,0,0,0,0,0,1,0,0,0,0,0,0],
+			[0,1,0,1,1,1,1,1,1,1,1,1,1,1],
+			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
+			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
+			[0,1,0,0,0,0,1,0,0,0,1,0,0,0],
+			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
+			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
 			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
 			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],
 			[0,1,0,0,0,0,0,0,0,0,0,0,0,0],

src/engine/prerender_maps.js

@@ -0,0 +1,42 @@
+(function(self){
+	self.engine = self.engine || {};
+	var maps = self.config.maps;
+	self.engine.prerenderMaps = function(){
+		var map, tile, tileMap, 
+		x, y,
+		canvas,
+		context,
+		image;
+
+		for(var mapName in maps){
+			map = maps[mapName];
+			image = self.images[map.spritesheet];
+			tile = map.tile;
+			tileMap = map.tile_map;
+
+			canvas = document.createElement("canvas");
+			document.getElementsByTagName('body')[0].appendChild(canvas);
+			canvas.width = tileMap.length * tile.height;
+			canvas.height = tileMap[0].length * tile.width;
+			context = canvas.getContext('2d');
+
+			context.fillRect(0,0,canvas.width, canvas.height);
+
+			for(y = 0; y < tileMap.length; y++){
+				for (x = 0; x < tileMap[y].length; x++){
+					tile.x = map.int_to_tile[tileMap[y][x]][0]
+					tile.y = map.int_to_tile[tileMap[y][x]][1]
+					console.log(x*tile.width, y*tile.height);
+					context.drawImage(
+						image,
+						tile.x, tile.y, tile.width, tile.height,
+						x*tile.width, y*tile.height,
+						tile.width, tile.height
+					);
+				}
+			}
+
+			(self.images || (self.images = {}))[mapName] = canvas;
+		}
+	};
+})(Game);

src/systems/draw.js

@@ -15,6 +15,7 @@
 				frame.width, frame.height
 			);
 		}else{
+			console.log();
 			self.context.drawImage(image, position.x, position.y);
 		}
 	};