diff --git a/site/docs/00-tutorial/03-step-bird-and-ground.mdx b/site/docs/00-tutorial/03-step-bird-and-ground.mdx index ede5be2db..7ed71e76b 100644 --- a/site/docs/00-tutorial/03-step-bird-and-ground.mdx +++ b/site/docs/00-tutorial/03-step-bird-and-ground.mdx @@ -15,6 +15,7 @@ We can use the `anchor` property to tell Excalibur how to align the default grap import * as ex from "excalibur"; export class Ground extends ex.Actor { + moving = false; constructor(pos: ex.Vector) { super({ pos, @@ -25,6 +26,14 @@ export class Ground extends ex.Actor { z: 1 // position the ground above everything }) } + + start() { + this.moving = true; + } + + stop() { + this.moving = false; + } } ``` diff --git a/site/docs/00-tutorial/06-step-refactor-to-scene.mdx b/site/docs/00-tutorial/06-step-refactor-to-scene.mdx index 8dd0b8cad..da03b5244 100644 --- a/site/docs/00-tutorial/06-step-refactor-to-scene.mdx +++ b/site/docs/00-tutorial/06-step-refactor-to-scene.mdx @@ -28,11 +28,11 @@ export class Level extends ex.Scene { this.ground = new Ground(ex.vec(0, engine.screen.drawHeight - 64)) this.add(this.ground); - const topPipe = new Pipe(ex.vec(this.level.engine.screen.drawWidth, 150), 'top'); - game.add(topPipe); + const topPipe = new Pipe(ex.vec(engine.screen.drawWidth, 150), 'top'); + this.add(topPipe); - const bottomPipe = new Pipe(ex.vec(this.level.engine.screen.drawWidth, 300), 'bottom'); - game.add(bottomPipe); + const bottomPipe = new Pipe(ex.vec(engine.screen.drawWidth, 300), 'bottom'); + this.add(bottomPipe); } } ``` @@ -48,7 +48,7 @@ const game = new ex.Engine({ ... scenes: { Level: Level } }); -... + game.start().then(() => { game.goToScene('Level'); }); diff --git a/site/docs/00-tutorial/10-step-game-over.mdx b/site/docs/00-tutorial/10-step-game-over.mdx index 6946fbd97..cb0ffe2fa 100644 --- a/site/docs/00-tutorial/10-step-game-over.mdx +++ b/site/docs/00-tutorial/10-step-game-over.mdx @@ -11,8 +11,7 @@ For our game, when the bird collides with the ground, pipe, or goes offscreen we We implement a `showStartInstructions()` method that shows our start game label and starts the game as soon as a pointer is tapped. We'll show the start instructions at the beginning and on a game over. - - +(Remember to remove or comment out the line `this.pipeFactory.start();` so that the `PipeFactory` does not start before displaying the start instructions) ```typescript // level.ts export class Level extends ex.Scene { @@ -32,15 +31,16 @@ export class Level extends ex.Scene { override onInitialize(engine: ex.Engine): void { ... + //this.pipeFactory.start(); this.showStartInstructions(); } showStartInstructions() { - this.startGameLabel.graphics.visible = true; + this.startGameLabel.graphics.isVisible = true; this.engine.input.pointers.once('down', () => { this.reset(); - this.startGameLabel.graphics.visible = false; + this.startGameLabel.graphics.isVisible = false; this.bird.start(); this.pipeFactory.start(); this.ground.start(); diff --git a/site/docs/00-tutorial/11-step-images-graphics.mdx b/site/docs/00-tutorial/11-step-images-graphics.mdx index eadf5b18c..82c721153 100644 --- a/site/docs/00-tutorial/11-step-images-graphics.mdx +++ b/site/docs/00-tutorial/11-step-images-graphics.mdx @@ -16,6 +16,8 @@ It would be nice to have some graphics for our `Bird` actor, we can load images ```typescript // resources.ts +import * as ex from 'excalibur' + export const Resources = { // Relative to /public in vite BirdImage: new ex.ImageSource('./images/bird.png') diff --git a/site/docs/00-tutorial/12-step-bird-graphics.mdx b/site/docs/00-tutorial/12-step-bird-graphics.mdx index 0f63e64ea..79fab9fee 100644 --- a/site/docs/00-tutorial/12-step-bird-graphics.mdx +++ b/site/docs/00-tutorial/12-step-bird-graphics.mdx @@ -19,43 +19,71 @@ To slice this up into animations we can use `ex.SpriteSheet` and `ex.Animation`. * End - after the last frame nothing is drawn ```typescript +// bird.ts +... +export class Bird extends ex.Actor { + ... + upAnimation!: ex.Animation; + downAnimation!: ex.Animation; + + ... + override onInitialize(): void { + // Slice up image into a sprite sheet + const spriteSheet = ex.SpriteSheet.fromImageSource({ + image: Resources.BirdImage, + grid: { + rows: 1, + columns: 4, + spriteWidth: 32, + spriteHeight: 32, + } + }); + + // Animation to play going up on tap + this.upAnimation = ex.Animation.fromSpriteSheet( + spriteSheet, + [2, 1, 0], // 3rd frame, then 2nd, then first + 150, // 150ms for each frame + ex.AnimationStrategy.Freeze); + + // Animation to play going down + this.downAnimation = ex.Animation.fromSpriteSheet( + spriteSheet, + [0, 1, 2], + 150, + ex.AnimationStrategy.Freeze); -// Slice up image into a sprite sheet -const spriteSheet = ex.SpriteSheet.fromImageSource({ - image: Resources.BirdImage, - grid: { - rows: 1, - columns: 4, - spriteWidth: 32, - spriteHeight: 32, - } -}); - -// Animation to play going up on tap -this.upAnimation = ex.Animation.fromSpriteSheet( - spriteSheet, - [2, 1, 0], // 3rd frame, then 2nd, then first - 150, // 150ms for each frame - ex.AnimationStrategy.Freeze); - -// Animation to play going down -this.downAnimation = ex.Animation.fromSpriteSheet( - spriteSheet, - [0, 1, 2], - 150, - ex.AnimationStrategy.Freeze); - -// Register animations by name -this.graphics.add('down', this.downAnimation); -this.graphics.add('up', this.upAnimation); + // Register animations by name + this.graphics.add('down', this.downAnimation); + this.graphics.add('up', this.upAnimation); + ... + + this.on('exitviewport', () => { + this.level.triggerGameOver(); + }); + } + ... +} ``` You can also pull single frames out of a `SpriteSheet` as a `Sprite` ```typescript -this.startSprite = spriteSheet.getSprite(1, 0); -... -this.graphics.add('start', this.startSprite); +// bird.ts -this.graphics.use('start'); -``` +export class Bird extends ex.Actor { + ... + startSprite!: ex.Sprite; + ... + override onInitialize(): void { + ... + this.startSprite = spriteSheet.getSprite(1, 0); + ... + this.graphics.add('start', this.startSprite); + + this.graphics.use('start'); + ... + } +} +... +``` \ No newline at end of file diff --git a/site/docs/00-tutorial/14-step-ground-graphics.mdx b/site/docs/00-tutorial/14-step-ground-graphics.mdx index 34f3892bb..369d68691 100644 --- a/site/docs/00-tutorial/14-step-ground-graphics.mdx +++ b/site/docs/00-tutorial/14-step-ground-graphics.mdx @@ -19,6 +19,7 @@ We want the ground to tile and repeat horizontally we can take advantage of the // resources.ts export const Resources = { // Relative to /public in vite + ... GroundImage: new ex.ImageSource('./images/ground.png', { wrapping: ex.ImageWrapping.Repeat }) diff --git a/site/docs/00-tutorial/15-step-sound-music.mdx b/site/docs/00-tutorial/15-step-sound-music.mdx index 9b0fe11cc..30fbd052a 100644 --- a/site/docs/00-tutorial/15-step-sound-music.mdx +++ b/site/docs/00-tutorial/15-step-sound-music.mdx @@ -16,6 +16,7 @@ Finally to really add depth to a game let's add some sound! `ex.Sound` needs to Excalibur supports any audio your browser supports, you can specify an ordered list of files to fallback to if a browser doesn't support. ```typescript +// resources.ts export const Resources = { // Relative to /public in vite ...