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
|
import { Component, ComponentNames } from ".";
import type { Dimension2D, DrawArgs, Coord2D } from "../interfaces";
import { clamp } from "../utils";
export class Sprite extends Component {
private sheet: HTMLImageElement;
private spriteImgPos: Coord2D;
private spriteImgDimensions: Dimension2D;
private msPerFrame: number;
private msSinceLastFrame: number;
private currentFrame: number;
private numFrames: number;
constructor(
sheet: HTMLImageElement,
spriteImgPos: Coord2D,
spriteImgDimensions: Dimension2D,
msPerFrame: number,
numFrames: number,
) {
super(ComponentNames.Sprite);
this.sheet = sheet;
this.spriteImgPos = spriteImgPos;
this.spriteImgDimensions = spriteImgDimensions;
this.msPerFrame = msPerFrame;
this.numFrames = numFrames;
this.msSinceLastFrame = 0;
this.currentFrame = 0;
}
public fillTimingsFromSprite(sprite: Sprite) {
this.msSinceLastFrame = clamp(sprite.msSinceLastFrame, 0, this.msPerFrame);
this.currentFrame = clamp(sprite.currentFrame, 0, this.numFrames - 1);
}
public update(dt: number) {
this.msSinceLastFrame += dt;
if (this.msSinceLastFrame >= this.msPerFrame) {
this.currentFrame = (this.currentFrame + 1) % this.numFrames;
this.msSinceLastFrame = 0;
}
}
public draw(ctx: CanvasRenderingContext2D, drawArgs: DrawArgs) {
const { center, rotation, tint, opacity, backgroundText } = drawArgs;
ctx.save();
ctx.translate(center.x, center.y);
if (rotation != undefined && rotation != 0) {
ctx.rotate(rotation * (Math.PI / 180));
}
ctx.translate(-center.x, -center.y);
if (opacity) {
ctx.globalAlpha = opacity;
}
if (backgroundText) {
// draw text
const { fillStyle, font, textAlign, text } = backgroundText;
ctx.fillStyle = fillStyle;
ctx.font = font;
ctx.textAlign = textAlign;
const height = ctx.measureText("M").width;
ctx.fillText(text, center.x, center.y + height / 2);
}
ctx.drawImage(
this.sheet,
...this.getSpriteArgs(),
...this.getDrawArgs(drawArgs),
);
if (tint) {
ctx.globalAlpha = 0.5;
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = tint;
ctx.fillRect(...this.getDrawArgs(drawArgs));
}
ctx.restore();
}
private getSpriteArgs(): [sx: number, sy: number, sw: number, sh: number] {
return [
this.spriteImgPos.x + this.currentFrame * this.spriteImgDimensions.width,
this.spriteImgPos.y,
this.spriteImgDimensions.width,
this.spriteImgDimensions.height,
];
}
private getDrawArgs({
center,
dimension,
}: DrawArgs): [dx: number, dy: number, dw: number, dh: number] {
return [
center.x - dimension.width / 2,
center.y - dimension.height / 2,
dimension.width,
dimension.height,
];
}
public getSpriteDimensions() {
return this.spriteImgDimensions;
}
}
|
