[READ-ONLY] Mirror of https://github.com/excaliburjs/Excalibur. 🎮 Your friendly TypeScript 2D game engine for the web 🗡️
excaliburjs.com
excalibur
excaliburjs
game-development
game-engine
game-framework
gamedev
games
html5-canvas
typescript
docs: Update 12-step-bird-graphics.mdx (#3474)
Whene reading Flappy Bird tutorial, on the 12th step, no explanation and no code are added to show the use of animation when bird is going down or up.
## Changes:
- Added new code to put everything together
- Explained and displayed where to use an animation and why resetting some is important
+79
-1
+79
-1
site/docs/00-tutorial/12-step-bird-graphics.mdx
+79
-1
site/docs/00-tutorial/12-step-bird-graphics.mdx
···
86
86
}
87
87
}
88
88
...
89
-
```
89
+
```
90
+
91
+
Putting it all together
92
+
93
+
```typescript
94
+
// bird.ts
95
+
96
+
export class Bird extends ex.Actor {
97
+
...
98
+
startSprite!: ex.Sprite;
99
+
upAnimation!: ex.Animation;
100
+
downAnimation!: ex.Animation;
101
+
...
102
+
override onInitialize(): void {
103
+
// Slice up image into a sprite sheet
104
+
const spriteSheet = ex.SpriteSheet.fromImageSource({
105
+
image: Resources.BirdImage,
106
+
grid: {
107
+
rows: 1,
108
+
columns: 4,
109
+
spriteWidth: 32,
110
+
spriteHeight: 32,
111
+
}
112
+
});
113
+
114
+
// Animation to play going up on tap
115
+
this.upAnimation = ex.Animation.fromSpriteSheet(
116
+
spriteSheet,
117
+
[2, 1, 0], // 3rd frame, then 2nd, then first
118
+
150, // 150ms for each frame
119
+
ex.AnimationStrategy.Freeze);
120
+
121
+
// Animation to play going down
122
+
this.downAnimation = ex.Animation.fromSpriteSheet(
123
+
spriteSheet,
124
+
[0, 1, 2],
125
+
150,
126
+
ex.AnimationStrategy.Freeze);
127
+
128
+
// Register animations by name
129
+
this.graphics.add('down', this.downAnimation);
130
+
this.graphics.add('up', this.upAnimation);
131
+
this.graphics.add('start', this.startSprite);
132
+
133
+
// Set the default sprite to use
134
+
this.graphics.use(this.startSprite);
135
+
...
136
+
this.on('exitviewport', () => {
137
+
this.level.triggerGameOver();
138
+
});
139
+
}
140
+
}
141
+
...
142
+
```
143
+
144
+
To use the down animation when bird is going down or the up one, we need to use the specific animation on tap or when the y component of the velocity is positive.
145
+
146
+
```typescript
147
+
// bird.ts
148
+
149
+
export class Bird extends ex.Actor {
150
+
...
151
+
override onPostUpdate(engine: ex.Engine): void {
152
+
...
153
+
if (!this.jumping && this.isInputActive(engine)) {
154
+
...
155
+
this.graphics.use('up');
156
+
// rewind animations that froze
157
+
this.upAnimation.reset();
158
+
this.downAnimation.reset();
159
+
}
160
+
...
161
+
if (this.vel.y > 0) {
162
+
this.graphics.use('down');
163
+
}
164
+
}
165
+
}
166
+
...
167
+
```