Fixes #123

src/client/js/canvas.js

@@ -1,303 +0,0 @@
-define([
-	'js/system/events',
-	'js/resources',
-	'js/rendering/tileOpacity',
-	'js/misc/physics',
-	'js/spriteBuilder'
-], function(
-	events,
-	resources,
-	tileOpacity,
-	physics,
-	spriteBuilder
-) {
-	return {
-		map: null,
-		mapSprite: null,
-
-		//TEST: Remove
-		visMap: null,
-
-		pos: {
-			x: 0,
-			y: 0
-		},
-		moveTo: null,
-		moveSpeed: 0,
-		moveSpeedMax: 1.5,
-		moveSpeedInc: 0.5,
-		moveSpeedFlatten: 16,
-
-		size: {
-			x: 0,
-			y: 0,
-		},
-		layers: {},
-
-		tileSize: {
-			w: 32,
-			h: 32
-		},
-
-		zoneId: null,
-
-		player: null,
-
-		init: function() {
-			events.on('onGetMap', this.onGetMap.bind(this));
-
-			var canvas = $('.canvasContainer canvas');
-
-			canvas.each(function(i, c) {
-				c = $(c);
-
-				if (!c.attr('layer'))
-					return;
-
-				this.layers[c.attr('layer')] = {
-					canvas: c,
-					ctx: c[0].getContext('2d')
-				};
-
-				c[0].width = this.size.x = $('body').width();
-				c[0].height = this.size.y = $('body').height();
-				c.css('z-index', i + 1);
-			}.bind(this));
-
-			this.layers.particles.ctx.globalCompositeOperation = 'lighter';
-
-			$('.canvasContainer')
-				.width(this.size.x)
-				.height(this.size.y);
-		},
-		onGetMap: function(msg) {
-			$('.canvasContainer')
-				.removeClass('visible');
-
-			setTimeout(function() {
-				$('.canvasContainer').addClass('visible');
-			}, 1000);
-			
-			if (this.zoneId != null) {
-				events.emit('onRezone', this.zoneId);
-			}
-
-			this.zoneId = msg.zoneId;
-
-			$('.canvasContainer').addClass('visible');
-
-			this.map = msg.map;
-			this.visMap = msg.visMap;
-
-			physics.init(msg.collisionMap);
-
-			msg.clientObjects.forEach(function(c) {
-				c.zoneId = this.zoneId;
-				events.emit('onGetObject', c);
-			}, this);
-
-			this.mapSprite = spriteBuilder.buildSprite(
-				['tiles', 'walls', 'objects'], [this.map['tiles'], this.map['walls'], this.map['objects']], [0.55, 0.85, 0.85]
-			);
-		},
-		fadeOut: function() {
-			$('.canvasContainer')
-				.removeClass('visible');
-
-			setTimeout(function() {
-				$('.canvasContainer').addClass('visible');
-			}, 1000);
-		},
-		setPosition: function(pos, instant) {
-			if (instant) {
-				this.fadeOut();
-
-				this.moveTo = null;
-				this.pos = pos;
-				return;
-			}
-
-			this.moveTo = pos;
-		},
-		clear: function(filter) {
-			for (var l in this.layers) {
-				var ctx = this.layers[l].ctx;
-
-				ctx.save();
-
-				ctx.setTransform(1, 0, 0, 1, 0, 0);
-				ctx.clearRect(0, 0, this.size.x, this.size.y);
-
-				ctx.restore();
-			}
-		},
-		begin: function() {
-			if (this.moveTo) {
-				var deltaX = this.moveTo.x - this.pos.x;
-				var deltaY = this.moveTo.y - this.pos.y;
-
-				if ((deltaX != 0) || (deltaY != 0)) {
-					var moveSpeed = this.moveSpeed;
-					var distance = Math.max(Math.abs(deltaX), Math.abs(deltaY));
-					if (moveSpeed > distance)
-						moveSpeed = distance;
-
-					if (distance > this.moveSpeedFlatten) {
-						var maxSpeed = this.moveSpeedMax;
-						if (distance > 64) {
-							maxSpeed += (distance - 64) / 1000;
-						}
-						if (this.moveSpeed < maxSpeed)
-							this.moveSpeed += this.moveSpeedInc;
-					}
-
-					deltaX = (deltaX / distance) * moveSpeed;
-					deltaY = (deltaY / distance) * moveSpeed;
-
-					this.pos.x = this.pos.x + (deltaX);
-					this.pos.y = this.pos.y + (deltaY);
-				} else {
-					this.moveSpeed = 0;
-					this.moveTo = null;
-				}
-			}
-
-			for (var l in this.layers) {
-				var ctx = this.layers[l].ctx;
-
-				ctx.save();
-				ctx.translate(-~~this.pos.x, -~~this.pos.y);
-			}
-		},
-		end: function() {
-			for (var l in this.layers) {
-				var ctx = this.layers[l].ctx;
-
-				ctx.restore();
-			}
-		},
-
-		renderMap: function() {
-			if (!this.player)
-				return;
-
-			this.layers['tiles'].ctx.drawImage(
-				this.mapSprite, 
-				this.pos.x, 
-				this.pos.y, 
-				this.size.x, 
-				this.size.y, 
-				this.pos.x, 
-				this.pos.y, 
-				this.size.x, 
-				this.size.y
-			);
-		},
-		renderObject: function(obj) {
-			if (!this.player)
-				return;
-
-			var x = obj.x;
-			var y = obj.y;
-
-			var pX = this.player.x;
-			var pY = this.player.y;
-
-			var dx = Math.abs(x - pX);
-			var dy = Math.abs(y - pY);
-
-			var dxMax = (this.size.x / 64) + 4;
-			var dyMax = (this.size.y / 64) + 4;
-
-			if ((dx > dxMax) || (dy > dyMax))
-				return;
-
-			var sprite = resources.sprites[obj.sheetName].image;
-			var ctx = this.layers[obj.layerName || obj.sheetName].ctx;
-
-			var tileY = ~~(obj.cell / 8);
-			var tileX = obj.cell - (tileY * 8);
-
-			var offsetX = obj.offsetX || 0;
-			var offsetY = obj.offsetY || 0;
-
-			var alpha = 1;
-			if (obj.alpha != null)
-				alpha = obj.alpha;
-
-			ctx.globalAlpha = alpha;
-
-			var size = obj.size || 32;
-
-			if (obj.flipX) {
-				ctx.save();
-				ctx.scale(-1, 1);
-				ctx.drawImage(
-					sprite,
-					tileX * 32,
-					tileY * 32,
-					32,
-					32, 
-					-(x * 32) - (~~(offsetX / 4) * 4),
-					(y * 32) + (~~(offsetY / 4) * 4), 
-					-32,
-					32
-				);
-				ctx.restore();
-			} 
-			else if (obj.flipY) {
-				ctx.save();
-				ctx.scale(1, -1);
-				ctx.drawImage(
-					sprite,
-					tileX * 32,
-					tileY * 32,
-					32,
-					32, 
-					(x * 32) - (~~(offsetX / 4) * 4),
-					-(y * 32) + (~~(offsetY / 4) * 4), 
-					32,
-					-32
-				);
-				ctx.restore();
-			} else
-				ctx.drawImage(sprite, tileX * size, tileY * size, size, size, (x * 32) + (~~(offsetX / 4) * 4), (y * 32) + (~~(offsetY / 4) * 4), size, size);
-		},
-		renderRect: function(layer, x, y, color) {
-			if (!this.player)
-				return;
-
-			var pX = this.player.x;
-			var pY = this.player.y;
-
-			var dx = Math.abs(x - pX);
-			var dy = Math.abs(y - pY);
-
-			var dxMax = (this.size.x / 64) + 4;
-			var dyMax = (this.size.y / 64) + 4;
-
-			if ((dx > dxMax) || (dy > dyMax))
-				return;
-
-			var ctx = this.layers[layer].ctx;
-			ctx.fillStyle = color;
-			ctx.fillRect(x * 32, y * 32, 32, 32);
-		},
-		renderText: function(layer, text, x, y) {
-			var ctx = this.layers[layer].ctx;
-			ctx.fillStyle = 'white';
-
-			ctx.fillText(text, x, y);
-		},
-		renderOutlineText: function(layer, text, x, y, centerX) {
-			var ctx = this.layers[layer].ctx;
-			ctx.lineWidth = 2;
-
-			if (centerX)
-				x -= (ctx.measureText(text).width / 2);
-
-			ctx.strokeText(text, x, y);
-			ctx.fillText(text, x, y);
-		}
-	};
-});

