SlideShare a Scribd company logo
1 of 23
SPRITE ARTWORKS
VC 772 - GAME ARTWORK
SPRITESHEETS
Spritesheets have been used in games for a long time.
Classic games such as Legend of Zelda: A Link to the Past and even modern games like
Steppy pants have used them.
ANIMATION
Creating animations for video games is much different from creating animations for movies.
The major difference is that a movie is meant simply to be viewed, while the purpose of a video game is to
interact.
For this reason, animating for video games can be much more difficult than animating for video games;
Back in 1872, Eadweard Muybridge was commissioned to prove
whether a horse lifted all four legs off the ground at once when
it ran. To do so, he set up a series of cameras along a track and
took pictures in quick succession as a horse ran by. This process
allowed him to capture 16 pictures of the horse's run. In one of
the pictures, the horse did indeed have all four legs off the
ground.
Eadweard Muybridge
9 April 1830 – 8 May 1904, born was an
English photographer important for his
pioneering work in photographic studies
of motion, and early work in motion-
picture projection.
Muybridge later repeated the experiment and placed each photo onto a device that could project
the photos in rapid succession to give the illusion of the horse running, creating the first movie
projector.
The process of changing images in quick succession to give the illusion of movement is called
animation.
SIMULATION OF A SPINNING ZOOPRAXISCOPE
Sprites are a popular way to create large, complex scenes as you can manipulate each sprite separately
from the rest of the scene. This allows for greater control over how the scene is rendered, as well as over
how the players can interact with the scene.
It is not uncommon for games to have tens to hundreds of sprites. Loading each of these as an individual
image would consume a lot of memory and processing power.
To help manage sprites and avoid using so many images, many games use spritesheets.
SPRITE
A sprite is a single graphic image that is incorporated into a larger scene so that it
appears to be part of the scene.
CG ART TO SPRITE
• Check the most
iconic things in the
character arts put
in on the sprite
• Don’t be too
detailed, since it
will be drawed
again and again
• Practice, practice,
practice
CG ART TO SPRITE
• Don’t forget to do
the sprite from
front, side and
behind
• Check the art once
again if you want
to add some iconic
detail
SPRITESHEET
When you put many sprites into a single image, you get a spritesheet.
Spritesheets are used to speed up the process of
displaying images to the screen; It is much faster
to fetch one image and display only a part of that
image than it is to fetch many images and display
them.
Spritesheet animation is nothing more than taking
a spritesheet and changing which sprite is
rendered in quick succession to give the illusion of
movement, much like a film projector displaying a
movie.
HINT: It is important that
each frame of the
spritesheet is the same
width and height;
otherwise, drawing the
animation to the screen is
very difficult.
PARTS OF A SPRITESHEET
Spritesheets are made up of two parts: frames and cycles
A frame is a single image (or sprite) from the spritesheet. Going back to the Muybridge's horse
example, each picture of the horse in the image would be a frame.
When the frames are put in an order that creates a continuous movement, it creates a cycle.
Putting the photos of the horse in the order that they were taken produces a "run" cycle since the
horse is running (as opposed to a "walk" or "idle" cycle).
CODING SPRITESHEET ANIMATIONS
1.Creating the image
2.Updating the image to each frame of the
animation
3.Drawing the frame to the screen
CREATING THE IMAGE
UPDATING THE IMAGE TO EACH FRAME OF THE ANIMATION
To update the spritesheet animation, all we have to do is change which frame we will draw.
ANIMATED SPRITE

More Related Content

Similar to How to Make Sprites in Game Artwork Field.ppt

19 types of animation techniques and styles
19 types of animation techniques and styles19 types of animation techniques and styles
19 types of animation techniques and styleswinbizindia
 
LEGACY OF STOP MOTION IN KUBO
LEGACY OF STOP MOTION IN KUBOLEGACY OF STOP MOTION IN KUBO
LEGACY OF STOP MOTION IN KUBOAnimation Kolkata
 
Lec28 29 30 animation
Lec28 29 30 animationLec28 29 30 animation
Lec28 29 30 animationDom Mike
 
Animation by dinesh kumar
Animation by dinesh kumarAnimation by dinesh kumar
Animation by dinesh kumarDineshKumar3828
 
Presentation on animation by akanksha
Presentation on animation by akankshaPresentation on animation by akanksha
Presentation on animation by akankshaakanksha singh
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animationMrsNunn
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animationMrsNunn
 
Animation - by David Enri
Animation - by David Enri Animation - by David Enri
Animation - by David Enri David Enri Grau
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animationMrsNunn
 
Persistence of vision
Persistence of visionPersistence of vision
Persistence of visionVarshini1999
 

Similar to How to Make Sprites in Game Artwork Field.ppt (20)

19 types of animation techniques and styles
19 types of animation techniques and styles19 types of animation techniques and styles
19 types of animation techniques and styles
 
LEGACY OF STOP MOTION IN KUBO
LEGACY OF STOP MOTION IN KUBOLEGACY OF STOP MOTION IN KUBO
LEGACY OF STOP MOTION IN KUBO
 
