-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
74 lines (70 loc) · 2.93 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Canvas Sprite Animation Demo</title>
</head>
<body>
<noscript>You must have JavaScript enabled to use this site.</noscript>
<canvas id="canvas" width="304" height="320" style="display: block; margin: 0 auto;">
Your browser does not support the <canvas> element!
</canvas>
<script src="sprite.js"></script>
<script>
window.requestAnimFrame = (function(callback) { // shim
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() { // Animation loop that draws the canvas
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clear the canvas
spriteMap.draw(context, 100, 100); // Draw the sprite
requestAnimFrame(animate); // Run the animation loop
}
window.onload = function() {
// Get the canvas graphics context
context = document.getElementById('canvas').getContext('2d');
// These variables are used for switching animations, just for illustration
var animNo = 0, animNames = [
'ButtWalk', 'ButtDown', 'BodyWalk', 'BodyWalkDown', 'BodyAltWalk', 'BodyDown', 'Walk', 'Face'
];
// Initialize the SpriteMap
spriteMap = new SpriteMap(
'centipede-sprite.png', // sprite image
{ // animation sequences
ButtWalk: {startRow: 0, startCol: 0, endRow: 1, endCol: 3},
ButtDown: {startRow: 1, startCol: 4, endRow: 1, endCol: 4},
BodyWalk: {startRow: 1, startCol: 5, endRow: 2, endCol: 8},
BodyWalkDown: {startRow: 3, startCol: 0, endRow: 3, endCol: 0},
BodyAltWalk: {startRow: 3, startCol: 1, endRow: 4, endCol: 4},
BodyDown: {startRow: 4, startCol: 5, endRow: 4, endCol: 5},
Walk: {startRow: 4, startCol: 6, endRow: 6, endCol: 0},
Face: {startRow: 6, startCol: 1, endRow: 6, endCol: 1}
},
{ // options
frameW: 52, // Width of each frame of the animation in pixels
frameH: 60, // Height of each frame of the animation in pixels
projectedW: 104, // Displayed width (in this case 200% size)
projectedH: 120, // Displayed height (in this case 200% size)
interval: 50, // Switch frames every 50ms
useTimer: false, // Rely on requestAnimFrame to update frames instead of setInterval
postInitCallback: function (sprite) {
spriteMap.start('ButtWalk'); // Start running the animation
animate(); // Animate the canvas
setInterval(function() { // Switch animation sequence every 2.5 seconds for illustration
animNo = (animNo + 1) % animNames.length;
spriteMap.use(animNames[animNo]); // Switch animation sequences
}, 2500);
} // Do something when the sprite finishes loading
}
);
}
</script>
</body>
</html>