Browse Source

work

1993-leagues
Shaun 9 months ago
parent
commit
d46a882509
18 changed files with 412 additions and 252 deletions
  1. +1
    -1
      src/client/css/error.less
  2. +1
    -1
      src/client/css/loader.less
  3. BIN
     
  4. BIN
     
  5. BIN
     
  6. BIN
     
  7. +6
    -3
      src/client/js/objects/objects.js
  8. +8
    -5
      src/client/js/rendering/helpers/renderLoginBackground.js
  9. +204
    -0
      src/client/js/rendering/helpers/updateSprites.js
  10. +117
    -207
      src/client/js/rendering/renderer.js
  11. +17
    -0
      src/client/js/rendering/tileOpacity.js
  12. +3
    -3
      src/client/ui/templates/death/death.js
  13. +19
    -16
      src/client/ui/templates/death/styles.less
  14. +2
    -2
      src/client/ui/templates/death/template.html
  15. +6
    -3
      src/server/clientComponents/player.js
  16. +1
    -1
      src/server/components/social.js
  17. +20
    -8
      src/server/world/map.js
  18. +7
    -2
      src/server/world/threadManager.js

+ 1
- 1
src/client/css/error.less View File

@@ -2,7 +2,7 @@

@font-face {
font-family: bitty;
src: url('../fonts/bitty.ttf');
src: url('../fonts/bitty.otf');
}

