kontra
Version:
Kontra HTML5 game development library
64 lines (57 loc) • 1.61 kB
HTML
<html>
<head>
<title>Animation Sprite</title>
<script src="../../kontra.js"></script>
</head>
<body>
<canvas id="game" width="600" height="400" style="background: #333331"></canvas>
<script id="code">
// initialize the game and setup the canvas
let { canvas, context } = kontra.init();
// set image path so we don't have to reference the sprite sheet by it's path
kontra.setImagePath('../imgs/');
// load the sprite sheet
kontra.load('character_walk_sheet.png').then(function() {
// create the sprite sheet and its animation
window.spriteSheet = kontra.SpriteSheet({
image: kontra.imageAssets.character_walk_sheet,
frameWidth: 72,
frameHeight: 97,
animations: {
walk: {
frames: '0..10', // frames 0 through 10
frameRate: 30
}
}
});
// pass the animations to the sprite
window.sprite = kontra.Sprite({
width: 72 * 2,
height: 97 * 2,
anchor: {
x: 0.5,
y: 0.5,
},
x: 300,
y: 200,
animations: spriteSheet.animations
});
// set the animation to play
sprite.playAnimation('walk');
// create the game loop to update and render the sprite
window.loop = kontra.GameLoop({
update: function() {
sprite.update();
},
render: function() {
sprite.render();
}
});
// start the loop
loop.start();
});
</script>
<script src="../prism/codeOutput.js"></script>
</body>
</html>