Professional Documents
Culture Documents
Chapter 8 Sprite Animation Techniques 2
Chapter 8 Sprite Animation Techniques 2
Development:
Sprite Animation
Techniques
By Sazilah Salam
Learning Outcomes
• Clip the image and position the clipped part on the canvas
Parameter Description
img Specifies the image, canvas, or video element to use
sx The x coordinate where to start clipping (optional).
sy The y coordinate where to start clipping (optional).
swidth The width of the clipped image (optional).
sheight The height of the clipped image (optional).
x The x coordinate where to place the image on the canvas
y The y coordinate where to place the image on the canvas
width The width of the image to use (stretch or reduce the image) (optional).
height The height of the image to use (stretch or reduce the image) (optional).
<!DOCTYPE html> function animate() {
<html lang="en"> context.clearRect(0,0,canvas.width,canvas.height);
<head> context.drawImage(playerImage,
<meta charset="UTF-8"> frameX*spriteWidth,frameY*spriteHeight,
<meta name="viewport" spriteWidth,spriteHeight,
content="width=device-width, initial-scale=1.0"> 0,0,spriteWidth,spriteHeight);
<title>Sprite Animation Example</title> if (frameX < 6) frameX++;
</head> else frameX = 0;
<body> gameFrame++;
<canvas id="gameCanvas” width="600" height="600"> requestAnimationFrame(animate);
</canvas> };
<script> animate();
const canvas = document.getElementById('gameCanvas'); </script>
const context = canvas.getContext('2d’); </body>
const playerImage = new Image(); </html>
playerImage.src = 'shadow_dog.png’;
const spriteWidth = 575;
const spriteHeight = 523;
let frameX = 0;
let frameY = 0;
let gameFrame = 0; (sprite 0,0 to 6,0)
animation-name: sprite_anim;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction
• The animation-direction property specifies whether an
animation should be played forwards, backwards or
in alternate cycles.
• This property can have the following values:
• normal - played as normal (forwards). This is default.
• reverse - played in reverse direction (backwards).
• alternate - played forwards first, then backwards.
• alternate-reverse - played backwards first, then forwards.
animation-name: sprite_anim;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
animation-timing-function
animation-name: enemy1;
animation-duration: 0.8s;
animation-timing-function: steps(6);
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
Example 1
<!doctype html> #sprite-image {
<html> height: 140px;
<head> width: 268px;
<title>CSS Animation</title> background: url("enemy1.png") 0px 0px;
<link rel="stylesheet" animation-name: enemy1;
href="sprite3.css"> animation-duration: 0.8s;
</head> animation-timing-function: steps(6);
<body> animation-delay: 0;
<h1>CSS Animation</h1> animation-iteration-count: infinite;
<div id="sprite-container"> animation-direction: normal;
<div id="sprite-image"></div> }
</div> @keyframes enemy1 {
</body> 100% {
</html> background-position: -1594px;
}
}
enemy1.html sprite3.css
enemy1.png
The Output
Example 2
<!doctype html> #sprite-image {
<html> height: 389px;
<head> width: 220px;
<title>Animation</title> background: url("sprite1.png")0px 0px;
<link rel="stylesheet" href="sprite2.css"> animation: play 0.8s steps(8) infinite;
</head> }
<body> @keyframes play {
<h1>Animation</h1> 100% {
<div id="sprite-container"> background-position: -1826px;
<div id="sprite-image"></div> }
</div> }
</body>
</html>
sprite.html sprite2.css
sprite1.png
The Output