-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.ts
86 lines (78 loc) · 2.41 KB
/
app.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { Application, Container } from 'pixi.js';
import { createAxes, createGrid } from './lib/grid';
import { createProjection } from './lib/isometric';
import { DudeModel } from './lib/models/DudeModel';
import { WallModel } from './lib/models/WallModel';
import { Projection3Dto2D } from './lib/primitives';
import { DudeView } from './lib/views/DudeView';
import { WallView } from './lib/views/WallView';
function addGridAndAxes(projection: Projection3Dto2D, parent: Container) {
const cellSize = 60;
const grid = createGrid({
projection,
cellSize,
minX: -360,
maxX: 360,
minY: -360,
maxY: 360,
z: 0,
});
parent.addChild(grid);
parent.addChild(createAxes({ projection, length: 80 }));
}
const app = new Application({
width: 800,
height: 600,
backgroundColor: 0x000000,
resolution: 1,
});
document.body.appendChild(app.view);
app.loader.add('spritesheets/characters.json').load(() => {
const root = new Container();
app.stage.addChild(root);
const projection = createProjection(app.view.width, app.view.height);
addGridAndAxes(projection, root);
const dude = new DudeModel();
const dudeView = new DudeView();
dudeView.setProjection(projection);
dudeView.setParent(root);
dudeView.setApp(app);
dudeView.add();
const r = 300;
let angle = 0;
setInterval(() => {
const rAngle = (Math.PI / 180) * angle;
const x = Math.cos(rAngle) * r;
const y = Math.sin(rAngle) * r;
dude.location.setPosition(x, y, 0);
dude.location.setRotation(angle + 90);
angle += 0.5;
}, 20);
const walls: [number, number, WallModel['variant']][] = [
[0, 120, 'yAxis'],
[120, 0, 'xAxis'],
[0, 60, 'yAxis'],
[60, 0, 'xAxis'],
[0, 0, 'cross'],
];
const wallModels = walls.map(([x, y, variant]) => {
const model = new WallModel();
model.location.setPosition(x, y, 0);
model.variant = variant;
return model;
});
const wallViews = walls.map(() => {
const view = new WallView();
view.setProjection(projection);
view.setParent(root);
view.setApp(app);
view.add();
return view;
});
app.ticker.add(() => {
dudeView.update(dude);
wallViews.forEach((wallView, i) => {
wallView.update(wallModels[i]);
});
});
});