Skip to content

Commit eae88fb

Browse files
alex-fusionauthalex-fusionauth
committed
initial movement
1 parent 7ede117 commit eae88fb

File tree

6 files changed

+171
-91
lines changed

6 files changed

+171
-91
lines changed

‎apps/dojo/.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"useTabs": true,
33
"singleQuote": true,
4-
"trailingComma": "none",
4+
"trailingComma": "all",
5+
"semi": true,
56
"printWidth": 100,
67
"plugins": ["prettier-plugin-svelte"],
78
"pluginSearchDirs": ["."],

‎apps/dojo/src/routes/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import GameCanvas from './GameCanvas.svelte';
2+
import Dojo from './Dojo.svelte';
33
</script>
44

5-
<GameCanvas />
5+
<Dojo />

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script lang="ts">
2+
import { Container, autoDetectRenderer } from 'pixi.js';
3+
import type { Renderer } from 'pixi.js';
4+
import { onDestroy, onMount } from 'svelte';
5+
import { Druid } from './monsters/Druid';
6+
7+
let dojoElem: HTMLDivElement;
8+
let dojoRenderer: Renderer;
9+
let druid: Druid;
10+
const loading: any = { amount: 0, complete: false };
11+
12+
onMount(async () => {
13+
dojoRenderer = await autoDetectRenderer({
14+
preference: 'webgpu',
15+
clearBeforeRender: true,
16+
backgroundAlpha: 1,
17+
backgroundColor: 0xffffff,
18+
width: 800,
19+
height: 600,
20+
resolution: 4,
21+
antialias: true,
22+
hello: true,
23+
});
24+
dojoElem.innerHTML = '';
25+
dojoElem.appendChild(dojoRenderer.view.canvas as HTMLCanvasElement);
26+
const stage = new Container();
27+
28+
// Create monsters
29+
druid = await Druid.create(stage);
30+
31+
const renderUpdate = () => {
32+
dojoRenderer.render(stage);
33+
requestAnimationFrame(renderUpdate);
34+
};
35+
36+
renderUpdate();
37+
});
38+
39+
onDestroy(() => {
40+
// Helps memory leak issues
41+
if (dojoRenderer !== undefined && dojoElem !== undefined) {
42+
dojoElem.innerHTML = '';
43+
dojoRenderer.destroy();
44+
}
45+
});
46+
47+
function onKeyDown(e: KeyboardEvent) {
48+
switch (e.key) {
49+
case 'ArrowLeft':
50+
console.debug('move left');
51+
druid.left();
52+
break;
53+
case 'ArrowRight':
54+
console.log('move right');
55+
druid.right();
56+
break;
57+
case 'ArrowUp':
58+
console.log('move up');
59+
druid.up();
60+
61+
break;
62+
case 'ArrowDown':
63+
console.log('move down');
64+
druid.down();
65+
66+
break;
67+
}
68+
}
69+
</script>
70+
71+
<svelte:window on:keydown|preventDefault={onKeyDown} />
72+
<div id="dojo" bind:this={dojoElem} />

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

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎apps/dojo/src/routes/monsters/Druid.ts

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,39 @@
1-
import { Rectangle, Assets } from 'pixi.js';
1+
import { Rectangle, Assets, Container } from 'pixi.js';
22
import { Monster } from './Monster';
33

