/
sprite.js
137 lines (115 loc) · 2.98 KB
/
sprite.js
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
// A generic sprite class
var Sprite = function(src, width, height, offsetX, offsetY, frames, duration) {
this.spritesheet = null;
this.offsetX = 0;
this.offsetY = 0;
this.width = width;
this.height = height;
this.frames = 1;
this.currentFrame = 0;
this.duration = 1;
this.posX = 0;
this.posY = 0;
this.shown = true;
this.zoomLevel = 1;
this.shadow = null;
this.setSpritesheet(src);
this.setOffset(offsetX, offsetY);
this.setFrames(frames);
this.setDuration(duration);
var d = new Date();
if (this.duration > 0 && this.frames > 0) {
this.ftime = d.getTime() + (this.duration / this.frames);
} else {
this.ftime = 0;
}
}
Sprite.prototype.setSpritesheet = function(src) {
if (src instanceof Image) {
this.spritesheet = src;
} else {
this.spritesheet = new Image();
this.spritesheet.src = src;
}
}
Sprite.prototype.setPosition = function(x, y) {
this.posX = x;
this.posY = y;
}
Sprite.prototype.setOffset = function(x, y) {
this.offsetX = x;
this.offsetY = y;
}
Sprite.prototype.setFrames = function(fcount) {
this.currentFrame = 0;
this.frames = fcount;
}
Sprite.prototype.setDuration = function(duration) {
this.duration = duration;
}
Sprite.prototype.animate = function(c, t) {
if (t.getMilliseconds() > this.ftime) {
this.nextFrame ();
}
}
Sprite.prototype.nextFrame = function() {
if (this.duration > 0) {
var d = new Date();
if (this.duration > 0 && this.frames > 0) {
this.ftime = d.getTime() + (this.duration / this.frames);
} else {
this.ftime = 0;
}
this.offsetX = this.width * this.currentFrame;
if (this.currentFrame === (this.frames - 1)) {
this.currentFrame = 0;
} else {
this.currentFrame++;
}
}
}
Sprite.prototype.draw = function(c, drawShadow) {
if (this.shown) {
if (drawShadow !== undefined && drawShadow) {
if (this.shadow === null) { // Shadow not created yet
var sCnv = document.createElement("canvas");
var sCtx = sCnv.getContext("2d");
sCnv.width = this.width;
sCnv.height = this.height;
sCtx.drawImage(this.spritesheet,
this.offsetX,
this.offsetY,
this.width,
this.height,
0,
0,
this.width * this.zoomLevel,
this.height * this.zoomLevel);
var idata = sCtx.getImageData(0, 0, sCnv.width, sCnv.height);
for (var i = 0, len = idata.data.length; i < len; i += 4) {
idata.data[i] = 0; // R
idata.data[i + 1] = 0; // G
idata.data[i + 2] = 0; // B
}
sCtx.clearRect(0, 0, sCnv.width, sCnv.height);
sCtx.putImageData(idata, 0, 0);
this.shadow = sCtx;
}
c.save();
c.globalAlpha = 0.1;
var sw = this.width * this.zoomLevel;
var sh = this.height * this.zoomLevel;
c.drawImage(this.shadow.canvas, this.posX, this.posY - sh, sw, sh * 2);
c.restore();
}
c.drawImage(this.spritesheet,
this.offsetX,
this.offsetY,
this.width,
this.height,
this.posX,
this.posY,
this.width * this.zoomLevel,
this.height * this.zoomLevel);
}
}