[READ-ONLY] Mirror of https://github.com/excaliburjs/sample-html. Example building HTML/CSS/JavaScript UIs w/ Excalibur
excaliburjs.com/sample-html/
excalibur
excaliburjs
sample
spruce the demo
Erik Onarheim
(Apr 28, 2024, 9:30 PM -0500)
5186806a
6235b318
+80
-4
+6
.parcelrc
+6
.parcelrc
src/Silkscreen-Regular.ttf
src/Silkscreen-Regular.ttf
This is a binary file and will not be displayed.
src/cal.png
src/cal.png
This is a binary file and will not be displayed.
+10
src/files.d.ts
+10
src/files.d.ts
+3
-1
src/main.ts
+3
-1
src/main.ts
···
1
1
import { DisplayMode, Engine } from "excalibur";
2
2
import { Menu, calculateExPixelConversion } from "./ui";
3
+
import { loader } from "./resources";
3
4
4
5
const game = new Engine({
5
6
canvasElementId: 'game',
6
7
width: 800,
7
8
height: 600,
9
+
pixelArt: true,
8
10
displayMode: DisplayMode.FitScreen
9
11
});
10
12
11
13
game.screen.events.on('resize', () => calculateExPixelConversion(game.screen));
12
14
13
-
game.start().then(() => {
15
+
game.start(loader).then(() => {
14
16
calculateExPixelConversion(game.screen);
15
17
const menu = new Menu(game.currentScene);
16
18
});
+33
src/resources.ts
+33
src/resources.ts
···
1
+
import { ImageSource, SpriteSheet, Animation, Loader, FontSource } from "excalibur";
2
+
3
+
import CalImage from './cal.png';
4
+
import SilkscreenFont from './Silkscreen-Regular.ttf';
5
+
6
+
export const Resources = {
7
+
CalSpriteSheet: new ImageSource(CalImage),
8
+
PixelFont: new FontSource(SilkscreenFont, 'silkscreen')
9
+
} as const;
10
+
11
+
export const CalSpriteSheet = SpriteSheet.fromImageSource({
12
+
image: Resources.CalSpriteSheet,
13
+
grid: {
14
+
rows: 1,
15
+
columns: 9,
16
+
spriteHeight: 32,
17
+
spriteWidth: 32
18
+
}
19
+
})
20
+
21
+
export const IdleAnimation = Animation.fromSpriteSheetCoordinates({
22
+
spriteSheet: CalSpriteSheet,
23
+
frameCoordinates: [
24
+
{ x: 2, y: 0},
25
+
{ x: 3, y: 0},
26
+
],
27
+
durationPerFrameMs: 300
28
+
});
29
+
30
+
export const loader = new Loader();
31
+
for (let res of Object.values(Resources)) {
32
+
loader.addResource(res);
33
+
}
+3
-2
src/ui.ts
+3
-2
src/ui.ts
···
1
1
import { Actor, Color, Scene, Vector, vec } from "excalibur";
2
+
import { IdleAnimation } from "./resources";
2
3
3
4
export const calculateExPixelConversion = (screen: ex.Screen) => {
4
5
const origin = screen.worldToPageCoordinates(Vector.Zero);
···
44
45
addUnit() {
45
46
const actor = new Actor({
46
47
pos: this.currentWorldPos,
47
-
width: 100,
48
-
height: 100,
48
+
scale: vec(2, 2),
49
49
color: Color.Red
50
50
});
51
+
actor.graphics.use(IdleAnimation);
51
52
this.scene.add(actor);
52
53
this.hide();
53
54
}
+24
style.css
+24
style.css
···
4
4
background-color: black;
5
5
}
6
6
7
+
h3 {
8
+
margin: 0;
9
+
}
10
+
11
+
.menu button {
12
+
all: unset;
13
+
cursor: pointer;
14
+
font-family: 'silkscreen';
15
+
background-color: gray;
16
+
border-radius: 3px;
17
+
box-shadow: 0 4px black;
18
+
}
19
+
.menu button:focus-visible,.menu button:hover {
20
+
outline: white solid 1px;
21
+
/* box-shadow: 0 4px black; */
22
+
}
23
+
24
+
.menu button:active {
25
+
transform: translate(0, 4px);
26
+
box-shadow: 0 0 black;
27
+
}
28
+
7
29
8
30
#game {
9
31
position: absolute;
···
22
44
/* position menu on click */
23
45
left: var(--pointer-x);
24
46
top: var(--pointer-y);
47
+
48
+
font-family: 'silkscreen';
25
49
26
50
display: flex;
27
51
flex-direction: column;
+1
-1
tsconfig.json
+1
-1
tsconfig.json
···
12
12
13
13
/* Language and Environment */
14
14
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15
-
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
15
+
"lib": ["DOM","es2017"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16
16
// "jsx": "preserve", /* Specify what JSX code is generated. */
17
17
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18
18
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */