diff --git a/src/client/js/canvas.js b/src/client/js/canvas.js deleted file mode 100644 index 685af4af..00000000 --- a/src/client/js/canvas.js +++ /dev/null @@ -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); - } - }; -}); \ No newline at end of file diff --git a/src/client/js/components/animation.js b/src/client/js/components/animation.js index 2f0090ed..69bf2de2 100644 --- a/src/client/js/components/animation.js +++ b/src/client/js/components/animation.js @@ -1,5 +1,5 @@ define([ - 'js/renderer' + 'js/rendering/renderer' ], function( renderer ) { diff --git a/src/client/js/components/attackAnimation.js b/src/client/js/components/attackAnimation.js index c3cb5807..1218b77d 100644 --- a/src/client/js/components/attackAnimation.js +++ b/src/client/js/components/attackAnimation.js @@ -1,6 +1,6 @@ define([ 'js/rendering/effects', - 'js/renderer' + 'js/rendering/renderer' ], function( effects, renderer diff --git a/src/client/js/components/chatter.js b/src/client/js/components/chatter.js index 108d4eed..e77ae72e 100644 --- a/src/client/js/components/chatter.js +++ b/src/client/js/components/chatter.js @@ -1,5 +1,5 @@ define([ - 'js/renderer' + 'js/rendering/renderer' ], function( renderer ) { diff --git a/src/client/js/components/effects.js b/src/client/js/components/effects.js index 92500761..af77bc9b 100644 --- a/src/client/js/components/effects.js +++ b/src/client/js/components/effects.js @@ -1,5 +1,5 @@ define([ - 'js/renderer' + 'js/rendering/renderer' ], function( renderer ) { diff --git a/src/client/js/components/flash.js b/src/client/js/components/flash.js index 47a06303..b9e30dd6 100644 --- a/src/client/js/components/flash.js +++ b/src/client/js/components/flash.js @@ -1,5 +1,5 @@ define([ - 'js/renderer' + 'js/rendering/renderer' ], function( renderer ) { diff --git a/src/client/js/components/light.js b/src/client/js/components/light.js index b782cb67..d200e6cb 100644 --- a/src/client/js/components/light.js +++ b/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++) { diff --git a/src/client/js/components/mouseMover.js b/src/client/js/components/mouseMover.js index c5477281..a48dd30b 100644 --- a/src/client/js/components/mouseMover.js +++ b/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' diff --git a/src/client/js/components/particles.js b/src/client/js/components/particles.js index e3aaa8c9..a8a2607f 100644 --- a/src/client/js/components/particles.js +++ b/src/client/js/components/particles.js @@ -1,5 +1,5 @@ define([ - 'js/renderer' + 'js/rendering/renderer' ], function( renderer ) { diff --git a/src/client/js/components/pather.js b/src/client/js/components/pather.js index 522e6752..a38e8e22 100644 --- a/src/client/js/components/pather.js +++ b/src/client/js/components/pather.js @@ -1,5 +1,5 @@ define([ - 'js/renderer', + 'js/rendering/renderer', 'js/system/events' ], function( renderer, diff --git a/src/client/js/components/player.js b/src/client/js/components/player.js index fca02000..f19937ed 100644 --- a/src/client/js/components/player.js +++ b/src/client/js/components/player.js @@ -1,5 +1,5 @@ define([ - 'js/renderer', + 'js/rendering/renderer', 'js/system/events' ], function( renderer, diff --git a/src/client/js/components/projectile.js b/src/client/js/components/projectile.js index d5cc44bb..407ec935 100644 --- a/src/client/js/components/projectile.js +++ b/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; diff --git a/src/client/js/components/spellbook.js b/src/client/js/components/spellbook.js index 3c863d15..9d0d98ec 100644 --- a/src/client/js/components/spellbook.js +++ b/src/client/js/components/spellbook.js @@ -1,6 +1,6 @@ define([ 'js/system/client', - 'js/renderer', + 'js/rendering/renderer', 'js/system/events' ], function( client, diff --git a/src/client/js/components/stats.js b/src/client/js/components/stats.js index 18a817d3..761de00c 100644 --- a/src/client/js/components/stats.js +++ b/src/client/js/components/stats.js @@ -1,6 +1,6 @@ define([ 'js/system/events', - 'js/renderer' + 'js/rendering/renderer' ], function( events, renderer diff --git a/src/client/js/input.js b/src/client/js/input.js index e5b00f95..827d380e 100644 --- a/src/client/js/input.js +++ b/src/client/js/input.js @@ -1,6 +1,6 @@ define([ 'js/system/events', - 'js/renderer' + 'js/rendering/renderer' ], function( events, renderer diff --git a/src/client/js/main.js b/src/client/js/main.js index f2aa49b1..c56f1678 100644 --- a/src/client/js/main.js +++ b/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', diff --git a/src/client/js/objects/objBase.js b/src/client/js/objects/objBase.js index bf81f942..c6321c9d 100644 --- a/src/client/js/objects/objBase.js +++ b/src/client/js/objects/objBase.js @@ -1,6 +1,6 @@ define([ 'js/components/components', - 'js/renderer', + 'js/rendering/renderer', 'js/system/events' ], function( components, diff --git a/src/client/js/objects/objects.js b/src/client/js/objects/objects.js index d5c10ddf..8b4059df 100644 --- a/src/client/js/objects/objects.js +++ b/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, diff --git a/src/client/js/rendering/effects.js b/src/client/js/rendering/effects.js index e5c0323e..40c89847 100644 --- a/src/client/js/rendering/effects.js +++ b/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); - } - } } }; }); \ No newline at end of file diff --git a/src/client/js/rendering/numbers.js b/src/client/js/rendering/numbers.js index 1bc212a4..1be60b29 100644 --- a/src/client/js/rendering/numbers.js +++ b/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, diff --git a/src/client/js/renderer.js b/src/client/js/rendering/renderer.js similarity index 81% rename from src/client/js/renderer.js rename to src/client/js/rendering/renderer.js index 3d71f0b3..fb94eeae 100644 --- a/src/client/js/renderer.js +++ b/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); + }); } }, diff --git a/src/client/js/rendering/spritePool.js b/src/client/js/rendering/spritePool.js new file mode 100644 index 00000000..a7b92d8a --- /dev/null +++ b/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); + } + }; +}); \ No newline at end of file diff --git a/src/client/js/rendering/spriteShader.js b/src/client/js/rendering/spriteShader.js deleted file mode 100644 index b0fcdcf6..00000000 --- a/src/client/js/rendering/spriteShader.js +++ /dev/null @@ -1,111 +0,0 @@ -define([ - 'js/resources' -], function( - resources -) { - var 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; - } - }; -}); diff --git a/src/client/js/rendering/tileOpacity.js b/src/client/js/rendering/tileOpacity.js index e6bd78a4..f31d3065 100644 --- a/src/client/js/rendering/tileOpacity.js +++ b/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; diff --git a/src/client/ui/templates/inventory/inventory.js b/src/client/ui/templates/inventory/inventory.js index f83bec0f..230cf86f 100644 --- a/src/client/ui/templates/inventory/inventory.js +++ b/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, diff --git a/src/client/ui/templates/login/login.js b/src/client/ui/templates/login/login.js index bd7b9baa..2af7cb96 100644 --- a/src/client/ui/templates/login/login.js +++ b/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, diff --git a/src/client/ui/templates/options/options.js b/src/client/ui/templates/options/options.js index 6ceafbcd..96f02c7f 100644 --- a/src/client/ui/templates/options/options.js +++ b/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' diff --git a/src/server/config/maps/city/map.json b/src/server/config/maps/city/map.json index 37506abb..df729c48 100644 --- a/src/server/config/maps/city/map.json +++ b/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,