Skip to content

Commit b3ff54a

Browse files
author
Alex FusionAuth
committed
rename
1 parent 91966d9 commit b3ff54a

4 files changed

Lines changed: 120 additions & 28 deletions

File tree

‎apps/dojo/src/routes/Dojo.svelte‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
11
<script lang="ts">
2-
import { Container, autoDetectRenderer } from 'pixi.js';
2+
import { Container, autoDetectRenderer, Application, TextureStyle } from 'pixi.js';
33
import type { Renderer } from 'pixi.js';
44
import { onDestroy, onMount } from 'svelte';
5-
import { Druid } from './monsters/Druid';
5+
import { MyPlayer } from './players/MyPlayer';
6+
import { World, height, resolution, width } from './world/World';
67
78
let dojoElem: HTMLDivElement;
89
let dojoRenderer: Renderer;
9-
let druid: Druid;
10+
let myPlayer: MyPlayer;
1011
const loading: any = { amount: 0, complete: false };
1112
1213
onMount(async () => {
14+
TextureStyle.defaultOptions.scaleMode = 'nearest';
15+
1316
dojoRenderer = await autoDetectRenderer({
1417
preference: 'webgpu',
1518
clearBeforeRender: true,
1619
backgroundAlpha: 1,
1720
backgroundColor: 0xffffff,
18-
width: 800,
19-
height: 600,
20-
resolution: 4,
21-
antialias: true,
21+
width,
22+
height,
23+
resolution,
24+
antialias: false,
2225
hello: true,
2326
});
2427
dojoElem.innerHTML = '';
2528
dojoElem.appendChild(dojoRenderer.view.canvas as HTMLCanvasElement);
29+
2630
const stage = new Container();
2731
32+
// Create World
33+
const world = await World.create();
34+
stage.addChild(world.view);
35+
2836
// Create monsters
29-
druid = await Druid.create(stage);
37+
myPlayer = await MyPlayer.create();
38+
stage.addChild(myPlayer.view);
3039
3140
const renderUpdate = () => {
3241
dojoRenderer.render(stage);
@@ -48,21 +57,19 @@
4857
switch (e.key) {
4958
case 'ArrowLeft':
5059
console.debug('move left');
51-
druid.left();
60+
myPlayer.left();
5261
break;
5362
case 'ArrowRight':
5463
console.debug('move right');
55-
druid.right();
64+
myPlayer.right();
5665
break;
5766
case 'ArrowUp':
5867
console.debug('move up');
59-
druid.up();
60-
68+
myPlayer.up();
6169
break;
6270
case 'ArrowDown':
6371
console.debug('move down');
64-
druid.down();
65-
72+
myPlayer.down();
6673
break;
6774
}
6875
}

apps/dojo/src/routes/monsters/Druid.ts renamed to apps/dojo/src/routes/players/MyPlayer.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Rectangle, Assets, Container } from 'pixi.js';
2-
import { Monster } from './Monster';
1+
import { Rectangle, Assets } from 'pixi.js';
2+
import { Player } from './Player';
33

4-
export class Druid extends Monster {
4+
export class MyPlayer extends Player {
55
static bounds = new Rectangle(0, 0, 20, 20);
66

7-
static async create(stage: Container) {
8-
return new Druid(
7+
static async create() {
8+
return new MyPlayer(
99
{
1010
down: Object.values(
1111
await Assets.load([
@@ -32,8 +32,7 @@ export class Druid extends Monster {
3232
]),
3333
),
3434
},
35-
Druid.bounds,
36-
stage,
35+
MyPlayer.bounds,
3736
);
3837
}
3938
}

apps/dojo/src/routes/monsters/Monster.ts renamed to apps/dojo/src/routes/players/Player.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AnimatedSprite } from 'pixi.js';
2-
import type { Container, Rectangle, Texture } from 'pixi.js';
2+
import type { Rectangle, Texture } from 'pixi.js';
33

44
export interface AnimatedTextures {
55
down: Texture[];
@@ -8,26 +8,23 @@ export interface AnimatedTextures {
88
up: Texture[];
99
}
1010

11-
export class Monster {
11+
export class Player {
1212
bounds: Rectangle;
1313

1414
positionX = 0;
1515
positionY = 0;
16-
stage: Container;
1716
view: AnimatedSprite;
18-
constructor(textures: AnimatedTextures, bounds: Rectangle, stage: Container) {
17+
constructor(textures: AnimatedTextures, bounds: Rectangle) {
1918
this.bounds = bounds;
2019
this.view = new AnimatedSprite([
2120
...textures.down,
2221
...textures.left,
2322
...textures.right,
2423
...textures.up,
2524
]);
26-
this.stage = stage;
2725

2826
//TODO: Defaults to right, maybe it shouldn't
2927
this.view.currentFrame = 5;
30-
this.stage.addChild(this.view);
3128
}
3229

3330
public down() {
@@ -36,6 +33,7 @@ export class Monster {
3633
setTimeout(() => {
3734
this.view.gotoAndStop(1);
3835
this.view.position.y = this.view.position.y + this.bounds.height / 2;
36+
console.debug(this.view.position);
3937
}, 200);
4038
}
4139
public left() {
@@ -44,6 +42,7 @@ export class Monster {
4442
setTimeout(() => {
4543
this.view.gotoAndStop(3);
4644
this.view.position.x = this.view.position.x - this.bounds.width / 2;
45+
console.debug(this.view.position);
4746
}, 200);
4847
}
4948
public right() {
@@ -52,14 +51,16 @@ export class Monster {
5251
setTimeout(() => {
5352
this.view.gotoAndStop(5);
5453
this.view.position.x = this.view.position.x + this.bounds.width / 2;
54+
console.debug(this.view.position);
5555
}, 200);
5656
}
5757
public up() {
5858
this.view.gotoAndStop(6);
5959
this.view.position.y = this.view.position.y - this.bounds.height / 2;
6060
setTimeout(() => {
61-
this.view.position.y = this.view.position.y - this.bounds.height / 2;
6261
this.view.gotoAndStop(7);
62+
this.view.position.y = this.view.position.y - this.bounds.height / 2;
63+
console.debug(this.view.position);
6364
}, 200);
6465
}
6566
}

‎apps/dojo/src/routes/world/World.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { Assets, TilingSprite, Container } from 'pixi.js';
2+
import type { Player } from '../players/Player';
3+
4+
export const resolution = 4;
5+
export const movement = 20;
6+
export const height = 240;
7+
export const width = 240;
8+
9+
export class World {
10+
view: Container;
11+
paths: TilingSprite[];
12+
blocked: TilingSprite[];
13+
14+
player: Player | undefined;
15+
16+
constructor(paths: TilingSprite[], blocked: TilingSprite[]) {
17+
this.view = new Container();
18+
this.paths = paths;
19+
this.blocked = blocked;
20+
for (const sprite of [...paths, ...blocked]) {
21+
this.view.addChild(sprite);
22+
}
23+
console.debug(this.blocked);
24+
}
25+
static async create() {
26+
const textures = Object.values(
27+
await Assets.load([
28+
'/assets/oryx_wee_dungeon/wee_sliced/forest/wee_forest_grass.png',
29+
'/assets/oryx_wee_dungeon/wee_sliced/forest/wee_forest_cliff.png',
30+
]),
31+
);
32+
const paths = [
33+
new TilingSprite({
34+
texture: textures.at(0),
35+
height: movement,
36+
width: movement * 7,
37+
y: movement * 0,
38+
}),
39+
new TilingSprite({
40+
texture: textures.at(0),
41+
height: movement * 8,
42+
width: movement,
43+
x: movement * 7,
44+
y: movement * 0,
45+
}),
46+
new TilingSprite({
47+
texture: textures.at(0),
48+
height: movement * 2,
49+
width: movement * 4,
50+
x: movement * 8,
51+
y: movement * 6,
52+
}),
53+
];
54+
const blocked = [
55+
new TilingSprite({
56+
texture: textures.at(1),
57+
height: movement * 6,
58+
width: movement * 5,
59+
x: movement * 8,
60+
y: movement * 0,
61+
}),
62+
new TilingSprite({
63+
texture: textures.at(1),
64+
height: movement * 11,
65+
width: movement * 7,
66+
x: movement * 0,
67+
y: movement * 1,
68+
}),
69+
70+
new TilingSprite({
71+
texture: textures.at(1),
72+
height: movement * 4,
73+
width: movement * 6,
74+
x: movement * 7,
75+
y: movement * 8,
76+
}),
77+
];
78+
79+
return new World(paths, blocked);
80+
}
81+
82+
addPlayer(player: Player) {
83+
this.player = player;
84+
}
85+
}

0 commit comments

Comments
 (0)