@@ -2,7 +2,7 @@ | |||||
@font-face { | @font-face { | ||||
font-family: bitty; | font-family: bitty; | ||||
src: url('../fonts/bitty.ttf'); | |||||
src: url('../fonts/bitty.otf'); | |||||
} | } | ||||
* { | * { | ||||
@@ -2,7 +2,7 @@ | |||||
@font-face { | @font-face { | ||||
font-family: bitty; | font-family: bitty; | ||||
src: url('../fonts/bitty.ttf'); | |||||
src: url('../fonts/bitty.otf'); | |||||
} | } | ||||
.loader-container { | .loader-container { | ||||
@@ -173,9 +173,12 @@ define([ | |||||
sound.unload(obj.zoneId); | sound.unload(obj.zoneId); | ||||
renderer.setPosition({ | renderer.setPosition({ | ||||
x: (obj.x - (renderer.width / (scale * 2))) * scale, | |||||
y: (obj.y - (renderer.height / (scale * 2))) * scale | |||||
}, true); | |||||
pos: { | |||||
x: obj.x, | |||||
y: obj.y | |||||
}, | |||||
instant: true | |||||
}); | |||||
} | } | ||||
this.objects.push(obj); | this.objects.push(obj); | ||||
@@ -30,14 +30,17 @@ define([ | |||||
const { width, height, layers } = renderer; | const { width, height, layers } = renderer; | ||||
renderer.setPosition({ | |||||
x: 0, | |||||
y: 0 | |||||
}, true); | |||||
let w = Math.ceil(width / scale) + 1; | let w = Math.ceil(width / scale) + 1; | ||||
let h = Math.ceil(height / scale) + 1; | let h = Math.ceil(height / scale) + 1; | ||||
renderer.setPosition({ | |||||
pos: { | |||||
x: w / 2, | |||||
y: h / 2 | |||||
}, | |||||
instant: true | |||||
}); | |||||
const midX = ~~(w / 2); | const midX = ~~(w / 2); | ||||
const midY = ~~(h / 2); | const midY = ~~(h / 2); | ||||
@@ -0,0 +1,204 @@ | |||||
define([ | |||||
'js/system/events', | |||||
'js/rendering/tileOpacity', | |||||
'js/rendering/spritePool' | |||||
], function ( | |||||
events, | |||||
tileOpacity, | |||||
spritePool | |||||
) { | |||||
const mRandom = Math.random.bind(Math); | |||||
const updateSprites = renderer => { | |||||
if (renderer.titleScreen) | |||||
return; | |||||
const player = window.player; | |||||
if (!player) | |||||
return; | |||||
const { w, h, width, height, stage, map, sprites } = renderer; | |||||
const x = ~~((-stage.x / scale) + (width / (scale * 2))); | |||||
const y = ~~((-stage.y / scale) + (height / (scale * 2))); | |||||
renderer.lastUpdatePos.x = stage.x; | |||||
renderer.lastUpdatePos.y = stage.y; | |||||
const container = renderer.layers.tileSprites; | |||||
const sw = renderer.showTilesW; | |||||
const sh = renderer.showTilesH; | |||||
let lowX = Math.max(0, x - sw + 1); | |||||
let lowY = Math.max(0, y - sh + 2); | |||||
let highX = Math.min(w, x + sw - 2); | |||||
let highY = Math.min(h, y + sh - 2); | |||||
let addedSprite = false; | |||||
const checkHidden = renderer.isHidden.bind(renderer); | |||||
const buildTile = renderer.buildTile.bind(renderer); | |||||
const newVisible = []; | |||||
const newHidden = []; | |||||
for (let i = lowX; i < highX; i++) { | |||||
let mapRow = map[i]; | |||||
let spriteRow = sprites[i]; | |||||
for (let j = lowY; j < highY; j++) { | |||||
const cell = mapRow[j]; | |||||
if (!cell) | |||||
continue; | |||||
const cLen = cell.length; | |||||
if (!cLen) | |||||
return; | |||||
const rendered = spriteRow[j]; | |||||
const isHidden = checkHidden(i, j); | |||||
if (isHidden) { | |||||
const nonFakeRendered = rendered.filter(r => !r.isFake); | |||||
const rLen = nonFakeRendered.length; | |||||
for (let k = 0; k < rLen; k++) { | |||||
const sprite = nonFakeRendered[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
rendered.spliceWhere(s => s === sprite); | |||||
} | |||||
if (cell.visible) { | |||||
cell.visible = false; | |||||
newHidden.push({ | |||||
x: i, | |||||
y: j | |||||
}); | |||||
} | |||||
const hasFake = cell.some(c => c[0] === '-'); | |||||
if (hasFake) { | |||||
const isFakeRendered = rendered.some(r => r.isFake); | |||||
if (isFakeRendered) | |||||
continue; | |||||
} else | |||||
continue; | |||||
} else { | |||||
const fakeRendered = rendered.filter(r => r.isFake); | |||||
const rLen = fakeRendered.length; | |||||
for (let k = 0; k < rLen; k++) { | |||||
const sprite = fakeRendered[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
rendered.spliceWhere(s => s === sprite); | |||||
} | |||||
if (!cell.visible) { | |||||
cell.visible = true; | |||||
newVisible.push({ | |||||
x: i, | |||||
y: j | |||||
}); | |||||
} | |||||
const hasNonFake = cell.some(c => c[0] !== '-'); | |||||
if (hasNonFake) { | |||||
const isNonFakeRendered = rendered.some(r => !r.isFake); | |||||
if (isNonFakeRendered) | |||||
continue; | |||||
} else | |||||
continue; | |||||
} | |||||
for (let k = 0; k < cLen; k++) { | |||||
let c = cell[k]; | |||||
if (c === '0' || c === '') | |||||
continue; | |||||
const isFake = +c < 0; | |||||
if (isFake && !isHidden) | |||||
continue; | |||||
else if (!isFake && isHidden) | |||||
continue; | |||||
if (isFake) | |||||
c = -c; | |||||
c--; | |||||
let flipped = ''; | |||||
if (tileOpacity.canFlip(c)) { | |||||
if (mRandom() < 0.5) | |||||
flipped = 'flip'; | |||||
} | |||||
let tile = spritePool.getSprite(flipped + c); | |||||
if (!tile) { | |||||
tile = 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; | |||||
} | |||||
if (isFake) | |||||
tile.isFake = isFake; | |||||
tile.z = k; | |||||
rendered.push(tile); | |||||
} | |||||
} | |||||
} | |||||
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); | |||||
for (let i = lowX; i < highX; i++) { | |||||
const mapRow = map[i]; | |||||
let spriteRow = sprites[i]; | |||||
let outside = ((i >= x - sw) && (i < x + sw)); | |||||
for (let j = lowY; j < highY; j++) { | |||||
if ((outside) && (j >= y - sh) && (j < y + sh)) | |||||
continue; | |||||
const cell = mapRow[j]; | |||||
if (cell.visible) { | |||||
cell.visible = false; | |||||
newHidden.push({ x: i, y: j }); | |||||
} | |||||
let list = spriteRow[j]; | |||||
let lLen = list.length; | |||||
for (let k = 0; k < lLen; k++) { | |||||
let sprite = list[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
} | |||||
spriteRow[j] = []; | |||||
} | |||||
} | |||||
events.emit('onTilesVisible', newVisible, true); | |||||
events.emit('onTilesVisible', newHidden, false); | |||||
if (addedSprite) | |||||
container.children.sort((a, b) => a.z - b.z); | |||||
}; | |||||
return updateSprites; | |||||
}); |
@@ -7,8 +7,9 @@ define([ | |||||
'js/rendering/particles', | 'js/rendering/particles', | ||||
'js/rendering/shaders/outline', | 'js/rendering/shaders/outline', | ||||
'js/rendering/spritePool', | 'js/rendering/spritePool', | ||||
'js/rendering/helpers/updateSprites', | |||||
'js/system/globals', | 'js/system/globals', | ||||
'js/rendering/renderLoginBackground', | |||||
'js/rendering/helpers/renderLoginBackground', | |||||
'js/rendering/helpers/resetRenderer' | 'js/rendering/helpers/resetRenderer' | ||||
], function ( | ], function ( | ||||
resources, | resources, | ||||
@@ -19,6 +20,7 @@ define([ | |||||
particles, | particles, | ||||
shaderOutline, | shaderOutline, | ||||
spritePool, | spritePool, | ||||
updateSprites, | |||||
globals, | globals, | ||||
renderLoginBackground, | renderLoginBackground, | ||||
resetRenderer | resetRenderer | ||||
@@ -77,6 +79,8 @@ define([ | |||||
hiddenRooms: null, | hiddenRooms: null, | ||||
staticCamera: false, | |||||
init: function () { | init: function () { | ||||
PIXI.settings.GC_MODE = PIXI.GC_MODES.AUTO; | PIXI.settings.GC_MODE = PIXI.GC_MODES.AUTO; | ||||
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; | PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; | ||||
@@ -200,9 +204,12 @@ define([ | |||||
this.renderer.resize(this.width, this.height); | this.renderer.resize(this.width, this.height); | ||||
if (window.player) { | if (window.player) { | ||||
this.setPosition({ | this.setPosition({ | ||||
x: (window.player.x - (this.width / (scale * 2))) * scale, | |||||
y: (window.player.y - (this.height / (scale * 2))) * scale | |||||
}, true); | |||||
pos: { | |||||
x: window.player.x, | |||||
y: window.player.y | |||||
}, | |||||
instant: true | |||||
}); | |||||
} | } | ||||
if (this.titleScreen) { | if (this.titleScreen) { | ||||
@@ -278,10 +285,15 @@ define([ | |||||
}, | }, | ||||
onGetMap: function (msg) { | onGetMap: function (msg) { | ||||
const { zoneId, collisionMap, map, hiddenRooms, clientObjects, rendererConfig } = msg; | |||||
const { staticCamera = false, cameraPosition } = rendererConfig; | |||||
this.staticCamera = staticCamera; | |||||
this.map = map; | |||||
this.titleScreen = false; | this.titleScreen = false; | ||||
physics.init(msg.collisionMap); | |||||
physics.init(collisionMap); | |||||
let map = this.map = msg.map; | |||||
let w = this.w = map.length; | let w = this.w = map.length; | ||||
let h = this.h = map[0].length; | let h = this.h = map[0].length; | ||||
@@ -301,7 +313,7 @@ define([ | |||||
this.stage.filters = [new PIXI.filters.AlphaFilter()]; | this.stage.filters = [new PIXI.filters.AlphaFilter()]; | ||||
this.stage.filterArea = new PIXI.Rectangle(0, 0, Math.max(w * scale, this.width), Math.max(h * scale, this.height)); | this.stage.filterArea = new PIXI.Rectangle(0, 0, Math.max(w * scale, this.width), Math.max(h * scale, this.height)); | ||||
this.hiddenRooms = msg.hiddenRooms; | |||||
this.hiddenRooms = hiddenRooms; | |||||
this.sprites = _.get2dArray(w, h, 'array'); | this.sprites = _.get2dArray(w, h, 'array'); | ||||
@@ -316,17 +328,24 @@ define([ | |||||
if (this.zoneId !== null) { | if (this.zoneId !== null) { | ||||
events.emit('onRezone', { | events.emit('onRezone', { | ||||
oldZoneId: this.zoneId, | oldZoneId: this.zoneId, | ||||
newZoneId: msg.zoneId | |||||
newZoneId: zoneId | |||||
}); | }); | ||||
} | } | ||||
this.zoneId = msg.zoneId; | |||||
this.zoneId = zoneId; | |||||
msg.clientObjects.forEach(c => { | |||||
clientObjects.forEach(c => { | |||||
c.zoneId = this.zoneId; | c.zoneId = this.zoneId; | ||||
events.emit('onGetObject', c); | events.emit('onGetObject', c); | ||||
}); | }); | ||||
if (cameraPosition) { | |||||
this.setPosition({ | |||||
x: (cameraPosition.x - (this.width / (scale * 2))) * scale, | |||||
y: (cameraPosition.y - (this.height / (scale * 2))) * scale | |||||
}, true, true); | |||||
} | |||||
//Normally, the mounts mod queues this event when unmounting. | //Normally, the mounts mod queues this event when unmounting. | ||||
// If we rezone, our effects are destroyed, so the event is queued, | // If we rezone, our effects are destroyed, so the event is queued, | ||||
// but flushForTarget clears the event right after and the event is never received. | // but flushForTarget clears the event right after and the event is never received. | ||||
@@ -334,9 +353,17 @@ define([ | |||||
events.emit('onMoveSpeedChange', 0); | events.emit('onMoveSpeedChange', 0); | ||||
}, | }, | ||||
setPosition: function (pos, instant) { | |||||
pos.x += 16; | |||||
pos.y += 16; | |||||
/* | |||||
pos: { x, y } | |||||
The x and y positions the camera should be centered on (not yet multiplied by scale) | |||||
instant: boolean | |||||
should the camera pan to the location or not | |||||
*/ | |||||
setPosition: function ({ pos = { x: 0, y: 0 }, instant }) { | |||||
let { x, y } = pos; | |||||
x = (x - (this.width / (scale * 2))) * scale; | |||||
y = (y - (this.height / (scale * 2))) * scale; | |||||
let player = window.player; | let player = window.player; | ||||
if (player) { | if (player) { | ||||
@@ -362,13 +389,29 @@ define([ | |||||
} | } | ||||
} | } | ||||
const staticCamera = window.staticCamera || this.staticCamera; | |||||
if (staticCamera && !instant) { | |||||
this.updateSprites(); | |||||
return; | |||||
} | |||||
if (instant) { | if (instant) { | ||||
this.moveTo = null; | this.moveTo = null; | ||||
this.pos = pos; | |||||
this.stage.x = -~~this.pos.x; | |||||
this.stage.y = -~~this.pos.y; | |||||
} else | |||||
this.moveTo = pos; | |||||
this.pos = { | |||||
x, | |||||
y | |||||
}; | |||||
this.stage.x = -~~x; | |||||
this.stage.y = -~~y; | |||||
} else { | |||||
this.moveTo = { | |||||
x, | |||||
y | |||||
}; | |||||
} | |||||
this.updateSprites(); | this.updateSprites(); | ||||
}, | }, | ||||
@@ -437,194 +480,7 @@ define([ | |||||
}, | }, | ||||
updateSprites: function () { | updateSprites: function () { | ||||
if (this.titleScreen) | |||||
return; | |||||
const player = window.player; | |||||
if (!player) | |||||
return; | |||||
const { w, h, width, height, stage, map, sprites } = this; | |||||
const x = ~~((-stage.x / scale) + (width / (scale * 2))); | |||||
const y = ~~((-stage.y / scale) + (height / (scale * 2))); | |||||
this.lastUpdatePos.x = stage.x; | |||||
this.lastUpdatePos.y = stage.y; | |||||
const container = this.layers.tileSprites; | |||||
const sw = this.showTilesW; | |||||
const sh = this.showTilesH; | |||||
let lowX = Math.max(0, x - sw + 1); | |||||
let lowY = Math.max(0, y - sh + 2); | |||||
let highX = Math.min(w, x + sw - 2); | |||||
let highY = Math.min(h, y + sh - 2); | |||||
let addedSprite = false; | |||||
const checkHidden = this.isHidden.bind(this); | |||||
const buildTile = this.buildTile.bind(this); | |||||
const newVisible = []; | |||||
const newHidden = []; | |||||
for (let i = lowX; i < highX; i++) { | |||||
let mapRow = map[i]; | |||||
let spriteRow = sprites[i]; | |||||
for (let j = lowY; j < highY; j++) { | |||||
const cell = mapRow[j]; | |||||
if (!cell) | |||||
continue; | |||||
const cLen = cell.length; | |||||
if (!cLen) | |||||
return; | |||||
const rendered = spriteRow[j]; | |||||
const isHidden = checkHidden(i, j); | |||||
if (isHidden) { | |||||
const nonFakeRendered = rendered.filter(r => !r.isFake); | |||||
const rLen = nonFakeRendered.length; | |||||
for (let k = 0; k < rLen; k++) { | |||||
const sprite = nonFakeRendered[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
rendered.spliceWhere(s => s === sprite); | |||||
} | |||||
if (cell.visible) { | |||||
cell.visible = false; | |||||
newHidden.push({ | |||||
x: i, | |||||
y: j | |||||
}); | |||||
} | |||||
const hasFake = cell.some(c => c[0] === '-'); | |||||
if (hasFake) { | |||||
const isFakeRendered = rendered.some(r => r.isFake); | |||||
if (isFakeRendered) | |||||
continue; | |||||
} else | |||||
continue; | |||||
} else { | |||||
const fakeRendered = rendered.filter(r => r.isFake); | |||||
const rLen = fakeRendered.length; | |||||
for (let k = 0; k < rLen; k++) { | |||||
const sprite = fakeRendered[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
rendered.spliceWhere(s => s === sprite); | |||||
} | |||||
if (!cell.visible) { | |||||
cell.visible = true; | |||||
newVisible.push({ | |||||
x: i, | |||||
y: j | |||||
}); | |||||
} | |||||
const hasNonFake = cell.some(c => c[0] !== '-'); | |||||
if (hasNonFake) { | |||||
const isNonFakeRendered = rendered.some(r => !r.isFake); | |||||
if (isNonFakeRendered) | |||||
continue; | |||||
} else | |||||
continue; | |||||
} | |||||
for (let k = 0; k < cLen; k++) { | |||||
let c = cell[k]; | |||||
if (c === '0' || c === '') | |||||
continue; | |||||
const isFake = +c < 0; | |||||
if (isFake && !isHidden) | |||||
continue; | |||||
else if (!isFake && isHidden) | |||||
continue; | |||||
if (isFake) | |||||
c = -c; | |||||
c--; | |||||
let flipped = ''; | |||||
if (tileOpacity.canFlip(c)) { | |||||
if (mRandom() < 0.5) | |||||
flipped = 'flip'; | |||||
} | |||||
let tile = spritePool.getSprite(flipped + c); | |||||
if (!tile) { | |||||
tile = 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; | |||||
} | |||||
if (isFake) | |||||
tile.isFake = isFake; | |||||
tile.z = k; | |||||
rendered.push(tile); | |||||
} | |||||
} | |||||
} | |||||
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); | |||||
for (let i = lowX; i < highX; i++) { | |||||
const mapRow = map[i]; | |||||
let spriteRow = sprites[i]; | |||||
let outside = ((i >= x - sw) && (i < x + sw)); | |||||
for (let j = lowY; j < highY; j++) { | |||||
if ((outside) && (j >= y - sh) && (j < y + sh)) | |||||
continue; | |||||
const cell = mapRow[j]; | |||||
if (cell.visible) { | |||||
cell.visible = false; | |||||
newHidden.push({ x: i, y: j }); | |||||
} | |||||
let list = spriteRow[j]; | |||||
let lLen = list.length; | |||||
for (let k = 0; k < lLen; k++) { | |||||
let sprite = list[k]; | |||||
sprite.visible = false; | |||||
spritePool.store(sprite); | |||||
} | |||||
spriteRow[j] = []; | |||||
} | |||||
} | |||||
events.emit('onTilesVisible', newVisible, true); | |||||
events.emit('onTilesVisible', newHidden, false); | |||||
if (addedSprite) | |||||
container.children.sort((a, b) => a.z - b.z); | |||||
updateSprites(this); | |||||
}, | }, | ||||
update: function () { | update: function () { | ||||
@@ -662,8 +518,10 @@ define([ | |||||
this.moveTo = null; | this.moveTo = null; | ||||
} | } | ||||
const staticCamera = this.staticCamera || window.staticCamera; | |||||
let stage = this.stage; | let stage = this.stage; | ||||
if (window.staticCamera !== true) { | |||||
if (staticCamera !== true) { | |||||
stage.x = -~~this.pos.x; | stage.x = -~~this.pos.x; | ||||
stage.y = -~~this.pos.y; | stage.y = -~~this.pos.y; | ||||
} | } | ||||
@@ -899,6 +757,58 @@ define([ | |||||
}); | }); | ||||
}, | }, | ||||
updateMapRows: function (rows) { | |||||
const { map, sprites, layers: { tileSprites: container } } = this; | |||||
rows.forEach(({ rowNumber: x, cols }) => { | |||||
const row = sprites[x]; | |||||
cols.forEach(({ colNumber: y, cells }) => { | |||||
const cellSprites = row[y]; | |||||
cellSprites.forEach(c => { | |||||
c.visible = false; | |||||
spritePool.store(c); | |||||
}); | |||||
cellSprites.length = 0; | |||||
map[x][y] = cells; | |||||
cells.forEach((m, k) => { | |||||
m--; | |||||
let flipped = ''; | |||||
if (tileOpacity.canFlip(m)) { | |||||
if (mRandom() < 0.5) | |||||
flipped = 'flip'; | |||||
} | |||||
let tile = spritePool.getSprite(flipped + m); | |||||
if (!tile) { | |||||
tile = this.buildTile(m, x, y); | |||||
container.addChild(tile); | |||||
tile.type = m; | |||||
tile.sheetNum = tileOpacity.getSheetNum(m); | |||||
} else { | |||||
tile.position.x = x * scale; | |||||
tile.position.y = y * scale; | |||||
if (flipped !== '') | |||||
tile.position.x += scale; | |||||
tile.visible = true; | |||||
} | |||||
tile.z = k; | |||||
cellSprites.push(tile); | |||||
cellSprites.visible = true; | |||||
}); | |||||
}); | |||||
}); | |||||
container.children.sort((a, b) => a.z - b.z); | |||||
}, | |||||
render: function () { | render: function () { | ||||
if (!this.stage) | if (!this.stage) | ||||
return; | return; | ||||
@@ -46,6 +46,23 @@ define([ | |||||
}; | }; | ||||
}, | }, | ||||
getCellInAtlas: function (cell, sheetName) { | |||||
const { clientConfig: { atlasTextureDimensions, atlasTextures } } = globals; | |||||
const indexInAtlas = atlasTextures.indexOf(sheetName); | |||||
let offset = 0; | |||||
for (let i = 0; i < indexInAtlas; i++) { | |||||
const dimensions = atlasTextureDimensions[atlasTextures[i]]; | |||||
const spriteCount = dimensions.w * dimensions.h; | |||||
offset += spriteCount; | |||||
} | |||||
return cell + offset; | |||||
}, | |||||
map: function (tile) { | map: function (tile) { | ||||
const { clientConfig: { tileOpacities } } = globals; | const { clientConfig: { tileOpacities } } = globals; | ||||
@@ -57,9 +57,9 @@ define([ | |||||
onDeath: function (eventObj) { | onDeath: function (eventObj) { | ||||
if (!eventObj.source) | if (!eventObj.source) | ||||
this.find('.msg').html('you are dead'); | |||||
this.find('.msg').html('You are dead.'); | |||||
else | else | ||||
this.find('.msg').html('you were killed by [ <div class="inner">' + eventObj.source + '</div> ]'); | |||||
this.find('.msg').html('You were killed by [ <div class="inner">' + eventObj.source + '</div> ].'); | |||||
this.find('.penalty') | this.find('.penalty') | ||||
.html('you lost ' + eventObj.xpLoss + ' experience') | .html('you lost ' + eventObj.xpLoss + ' experience') | ||||
.show(); | .show(); | ||||
@@ -72,7 +72,7 @@ define([ | |||||
}, | }, | ||||
onPermadeath: function (eventObj) { | onPermadeath: function (eventObj) { | ||||
this.find('.msg').html('you were killed by [ <div class="inner">' + eventObj.source + '</div> ]'); | |||||
this.find('.msg').html('You were killed by [ <div class="inner">' + eventObj.source + '</div> ].'); | |||||
this.el.addClass('permadeath'); | this.el.addClass('permadeath'); | ||||
this.doShow(); | this.doShow(); | ||||
} | } | ||||
@@ -23,22 +23,6 @@ | |||||
margin-top: 15px; | margin-top: 15px; | ||||
} | } | ||||
.btn { | |||||
color: @white; | |||||
width: 100%; | |||||
height: 32px; | |||||
background-color: @blueB; | |||||
margin: 16px 0px; | |||||
padding-top: 8px; | |||||
cursor: pointer; | |||||
&:hover { | |||||
background-color: lighten(@blueB, 15%); | |||||
color: @black; | |||||
} | |||||
} | |||||
&.permadeath { | &.permadeath { | ||||
.buttons { | .buttons { | ||||
.btn-respawn { | .btn-respawn { | ||||
@@ -54,6 +38,25 @@ | |||||
} | } | ||||
.buttons { | .buttons { | ||||
margin: 16px 0px; | |||||
.btn { | |||||
color: @white; | |||||
width: 100%; | |||||
height: 32px; | |||||
background-color: @blueB; | |||||
disply: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
cursor: pointer; | |||||
&:hover { | |||||
background-color: lighten(@blueB, 15%); | |||||
color: @black; | |||||
} | |||||
} | |||||
.btn-logout { | .btn-logout { | ||||
display: none; | display: none; | ||||
} | } | ||||
@@ -2,7 +2,7 @@ | |||||
<div class="msg"></div> | <div class="msg"></div> | ||||
<div class="penalty"></div> | <div class="penalty"></div> | ||||
<div class="buttons"> | <div class="buttons"> | ||||
<div class="btn btn-respawn">respawn</div> | |||||
<div class="btn btn-logout">log out</div> | |||||
<div class="btn btn-respawn">Respawn</div> | |||||
<div class="btn btn-logout">Log Out</div> | |||||
</div> | </div> | ||||
</div> | </div> |
@@ -69,9 +69,12 @@ define([ | |||||
positionCamera: function (x, y, instant) { | positionCamera: function (x, y, instant) { | ||||
renderer.setPosition({ | renderer.setPosition({ | ||||
x: (x - (renderer.width / (scale * 2))) * scale, | |||||
y: (y - (renderer.height / (scale * 2))) * scale | |||||
}, instant); | |||||
pos: { | |||||
x, | |||||
y | |||||
}, | |||||
instant | |||||
}); | |||||
}, | }, | ||||
teleportToPosition: function ({ x, y }) { | teleportToPosition: function ({ x, y }) { | ||||
@@ -296,7 +296,7 @@ module.exports = { | |||||
}, | }, | ||||
//Sends multiple notifications to yourself | //Sends multiple notifications to yourself | ||||
// messages = [{ msg, className, type }] | |||||
// messages = [{ message, className, type }] | |||||
notifySelfArray: function (messages) { | notifySelfArray: function (messages) { | ||||
const { obj: { id, serverId, instance: { syncer } } } = this; | const { obj: { id, serverId, instance: { syncer } } } = this; | ||||
@@ -48,7 +48,15 @@ module.exports = { | |||||
collisionMap: null, | collisionMap: null, | ||||
clientMap: null, | |||||
clientMap: { | |||||
zoneId: null, | |||||
map: null, | |||||
collisionMap: null, | |||||
clientObjects: null, | |||||
padding: null, | |||||
hiddenRooms: null, | |||||
staticCamera: false | |||||
}, | |||||
oldLayers: { | oldLayers: { | ||||
tiles: null, | tiles: null, | ||||
walls: null, | walls: null, | ||||
@@ -125,14 +133,18 @@ module.exports = { | |||||
create: function () { | create: function () { | ||||
this.getMapFile(); | this.getMapFile(); | ||||
this.clientMap = { | |||||
const { layers, collisionMap, objBlueprints, hiddenRooms, zoneConfig } = this; | |||||
const { rendererConfig = {} } = zoneConfig; | |||||
Object.assign(this.clientMap, { | |||||
zoneId: -1, | zoneId: -1, | ||||
map: this.layers, | |||||
collisionMap: this.collisionMap, | |||||
clientObjects: this.objBlueprints, | |||||
padding: padding, | |||||
hiddenRooms: this.hiddenRooms | |||||
}; | |||||
map: layers, | |||||
collisionMap, | |||||
clientObjects: objBlueprints, | |||||
padding, | |||||
hiddenRooms, | |||||
rendererConfig | |||||
}); | |||||
}, | }, | ||||
getMapFile: function () { | getMapFile: function () { | ||||
@@ -153,6 +153,9 @@ const messageHandlers = { | |||||
const onMessage = (thread, message) => { | const onMessage = (thread, message) => { | ||||
if (message.module) { | if (message.module) { | ||||
try { | try { | ||||
if (message.includeThreadInArgs) | |||||
message.threadId = thread.id; | |||||
global[message.module][message.method](message); | global[message.module][message.method](message); | ||||
} catch (e) { | } catch (e) { | ||||
/* eslint-disable-next-line no-console */ | /* eslint-disable-next-line no-console */ | ||||
@@ -184,13 +187,14 @@ const spawnThread = async ({ map: { name, path, instanced, destroyWhenEmptyForMs | |||||
worker: null, | worker: null, | ||||
isReady: false, | isReady: false, | ||||
promise, | promise, | ||||
preConfig: {}, | |||||
cbOnInitialized, | cbOnInitialized, | ||||
players: [], | players: [], | ||||
playersCurrent: [], | playersCurrent: [], | ||||
birthEpoch: +new Date(), | birthEpoch: +new Date(), | ||||
destroyWhenEmptyForMs, | destroyWhenEmptyForMs, | ||||
emptySinceEpoch: null, | emptySinceEpoch: null, | ||||
sendArgsToWorker: ['name', 'id'], | |||||
sendArgsToWorker: ['name', 'id', 'preConfig'], | |||||
workerArgs: null | workerArgs: null | ||||
}; | }; | ||||
@@ -204,7 +208,7 @@ const spawnThread = async ({ map: { name, path, instanced, destroyWhenEmptyForMs | |||||
thread.sendArgsToWorker.map(a => [a, thread[a]]) | thread.sendArgsToWorker.map(a => [a, thread[a]]) | ||||
); | ); | ||||
_.log(`Spawning: ${JSON.stringify(thread.workerArgs, null, '\t')}`); | |||||
_.log(`Spawning: ${JSON.stringify({ id: thread.id, name: thread.name }, null, '\t')}`); | |||||
thread.worker = childProcess.fork('./world/worker', [JSON.stringify(thread.workerArgs)]); | thread.worker = childProcess.fork('./world/worker', [JSON.stringify(thread.workerArgs)]); | ||||
thread.worker.on('message', onMessage.bind(null, thread)); | thread.worker.on('message', onMessage.bind(null, thread)); | ||||
@@ -257,6 +261,7 @@ const killThread = thread => { | |||||
}; | }; | ||||
const sendMessageToThread = ({ threadId, msg }) => { | const sendMessageToThread = ({ threadId, msg }) => { | ||||
console.log('ok'); | |||||
const thread = threads.find(t => t.id === threadId); | const thread = threads.find(t => t.id === threadId); | ||||
if (thread) | if (thread) | ||||
thread.worker.send(msg); | thread.worker.send(msg); | ||||