* {


+ 1
- 1
src/client/css/loader.less View File

@@ -2,7 +2,7 @@

@font-face {
font-family: bitty;
src: url('../fonts/bitty.ttf');
src: url('../fonts/bitty.otf');
}

.loader-container {


BIN
View File


BIN
View File


BIN
View File


BIN
View File


+ 6
- 3
src/client/js/objects/objects.js View File

@@ -173,9 +173,12 @@ define([
sound.unload(obj.zoneId);

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);


src/client/js/rendering/renderLoginBackground.js → src/client/js/rendering/helpers/renderLoginBackground.js View File

@@ -30,14 +30,17 @@ define([

const { width, height, layers } = renderer;

renderer.setPosition({
x: 0,
y: 0
}, true);

let w = Math.ceil(width / 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 midY = ~~(h / 2);


+ 204
- 0
src/client/js/rendering/helpers/updateSprites.js View File

@@ -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;
});

+ 117
- 207
src/client/js/rendering/renderer.js View File

@@ -7,8 +7,9 @@ define([
'js/rendering/particles',
'js/rendering/shaders/outline',
'js/rendering/spritePool',
'js/rendering/helpers/updateSprites',
'js/system/globals',
'js/rendering/renderLoginBackground',
'js/rendering/helpers/renderLoginBackground',
'js/rendering/helpers/resetRenderer'
], function (
resources,
@@ -19,6 +20,7 @@ define([
particles,
shaderOutline,
spritePool,
updateSprites,
globals,
renderLoginBackground,
resetRenderer
@@ -77,6 +79,8 @@ define([

hiddenRooms: null,

staticCamera: false,

init: function () {
PIXI.settings.GC_MODE = PIXI.GC_MODES.AUTO;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
@@ -200,9 +204,12 @@ define([
this.renderer.resize(this.width, this.height);
if (window.player) {
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) {
@@ -278,10 +285,15 @@ define([
},

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;
physics.init(msg.collisionMap);
physics.init(collisionMap);

let map = this.map = msg.map;
let w = this.w = map.length;
let h = this.h = map[0].length;

@@ -301,7 +313,7 @@ define([
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.hiddenRooms = msg.hiddenRooms;
this.hiddenRooms = hiddenRooms;

this.sprites = _.get2dArray(w, h, 'array');

@@ -316,17 +328,24 @@ define([
if (this.zoneId !== null) {
events.emit('onRezone', {
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;
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.
// 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.
@@ -334,9 +353,17 @@ define([
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;
if (player) {
@@ -362,13 +389,29 @@ define([
}
}

const staticCamera = window.staticCamera || this.staticCamera;
if (staticCamera && !instant) {
this.updateSprites();
return;
}

if (instant) {
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();
},
@@ -437,194 +480,7 @@ define([
},

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 () {
@@ -662,8 +518,10 @@ define([
this.moveTo = null;
}

const staticCamera = this.staticCamera || window.staticCamera;

let stage = this.stage;
if (window.staticCamera !== true) {
if (staticCamera !== true) {
stage.x = -~~this.pos.x;
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 () {
if (!this.stage)
return;


+ 17
- 0
src/client/js/rendering/tileOpacity.js View File

@@ -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) {
const { clientConfig: { tileOpacities } } = globals;



+ 3
- 3
src/client/ui/templates/death/death.js View File

@@ -57,9 +57,9 @@ define([

onDeath: function (eventObj) {
if (!eventObj.source)
this.find('.msg').html('you are dead');
this.find('.msg').html('You are dead.');
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')
.html('you lost ' + eventObj.xpLoss + ' experience')
.show();
@@ -72,7 +72,7 @@ define([
},

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.doShow();
}


+ 19
- 16
src/client/ui/templates/death/styles.less View File

@@ -23,22 +23,6 @@
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 {
.buttons {
.btn-respawn {
@@ -54,6 +38,25 @@
}

.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 {
display: none;
}


+ 2
- 2
src/client/ui/templates/death/template.html View File

@@ -2,7 +2,7 @@
<div class="msg"></div>
<div class="penalty"></div>
<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>

+ 6
- 3
src/server/clientComponents/player.js View File

@@ -69,9 +69,12 @@ define([

positionCamera: function (x, y, instant) {
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 }) {


+ 1
- 1
src/server/components/social.js View File

@@ -296,7 +296,7 @@ module.exports = {
},

//Sends multiple notifications to yourself
// messages = [{ msg, className, type }]
// messages = [{ message, className, type }]
notifySelfArray: function (messages) {
const { obj: { id, serverId, instance: { syncer } } } = this;



+ 20
- 8
src/server/world/map.js View File

@@ -48,7 +48,15 @@ module.exports = {

collisionMap: null,

clientMap: null,
clientMap: {
zoneId: null,
map: null,
collisionMap: null,
clientObjects: null,
padding: null,
hiddenRooms: null,
staticCamera: false
},
oldLayers: {
tiles: null,
walls: null,
@@ -125,14 +133,18 @@ module.exports = {
create: function () {
this.getMapFile();

this.clientMap = {
const { layers, collisionMap, objBlueprints, hiddenRooms, zoneConfig } = this;
const { rendererConfig = {} } = zoneConfig;

Object.assign(this.clientMap, {
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 () {


+ 7
- 2
src/server/world/threadManager.js View File

@@ -153,6 +153,9 @@ const messageHandlers = {
const onMessage = (thread, message) => {
if (message.module) {
try {
if (message.includeThreadInArgs)
message.threadId = thread.id;

global[message.module][message.method](message);
} catch (e) {
/* eslint-disable-next-line no-console */
@@ -184,13 +187,14 @@ const spawnThread = async ({ map: { name, path, instanced, destroyWhenEmptyForMs
worker: null,
isReady: false,
promise,
preConfig: {},
cbOnInitialized,
players: [],
playersCurrent: [],
birthEpoch: +new Date(),
destroyWhenEmptyForMs,
emptySinceEpoch: null,
sendArgsToWorker: ['name', 'id'],
sendArgsToWorker: ['name', 'id', 'preConfig'],
workerArgs: null
};

@@ -204,7 +208,7 @@ const spawnThread = async ({ map: { name, path, instanced, destroyWhenEmptyForMs
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.on('message', onMessage.bind(null, thread));
@@ -257,6 +261,7 @@ const killThread = thread => {
};

const sendMessageToThread = ({ threadId, msg }) => {
console.log('ok');
const thread = threads.find(t => t.id === threadId);
if (thread)
thread.worker.send(msg);


Loading…
Cancel
Save