-
-
Notifications
You must be signed in to change notification settings - Fork 189
/
Animation.ts
334 lines (289 loc) · 8.88 KB
/
Animation.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
import { Sprite } from './Sprite';
import { IAnimationArgs } from '../Drawing/Animation';
import * as Effects from './SpriteEffects';
import { Color } from './Color';
import { IDrawable } from '../Interfaces/IDrawable';
import { Vector } from '../Algebra';
import { Engine } from '../Engine';
import * as Util from '../Util/Util';
import { Configurable } from '../Configurable';
/**
* @hidden
*/
export class AnimationImpl implements IDrawable {
/**
* The sprite frames to play, in order. See [[SpriteSheet.getAnimationForAll]] to quickly
* generate an [[Animation]].
*/
public sprites: Sprite[] = [];
/**
* Duration to show each frame (in milliseconds)
*/
public speed: number;
/**
* Current frame index being shown
*/
public currentFrame: number = 0;
private _oldTime: number = Date.now();
public anchor: Vector = new Vector(0.0, 0.0);
public rotation: number = 0.0;
public scale: Vector = new Vector(1, 1);
/**
* Indicates whether the animation should loop after it is completed
*/
public loop: boolean = true;
/**
* Indicates the frame index the animation should freeze on for a non-looping
* animation. By default it is the last frame.
*/
public freezeFrame: number = -1;
private _engine: Engine;
/**
* Flip each frame vertically. Sets [[Sprite.flipVertical]].
*/
public flipVertical: boolean = false;
/**
* Flip each frame horizontally. Sets [[Sprite.flipHorizontal]].
*/
public flipHorizontal: boolean = false;
public drawWidth: number = 0;
public drawHeight: number = 0;
public width: number = 0;
public height: number = 0;
/**
* Typically you will use a [[SpriteSheet]] to generate an [[Animation]].
*
* @param engine Reference to the current game engine
* @param images An array of sprites to create the frames for the animation
* @param speed The number in milliseconds to display each frame in the animation
* @param loop Indicates whether the animation should loop after it is completed
*/
constructor(engineOrConfig: Engine | IAnimationArgs, sprites: Sprite[], speed: number, loop?: boolean) {
var engine = engineOrConfig;
if (engineOrConfig && !(engineOrConfig instanceof Engine)) {
var config = engineOrConfig;
engine = config.engine;
sprites = config.sprites;
speed = config.speed;
loop = config.loop;
}
this.sprites = sprites;
this.speed = speed;
this._engine = <Engine>engine;
if (loop != null) {
this.loop = loop;
}
if (sprites && sprites[0]) {
this.drawHeight = sprites[0] ? sprites[0].drawHeight : 0;
this.drawWidth = sprites[0] ? sprites[0].drawWidth : 0;
this.width = sprites[0] ? sprites[0].width : 0;
this.height = sprites[0] ? sprites[0].height : 0;
this.freezeFrame = sprites.length - 1;
}
}
/**
* Applies the opacity effect to a sprite, setting the alpha of all pixels to a given value
*/
public opacity(value: number) {
this.addEffect(new Effects.Opacity(value));
}
/**
* Applies the grayscale effect to a sprite, removing color information.
*/
public grayscale() {
this.addEffect(new Effects.Grayscale());
}
/**
* Applies the invert effect to a sprite, inverting the pixel colors.
*/
public invert() {
this.addEffect(new Effects.Invert());
}
/**
* Applies the fill effect to a sprite, changing the color channels of all non-transparent pixels to match a given color
*/
public fill(color: Color) {
this.addEffect(new Effects.Fill(color));
}
/**
* Applies the colorize effect to a sprite, changing the color channels of all pixels to be the average of the original color and the
* provided color.
*/
public colorize(color: Color) {
this.addEffect(new Effects.Colorize(color));
}
/**
* Applies the lighten effect to a sprite, changes the lightness of the color according to hsl
*/
public lighten(factor: number = 0.1) {
this.addEffect(new Effects.Lighten(factor));
}
/**
* Applies the darken effect to a sprite, changes the darkness of the color according to hsl
*/
public darken(factor: number = 0.1) {
this.addEffect(new Effects.Darken(factor));
}
/**
* Applies the saturate effect to a sprite, saturates the color according to hsl
*/
public saturate(factor: number = 0.1) {
this.addEffect(new Effects.Saturate(factor));
}
/**
* Applies the desaturate effect to a sprite, desaturates the color according to hsl
*/
public desaturate(factor: number = 0.1) {
this.addEffect(new Effects.Desaturate(factor));
}
/**
* Add a [[ISpriteEffect]] manually
*/
public addEffect(effect: Effects.ISpriteEffect) {
for (var i in this.sprites) {
this.sprites[i].addEffect(effect);
}
}
/**
* Removes an [[ISpriteEffect]] from this animation.
* @param effect Effect to remove from this animation
*/
public removeEffect(effect: Effects.ISpriteEffect): void;
/**
* Removes an effect given the index from this animation.
* @param index Index of the effect to remove from this animation
*/
public removeEffect(index: number): void;
public removeEffect(param: any) {
for (var i in this.sprites) {
this.sprites[i].removeEffect(param);
}
}
/**
* Clear all sprite effects
*/
public clearEffects() {
for (var i in this.sprites) {
this.sprites[i].clearEffects();
}
}
private _setAnchor(point: Vector) {
//if (!this.anchor.equals(point)) {
for (var i in this.sprites) {
this.sprites[i].anchor.setTo(point.x, point.y);
}
//}
}
private _setRotation(radians: number) {
//if (this.rotation !== radians) {
for (var i in this.sprites) {
this.sprites[i].rotation = radians;
}
//}
}
private _setScale(scale: Vector) {
//if (!this.scale.equals(scale)) {
for (var i in this.sprites) {
this.sprites[i].scale = scale;
}
//}
}
/**
* Resets the animation to first frame.
*/
public reset() {
this.currentFrame = 0;
}
/**
* Indicates whether the animation is complete, animations that loop are never complete.
*/
public isDone() {
return !this.loop && this.currentFrame >= this.sprites.length;
}
/**
* Not meant to be called by game developers. Ticks the animation forward internally and
* calculates whether to change to the frame.
* @internal
*/
public tick() {
var time = Date.now();
if (time - this._oldTime > this.speed) {
this.currentFrame = this.loop ? (this.currentFrame + 1) % this.sprites.length : this.currentFrame + 1;
this._oldTime = time;
}
}
private _updateValues(): void {
this._setAnchor(this.anchor);
this._setRotation(this.rotation);
this._setScale(this.scale);
}
/**
* Skips ahead a specified number of frames in the animation
* @param frames Frames to skip ahead
*/
public skip(frames: number) {
this.currentFrame = (this.currentFrame + frames) % this.sprites.length;
}
public draw(ctx: CanvasRenderingContext2D, x: number, y: number) {
this.tick();
this._updateValues();
var currSprite: Sprite;
if (this.currentFrame < this.sprites.length) {
currSprite = this.sprites[this.currentFrame];
if (this.flipVertical) {
currSprite.flipVertical = this.flipVertical;
}
if (this.flipHorizontal) {
currSprite.flipHorizontal = this.flipHorizontal;
}
currSprite.draw(ctx, x, y);
}
if (this.freezeFrame !== -1 && this.currentFrame >= this.sprites.length) {
currSprite = this.sprites[Util.clamp(this.freezeFrame, 0, this.sprites.length - 1)];
currSprite.draw(ctx, x, y);
}
// add the calculated width
if (currSprite) {
this.drawWidth = currSprite.drawWidth;
this.drawHeight = currSprite.drawHeight;
}
}
/**
* Plays an animation at an arbitrary location in the game.
* @param x The x position in the game to play
* @param y The y position in the game to play
*/
public play(x: number, y: number) {
this.reset();
this._engine.playAnimation(this, x, y);
}
}
/**
* [[include:Constructors.md]]
*/
export interface IAnimationArgs extends Partial<AnimationImpl> {
engine: Engine;
sprites: Sprite[];
speed: number;
loop?: boolean;
anchor?: Vector;
rotation?: number;
scale?: Vector;
flipVertical?: boolean;
flipHorizontal?: boolean;
width?: number;
height?: number;
}
/**
* Animations allow you to display a series of images one after another,
* creating the illusion of change. Generally these images will come from a [[SpriteSheet]] source.
*
* [[include:Animations.md]]
*/
export class Animation extends Configurable(AnimationImpl) {
constructor(config: IAnimationArgs);
constructor(engine: Engine, images: Sprite[], speed: number, loop?: boolean);
constructor(engineOrConfig: Engine | IAnimationArgs, images?: Sprite[], speed?: number, loop?: boolean) {
super(engineOrConfig, images, speed, loop);
}
}