Skip to content

Commit 57f468d

Browse files
eonarheimeonarheim
committed
chore: Update snippets for v0.26.0
1 parent 0df6268 commit 57f468d

File tree

12 files changed

+8241
-3162
lines changed

12 files changed

+8241
-3162
lines changed

‎package-lock.json‎

Lines changed: 8115 additions & 3148 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424
},
2525
"homepage": "https://github.com/excaliburjs/excalibur-snippets#readme",
2626
"devDependencies": {
27-
"@parcel/transformer-image": "2.0.0",
28-
"parcel": "2.0.0"
27+
"@parcel/transformer-image": "2.2.1",
28+
"parcel": "2.2.1"
2929
},
3030
"dependencies": {
31-
"@excaliburjs/plugin-tiled": "0.25.1",
32-
"@excaliburjs/plugin-aseprite": "0.25.0",
33-
"excalibur": "0.25.1",
34-
"typescript": "4.4.4"
31+
"@excaliburjs/plugin-tiled": "0.26.1",
32+
"@excaliburjs/plugin-aseprite": "0.26.0",
33+
"excalibur": "0.26.0",
34+
"typescript": "4.5.5"
3535
}
3636
}

‎src/animation/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const runSheet = ex.SpriteSheet.fromImageSource({
1818
}
1919
});
2020

21-
const runAnim = ex.Animation.fromSpriteSheet(runSheet, ex.Util.range(1, 10), 200);
21+
const runAnim = ex.Animation.fromSpriteSheet(runSheet, ex.range(1, 10), 200);
2222

2323
const actor = new ex.Actor({
2424
pos: ex.vec(game.halfDrawWidth, game.halfDrawHeight)

‎src/displaymode/fitcontainerandfill/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DisplayMode.FitContainerAndFill Snippet</title>
8+
<style>
9+
html, body {
10+
height: 100%;
11+
}
12+
body {
13+
display: flex;
14+
justify-content: center;
15+
}
16+
17+
.snippet-resizer { display:flex; margin:0; padding:0; resize:both; overflow:hidden }
18+
.snippet-resizer > .snippet-resized { flex-grow:1; margin:0; padding:0; border:0 }
19+
20+
/* start-snippet{container-css} */
21+
.container {
22+
/* Flexbox used to center game */
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
27+
/* Container size with border */
28+
border: red 4px dashed;
29+
width: 50%;
30+
height: 300px;
31+
}
32+
/* end-snippet{container-css} */
33+
</style>
34+
</head>
35+
<body>
36+
<!-- start-snippet{container-html} -->
37+
<div class="container snippet-resizer">
38+
<canvas id="game"></canvas>
39+
</div>
40+
<!-- end-snippet{container-html} -->
41+
42+
<script type="module" src="./main.ts"></script>
43+
</body>
44+
</html>

‎src/displaymode/fitcontainerandfill/main.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as ex from 'excalibur';
2+
import playerSrc from './player.png';
3+
// start-snippet{displaymode.fitcontainerandfill}
4+
const game = new ex.Engine({
5+
canvasElementId: 'game',
6+
width: 600,
7+
height: 400,
8+
displayMode: ex.DisplayMode.FitContainerAndFill // highlight-line
9+
});
10+
// end-snippet{displaymode.fitcontainerandfill}
11+
const playerImage = new ex.ImageSource(playerSrc);
12+
const loader = new ex.Loader([playerImage]);
13+
game.start(loader).then(() => {
14+
const actor = new ex.Actor({
15+
pos: game.screen.center
16+
});
17+
actor.graphics.use(playerImage.toSprite());
18+
game.currentScene.onPreDraw = (ctx: ex.ExcaliburGraphicsContext) => {
19+
game.screen.contentArea.draw(ctx, ex.Color.Yellow);
20+
}
21+
game.currentScene.add(actor);
22+
});

‎src/displaymode/fitcontainerandfill/player.png‎

309 Bytes
Loading

‎src/displaymode/fitscreenandfill/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DisplayMode.FitScreenAndFill Snippet</title>
8+
<style>
9+
/* start-snippet{displaymode.fitscreen.css} */
10+
html, body {
11+
height: 100%;
12+
}
13+
body {
14+
display: flex;
15+
height: 100vh;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
/* end-snippet{displaymode.fitscreen.css} */
20+
</style>
21+
</head>
22+
<body>
23+
<script type="module" src="./main.ts"></script>
24+
</body>
25+
</html>

‎src/displaymode/fitscreenandfill/main.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as ex from 'excalibur';
2+
import playerSrc from './player.png';
3+
// start-snippet{displaymode.fitscreenandfill}
4+
const game = new ex.Engine({
5+
width: 600,
6+
height: 400,
7+
displayMode: ex.DisplayMode.FitScreenAndFill // highlight-line
8+
});
9+
// end-snippet{displaymode.fitscreenandfill}
10+
const playerImage = new ex.ImageSource(playerSrc);
11+
const loader = new ex.Loader([playerImage]);
12+
game.start(loader).then(() => {
13+
const actor = new ex.Actor({
14+
pos: game.screen.center
15+
});
16+
actor.graphics.use(playerImage.toSprite());
17+
game.currentScene.onPreDraw = (ctx: ex.ExcaliburGraphicsContext) => {
18+
game.screen.contentArea.draw(ctx, ex.Color.Yellow);
19+
}
20+
game.currentScene.add(actor);
21+
});

‎src/displaymode/fitscreenandfill/player.png‎

309 Bytes
Loading

‎src/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
<li><a href="displaymode/fillscreen/">fillscreen</a></li>
2222
<li><a href="displaymode/fitcontainer/">fitcontainer</a></li>
2323
<li><a href="displaymode/fitscreen/">fitscreen</a></li>
24+
<li><a href="displaymode/fitcontainerandfill/">fitcontainerandfill</a></li>
25+
<li><a href="displaymode/fitscreenandfill/">fitscreenandfill</a></li>
2426
<li><a href="displaymode/fixed/">fixed</a></li>
2527
</ul>
2628
</li>

0 commit comments

Comments
 (0)