@@ -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); | |||||
} | |||||
}; | |||||
}); |
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
renderer | renderer | ||||
) { | ) { | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/rendering/effects', | 'js/rendering/effects', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
effects, | effects, | ||||
renderer | renderer | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
renderer | renderer | ||||
) { | ) { | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
renderer | renderer | ||||
) { | ) { | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
renderer | renderer | ||||
) { | ) { | ||||
@@ -1,9 +1,7 @@ | |||||
define([ | define([ | ||||
'js/canvas', | |||||
'js/rendering/effects', | 'js/rendering/effects', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
canvas, | |||||
effects, | effects, | ||||
renderer | 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() { | destroy: function() { | ||||
var keys = Object.keys(this.emitters); | var keys = Object.keys(this.emitters); | ||||
for (var i = 0; i < keys.length; i++) { | for (var i = 0; i < keys.length; i++) { | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/system/events', | 'js/system/events', | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/system/client', | 'js/system/client', | ||||
'js/input', | 'js/input', | ||||
'js/objects/objects' | 'js/objects/objects' | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
renderer | renderer | ||||
) { | ) { | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/system/events' | 'js/system/events' | ||||
], function( | ], function( | ||||
renderer, | renderer, | ||||
@@ -1,5 +1,5 @@ | |||||
define([ | define([ | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/system/events' | 'js/system/events' | ||||
], function( | ], function( | ||||
renderer, | renderer, | ||||
@@ -1,9 +1,7 @@ | |||||
define([ | define([ | ||||
'js/rendering/effects', | |||||
'js/canvas' | |||||
'js/rendering/effects' | |||||
], function( | ], function( | ||||
effects, | |||||
canvas | |||||
effects | |||||
) { | ) { | ||||
var scale = 40; | var scale = 40; | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/system/client', | 'js/system/client', | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/system/events' | 'js/system/events' | ||||
], function( | ], function( | ||||
client, | client, | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/system/events', | 'js/system/events', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
events, | events, | ||||
renderer | renderer | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/system/events', | 'js/system/events', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
events, | events, | ||||
renderer | renderer | ||||
@@ -1,7 +1,7 @@ | |||||
define([ | define([ | ||||
'js/system/client', | 'js/system/client', | ||||
'ui/factory', | 'ui/factory', | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/objects/objects', | 'js/objects/objects', | ||||
'js/rendering/effects', | 'js/rendering/effects', | ||||
'js/rendering/numbers', | 'js/rendering/numbers', | ||||
@@ -1,6 +1,6 @@ | |||||
define([ | define([ | ||||
'js/components/components', | 'js/components/components', | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'js/system/events' | 'js/system/events' | ||||
], function( | ], function( | ||||
components, | components, | ||||
@@ -1,7 +1,7 @@ | |||||
define([ | define([ | ||||
'js/objects/objBase', | 'js/objects/objBase', | ||||
'js/system/events', | 'js/system/events', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
objBase, | objBase, | ||||
events, | events, | ||||
@@ -1,7 +1,7 @@ | |||||
define([ | define([ | ||||
'js/canvas' | |||||
], function( | ], function( | ||||
canvas | |||||
) { | ) { | ||||
return { | return { | ||||
list: [], | list: [], | ||||
@@ -45,53 +45,6 @@ define([ | |||||
l.renderManual(); | 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); | |||||
} | |||||
} | |||||
} | } | ||||
}; | }; | ||||
}); | }); |
@@ -1,7 +1,7 @@ | |||||
define([ | define([ | ||||
'js/system/events', | 'js/system/events', | ||||
'js/objects/objects', | 'js/objects/objects', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
events, | events, | ||||
objects, | objects, | ||||
@@ -5,7 +5,8 @@ define([ | |||||
'js/rendering/effects', | 'js/rendering/effects', | ||||
'js/rendering/tileOpacity', | 'js/rendering/tileOpacity', | ||||
'js/rendering/particles', | 'js/rendering/particles', | ||||
'js/rendering/shaders/outline' | |||||
'js/rendering/shaders/outline', | |||||
'js/rendering/spritePool' | |||||
], function( | ], function( | ||||
resources, | resources, | ||||
events, | events, | ||||
@@ -13,7 +14,8 @@ define([ | |||||
effects, | effects, | ||||
tileOpacity, | tileOpacity, | ||||
particles, | particles, | ||||
shaderOutline | |||||
shaderOutline, | |||||
spritePool | |||||
) { | ) { | ||||
var scale = 40; | var scale = 40; | ||||
var scaleMult = 5; | var scaleMult = 5; | ||||
@@ -32,18 +34,14 @@ define([ | |||||
hiders: null | hiders: null | ||||
}, | }, | ||||
chunkSize: 30, | |||||
titleScreen: false, | titleScreen: false, | ||||
pad: { | |||||
x: 10, | |||||
y: 10 | |||||
}, | |||||
width: 0, | width: 0, | ||||
height: 0, | height: 0, | ||||
showTilesW: 0, | |||||
showTilesH: 0, | |||||
pos: { | pos: { | ||||
x: 0, | x: 0, | ||||
y: 0 | y: 0 | ||||
@@ -52,15 +50,18 @@ define([ | |||||
moveSpeed: 0, | moveSpeed: 0, | ||||
moveSpeedMax: 1.50, | moveSpeedMax: 1.50, | ||||
moveSpeedInc: 0.5, | moveSpeedInc: 0.5, | ||||
moveSpeedFlatten: 16, | |||||
zoneId: null, | zoneId: null, | ||||
textures: {}, | textures: {}, | ||||
textureCache: {}, | textureCache: {}, | ||||
sprites: [], | |||||
lastTick: null, | lastTick: null, | ||||
hiddenRooms: null, | |||||
init: function() { | init: function() { | ||||
PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO; | PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO; | ||||
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; | PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; | ||||
@@ -72,8 +73,8 @@ define([ | |||||
this.width = $('body').width(); | this.width = $('body').width(); | ||||
this.height = $('body').height(); | 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, { | this.renderer = pixi.autoDetectRenderer(this.width, this.height, { | ||||
backgroundColor: 0x2d2136 | backgroundColor: 0x2d2136 | ||||
@@ -89,7 +90,7 @@ define([ | |||||
var layers = this.layers; | var layers = this.layers; | ||||
Object.keys(layers).forEach(function(l) { | Object.keys(layers).forEach(function(l) { | ||||
if (l == 'tileSprites') { | if (l == 'tileSprites') { | ||||
layers[l] = new pixi.particles.ParticleContainer(2500); | |||||
layers[l] = new pixi.Container(); | |||||
layers[l].layer = 'tiles'; | layers[l].layer = 'tiles'; | ||||
} else | } else | ||||
layers[l] = new pixi.Container(); | layers[l] = new pixi.Container(); | ||||
@@ -186,6 +187,9 @@ define([ | |||||
this.width = $('body').width() * zoom; | this.width = $('body').width() * zoom; | ||||
this.height = $('body').height() * 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); | this.renderer.resize(this.width, this.height); | ||||
if (window.player) { | if (window.player) { | ||||
this.setPosition({ | this.setPosition({ | ||||
@@ -224,7 +228,7 @@ define([ | |||||
var container = this.layers.tileSprites; | var container = this.layers.tileSprites; | ||||
this.stage.removeChild(container); | this.stage.removeChild(container); | ||||
this.layers.tileSprites = container = new pixi.particles.ParticleContainer(2500); | |||||
this.layers.tileSprites = container = new pixi.Container(); | |||||
container.layer = 'tiles'; | container.layer = 'tiles'; | ||||
this.stage.addChild(container); | this.stage.addChild(container); | ||||
@@ -279,18 +283,18 @@ define([ | |||||
var alpha = tileOpacity.map(c); | var alpha = tileOpacity.map(c); | ||||
var canFlip = tileOpacity.canFlip(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.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 (canFlip) { | ||||
if (Math.random() < 0.5) { | 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; | this.titleScreen = false; | ||||
physics.init(msg.collisionMap); | physics.init(msg.collisionMap); | ||||
var map = msg.map; | |||||
var map = this.map = msg.map; | |||||
var w = this.w = map.length; | var w = this.w = map.length; | ||||
var h = this.h = map[0].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 hiddenWalls = msg.hiddenWalls; | ||||
var hiddenTiles = msg.hiddenTiles; | var hiddenTiles = msg.hiddenTiles; | ||||
@@ -312,7 +343,6 @@ define([ | |||||
this.hiddenRooms.forEach(function(h) { | this.hiddenRooms.forEach(function(h) { | ||||
h.container = new pixi.Container(); | h.container = new pixi.Container(); | ||||
this.layers.hiders.addChild(h.container); | this.layers.hiders.addChild(h.container); | ||||
this.buildRectangle({ | this.buildRectangle({ | ||||
x: h.x * scale, | x: h.x * scale, | ||||
y: h.y * scale, | y: h.y * scale, | ||||
@@ -321,72 +351,93 @@ define([ | |||||
color: 0x2d2136, | color: 0x2d2136, | ||||
parent: h.container | parent: h.container | ||||
}); | }); | ||||
for (var i = h.x; i < h.x + h.width; i++) { | for (var i = h.x; i < h.x + h.width; i++) { | ||||
for (var j = h.y; j < h.y + h.height; j++) { | 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.width = scale; | ||||
tile.height = scale; | tile.height = scale; | ||||
h.container.addChild(tile); | 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); | }, 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]; | cell = map[i][j]; | ||||
if (!cell) | if (!cell) | ||||
continue; | continue; | ||||
if (!cell.split) | |||||
var rendered = sprites[i][j]; | |||||
if (rendered.length > 0) | |||||
continue; | |||||
else if (!cell.split) | |||||
cell += ''; | cell += ''; | ||||
cell = cell.split(','); | cell = cell.split(','); | ||||
for (var k = 0; k < cell.length; k++) { | for (var k = 0; k < cell.length; k++) { | ||||
@@ -396,91 +447,59 @@ define([ | |||||
c--; | 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); | |||||
}); | |||||
} | } | ||||
}, | }, | ||||
@@ -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); | |||||
} | |||||
}; | |||||
}); |
@@ -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; | |||||
} | |||||
}; | |||||
}); |
@@ -85,6 +85,15 @@ define([ | |||||
120, 122 //Wall-mounted plants | 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) { | map: function(tile) { | ||||
var sheetNum; | var sheetNum; | ||||
@@ -5,8 +5,7 @@ define([ | |||||
'css!ui/templates/inventory/styles', | 'css!ui/templates/inventory/styles', | ||||
'html!ui/templates/inventory/templateItem', | 'html!ui/templates/inventory/templateItem', | ||||
'html!ui/templates/inventory/templateTooltip', | 'html!ui/templates/inventory/templateTooltip', | ||||
'js/input', | |||||
'js/rendering/spriteShader' | |||||
'js/input' | |||||
], function( | ], function( | ||||
events, | events, | ||||
client, | client, | ||||
@@ -14,8 +13,7 @@ define([ | |||||
styles, | styles, | ||||
tplItem, | tplItem, | ||||
tplTooltip, | tplTooltip, | ||||
input, | |||||
spriteShader | |||||
input | |||||
) { | ) { | ||||
var qualityColors = [{ | var qualityColors = [{ | ||||
r: 252, | r: 252, | ||||
@@ -4,7 +4,7 @@ define([ | |||||
'ui/factory', | 'ui/factory', | ||||
'html!ui/templates/login/template', | 'html!ui/templates/login/template', | ||||
'css!ui/templates/login/styles', | 'css!ui/templates/login/styles', | ||||
'js/renderer' | |||||
'js/rendering/renderer' | |||||
], function( | ], function( | ||||
events, | events, | ||||
client, | client, | ||||
@@ -2,7 +2,7 @@ define([ | |||||
'js/system/events', | 'js/system/events', | ||||
'html!ui/templates/options/template', | 'html!ui/templates/options/template', | ||||
'css!ui/templates/options/styles', | 'css!ui/templates/options/styles', | ||||
'js/renderer', | |||||
'js/rendering/renderer', | |||||
'ui/factory', | 'ui/factory', | ||||
'js/objects/objects', | 'js/objects/objects', | ||||
'js/system/client' | 'js/system/client' | ||||
@@ -59,7 +59,7 @@ | |||||
"name":"hiddenWalls", | "name":"hiddenWalls", | ||||
"opacity":1, | "opacity":1, | ||||
"type":"tilelayer", | "type":"tilelayer", | ||||
"visible":true, | |||||
"visible":false, | |||||
"width":240, | "width":240, | ||||
"x":0, | "x":0, | ||||
"y":0 | "y":0 | ||||
@@ -2447,7 +2447,6 @@ | |||||
"tileheight":8, | "tileheight":8, | ||||
"tilesets":[ | "tilesets":[ | ||||
{ | { | ||||
"columns":8, | |||||
"firstgid":1, | "firstgid":1, | ||||
"image":"..\/..\/..\/..\/client\/images\/walls.png", | "image":"..\/..\/..\/..\/client\/images\/walls.png", | ||||
"imageheight":192, | "imageheight":192, | ||||
@@ -2515,7 +2514,6 @@ | |||||
"tilewidth":8 | "tilewidth":8 | ||||
}, | }, | ||||
{ | { | ||||
"columns":8, | |||||
"firstgid":193, | "firstgid":193, | ||||
"image":"..\/..\/..\/..\/client\/images\/mobs.png", | "image":"..\/..\/..\/..\/client\/images\/mobs.png", | ||||
"imageheight":80, | "imageheight":80, | ||||
@@ -2539,7 +2537,6 @@ | |||||
"tilewidth":8 | "tilewidth":8 | ||||
}, | }, | ||||
{ | { | ||||
"columns":8, | |||||
"firstgid":273, | "firstgid":273, | ||||
"image":"..\/..\/..\/..\/client\/images\/tiles.png", | "image":"..\/..\/..\/..\/client\/images\/tiles.png", | ||||
"imageheight":192, | "imageheight":192, | ||||
@@ -2651,7 +2648,6 @@ | |||||
"tilewidth":8 | "tilewidth":8 | ||||
}, | }, | ||||
{ | { | ||||
"columns":8, | |||||
"firstgid":465, | "firstgid":465, | ||||
"image":"..\/..\/..\/..\/client\/images\/objects.png", | "image":"..\/..\/..\/..\/client\/images\/objects.png", | ||||
"imageheight":160, | "imageheight":160, | ||||
@@ -2675,7 +2671,6 @@ | |||||
"tilewidth":8 | "tilewidth":8 | ||||
}, | }, | ||||
{ | { | ||||
"columns":8, | |||||
"firstgid":625, | "firstgid":625, | ||||
"image":"..\/..\/..\/..\/client\/images\/bigObjects.png", | "image":"..\/..\/..\/..\/client\/images\/bigObjects.png", | ||||
"imageheight":240, | "imageheight":240, | ||||