src/client/js/components/animation.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	renderer
 ) {

src/client/js/components/attackAnimation.js

@@ -1,6 +1,6 @@
 define([
 	'js/rendering/effects',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	effects,
 	renderer

src/client/js/components/chatter.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	renderer
 ) {

src/client/js/components/effects.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	renderer
 ) {

src/client/js/components/flash.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	renderer
 ) {

src/client/js/components/light.js

@@ -1,9 +1,7 @@
 define([
-	'js/canvas',
 	'js/rendering/effects',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
-	canvas,
 	effects,
 	renderer
 ) {
@@ -85,41 +83,6 @@ define([
 
 		},
 
-		render: function() {
-			return;
-			if (this.lightCd > 0) {
-				this.lightCd--;
-			} else {
-				this.lightCd = 5;
-			}
-
-			ctx = canvas.layers.particles.ctx;
-			var color = 'rgba(255, 255, 125, $O$)';
-
-			var x = this.obj.x;
-			var y = this.obj.y;
-
-			var range = this.range;
-			var halfRange = (range - 1) / 2;
-
-			for (var i = 0; i < range; i++) {
-				for (var j = 0; j < range; j++) {
-					var o = range - (Math.abs(halfRange - i) + Math.abs(halfRange - j));
-					o /= 6;
-
-					var n = i + '|' + j;
-
-					if (this.lightCd == 0) {
-						if (Math.random() < 0.5)
-							this.lightO[n] = (Math.random() * (o * o));
-					}
-
-					o = o * (0.4 + this.lightO[n]);
-					canvas.renderRect('effects', (x + i - halfRange), (y + j - halfRange), color.replace('$O$', o));
-				}
-			}
-		},
-
 		destroy: function() {
 			var keys = Object.keys(this.emitters);
 			for (var i = 0; i < keys.length; i++) {

src/client/js/components/mouseMover.js

@@ -1,6 +1,6 @@
 define([
 	'js/system/events',
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/system/client',
 	'js/input',
 	'js/objects/objects'

src/client/js/components/particles.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	renderer
 ) {

src/client/js/components/pather.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/system/events'
 ], function(
 	renderer,

src/client/js/components/player.js

@@ -1,5 +1,5 @@
 define([
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/system/events'
 ], function(
 	renderer,

src/client/js/components/projectile.js

@@ -1,9 +1,7 @@
 define([
-	'js/rendering/effects',
-	'js/canvas'
+	'js/rendering/effects'
 ], function(
-	effects,
-	canvas
+	effects
 ) {
 	var scale = 40;
 

src/client/js/components/spellbook.js

@@ -1,6 +1,6 @@
 define([
 	'js/system/client',
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/system/events'
 ], function(
 	client,

src/client/js/components/stats.js

@@ -1,6 +1,6 @@
 define([
 	'js/system/events',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	events,
 	renderer

src/client/js/input.js

@@ -1,6 +1,6 @@
 define([
 	'js/system/events',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	events,
 	renderer

src/client/js/main.js

@@ -1,7 +1,7 @@
 define([
 	'js/system/client',
 	'ui/factory',
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/objects/objects',
 	'js/rendering/effects',
 	'js/rendering/numbers',

src/client/js/objects/objBase.js

@@ -1,6 +1,6 @@
 define([
 	'js/components/components',
-	'js/renderer',
+	'js/rendering/renderer',
 	'js/system/events'
 ], function(
 	components,

src/client/js/objects/objects.js

@@ -1,7 +1,7 @@
 define([
 	'js/objects/objBase',
 	'js/system/events',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	objBase,
 	events,

src/client/js/rendering/effects.js

@@ -1,7 +1,7 @@
 define([
-	'js/canvas'
+	
 ], function(
-	canvas
+	
 ) {
 	return {
 		list: [],
@@ -45,53 +45,6 @@ define([
 
 				l.renderManual();
 			}
-
-			//this.renderParticles(this.particles);
-		},
-		renderParticles: function(particles) {
-			var particles = particles;
-			var pLen = particles.length;
-
-			var ctx = canvas.layers.particles.ctx;
-
-			for (var i = 0; i < pLen; i++) {
-				var p = particles[i];
-
-				p.ttl--;
-				if (p.ttl == 0) {
-					particles.splice(i, 1);
-					i--;
-					pLen--;
-					continue;
-				}
-
-				p.x += p.dx;
-				p.y += p.dy;
-
-				var size = p.size;
-				var half = size / 2;
-
-				var o = (p.ttl / p.ttlMax) * p.a;
-
-				var x = ~~((p.x - half) / 4) * 4;
-				var y = ~~((p.y - half) / 4) * 4;
-
-				size = ~~(size / 4) * 4;
-
-				if (p.grow)
-					p.size += p.grow;
-				else if (p.shrink)
-					p.size -= p.shrink;
-
-				if (p.stroke) {
-					ctx.lineWidth = p.stroke;
-					ctx.strokeStyle = 'rgba(' + p.r + ', ' + p.g + ', ' + p.b + ', ' + o + ')';
-					ctx.strokeRect(x, y, size, size);
-				} else {
-					ctx.fillStyle = 'rgba(' + p.r + ', ' + p.g + ', ' + p.b + ', ' + o + ')';
-					ctx.fillRect(x, y, size, size);
-				}
-			}
 		}
 	};
 });

src/client/js/rendering/numbers.js

@@ -1,7 +1,7 @@
 define([
 	'js/system/events',
 	'js/objects/objects',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	events,
 	objects,

src/client/js/renderer.js → src/client/js/rendering/renderer.js

@@ -5,7 +5,8 @@ define([
 	'js/rendering/effects',
 	'js/rendering/tileOpacity',
 	'js/rendering/particles',
-	'js/rendering/shaders/outline'
+	'js/rendering/shaders/outline',
+	'js/rendering/spritePool'
 ], function(
 	resources,
 	events,
@@ -13,7 +14,8 @@ define([
 	effects,
 	tileOpacity,
 	particles,
-	shaderOutline
+	shaderOutline,
+	spritePool
 ) {
 	var scale = 40;
 	var scaleMult = 5;
@@ -32,18 +34,14 @@ define([
 			hiders: null
 		},
 
-		chunkSize: 30,
-
 		titleScreen: false,
 
-		pad: {
-			x: 10,
-			y: 10
-		},
-
 		width: 0,
 		height: 0,
 
+		showTilesW: 0,
+		showTilesH: 0,
+
 		pos: {
 			x: 0,
 			y: 0
@@ -52,15 +50,18 @@ define([
 		moveSpeed: 0,
 		moveSpeedMax: 1.50,
 		moveSpeedInc: 0.5,
-		moveSpeedFlatten: 16,
 
 		zoneId: null,
 
 		textures: {},
 		textureCache: {},
 
+		sprites: [],
+
 		lastTick: null,
 
+		hiddenRooms: null,
+
 		init: function() {
 			PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO;
 			PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
@@ -72,8 +73,8 @@ define([
 			this.width = $('body').width();
 			this.height = $('body').height();
 
-			this.pad.x = ~~((this.width / 2) / 32);
-			this.pad.y = ~~((this.height / 2) / 32);
+			this.showTilesW = Math.ceil((this.width / scale) / 2) + 3;
+			this.showTilesH = Math.ceil((this.height / scale) / 2) + 3;
 
 			this.renderer = pixi.autoDetectRenderer(this.width, this.height, {
 				backgroundColor: 0x2d2136
@@ -89,7 +90,7 @@ define([
 			var layers = this.layers;
 			Object.keys(layers).forEach(function(l) {
 				if (l == 'tileSprites') {
-					layers[l] = new pixi.particles.ParticleContainer(2500);
+					layers[l] = new pixi.Container();
 					layers[l].layer = 'tiles';
 				} else
 					layers[l] = new pixi.Container();
@@ -186,6 +187,9 @@ define([
 			this.width = $('body').width() * zoom;
 			this.height = $('body').height() * zoom;
 
+			this.showTilesW = Math.ceil((this.width / scale) / 2) + 3;
+			this.showTilesH = Math.ceil((this.height / scale) / 2) + 3;
+
 			this.renderer.resize(this.width, this.height);
 			if (window.player) {
 				this.setPosition({
@@ -224,7 +228,7 @@ define([
 			var container = this.layers.tileSprites;
 			this.stage.removeChild(container);
 
-			this.layers.tileSprites = container = new pixi.particles.ParticleContainer(2500);
+			this.layers.tileSprites = container = new pixi.Container();
 			container.layer = 'tiles';
 			this.stage.addChild(container);
 
@@ -279,18 +283,18 @@ define([
 			var alpha = tileOpacity.map(c);
 			var canFlip = tileOpacity.canFlip(c);
 
-			var tile = new pixi.Sprite(this.getTexture('sprites', c + (0 * 160)));
+			var tile = new pixi.Sprite(this.getTexture('sprites', c));
 
 			tile.alpha = alpha;
-			tile.position.x = i * 8;
-			tile.position.y = j * 8;
-			tile.width = 8;
-			tile.height = 8;
+			tile.position.x = i * scale;
+			tile.position.y = j * scale;
+			tile.width = scale;
+			tile.height = scale;
 
 			if (canFlip) {
 				if (Math.random() < 0.5) {
-					tile.position.x += 8;
-					tile.scale.x = -1;
+					tile.position.x += scale;
+					tile.scale.x = -scaleMult;
 				}
 			}
 
@@ -301,10 +305,37 @@ define([
 			this.titleScreen = false;
 			physics.init(msg.collisionMap);
 
-			var map = msg.map;
+			var map = this.map = msg.map;
 			var w = this.w = map.length;
 			var h = this.h = map[0].length;
 
+			this.clean();
+			spritePool.clean();
+
+			this.buildHiddenRooms(msg);
+
+			this.sprites = _.get2dArray(w, h, 'array');
+
+			this.stage.children.sort(function(a, b) {
+				if (a.layer == 'tiles')
+					return -1;
+				else if (b.layer == 'tiles')
+					return 1;
+				else
+					return 0;
+			}, this);
+
+			if (this.zoneId != null)
+				events.emit('onRezone', this.zoneId);
+			this.zoneId = msg.zoneId;
+
+			msg.clientObjects.forEach(function(c) {
+				c.zoneId = this.zoneId;
+				events.emit('onGetObject', c);
+			}, this);
+		},
+
+		buildHiddenRooms: function(msg) {
 			var hiddenWalls = msg.hiddenWalls;
 			var hiddenTiles = msg.hiddenTiles;
 
@@ -312,7 +343,6 @@ define([
 			this.hiddenRooms.forEach(function(h) {
 				h.container = new pixi.Container();
 				this.layers.hiders.addChild(h.container);
-
 				this.buildRectangle({
 					x: h.x * scale,
 					y: h.y * scale,
@@ -321,72 +351,93 @@ define([
 					color: 0x2d2136,
 					parent: h.container
 				});
-
 				for (var i = h.x; i < h.x + h.width; i++) {
 					for (var j = h.y; j < h.y + h.height; j++) {
-						var cell = hiddenTiles[i][j];
-						if (cell != 0) {
-							var tile = this.buildTile(cell - 1, i, j);
+						[hiddenTiles, hiddenWalls].forEach(function(k) {
+							var cell = k[i][j];
+							if (cell == 0)
+								return;
 
-							tile.position.x *= scaleMult;
-							tile.position.y *= scaleMult;
+							var tile = this.buildTile(cell - 1, i, j);
 							tile.width = scale;
 							tile.height = scale;
-
 							h.container.addChild(tile);
-						}
-
-						cell = hiddenWalls[i][j];
-						if (cell == 0)
-							continue;
-
-						var tile = this.buildTile(cell - 1, i, j);
-
-						tile.position.x *= scaleMult;
-						tile.position.y *= scaleMult;
-						tile.width = scale;
-						tile.height = scale;
-
-						h.container.addChild(tile);
+						}, this);
 					}
 				}
 			}, this);
+		},
+		hideHiders: function() {
+			var player = window.player;
+			if (!player)
+				return;
 
-			var padding = msg.padding ? JSON.parse(msg.padding) : {};
+			var x = player.x;
+			var y = player.y;
 
-			this.clean();
-			var container = new pixi.particles.ParticleContainer(270000);
+			var hiddenRooms = this.hiddenRooms;
+			var hLen = hiddenRooms.length;
+			for (var i = 0; i < hLen; i++) {
+				var h = hiddenRooms[i];
+				h.container.visible = (
+					(x < h.x) ||
+					(x >= h.x + h.width) ||
+					(y < h.y) ||
+					(y >= h.y + h.height)
+				);
+			}
+		},
 
-			var isPadX = false;
-			var isPadY = false;
-			var padX = 0;
-			var padY = 0;
+		setPosition: function(pos, instant) {
+			pos.x += 16;
+			pos.y += 16;
 
-			if (!msg.padding) {
-				padX = 0;
-				padY = 0;
-			}
+			this.hideHiders();
 
-			var chunkSize = this.chunkSize;
+			if (instant) {
+				this.moveTo = null;
+				this.pos = pos;
+				this.stage.x = -~~this.pos.x;
+				this.stage.y = -~~this.pos.y;
+			} else
+				this.moveTo = pos;
 
-			for (var i = -padX; i < w + padX; i++) {
-				if ((i < 0) || (i >= w))
-					isPadX = true;
-				else
-					isPadX = false;
+			this.updateSprites();
+		},
+
+		updateSprites: function() {
+			var player = window.player;
+			if (!player)
+				return;
+
+			var w = this.w;
+			var h = this.h;
+			var x = player.x;
+			var y = player.y;
+			var sprites = this.sprites;
+			var map = this.map;
+			var container = this.layers.tileSprites;
+
+			var sw = this.showTilesW;
+			var sh = this.showTilesH;
 
-				for (var j = -padY; j < h + padY; j++) {
-					if ((j < 0) || (j >= h))
-						isPadY = true;
-					else
-						isPadY = false;
+			var lowX = Math.max(0, x - sw);
+			var lowY = Math.max(0, y - sh);
+			var highX = Math.min(w - 1, x + sw);
+			var highY = Math.min(h - 1, y + sh);
 
-					var cell = null;
+			var addedSprite = false;
 
+			for (var i = lowX; i < highX; i++) {
+				for (var j = lowY; j < highY; j++) {
 					cell = map[i][j];
 					if (!cell)
 						continue;
-					if (!cell.split)
+
+					var rendered = sprites[i][j];
+					if (rendered.length > 0)
+						continue;
+					else if (!cell.split)
 						cell += '';
 					cell = cell.split(',');
 					for (var k = 0; k < cell.length; k++) {
@@ -396,91 +447,59 @@ define([
 
 						c--;
 
-						var tile = this.buildTile(c, i, j);
+						var flipped = '';
+						if (tileOpacity.canFlip(c)) {
+							if (Math.random() < 0.5)
+								flipped = 'flip';
+						}
+
+						var tile = spritePool.getSprite(flipped + c);
+						if (!tile) {
+							tile = this.buildTile(c, i, j);
+							container.addChild(tile);
+							tile.type = c;
+							tile.sheetNum = tileOpacity.getSheetNum(c);
+							addedSprite = true;
+						} else {
+							tile.position.x = i * scale;
+							tile.position.y = j * scale;
+							if (flipped != '')
+								tile.position.x += scale;
+							tile.visible = true;
+						}
 
-						container.addChild(tile);
+						rendered.push(tile);
 					}
 				}
 			}
 
-			var renderTexture = pixi.RenderTexture.create(w * 8, h * 8);
-			this.renderer.render(container, renderTexture);
-
-			var cw = w / this.chunkSize;
-			var ch = h / this.chunkSize;
-
-			for (var i = 0; i < cw; i++) {
-				var tw = Math.min(this.chunkSize, w - (i * chunkSize));
-
-				for (var j = 0; j < ch; j++) {
-					var th = Math.min(this.chunkSize, h - (j * chunkSize));
-
-					var texture = new pixi.Texture(renderTexture, new pixi.Rectangle(i * this.chunkSize * 8, j * this.chunkSize * 8, tw * 8, th * 8));
+			lowX = Math.max(0, lowX - 10);
+			lowY = Math.max(0, lowY - 10);
+			highX = Math.min(w - 1, highX + 10);
+			highY = Math.min(h - 1, highY + 10);
 
-					var sprite = new pixi.Sprite(texture);
-					sprite.position.x = i * this.chunkSize * scale;
-					sprite.position.y = j * this.chunkSize * scale;
-					sprite.width = tw * scale;
-					sprite.height = th * scale;
+			for (var i = lowX; i < highX; i++) {
+				var outside = ((i >= x - sw) && (i < x + sw));
+				for (var j = lowY; j < highY; j++) {
+					if ((outside) && (j >= y - sh) && (j < y + sh))
+						continue;
 
-					this.layers.tileSprites.addChild(sprite);
+					var list = sprites[i][j];
+					var lLen = list.length;
+					for (var k = 0; k < lLen; k++) {
+						var sprite = list[k];
+						sprite.visible = false;
+						spritePool.store(sprite);
+					}
+					sprites[i][j] = [];
 				}
 			}
 
-			this.stage.children.sort(function(a, b) {
-				if (a.layer == 'tiles')
-					return -1;
-				else if (b.layer == 'tiles')
-					return 1;
-				else
-					return 0;
-			}, this);
-
-			if (this.zoneId != null)
-				events.emit('onRezone', this.zoneId);
-			this.zoneId = msg.zoneId;
-
-			msg.clientObjects.forEach(function(c) {
-				c.zoneId = this.zoneId;
-				events.emit('onGetObject', c);
-			}, this);
-		},
-
-		setPosition: function(pos, instant) {
-			pos.x += 16;
-			pos.y += 16;
-
-			this.hideHiders();
-
-			if (instant) {
-				this.moveTo = null;
-				this.pos = pos;
-				this.stage.x = -~~this.pos.x;
-				this.stage.y = -~~this.pos.y;
-				return;
-			}
-
-			this.moveTo = pos;
-		},
-
-		hideHiders: function() {
-			var player = window.player;
-			if (!player)
-				return;
-
-			var x = player.x;
-			var y = player.y;
-
-			var hiddenRooms = this.hiddenRooms;
-			var hLen = hiddenRooms.length;
-			for (var i = 0; i < hLen; i++) {
-				var h = hiddenRooms[i];
-				h.container.visible = (
-					(x < h.x) ||
-					(x >= h.x + h.width) ||
-					(y < h.y) ||
-					(y >= h.y + h.height)
-				);
+			//Reorder
+			if (addedSprite) {
+				container.children.sort(function(a, b) {
+					return (a.sheetNum - b.sheetNum);
+				});
 			}
 		},
 

src/client/js/rendering/spritePool.js

@@ -0,0 +1,36 @@
+define([
+	
+], function(
+	
+) {
+	return {
+		pool: {},
+
+		clean: function() {
+			this.pool = {};
+		},
+
+		getSprite: function(type) {
+			var list = this.pool[type];
+			if (!list)
+				return null;
+			else if (list.length == 0)
+				return null;
+			else
+				return list.pop();
+		},
+
+		store: function(sprite) {
+			var pool = this.pool;
+			var type = sprite.type;
+			if (sprite.scale.x < 0)
+				type = 'flip' + type;
+			var list = pool[type];
+			if (!list) {
+				list = pool[type] = [];
+			}
+
+			list.push(sprite);
+		}
+	};
+});

src/client/js/rendering/spriteShader.js

@@ -1,111 +0,0 @@
-define([
-	'js/resources'
-], function(
-	resources
-) {
-	var canvas = $('<canvas></canvas>').appendTo('body').hide();
-
-	return {
-		outline: function(imgName, offsetX, offsetY, imgW, imgH, ur, ug, ub, ua) {
-			var img = resources.sprites[imgName].image;
-
-			canvas[0].width = imgW;
-			canvas[0].height = imgH;
-
-			var ctx = canvas[0].getContext('2d');
-			ctx.drawImage(img, offsetX, offsetY, imgW, imgH, 2, 2, imgW, imgH);
-
-			var imgData = ctx.getImageData(0, 0, imgW, imgH);
-			var pixels = imgData.data;
-
-			var secondData = ctx.getImageData(0, 0, imgW, imgH);
-			var secondPixels = secondData.data;
-
-			var newData = ctx.createImageData(imgW * 4, imgH * 4);
-			var newPixels = newData.data;
-
-			var fillPixels = function(x, y, r, g, b, a) {
-				var index = ((y * imgW * 4) + x) * 4;
-
-				for (var i = 0; i < 4; i++) {
-					for (var j = 0; j < 4; j++) {
-						var newIndex = index + (i * 4) + (j * (imgW * 4 * 4));
-						newPixels[newIndex] = r;
-						newPixels[newIndex + 1] = g;
-						newPixels[newIndex + 2] = b;
-						newPixels[newIndex + 3] = a;
-					}
-				}
-			}
-
-			for (var i = 0; i < imgW; i++) {
-				for (var j = 0; j < imgW; j++) {
-					var index = ((j * imgW) + i) * 4;
-
-					var transparent = (pixels[index + 3] == 0);
-					if (transparent) {
-						var touchPixel = false;
-						if (i > 0)
-							touchPixel = (pixels[index - 1] > 0);
-						if ((!touchPixel) && (j > 0))
-							touchPixel = (pixels[index - (imgW * 4) + 3] > 0);
-						if ((!touchPixel) && (i < imgW - 1))
-							touchPixel = (pixels[index + 7] > 0);
-						if ((!touchPixel) && (j < imgH - 1))
-							touchPixel = (pixels[index + (imgW * 4) + 3] > 0);
-
-						if (touchPixel) {
-							secondPixels[index] = 0;
-							secondPixels[index + 1] = 0;
-							secondPixels[index + 2] = 0;
-							secondPixels[index + 3] = 255;
-						}
-					}
-				}
-			}
-
-			for (var i = 0; i < imgW; i++) {
-				for (var j = 0; j < imgW; j++) {
-					var index = ((j * imgW) + i) * 4;
-
-					var transparent = (secondPixels[index + 3] == 0);
-					if (transparent) {
-						var touchPixel = false;
-						if (i > 0)
-							touchPixel = (secondPixels[index - 1] > 0)
-						if ((!touchPixel) && (j > 0))
-							touchPixel = (secondPixels[index - (imgW * 4) + 3] > 0)
-						if ((!touchPixel) && (i < imgW - 1))
-							touchPixel = (secondPixels[index + 7] > 0)
-						if ((!touchPixel) && (j < imgH - 1))
-							touchPixel = (secondPixels[index + (imgW * 4) + 3] > 0)
-
-						if (touchPixel)
-							fillPixels(i * 4, j * 4, ur, ug, ub, ua);
-
-						continue;
-					}
-
-					var r = secondPixels[index];
-					var g = secondPixels[index + 1];
-					var b = secondPixels[index + 2];
-					var a = secondPixels[index + 3];
-					if ((r + g + b == 0) && (a == 255)) {
-						a = 0;
-					}
-
-					fillPixels(i * 4, j * 4, r, g, b, a);
-				}
-			}
-
-			canvas[0].width = imgW * 4;
-			canvas[0].height = imgH * 4;
-
-			ctx.putImageData(newData, 0, 0);
-
-			var url = canvas[0].toDataURL();
-
-			return url;
-		}	
-	};
-});

src/client/js/rendering/tileOpacity.js

@@ -85,6 +85,15 @@ define([
 			120, 122								//Wall-mounted plants
 		],
 
+		getSheetNum: function(tile) {
+			if (tile < 192)
+				return 0;
+			else if (tile < 384)
+				return 1;
+			else
+				return 2;
+		},
+
 		map: function(tile) {
 			var sheetNum;
 

src/client/ui/templates/inventory/inventory.js

@@ -5,8 +5,7 @@ define([
 	'css!ui/templates/inventory/styles',
 	'html!ui/templates/inventory/templateItem',
 	'html!ui/templates/inventory/templateTooltip',
-	'js/input',
-	'js/rendering/spriteShader'
+	'js/input'
 ], function(
 	events,
 	client,
@@ -14,8 +13,7 @@ define([
 	styles,
 	tplItem,
 	tplTooltip,
-	input,
-	spriteShader
+	input
 ) {
 	var qualityColors = [{
 		r: 252,

src/client/ui/templates/login/login.js

@@ -4,7 +4,7 @@ define([
 	'ui/factory',
 	'html!ui/templates/login/template',
 	'css!ui/templates/login/styles',
-	'js/renderer'
+	'js/rendering/renderer'
 ], function(
 	events,
 	client,

src/client/ui/templates/options/options.js

@@ -2,7 +2,7 @@ define([
 	'js/system/events',
 	'html!ui/templates/options/template',
 	'css!ui/templates/options/styles',
-	'js/renderer',
+	'js/rendering/renderer',
 	'ui/factory',
 	'js/objects/objects',
 	'js/system/client'

src/server/config/maps/city/map.json

@@ -59,7 +59,7 @@
          "name":"hiddenWalls",
          "opacity":1,
          "type":"tilelayer",
-         "visible":true,
+         "visible":false,
          "width":240,
          "x":0,
          "y":0
@@ -2447,7 +2447,6 @@
  "tileheight":8,
  "tilesets":[
         {
-         "columns":8,
          "firstgid":1,
          "image":"..\/..\/..\/..\/client\/images\/walls.png",
          "imageheight":192,
@@ -2515,7 +2514,6 @@
          "tilewidth":8
         }, 
         {
-         "columns":8,
          "firstgid":193,
          "image":"..\/..\/..\/..\/client\/images\/mobs.png",
          "imageheight":80,
@@ -2539,7 +2537,6 @@
          "tilewidth":8
         }, 
         {
-         "columns":8,
          "firstgid":273,
          "image":"..\/..\/..\/..\/client\/images\/tiles.png",
          "imageheight":192,
@@ -2651,7 +2648,6 @@
          "tilewidth":8
         }, 
         {
-         "columns":8,
          "firstgid":465,
          "image":"..\/..\/..\/..\/client\/images\/objects.png",
          "imageheight":160,
@@ -2675,7 +2671,6 @@
          "tilewidth":8
         }, 
         {
-         "columns":8,
          "firstgid":625,
          "image":"..\/..\/..\/..\/client\/images\/bigObjects.png",
          "imageheight":240,