Chapter 8 Sprite Animation Techniques 2

Web Game
Development:
Sprite Animation
Techniques
By Sazilah Salam
Learning Outcomes
At the end of this lesson, students should be able to:

• Explain how to do sprite animations:
• Using JavaScript, and
• Using CSS
• Apply Sprite Animations in game development.
Sprite Animation
• A sprite is defined as a two-dimensional

image that plays a specific role.
• Sprites are also known as icons.
• A sprite sheet is a single image
containing all frames of the animation.
• A web page with many images can take
a long time to load and generates
multiple server requests.
• Using image sprites will reduce the
number of server requests and save
bandwidth.
• Sprite animation are animation clips that are created for
2D assets.
• Two common ways in creating sprite animations for Web
game are by using:
i. JavaScript Canvas, and
ii. CSS (Cascading Style Sheet).
Sprite Animation Using
JavaScript Canvas
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
• 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)
Example: Animating a Sprite Row

shadow_dog.png
Sprite Animation
Using CSS
What is a CSS animation?
• An animation lets an element gradually change from

one style to another.
• You can change as many CSS properties you want,
as many times as you want.
• To use CSS animation, you must first specify some
keyframes for the animation.
• Keyframes hold what styles the element will have at
certain times.
CSS Animation Properties
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation
@keyframes
• When we specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
• To get an animation to work, we must bind the animation to a HTML element.
<!DOCTYPE html> @keyframes walking {

<html> 100% { background-position: -1754px;}
<head> }
<style> </style>
#sprite_anim { </head>
width: 295px; <body>
height: 155px; <div id='sprite_anim'></div>
background: url("enemy1.png") </body>
0px 0px; </html>
animation-name: walking;
animation-duration: 1s;
}
animation-name
• This property specifies the name for the animation, and it

links with the animation name specified at @keyframes
property.
#sprite-image {
height: 155px;
width: 295px;
background: url("enemy1.png") 0px 0px;
animation-name: enemy1;
animation-duration: 0.8s;
}
@keyframes enemy1 {
100% { background-position: -1754px;}
}
animation-duration
• The animation-duration property defines how long an

animation should take to complete.
• If the animation-duration property is not specified, no
animation will occur, because the default value is 0s
(0 seconds)
animation-name: sprite_anim;
animation-delay
• The animation-delay property specifies a delay for the

start of an animation.
• Negative values are also allowed. If using negative
values, the animation will start as if it had already
been playing for N seconds.
animation-name: sprite_anim; animation-name: sprite_anim;
animation-duration: 4s; animation-duration: 4s;
animation-delay: 2s; animation-delay: -2s;
animation-iteration-count
• The animation-iteration-count property specifies the

number of times an animation should run.
animation-iteration-count: 3;
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-iteration-count: 2;
animation-direction: alternate-reverse;
animation-timing-function
• The animation-timing-function property specifies the

speed curve of the animation.
• The animation-timing-function property can have the
following values: ease, linear, ease-in, ease-out,
ease-in-out, cubic-bezier(n,n,n,n), steps(n)
animation-timing-function: steps(6);
animation-fill-mode
• The animation-fill-mode property specifies a style for the
target element when the animation is not playing
(before it starts, after it ends, or both).
• The animation-fill-mode property can have the following
values: none, forwards, backwards, both
animation-delay: 2s;
animation-fill-mode: backwards;
shorthand
• The following CSS property are the same
animation: enemy1 0.8s steps 0 infinite normal;
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

Chapter 8 Sprite Animation Techniques 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 8 Sprite Animation Techniques 2

Uploaded by

Copyright:

Available Formats

Web Game

At the end of this lesson, students should be able to:

• A sprite is defined as a two-dimensional

Example: Animating a Sprite Row

• An animation lets an element gradually change from

<!DOCTYPE html> @keyframes walking {

• This property specifies the name for the animation, and it

• The animation-duration property defines how long an

• The animation-delay property specifies a delay for the

• The animation-iteration-count property specifies the

• The animation-timing-function property specifies the

You might also like