44
export class Druid extends Monster {
5-
static bounds = new Rectangle(0, 0, 20, 20);
5+
static bounds = new Rectangle(0, 0, 20, 20);
66

7-
static async create() {
8-
const textures = Object.values(
9-
await Assets.load([
10-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_d_1.png',
11-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_d_1.png',
12-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_d_2.png',
13-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_l_1.png',
14-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_l_2.png',
15-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_r_1.png',
16-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_r_2.png',
17-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_u_1.png',
18-
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_u_2.png'
19-
])
20-
)
21-
return new Druid(textures, Druid.bounds);
22-
}
23-
}
7+
static async create(stage: Container) {
8+
return new Druid(
9+
{
10+
down: Object.values(
11+
await Assets.load([
12+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_d_1.png',
13+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_d_2.png',
14+
]),
15+
),
16+
left: Object.values(
17+
await Assets.load([
18+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_l_1.png',
19+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_l_2.png',
20+
]),
21+
),
22+
right: Object.values(
23+
await Assets.load([
24+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_r_1.png',
25+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_r_2.png',
26+
]),
27+
),
28+
up: Object.values(
29+
await Assets.load([
30+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_u_1.png',
31+
'/assets/oryx_wee_dungeon/wee_sliced/monsters/wee_mons_druid_atk_u_2.png',
32+
]),
33+
),
34+
},
35+
Druid.bounds,
36+
stage,
37+
);
38+
}
39+
}

‎apps/dojo/src/routes/monsters/Monster.ts

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

4-
export class Monster {
4+
export interface AnimatedMovement {
5+
down: AnimatedSprite;
6+
left: AnimatedSprite;
7+
right: AnimatedSprite;
8+
up: AnimatedSprite;
9+
}
510

6-
view: AnimatedSprite;
7-
positionX = 0;
8-
positionY = 0;
11+
export interface AnimatedTextures {
12+
down: Texture[];
13+
left: Texture[];
14+
right: Texture[];
15+
up: Texture[];
16+
}
917

10-
bounds: Rectangle;
18+
export class Monster {
19+
bounds: Rectangle;
20+
movement: AnimatedMovement;
1121

12-
constructor(textures: Texture[], bounds: Rectangle) {
13-
this.view = new AnimatedSprite(textures)
14-
this.view.anchor.set(0.5, 1);
15-
this.bounds = bounds
16-
}
22+
positionX = 0;
23+
positionY = 0;
24+
stage: Container;
25+
view: AnimatedSprite;
26+
constructor(textures: AnimatedTextures, bounds: Rectangle, stage: Container) {
27+
this.bounds = bounds;
28+
this.movement = {
29+
down: new AnimatedSprite(textures.down),
30+
left: new AnimatedSprite(textures.left),
31+
right: new AnimatedSprite(textures.right),
32+
up: new AnimatedSprite(textures.up),
33+
};
34+
this.stage = stage;
1735

18-
public update() {
19-
const pX = this.positionX;
20-
const pY = this.positionY;
36+
//TODO: Defaults to right, maybe it shouldn't
37+
this.view = this.movement.right;
38+
this.stage.addChild(this.view);
39+
}
2140

22-
this.view.position.x = this.positionX = pX;
23-
this.view.position.y = this.positionY = pY;
24-
}
41+
public down() {
42+
this.changeDirection(this.movement.down);
43+
this.view.position.y = this.view.position.y + this.bounds.height;
44+
}
45+
public left() {
46+
this.changeDirection(this.movement.left);
47+
this.view.position.x = this.view.position.x - this.bounds.width;
48+
}
49+
public right() {
50+
this.changeDirection(this.movement.right);
51+
this.view.position.x = this.view.position.x + this.bounds.width;
52+
}
53+
public up() {
54+
this.changeDirection(this.movement.up);
55+
this.view.position.y = this.view.position.y - this.bounds.height;
56+
}
2557

26-
reset() {
27-
this.positionX = 0;
28-
this.positionY = 0;
29-
}
30-
}
58+
changeDirection(direction: AnimatedSprite) {
59+
this.stage.removeChild(this.view);
60+
this.view = direction;
61+
this.stage.addChild(this.view);
62+
this.view.gotoAndStop(0);
63+
setTimeout(() => {
64+
this.view.gotoAndStop(this.view.totalFrames - 1);
65+
console.log(this.view.position);
66+
}, 200);
67+
}
68+
}

0 commit comments

Comments
 (0)