refactor: clean up
This commit is contained in:
parent
2036121926
commit
f82de52fda
|
@ -1,8 +1,10 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Scuti Renderer</title>
|
<title>Scuti Renderer</title>
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -10,22 +12,12 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
div#stats {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 500;
|
|
||||||
width: max(200px, 10vw, 10vh);
|
|
||||||
height: max(100px, 6vh, 6vw);
|
|
||||||
opacity: 0.8;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
||||||
<script type="module" src="script4.js"></script>
|
<script type="module" src="script.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
233
public/script.js
233
public/script.js
|
@ -2,60 +2,183 @@ import { Scuti } from '../src/Scuti';
|
||||||
import { Room } from '../src/objects/rooms/Room';
|
import { Room } from '../src/objects/rooms/Room';
|
||||||
import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial';
|
import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial';
|
||||||
import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial';
|
import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial';
|
||||||
import { Avatar } from '../src/objects/avatars/Avatar';
|
import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture';
|
||||||
import { AvatarAction } from '../src/objects/avatars/actions/AvatarAction';
|
import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter';
|
||||||
|
import { WallFurniture } from '../src';
|
||||||
(async () => {
|
(async () => {
|
||||||
const renderer = new Scuti({
|
const renderer = new Scuti({
|
||||||
canvas: document.getElementById('app'),
|
canvas: document.getElementById('app'),
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight,
|
height: window.innerHeight
|
||||||
resources: './resources'
|
});
|
||||||
});
|
await renderer.loadResources('https://kozennnn.github.io/scuti-resources/');
|
||||||
await renderer.loadResources();
|
const tileMap = 'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
const tileMap =
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxx11100001xxxxxxxxxx\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxx00000000xxxxxxxx0x\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxx0000000000000xxxx00\n' +
|
||||||
'00000000000000000x\n' +
|
'xxxx00000000xxxxxxxx00\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxx000xxx00xxxxxxxx00\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxx00000x00xx0xxxxx0x\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxxx00xxx00xx0000xx00\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxxx0000000xx0xx0xx0x\n' +
|
||||||
'x0000000000000000x\n' +
|
'xxxxx0000000xx0x0000x0\n' +
|
||||||
'x0000000000000000x\n';
|
'xxxxx0000000xx0xx000x0\n' +
|
||||||
|
'xxxxxxxxx00xxx00000x00\n' +
|
||||||
const room = new Room(renderer, {
|
'xxxxxxxxxxxxxxx000xx0x\n' +
|
||||||
tileMap: tileMap,
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
/*floorMaterial: new FloorMaterial(renderer, 110),
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
wallMaterial: new WallMaterial(renderer, 1501)*/
|
'xxxxxx00x00xxxxxxxxxxx\n' +
|
||||||
//floorMaterial: new FloorMaterial(renderer, 307),
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
floorMaterial: new FloorMaterial(renderer, 110),
|
'xxxxxxxxxxxxxxxxxxxxxx\n' +
|
||||||
wallMaterial: new WallMaterial(renderer, 1601)
|
'xxxxxxxx00xxxxxxxxxxxx\n' +
|
||||||
});
|
'xxxxx00000x0xxxxxxxxxx\n' +
|
||||||
avatar(room, 2, 1, 0, 0);
|
'xxxxxxx00000000000xxxx\n' +
|
||||||
avatar(room, 4, 1, 0, 1);
|
'xxxxxxxx0xx000000x00xx\n' +
|
||||||
avatar(room, 6, 1, 0, 2);
|
'xxxxxxxxxxxxxxxx00xxxx\n';
|
||||||
avatar(room, 8, 1, 0, 3);
|
const room = new Room(renderer, {
|
||||||
avatar(room, 10, 1, 0, 4);
|
tileMap,
|
||||||
avatar(room, 12, 1, 0, 5);
|
floorMaterial: new FloorMaterial(renderer, 110),
|
||||||
avatar(room, 14, 1, 0, 6);
|
wallMaterial: new WallMaterial(renderer, 2301)
|
||||||
avatar(room, 16, 1, 0, 7);
|
});
|
||||||
})();
|
const furniture = new FloorFurniture({
|
||||||
|
id: 4967,
|
||||||
function avatar(room, x, y, z, direction) {
|
position: {
|
||||||
const avatar = new Avatar({
|
x: 5,
|
||||||
figure: 'hr-100-61.hd-180-7.ch-210-66.lg-270-82.sh-290-80',
|
y: 4,
|
||||||
position: {
|
z: 0
|
||||||
x: x,
|
},
|
||||||
y: y,
|
direction: 2,
|
||||||
z: z
|
state: 1
|
||||||
},
|
});
|
||||||
bodyDirection: direction,
|
room.objects.add(furniture);
|
||||||
headDirection: direction,
|
furniture.onPointerDown = () => {
|
||||||
actions: [AvatarAction.Talk, AvatarAction.Wave, AvatarAction.Walk, AvatarAction.CarryItem],
|
console.log('clicked');
|
||||||
handItem: 55
|
};
|
||||||
});
|
const furniture3 = new FloorFurniture({
|
||||||
room.objects.add(avatar);
|
id: 8916,
|
||||||
|
position: {
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
direction: 2,
|
||||||
|
state: 1
|
||||||
|
});
|
||||||
|
const furniture2 = new FloorFurniture({
|
||||||
|
id: 8916,
|
||||||
|
position: {
|
||||||
|
x: 8,
|
||||||
|
y: 10,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
direction: 2,
|
||||||
|
state: 1
|
||||||
|
});
|
||||||
|
const wallFurniture = new WallFurniture({
|
||||||
|
id: 4625,
|
||||||
|
position: {
|
||||||
|
x: -1,
|
||||||
|
y: 2,
|
||||||
|
offsetX: 2,
|
||||||
|
offsetY: -25
|
||||||
|
},
|
||||||
|
direction: 2,
|
||||||
|
state: 2
|
||||||
|
});
|
||||||
|
const wallFurniture2 = new WallFurniture({
|
||||||
|
id: 4032,
|
||||||
|
position: {
|
||||||
|
x: 3,
|
||||||
|
y: -1,
|
||||||
|
offsetX: 4,
|
||||||
|
offsetY: -30
|
||||||
|
},
|
||||||
|
direction: 4,
|
||||||
|
state: 1
|
||||||
|
});
|
||||||
|
room.objects.add(furniture3);
|
||||||
|
room.objects.add(furniture2);
|
||||||
|
room.objects.add(wallFurniture);
|
||||||
|
room.objects.add(wallFurniture2);
|
||||||
|
setTimeout(() => {
|
||||||
|
return wallFurniture.move({
|
||||||
|
x: -1,
|
||||||
|
y: 3,
|
||||||
|
offsetX: 2,
|
||||||
|
offsetY: -25
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
setTimeout(() => {
|
||||||
|
return wallFurniture.move({
|
||||||
|
x: -1,
|
||||||
|
y: 5,
|
||||||
|
offsetX: 2,
|
||||||
|
offsetY: -25
|
||||||
|
});
|
||||||
|
}, 5000);
|
||||||
|
furniture3.onLoadComplete = () => {
|
||||||
|
console.log('loaded!');
|
||||||
|
};
|
||||||
|
room.tiles.onPointerDown = (event) => {
|
||||||
|
furniture.move(event.position);
|
||||||
|
};
|
||||||
|
document.onkeydown = (e) => {
|
||||||
|
e = e || window.event;
|
||||||
|
if (e.keyCode == '38') {
|
||||||
|
if (room.camera.zoomLevel <= 1) {
|
||||||
|
room.camera.zoomLevel = room.camera.zoomLevel * 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
room.camera.zoomLevel += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '40') {
|
||||||
|
if (room.camera.zoomLevel <= 1) {
|
||||||
|
room.camera.zoomLevel = room.camera.zoomLevel / 2;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
room.camera.zoomLevel -= 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '37') {
|
||||||
|
furniture.rotate(4);
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '39') {
|
||||||
|
const filter = new WiredSelectionFilter(0xffffff, 0x999999);
|
||||||
|
furniture.addFilter(filter);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})().catch((error) => {
|
||||||
|
return console.error(error);
|
||||||
|
});
|
||||||
|
function dice(room, x, y, z) {
|
||||||
|
const furni5 = new FloorFurniture({
|
||||||
|
position: {
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
z
|
||||||
|
},
|
||||||
|
direction: 0,
|
||||||
|
id: 284,
|
||||||
|
state: 1
|
||||||
|
});
|
||||||
|
room.objects.add(furni5);
|
||||||
|
let timeout;
|
||||||
|
furni5.onDoubleClick = (event) => {
|
||||||
|
console.log(event);
|
||||||
|
console.log('clicked furni5', event);
|
||||||
|
if (event.tag === 'activate') {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
furni5.state = -1;
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
furni5.state = Math.floor(Math.random() * 6) + 1;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
furni5.state = 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +1,43 @@
|
||||||
import { Scuti } from '../src/Scuti';
|
import { Scuti } from '../src/Scuti'
|
||||||
import { Room } from '../src/objects/rooms/Room';
|
import { Room } from '../src/objects/rooms/Room'
|
||||||
import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial';
|
import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial'
|
||||||
import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial';
|
import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial'
|
||||||
import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture';
|
import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture'
|
||||||
import {WiredSelectionFilter} from "../src/objects/filters/WiredSelectionFilter";
|
import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter'
|
||||||
import {WallFurniture} from "../src";
|
import { WallFurniture } from '../src'
|
||||||
|
|
||||||
(async () => {
|
// Initialising Scuti Engine
|
||||||
|
;(async () => {
|
||||||
const renderer = new Scuti({
|
const renderer = new Scuti({
|
||||||
canvas: document.getElementById('app'),
|
canvas: document.getElementById('app') as HTMLElement,
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight,
|
height: window.innerHeight
|
||||||
resources: 'https://kozennnn.github.io/scuti-resources/'
|
})
|
||||||
});
|
|
||||||
await renderer.loadResources('https://kozennnn.github.io/scuti-resources/');
|
|
||||||
|
|
||||||
const tileMap = 'x1110001\n' + 'x0000000\n' + '00000000\n' + 'x0000000\n' + 'x0000000\n';
|
await renderer.loadResources('https://kozennnn.github.io/scuti-resources/')
|
||||||
|
|
||||||
|
const tileMap =
|
||||||
|
'xxxxxxxx000000xxxxx\n' +
|
||||||
|
'xxxxxxx000000000xxx\n' +
|
||||||
|
'xxxxxx000000000000x\n' +
|
||||||
|
'xxx0x000xx0xxxx0000\n' +
|
||||||
|
'xxx0x000x00x0000000\n' +
|
||||||
|
'xxx0x000xx0x0000000\n' +
|
||||||
|
'xxx0x000000x0000000\n' +
|
||||||
|
'xxx0x000xx0x0000000\n' +
|
||||||
|
'xxx0x000x00x0000000\n' +
|
||||||
|
'xxx00000xx0x0000000\n' +
|
||||||
|
'xxxxxx00000x0000000\n' +
|
||||||
|
'xxxxxx0000000000000\n' +
|
||||||
|
'xxxxxx0000000000000\n' +
|
||||||
|
'xxxxxx00000x0000000\n'
|
||||||
|
|
||||||
const room = new Room(renderer, {
|
const room = new Room(renderer, {
|
||||||
tileMap: tileMap,
|
tileMap,
|
||||||
floorMaterial: new FloorMaterial(renderer, 110),
|
floorMaterial: new FloorMaterial(renderer, 110),
|
||||||
wallMaterial: new WallMaterial(renderer, 2301)
|
wallMaterial: new WallMaterial(renderer, 2301)
|
||||||
});
|
})
|
||||||
|
|
||||||
const furniture = new FloorFurniture({
|
const furniture = new FloorFurniture({
|
||||||
//id: 4950,
|
//id: 4950,
|
||||||
//id: 1619,
|
//id: 1619,
|
||||||
|
@ -33,11 +49,11 @@ import {WallFurniture} from "../src";
|
||||||
},
|
},
|
||||||
direction: 2,
|
direction: 2,
|
||||||
state: 1
|
state: 1
|
||||||
});
|
})
|
||||||
room.objects.add(furniture);
|
room.objects.add(furniture)
|
||||||
furniture.onPointerDown = () => {
|
furniture.onPointerDown = () => {
|
||||||
console.log('clicked');
|
console.log('clicked')
|
||||||
};
|
}
|
||||||
const furniture3 = new FloorFurniture({
|
const furniture3 = new FloorFurniture({
|
||||||
id: 8916,
|
id: 8916,
|
||||||
position: {
|
position: {
|
||||||
|
@ -47,7 +63,7 @@ import {WallFurniture} from "../src";
|
||||||
},
|
},
|
||||||
direction: 2,
|
direction: 2,
|
||||||
state: 1
|
state: 1
|
||||||
});
|
})
|
||||||
const furniture2 = new FloorFurniture({
|
const furniture2 = new FloorFurniture({
|
||||||
id: 8916,
|
id: 8916,
|
||||||
position: {
|
position: {
|
||||||
|
@ -57,7 +73,7 @@ import {WallFurniture} from "../src";
|
||||||
},
|
},
|
||||||
direction: 2,
|
direction: 2,
|
||||||
state: 1
|
state: 1
|
||||||
});
|
})
|
||||||
const wallFurniture = new WallFurniture({
|
const wallFurniture = new WallFurniture({
|
||||||
id: 4625,
|
id: 4625,
|
||||||
position: {
|
position: {
|
||||||
|
@ -68,7 +84,7 @@ import {WallFurniture} from "../src";
|
||||||
},
|
},
|
||||||
direction: 2,
|
direction: 2,
|
||||||
state: 2
|
state: 2
|
||||||
});
|
})
|
||||||
const wallFurniture2 = new WallFurniture({
|
const wallFurniture2 = new WallFurniture({
|
||||||
id: 4032,
|
id: 4032,
|
||||||
position: {
|
position: {
|
||||||
|
@ -79,88 +95,94 @@ import {WallFurniture} from "../src";
|
||||||
},
|
},
|
||||||
direction: 4,
|
direction: 4,
|
||||||
state: 1
|
state: 1
|
||||||
});
|
})
|
||||||
room.objects.add(furniture3);
|
room.objects.add(furniture3)
|
||||||
room.objects.add(furniture2);
|
room.objects.add(furniture2)
|
||||||
room.objects.add(wallFurniture);
|
room.objects.add(wallFurniture)
|
||||||
room.objects.add(wallFurniture2);
|
room.objects.add(wallFurniture2)
|
||||||
setTimeout(() => wallFurniture.move({
|
setTimeout(() => {
|
||||||
x: -1,
|
return wallFurniture.move({
|
||||||
y: 3,
|
x: -1,
|
||||||
offsetX: 2,
|
y: 3,
|
||||||
offsetY: -25
|
offsetX: 2,
|
||||||
}), 3000);
|
offsetY: -25
|
||||||
setTimeout(() => wallFurniture.move({
|
})
|
||||||
x: -1,
|
}, 3000)
|
||||||
y: 5,
|
setTimeout(() => {
|
||||||
offsetX: 2,
|
return wallFurniture.move({
|
||||||
offsetY: -25
|
x: -1,
|
||||||
}), 5000);
|
y: 5,
|
||||||
|
offsetX: 2,
|
||||||
|
offsetY: -25
|
||||||
|
})
|
||||||
|
}, 5000)
|
||||||
//setTimeout(() => room.objects.add(furniture), 6000);
|
//setTimeout(() => room.objects.add(furniture), 6000);
|
||||||
furniture3.onLoadComplete = () => {
|
furniture3.onLoadComplete = () => {
|
||||||
console.log('loaded!');
|
console.log('loaded!')
|
||||||
};
|
}
|
||||||
room.tiles.onPointerDown = (event) => {
|
room.tiles.onPointerDown = (event) => {
|
||||||
furniture.move(event.position);
|
furniture.move(event.position)
|
||||||
//room.tileMap = tileMap;
|
//room.tileMap = tileMap;
|
||||||
};
|
}
|
||||||
//dice(room, 5, 5, 2);
|
//dice(room, 5, 5, 2);
|
||||||
document.onkeydown = (e) => {
|
document.onkeydown = (e) => {
|
||||||
e = e || window.event;
|
e = e || window.event
|
||||||
|
|
||||||
if (e.keyCode == '38') {
|
if (e.keyCode == '38') {
|
||||||
if (room.camera.zoomLevel <= 1) {
|
if (room.camera.zoomLevel <= 1) {
|
||||||
room.camera.zoomLevel = room.camera.zoomLevel * 2;
|
room.camera.zoomLevel = room.camera.zoomLevel * 2
|
||||||
} else {
|
} else {
|
||||||
room.camera.zoomLevel += 1;
|
room.camera.zoomLevel += 1
|
||||||
}
|
}
|
||||||
} else if (e.keyCode == '40') {
|
} else if (e.keyCode == '40') {
|
||||||
if (room.camera.zoomLevel <= 1) {
|
if (room.camera.zoomLevel <= 1) {
|
||||||
room.camera.zoomLevel = room.camera.zoomLevel / 2;
|
room.camera.zoomLevel = room.camera.zoomLevel / 2
|
||||||
} else {
|
} else {
|
||||||
room.camera.zoomLevel -= 1;
|
room.camera.zoomLevel -= 1
|
||||||
}
|
}
|
||||||
} else if (e.keyCode == '37') {
|
} else if (e.keyCode == '37') {
|
||||||
furniture.rotate(4);
|
furniture.rotate(4)
|
||||||
} else if (e.keyCode == '39') {
|
} else if (e.keyCode == '39') {
|
||||||
const filter = new WiredSelectionFilter(0xffffff, 0x999999);
|
const filter = new WiredSelectionFilter(0xffffff, 0x999999)
|
||||||
furniture.addFilter(filter);
|
furniture.addFilter(filter)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
})();
|
})().catch((error) => {
|
||||||
|
return console.error(error)
|
||||||
|
})
|
||||||
|
|
||||||
function dice(room, x, y, z) {
|
function dice(room, x, y, z) {
|
||||||
let furni5 = new FloorFurniture({
|
const furni5 = new FloorFurniture({
|
||||||
position: {
|
position: {
|
||||||
x: x,
|
x,
|
||||||
y: y,
|
y,
|
||||||
z: z
|
z
|
||||||
},
|
},
|
||||||
//direction: randomRotation[Math.floor(Math.random() * randomRotation.length)],
|
//direction: randomRotation[Math.floor(Math.random() * randomRotation.length)],
|
||||||
direction: 0,
|
direction: 0,
|
||||||
//id: furniId[Math.floor(Math.random() * furniId.length)],
|
//id: furniId[Math.floor(Math.random() * furniId.length)],
|
||||||
id: 284,
|
id: 284,
|
||||||
state: 1
|
state: 1
|
||||||
});
|
})
|
||||||
room.objects.add(furni5);
|
room.objects.add(furni5)
|
||||||
let timeout = undefined;
|
let timeout
|
||||||
furni5.onDoubleClick = (event) => {
|
furni5.onDoubleClick = (event) => {
|
||||||
console.log(event);
|
console.log(event)
|
||||||
//if(furni5.infos.logic === "furniture_dice") {
|
//if(furni5.infos.logic === "furniture_dice") {
|
||||||
console.log('clicked furni5', event);
|
console.log('clicked furni5', event)
|
||||||
if (event.tag === 'activate') {
|
if (event.tag === 'activate') {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout)
|
||||||
furni5.state = -1;
|
furni5.state = -1
|
||||||
timeout = setTimeout(() => {
|
timeout = setTimeout(() => {
|
||||||
furni5.state = Math.floor(Math.random() * 6) + 1;
|
furni5.state = Math.floor(Math.random() * 6) + 1
|
||||||
}, 1000);
|
}, 1000)
|
||||||
/*setTimeout(() => {
|
/*setTimeout(() => {
|
||||||
furni5.state = 0
|
furni5.state = 0
|
||||||
}, 2000);*/
|
}, 2000);*/
|
||||||
} else {
|
} else {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout)
|
||||||
furni5.state = 0;
|
furni5.state = 0
|
||||||
}
|
}
|
||||||
//x@}
|
//x@}
|
||||||
};
|
}
|
||||||
}
|
}
|
18
src/Scuti.ts
18
src/Scuti.ts
|
@ -11,6 +11,7 @@ import { AssetLoader } from './utilities/AssetLoader'
|
||||||
* Convenience class to create a new Scuti renderer.
|
* Convenience class to create a new Scuti renderer.
|
||||||
*
|
*
|
||||||
* This class automatically load all the needed resources and initialise the PixiJS application.
|
* This class automatically load all the needed resources and initialise the PixiJS application.
|
||||||
|
*
|
||||||
* @example
|
* @example
|
||||||
* import { Scuti } from 'scuti-renderer';
|
* import { Scuti } from 'scuti-renderer';
|
||||||
*
|
*
|
||||||
|
@ -21,10 +22,10 @@ import { AssetLoader } from './utilities/AssetLoader'
|
||||||
* height: window.innerHeight,
|
* height: window.innerHeight,
|
||||||
* resources: './resources'
|
* resources: './resources'
|
||||||
* });
|
* });
|
||||||
|
*
|
||||||
* await renderer.loadResources();
|
* await renderer.loadResources();
|
||||||
*
|
*
|
||||||
* @class
|
* @class
|
||||||
* @memberof Scuti
|
|
||||||
*/
|
*/
|
||||||
export class Scuti {
|
export class Scuti {
|
||||||
/**
|
/**
|
||||||
|
@ -49,7 +50,7 @@ export class Scuti {
|
||||||
* @member {Logger}
|
* @member {Logger}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private readonly _logger: Logger = new Logger('Scuti')
|
private readonly _logger = new Logger('Scuti')
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {IRendererConfiguration} [configuration] - The renderer configuration.
|
* @param {IRendererConfiguration} [configuration] - The renderer configuration.
|
||||||
|
@ -93,7 +94,7 @@ export class Scuti {
|
||||||
* @member {Promise<void>}
|
* @member {Promise<void>}
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public async loadResources(domain: string = 'http://127.0.0.1:8081/'): Promise<void> {
|
public async loadResources(domain: string): Promise<void> {
|
||||||
AssetLoader.domain = domain
|
AssetLoader.domain = domain
|
||||||
|
|
||||||
/** And now load them */
|
/** And now load them */
|
||||||
|
@ -123,4 +124,15 @@ export class Scuti {
|
||||||
public get application(): Application {
|
public get application(): Application {
|
||||||
return this._application
|
return this._application
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reference to the renderer logger instance.
|
||||||
|
*
|
||||||
|
* @member {Logger}
|
||||||
|
* @readonly
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
public get logger(): Logger {
|
||||||
|
return this._logger
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,12 +5,12 @@
|
||||||
* @memberof Scuti
|
* @memberof Scuti
|
||||||
*/
|
*/
|
||||||
export enum Direction {
|
export enum Direction {
|
||||||
NORTH /** Direction 0 */,
|
NORTH,
|
||||||
NORTH_EAST /** Direction 1 */,
|
NORTH_EAST,
|
||||||
EAST /** Direction 2 */,
|
EAST,
|
||||||
SOUTH_EAST /** Direction 3 */,
|
SOUTH_EAST,
|
||||||
SOUTH /** Direction 4 */,
|
SOUTH,
|
||||||
SOUTH_WEST /** Direction 5 */,
|
SOUTH_WEST,
|
||||||
WEST /** Direction 6 */,
|
WEST,
|
||||||
NORTH_WEST /** Direction 7 */
|
NORTH_WEST
|
||||||
}
|
}
|
||||||
|
|
16
src/index.ts
16
src/index.ts
|
@ -1,8 +1,8 @@
|
||||||
export { Scuti } from './Scuti';
|
export { Scuti } from './Scuti'
|
||||||
export { Room } from './objects/rooms/Room';
|
export { Room } from './objects/rooms/Room'
|
||||||
export { FloorMaterial } from './objects/rooms/materials/FloorMaterial';
|
export { FloorMaterial } from './objects/rooms/materials/FloorMaterial'
|
||||||
export { FloorFurniture } from './objects/furnitures/FloorFurniture';
|
export { FloorFurniture } from './objects/furnitures/FloorFurniture'
|
||||||
export { WallMaterial } from './objects/rooms/materials/WallMaterial';
|
export { WallMaterial } from './objects/rooms/materials/WallMaterial'
|
||||||
export { WallFurniture } from './objects/furnitures/WallFurniture';
|
export { WallFurniture } from './objects/furnitures/WallFurniture'
|
||||||
export { Avatar } from './objects/avatars/Avatar';
|
export { Avatar } from './objects/avatars/Avatar'
|
||||||
export { AvatarAction } from './objects/avatars/actions/AvatarAction';
|
export { AvatarAction } from './objects/avatars/actions/AvatarAction'
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import { Container } from 'pixi.js';
|
import { Container } from 'pixi.js'
|
||||||
|
|
||||||
import type { Scuti } from '../../Scuti';
|
import type { Scuti } from '../../Scuti'
|
||||||
import { RoomVisualization } from './RoomVisualization';
|
import { RoomVisualization } from './RoomVisualization'
|
||||||
import { RoomTileMap } from './RoomTileMap';
|
import { RoomTileMap } from './RoomTileMap'
|
||||||
import type { Material } from './materials/Material';
|
import type { Material } from './materials/Material'
|
||||||
import { WallMaterial } from './materials/WallMaterial';
|
import { WallMaterial } from './materials/WallMaterial'
|
||||||
import { FloorMaterial } from './materials/FloorMaterial';
|
import { FloorMaterial } from './materials/FloorMaterial'
|
||||||
import { RoomCamera } from './RoomCamera';
|
import { RoomCamera } from './RoomCamera'
|
||||||
import type { EventManager } from '../interactions/EventManager';
|
import type { EventManager } from '../interactions/EventManager'
|
||||||
import type { IRoomConfig } from '../../types/Room';
|
import type { IRoomConfig } from '../../types/Room'
|
||||||
import type { RoomPartLayer } from './layers/RoomPartLayer';
|
import type { RoomPartLayer } from './layers/RoomPartLayer'
|
||||||
import type { RoomObjectLayer } from './layers/RoomObjectLayer';
|
import type { RoomObjectLayer } from './layers/RoomObjectLayer'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Room class for rendering rooms like the ones on Habbo Hotel.
|
* Room class for rendering rooms like the ones on Habbo Hotel.
|
||||||
|
@ -25,7 +25,7 @@ export class Room extends Container {
|
||||||
* @member {Scuti}
|
* @member {Scuti}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private readonly _engine: Scuti;
|
private readonly _engine: Scuti
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The room tile map where every informations about the room model is stored.
|
* The room tile map where every informations about the room model is stored.
|
||||||
|
@ -33,7 +33,7 @@ export class Room extends Container {
|
||||||
* @member {RoomTileMap}
|
* @member {RoomTileMap}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _tileMap: RoomTileMap;
|
private _tileMap: RoomTileMap
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The wall material that will be applied in the room, it contains the color and the texture of the wall.
|
* The wall material that will be applied in the room, it contains the color and the texture of the wall.
|
||||||
|
@ -41,7 +41,7 @@ export class Room extends Container {
|
||||||
* @member {Material}
|
* @member {Material}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _wallMaterial: Material;
|
private _wallMaterial: Material
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The floor material that will be applied in the room, it contains the color and the texture of the wall.
|
* The floor material that will be applied in the room, it contains the color and the texture of the wall.
|
||||||
|
@ -49,7 +49,7 @@ export class Room extends Container {
|
||||||
* @member {Material}
|
* @member {Material}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _floorMaterial: Material;
|
private _floorMaterial: Material
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The wall thickness of the room.
|
* The wall thickness of the room.
|
||||||
|
@ -57,7 +57,7 @@ export class Room extends Container {
|
||||||
* @member {number}
|
* @member {number}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _wallThickness: number;
|
private _wallThickness: number
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The floor thickness of the room.
|
* The floor thickness of the room.
|
||||||
|
@ -65,7 +65,7 @@ export class Room extends Container {
|
||||||
* @member {number}
|
* @member {number}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _floorThickness: number;
|
private _floorThickness: number
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The wall height of the room, the height is added to the base height of the room.
|
* The wall height of the room, the height is added to the base height of the room.
|
||||||
|
@ -73,7 +73,7 @@ export class Room extends Container {
|
||||||
* @member {number}
|
* @member {number}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _wallHeight: number;
|
private _wallHeight: number
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The room view instance, where all the objects like furnitures, avatars or the tiles, walls and stairs are stored.
|
* The room view instance, where all the objects like furnitures, avatars or the tiles, walls and stairs are stored.
|
||||||
|
@ -81,7 +81,7 @@ export class Room extends Container {
|
||||||
* @member {RoomVisualization}
|
* @member {RoomVisualization}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private readonly _visualization: RoomVisualization;
|
private readonly _visualization: RoomVisualization
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The room camera, it manage the room dragging and centering the room when it's out of bounds.
|
* The room camera, it manage the room dragging and centering the room when it's out of bounds.
|
||||||
|
@ -89,7 +89,7 @@ export class Room extends Container {
|
||||||
* @member {RoomCamera}
|
* @member {RoomCamera}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private readonly _camera: RoomCamera;
|
private readonly _camera: RoomCamera
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Scuti} [engine] - The Scuti instance that will be used to render the room.
|
* @param {Scuti} [engine] - The Scuti instance that will be used to render the room.
|
||||||
|
@ -102,24 +102,24 @@ export class Room extends Container {
|
||||||
* @param {number} [config.wallThickness] - The room wall thickness.
|
* @param {number} [config.wallThickness] - The room wall thickness.
|
||||||
**/
|
**/
|
||||||
constructor(engine: Scuti, config: IRoomConfig) {
|
constructor(engine: Scuti, config: IRoomConfig) {
|
||||||
super();
|
super()
|
||||||
|
|
||||||
/** Store variables */
|
/** Store variables */
|
||||||
this._engine = engine;
|
this._engine = engine
|
||||||
this._wallMaterial = config.wallMaterial ?? new WallMaterial(this._engine);
|
this._wallMaterial = config.wallMaterial ?? new WallMaterial(this._engine)
|
||||||
this._floorMaterial = config.floorMaterial ?? new FloorMaterial(this._engine);
|
this._floorMaterial = config.floorMaterial ?? new FloorMaterial(this._engine)
|
||||||
this._wallThickness = config.wallThickness ?? 8;
|
this._wallThickness = config.wallThickness ?? 8
|
||||||
this._floorThickness = config.floorThickness ?? 8;
|
this._floorThickness = config.floorThickness ?? 8
|
||||||
this._wallHeight = config.wallHeight ?? 0;
|
this._wallHeight = config.wallHeight ?? 0
|
||||||
|
|
||||||
/** Initialise everything */
|
/** Initialise everything */
|
||||||
this._tileMap = new RoomTileMap(config.tileMap);
|
this._tileMap = new RoomTileMap(config.tileMap)
|
||||||
this._visualization = new RoomVisualization(this);
|
this._visualization = new RoomVisualization(this)
|
||||||
this._camera = new RoomCamera(this);
|
this._camera = new RoomCamera(this)
|
||||||
|
|
||||||
/** Add the room view and then the room camera to the PixiJS application */
|
/** Add the room view and then the room camera to the Application */
|
||||||
this.addChild(this._visualization);
|
this.addChild(this._visualization)
|
||||||
this._engine.application.stage.addChild(this._camera);
|
this._engine.application.stage.addChild(this._camera)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -130,7 +130,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get engine(): Scuti {
|
public get engine(): Scuti {
|
||||||
return this._engine;
|
return this._engine
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -141,7 +141,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get visualization(): RoomVisualization {
|
public get visualization(): RoomVisualization {
|
||||||
return this._visualization;
|
return this._visualization
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -152,7 +152,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get tileMap(): RoomTileMap {
|
public get tileMap(): RoomTileMap {
|
||||||
return this._tileMap;
|
return this._tileMap
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -162,8 +162,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set tileMap(tileMap: RoomTileMap) {
|
public set tileMap(tileMap: RoomTileMap) {
|
||||||
this._tileMap = tileMap;
|
this._tileMap = tileMap
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -174,7 +174,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get wallMaterial(): Material {
|
public get wallMaterial(): Material {
|
||||||
return this._wallMaterial;
|
return this._wallMaterial
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -184,8 +184,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set wallMaterial(material: Material) {
|
public set wallMaterial(material: Material) {
|
||||||
this._wallMaterial = material;
|
this._wallMaterial = material
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -196,7 +196,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get floorMaterial(): Material {
|
public get floorMaterial(): Material {
|
||||||
return this._floorMaterial;
|
return this._floorMaterial
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -206,8 +206,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set floorMaterial(material: Material) {
|
public set floorMaterial(material: Material) {
|
||||||
this._floorMaterial = material;
|
this._floorMaterial = material
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -218,7 +218,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get wallThickness(): number {
|
public get wallThickness(): number {
|
||||||
return this._wallThickness;
|
return this._wallThickness
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -228,8 +228,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set wallThickness(thickness: number) {
|
public set wallThickness(thickness: number) {
|
||||||
this._wallThickness = thickness;
|
this._wallThickness = thickness
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -240,7 +240,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get floorThickness(): number {
|
public get floorThickness(): number {
|
||||||
return this._floorThickness;
|
return this._floorThickness
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -250,8 +250,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set floorThickness(thickness: number) {
|
public set floorThickness(thickness: number) {
|
||||||
this._floorThickness = thickness;
|
this._floorThickness = thickness
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -262,7 +262,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get wallHeight(): number {
|
public get wallHeight(): number {
|
||||||
return this._wallHeight;
|
return this._wallHeight
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -272,8 +272,8 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public set wallHeight(height: number) {
|
public set wallHeight(height: number) {
|
||||||
this._wallHeight = height;
|
this._wallHeight = height
|
||||||
this._visualization.update();
|
this._visualization.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -284,7 +284,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get tiles(): EventManager {
|
public get tiles(): EventManager {
|
||||||
return this._visualization.partLayer.tiles;
|
return this._visualization.partLayer.tiles
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -295,7 +295,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get walls(): EventManager {
|
public get walls(): EventManager {
|
||||||
return this._visualization.partLayer.walls;
|
return this._visualization.partLayer.walls
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -306,7 +306,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get objects(): RoomObjectLayer {
|
public get objects(): RoomObjectLayer {
|
||||||
return this._visualization.objectLayer;
|
return this._visualization.objectLayer
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -317,7 +317,7 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get parts(): RoomPartLayer {
|
public get parts(): RoomPartLayer {
|
||||||
return this._visualization.partLayer;
|
return this._visualization.partLayer
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -328,6 +328,6 @@ export class Room extends Container {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get camera(): RoomCamera {
|
public get camera(): RoomCamera {
|
||||||
return this._camera;
|
return this._camera
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import type { Spritesheet } from 'pixi.js';
|
import type { Spritesheet } from 'pixi.js'
|
||||||
import { Container, Assets, Sprite } from 'pixi.js';
|
import { Container, Assets, Sprite } from 'pixi.js'
|
||||||
|
|
||||||
import type { Room } from '../Room';
|
import type { Room } from '../Room'
|
||||||
import type { ICursorConfiguration, IPosition3D } from '../../../types/Room';
|
import type { ICursorConfiguration, IPosition3D } from '../../../types/Room'
|
||||||
import { ZOrder } from '../../../utilities/ZOrder';
|
import { ZOrder } from '../../../utilities/ZOrder'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Cursor class that show up when we move the cursor on a room tile.
|
* Cursor class that show up when we move the cursor on a room tile.
|
||||||
|
@ -18,19 +18,19 @@ export class Cursor extends Container {
|
||||||
* @member {IPosition3D}
|
* @member {IPosition3D}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private _position: IPosition3D;
|
private _position: IPosition3D
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Room} [_room] - The room instance where the cursor will be drawn.
|
* @param {Room} [_room] - The room instance where the cursor will be drawn.
|
||||||
* @param {ICursorConfiguration} [configuration] - The tile configuration.
|
* @param {ICursorConfiguration} [configuration] - The tile configuration.
|
||||||
**/
|
**/
|
||||||
constructor(_room: Room, configuration: ICursorConfiguration) {
|
constructor(_room: Room, configuration: ICursorConfiguration) {
|
||||||
super();
|
super()
|
||||||
|
|
||||||
this._position = configuration.position;
|
this._position = configuration.position
|
||||||
|
|
||||||
/** Draw the cursor */
|
/** Draw the cursor */
|
||||||
this._draw();
|
this._draw()
|
||||||
// todo!(): create the blue circle 'cursor_64_b' cursor when needed
|
// todo!(): create the blue circle 'cursor_64_b' cursor when needed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,15 +42,15 @@ export class Cursor extends Container {
|
||||||
*/
|
*/
|
||||||
private _draw(): void {
|
private _draw(): void {
|
||||||
/** Creating the sprite */
|
/** Creating the sprite */
|
||||||
const texture = Assets.get<Spritesheet>('room/cursors').textures['tile_cursor_64_a_0_0.png'];
|
const texture = Assets.get<Spritesheet>('room/cursors').textures['tile_cursor_64_a_0_0.png']
|
||||||
const sprite = new Sprite(texture);
|
const sprite = new Sprite(texture)
|
||||||
|
|
||||||
sprite.y = -20;
|
sprite.y = -20
|
||||||
this.addChild(sprite);
|
this.addChild(sprite)
|
||||||
|
|
||||||
/** Positionate the cursor and its zIndex */
|
/** Positionate the cursor and its zIndex */
|
||||||
this.moveTo(this._position);
|
this.moveTo(this._position)
|
||||||
this.zIndex = ZOrder.tileCursor(this._position);
|
this.zIndex = ZOrder.tileCursor(this._position)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -62,8 +62,8 @@ export class Cursor extends Container {
|
||||||
*/
|
*/
|
||||||
public moveTo(position: IPosition3D): void {
|
public moveTo(position: IPosition3D): void {
|
||||||
// this.zOrder = ZOrder.tileCursor(position);
|
// this.zOrder = ZOrder.tileCursor(position);
|
||||||
this._position = position;
|
this._position = position
|
||||||
this.x = 32 * this._position.x - 32 * this._position.y;
|
this.x = 32 * this._position.x - 32 * this._position.y
|
||||||
this.y = 16 * this._position.x + 16 * this._position.y - 32 * this._position.z;
|
this.y = 16 * this._position.x + 16 * this._position.y - 32 * this._position.z
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
13
src/types/Configuration.d.ts
vendored
13
src/types/Configuration.d.ts
vendored
|
@ -1,14 +1,13 @@
|
||||||
import type { Spritesheet } from 'pixi.js';
|
import type { Spritesheet } from 'pixi.js'
|
||||||
|
|
||||||
export interface IRendererConfiguration {
|
export interface IRendererConfiguration {
|
||||||
canvas: HTMLElement;
|
canvas: HTMLElement
|
||||||
width: number;
|
width: number
|
||||||
height: number;
|
height: number
|
||||||
resources: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ScutiSpritesheet extends Omit<Spritesheet, 'data'> {
|
export interface ScutiSpritesheet extends Omit<Spritesheet, 'data'> {
|
||||||
data: {
|
data: {
|
||||||
partsType: { [key: string]: { gestures: string[] } };
|
partsType: { [key: string]: { gestures: string[] } }
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
134
src/types/Room.d.ts
vendored
134
src/types/Room.d.ts
vendored
|
@ -1,108 +1,108 @@
|
||||||
import type { StairType } from '../enums/StairType';
|
import type { StairType } from '../enums/StairType'
|
||||||
import type { Direction } from '../enums/Direction';
|
import type { Direction } from '../enums/Direction'
|
||||||
import type { WallType } from '../enums/WallType';
|
import type { WallType } from '../enums/WallType'
|
||||||
import type { Material } from '../objects/rooms/materials/Material';
|
import type { Material } from '../objects/rooms/materials/Material'
|
||||||
import type { IFloorPosition, IWallPosition } from './Furniture';
|
import type { IFloorPosition, IWallPosition } from './Furniture'
|
||||||
import type { IAvatarPosition } from './Avatar';
|
import type { IAvatarPosition } from './Avatar'
|
||||||
|
|
||||||
export type TileMap = string[][];
|
export type TileMap = string[][]
|
||||||
|
|
||||||
export interface IRoomConfig {
|
export interface IRoomConfig {
|
||||||
tileMap: string;
|
tileMap: string
|
||||||
floorMaterial?: Material;
|
floorMaterial?: Material
|
||||||
floorThickness?: number;
|
floorThickness?: number
|
||||||
wallMaterial?: Material;
|
wallMaterial?: Material
|
||||||
wallHeight?: number;
|
wallHeight?: number
|
||||||
wallThickness?: number;
|
wallThickness?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IRoomObjectConfig {
|
export interface IRoomObjectConfig {
|
||||||
position: IWallPosition | IFloorPosition | IAvatarPosition;
|
position: IWallPosition | IFloorPosition | IAvatarPosition
|
||||||
direction: Direction;
|
direction: Direction
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ITileConfiguration {
|
export interface ITileConfiguration {
|
||||||
material?: Material;
|
material?: Material
|
||||||
thickness?: number;
|
thickness?: number
|
||||||
position: IPosition3D;
|
position: IPosition3D
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IStairConfiguration {
|
export interface IStairConfiguration {
|
||||||
material?: Material;
|
material?: Material
|
||||||
thickness?: number;
|
thickness?: number
|
||||||
type: StairType;
|
type: StairType
|
||||||
position: IPosition3D;
|
position: IPosition3D
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IWallConfiguration {
|
export interface IWallConfiguration {
|
||||||
material?: Material;
|
material?: Material
|
||||||
thickness?: number;
|
thickness?: number
|
||||||
height?: number;
|
height?: number
|
||||||
position: IPosition3D;
|
position: IPosition3D
|
||||||
type: WallType;
|
type: WallType
|
||||||
door?: boolean;
|
door?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ICursorConfiguration {
|
export interface ICursorConfiguration {
|
||||||
position: IPosition3D;
|
position: IPosition3D
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IPosition3D {
|
export interface IPosition3D {
|
||||||
x: number;
|
x: number
|
||||||
y: number;
|
y: number
|
||||||
z: number;
|
z: number
|
||||||
direction?: number;
|
direction?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IPosition2D {
|
export interface IPosition2D {
|
||||||
x: number;
|
x: number
|
||||||
y: number;
|
y: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ITileInfo {
|
export interface ITileInfo {
|
||||||
tile: boolean;
|
tile: boolean
|
||||||
door: boolean;
|
door: boolean
|
||||||
height: number;
|
height: number
|
||||||
stairType?: { type: StairType; direction: Direction };
|
stairType?: { type: StairType; direction: Direction }
|
||||||
wallType?: WallType;
|
wallType?: WallType
|
||||||
}
|
}
|
||||||
|
|
||||||
// missing types here
|
// missing types here
|
||||||
export interface RoomMaterial {
|
export interface RoomMaterial {
|
||||||
assets: { x: string; y: string; source?: string; flipH?: boolean };
|
assets: { x: string; y: string; source?: string; flipH?: boolean }
|
||||||
floorData: {
|
floorData: {
|
||||||
floors: Array<{
|
floors: Array<{
|
||||||
id: string;
|
id: string
|
||||||
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>;
|
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>
|
||||||
}>;
|
}>
|
||||||
};
|
}
|
||||||
materials: Array<{
|
materials: Array<{
|
||||||
id: string;
|
id: string
|
||||||
matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>;
|
matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>
|
||||||
}>;
|
}>
|
||||||
textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>;
|
textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>
|
||||||
wallData: Array<{
|
wallData: Array<{
|
||||||
materials: Array<{
|
materials: Array<{
|
||||||
id: string;
|
id: string
|
||||||
matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>;
|
matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>
|
||||||
}>;
|
}>
|
||||||
textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>;
|
textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>
|
||||||
walls: Array<{
|
walls: Array<{
|
||||||
id: string;
|
id: string
|
||||||
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>;
|
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>
|
||||||
}>;
|
}>
|
||||||
}>;
|
}>
|
||||||
landscapeData: object;
|
landscapeData: object
|
||||||
// ...
|
// ...
|
||||||
visualizationType: string;
|
visualizationType: string
|
||||||
type: string;
|
type: string
|
||||||
logicType: string;
|
logicType: string
|
||||||
spritesheet: string;
|
spritesheet: string
|
||||||
name: string;
|
name: string
|
||||||
maskData: {
|
maskData: {
|
||||||
masks: Array<{
|
masks: Array<{
|
||||||
id: string;
|
id: string
|
||||||
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>;
|
visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>
|
||||||
}>;
|
}>
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,26 +1,26 @@
|
||||||
import { Assets, Cache } from 'pixi.js';
|
import { Assets, Cache } from 'pixi.js'
|
||||||
|
|
||||||
const domain = 'http://localhost:8081/';
|
const domain = 'http://localhost:8081/'
|
||||||
|
|
||||||
interface LoadedKeys {
|
interface LoadedKeys {
|
||||||
[key: string]: Promise<any>;
|
[key: string]: Promise<any>
|
||||||
}
|
}
|
||||||
const loadedKeys: LoadedKeys = {};
|
const loadedKeys: LoadedKeys = {}
|
||||||
|
|
||||||
const load = async (key: string, url: string, onUncached?: () => void): Promise<void> => {
|
const load = async (key: string, url: string, onUncached?: () => void): Promise<void> => {
|
||||||
if (loadedKeys[key] !== undefined) return await loadedKeys[key];
|
if (loadedKeys[key] !== undefined) return await loadedKeys[key]
|
||||||
|
|
||||||
if (!Cache.has(key)) {
|
if (!Cache.has(key)) {
|
||||||
if (onUncached != null) onUncached();
|
if (onUncached != null) onUncached()
|
||||||
Assets.add(key, AssetLoader.domain + url);
|
Assets.add(key, AssetLoader.domain + url)
|
||||||
loadedKeys[key] = Assets.load(key);
|
loadedKeys[key] = Assets.load(key)
|
||||||
await loadedKeys[key];
|
await loadedKeys[key]
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loads assets from a certain domain
|
* Loads assets from a certain domain
|
||||||
*
|
*
|
||||||
* @memberof Scuti
|
* @memberof Scuti
|
||||||
*/
|
*/
|
||||||
export const AssetLoader = { domain, load };
|
export const AssetLoader = { domain, load }
|
||||||
|
|
|
@ -11,13 +11,13 @@ export class Logger {
|
||||||
* @member {string}
|
* @member {string}
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private readonly _name: string;
|
private readonly _name: string
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {string} [name] - The logger name.
|
* @param {string} [name] - The logger name.
|
||||||
*/
|
*/
|
||||||
constructor(name: string) {
|
constructor(name: string) {
|
||||||
this._name = name;
|
this._name = name
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -28,7 +28,7 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public log(message: string): void {
|
public log(message: string): void {
|
||||||
this._log('#078000', '#FFFFFF', message);
|
this._log('#078000', '#FFFFFF', message)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -39,7 +39,7 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public error(message: string): void {
|
public error(message: string): void {
|
||||||
this._log('#E86C5D', '#FFFFFF', message);
|
this._log('#E86C5D', '#FFFFFF', message)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -50,7 +50,7 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public warn(message: string): void {
|
public warn(message: string): void {
|
||||||
this._log('#FFD100', '#000000', message);
|
this._log('#FFD100', '#000000', message)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -61,7 +61,7 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public info(message: string): void {
|
public info(message: string): void {
|
||||||
this._log('#EC3262', '#FFFFFF', message);
|
this._log('#EC3262', '#FFFFFF', message)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -79,7 +79,7 @@ export class Logger {
|
||||||
`background: #FFFFFF; color: #000000;`,
|
`background: #FFFFFF; color: #000000;`,
|
||||||
`background: #000000; color: #FFFFFF`,
|
`background: #000000; color: #FFFFFF`,
|
||||||
`background: ${backgroundColor}; color: ${textColor};`
|
`background: ${backgroundColor}; color: ${textColor};`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -90,8 +90,8 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get time(): string {
|
public get time(): string {
|
||||||
const date = new Date();
|
const date = new Date()
|
||||||
return String(date.getHours()) + ':' + String(date.getMinutes()) + ':' + String(date.getSeconds());
|
return String(date.getHours()) + ':' + String(date.getMinutes()) + ':' + String(date.getSeconds())
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -102,6 +102,6 @@ export class Logger {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
public get name(): string {
|
public get name(): string {
|
||||||
return this._name;
|
return this._name
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
import type { IPosition2D, IPosition3D } from '../types/Room';
|
import type { IPosition2D, IPosition3D } from '../types/Room'
|
||||||
import type { IFloorPosition, IWallPosition } from '../types/Furniture';
|
import type { IFloorPosition, IWallPosition } from '../types/Furniture'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Priority values
|
* Priority values
|
||||||
*/
|
*/
|
||||||
const PRIORITY_WALL = 6;
|
const PRIORITY_WALL = 6
|
||||||
const PRIORITY_FLOOR = 7;
|
// const PRIORITY_FLOOR = 7
|
||||||
const PRIORITY_TILE_CURSOR = 11;
|
const PRIORITY_TILE_CURSOR = 11
|
||||||
const PRIORITY_ROOM_AVATAR = 11;
|
const PRIORITY_ROOM_AVATAR = 11
|
||||||
const PRIORITY_ROOM_ITEM = 11;
|
const PRIORITY_ROOM_ITEM = 11
|
||||||
const PRIORITY_WALL_ITEM = 9;
|
const PRIORITY_WALL_ITEM = 9
|
||||||
const PRIORITY_MULTIPLIER = 10000000;
|
const PRIORITY_MULTIPLIER = 10000000
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Comparable values
|
* Comparable values
|
||||||
*/
|
*/
|
||||||
const COMPARABLE_X_Y = 1000000;
|
const COMPARABLE_X_Y = 1000000
|
||||||
const COMPARABLE_Z = 10000;
|
const COMPARABLE_Z = 10000
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of an avatar by it's position in the room.
|
* Return the zOrder of an avatar by it's position in the room.
|
||||||
|
@ -31,8 +31,8 @@ const avatar = function (position: IPosition3D, z: number): number {
|
||||||
(position.z + 0.001 * COMPARABLE_Z) +
|
(position.z + 0.001 * COMPARABLE_Z) +
|
||||||
PRIORITY_MULTIPLIER * PRIORITY_ROOM_AVATAR +
|
PRIORITY_MULTIPLIER * PRIORITY_ROOM_AVATAR +
|
||||||
z
|
z
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of the floor by it's position in the room.
|
* Return the zOrder of the floor by it's position in the room.
|
||||||
|
@ -42,8 +42,8 @@ const avatar = function (position: IPosition3D, z: number): number {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const floor = function (position: IPosition2D): number {
|
const floor = function (position: IPosition2D): number {
|
||||||
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL;
|
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of the wall by it's position in the room.
|
* Return the zOrder of the wall by it's position in the room.
|
||||||
|
@ -53,8 +53,8 @@ const floor = function (position: IPosition2D): number {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const wall = function (position: IPosition2D): number {
|
const wall = function (position: IPosition2D): number {
|
||||||
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL;
|
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of the tile cursor by it's position in the room.
|
* Return the zOrder of the tile cursor by it's position in the room.
|
||||||
|
@ -64,8 +64,8 @@ const wall = function (position: IPosition2D): number {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const tileCursor = function (position: IPosition2D): number {
|
const tileCursor = function (position: IPosition2D): number {
|
||||||
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_TILE_CURSOR;
|
return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_TILE_CURSOR
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of a floor item by it's position in the room.
|
* Return the zOrder of a floor item by it's position in the room.
|
||||||
|
@ -76,13 +76,13 @@ const tileCursor = function (position: IPosition2D): number {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const floorItem = function (position: IFloorPosition, z: number): number {
|
const floorItem = function (position: IFloorPosition, z: number): number {
|
||||||
const compareY = Math.trunc(z / 100) / 10;
|
const compareY = Math.trunc(z / 100) / 10
|
||||||
return (
|
return (
|
||||||
(position.x + position.y + compareY) * COMPARABLE_X_Y +
|
(position.x + position.y + compareY) * COMPARABLE_X_Y +
|
||||||
position.z * COMPARABLE_Z +
|
position.z * COMPARABLE_Z +
|
||||||
PRIORITY_MULTIPLIER * PRIORITY_ROOM_ITEM
|
PRIORITY_MULTIPLIER * PRIORITY_ROOM_ITEM
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return the zOrder of a wall item by it's position in the room.
|
* Return the zOrder of a wall item by it's position in the room.
|
||||||
|
@ -93,10 +93,10 @@ const floorItem = function (position: IFloorPosition, z: number): number {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
const wallItem = function (position: IWallPosition, z: number): number {
|
const wallItem = function (position: IWallPosition, z: number): number {
|
||||||
return (position.x + position.y) * COMPARABLE_X_Y + z * COMPARABLE_Z + PRIORITY_MULTIPLIER * PRIORITY_WALL_ITEM;
|
return (position.x + position.y) * COMPARABLE_X_Y + z * COMPARABLE_Z + PRIORITY_MULTIPLIER * PRIORITY_WALL_ITEM
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ZOrder variable that manage the z ordering of room objects.
|
* ZOrder variable that manage the z ordering of room objects.
|
||||||
*/
|
*/
|
||||||
export const ZOrder = { avatar, tileCursor, floorItem, wallItem, floor, wall };
|
export const ZOrder = { avatar, tileCursor, floorItem, wallItem, floor, wall }
|
||||||
|
|
Loading…
Reference in New Issue
Block a user