Lec28 29 30 animation
Lec28 29 30 animationLec28 29 30 animation
Lec28 29 30 animation
 
Animation
AnimationAnimation
Animation
 
Animation by dinesh kumar
Animation by dinesh kumarAnimation by dinesh kumar
Animation by dinesh kumar
 
Assignemnt 4 unit 33 lo1
Assignemnt 4 unit 33 lo1Assignemnt 4 unit 33 lo1
Assignemnt 4 unit 33 lo1
 
animation
animationanimation
animation
 
Report of Engineering in Entertainment
Report of Engineering in EntertainmentReport of Engineering in Entertainment
Report of Engineering in Entertainment
 
Animation ict
Animation ictAnimation ict
Animation ict
 
Presentation on animation by akanksha
Presentation on animation by akankshaPresentation on animation by akanksha
Presentation on animation by akanksha
 
Animation
AnimationAnimation
Animation
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animation
 
Screen art 1.pptx
Screen art 1.pptxScreen art 1.pptx
Screen art 1.pptx
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animation
 
Animation - by David Enri
Animation - by David Enri Animation - by David Enri
Animation - by David Enri
 
Lesson 1 different types of animation
Lesson 1   different types of animationLesson 1   different types of animation
Lesson 1 different types of animation
 
Animation
AnimationAnimation
Animation
 
1.animation
1.animation1.animation
1.animation
 
Planning
PlanningPlanning
Planning
 
Persistence of vision
Persistence of visionPersistence of vision
Persistence of vision
 

Recently uploaded

Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Shubhangi Sonawane
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 

Recently uploaded (20)

Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 

How to Make Sprites in Game Artwork Field.ppt

  • 1. SPRITE ARTWORKS VC 772 - GAME ARTWORK
  • 2. SPRITESHEETS Spritesheets have been used in games for a long time. Classic games such as Legend of Zelda: A Link to the Past and even modern games like Steppy pants have used them.
  • 3.
  • 4.
  • 5. ANIMATION Creating animations for video games is much different from creating animations for movies. The major difference is that a movie is meant simply to be viewed, while the purpose of a video game is to interact. For this reason, animating for video games can be much more difficult than animating for video games;
  • 6. Back in 1872, Eadweard Muybridge was commissioned to prove whether a horse lifted all four legs off the ground at once when it ran. To do so, he set up a series of cameras along a track and took pictures in quick succession as a horse ran by. This process allowed him to capture 16 pictures of the horse's run. In one of the pictures, the horse did indeed have all four legs off the ground. Eadweard Muybridge 9 April 1830 – 8 May 1904, born was an English photographer important for his pioneering work in photographic studies of motion, and early work in motion- picture projection.
  • 7.
  • 8. Muybridge later repeated the experiment and placed each photo onto a device that could project the photos in rapid succession to give the illusion of the horse running, creating the first movie projector. The process of changing images in quick succession to give the illusion of movement is called animation.
  • 9. SIMULATION OF A SPINNING ZOOPRAXISCOPE
  • 10. Sprites are a popular way to create large, complex scenes as you can manipulate each sprite separately from the rest of the scene. This allows for greater control over how the scene is rendered, as well as over how the players can interact with the scene. It is not uncommon for games to have tens to hundreds of sprites. Loading each of these as an individual image would consume a lot of memory and processing power. To help manage sprites and avoid using so many images, many games use spritesheets.
  • 11. SPRITE A sprite is a single graphic image that is incorporated into a larger scene so that it appears to be part of the scene.
  • 12. CG ART TO SPRITE • Check the most iconic things in the character arts put in on the sprite • Don’t be too detailed, since it will be drawed again and again • Practice, practice, practice
  • 13. CG ART TO SPRITE • Don’t forget to do the sprite from front, side and behind • Check the art once again if you want to add some iconic detail
  • 14. SPRITESHEET When you put many sprites into a single image, you get a spritesheet.
  • 15.
  • 16. Spritesheets are used to speed up the process of displaying images to the screen; It is much faster to fetch one image and display only a part of that image than it is to fetch many images and display them. Spritesheet animation is nothing more than taking a spritesheet and changing which sprite is rendered in quick succession to give the illusion of movement, much like a film projector displaying a movie.
  • 17. HINT: It is important that each frame of the spritesheet is the same width and height; otherwise, drawing the animation to the screen is very difficult.
  • 18. PARTS OF A SPRITESHEET Spritesheets are made up of two parts: frames and cycles A frame is a single image (or sprite) from the spritesheet. Going back to the Muybridge's horse example, each picture of the horse in the image would be a frame. When the frames are put in an order that creates a continuous movement, it creates a cycle. Putting the photos of the horse in the order that they were taken produces a "run" cycle since the horse is running (as opposed to a "walk" or "idle" cycle).
  • 19. CODING SPRITESHEET ANIMATIONS 1.Creating the image 2.Updating the image to each frame of the animation 3.Drawing the frame to the screen
  • 21. UPDATING THE IMAGE TO EACH FRAME OF THE ANIMATION To update the spritesheet animation, all we have to do is change which frame we will draw.
  • 22.