Skip to content

lecture07.adoc

Latest commit

 

History

History
261 lines (183 loc) · 8.01 KB

lecture07.adoc

File metadata and controls

261 lines (183 loc) · 8.01 KB

Sprite Animation

sample

Overview

  • What are sprites?

  • What is sprite animation?

  • What are sprite sheets?

  • Challenges in sprite animation

  • Sprite Files

  • Texture Animation

  • Video Textures

What are sprites?

  • A Sprite is a 2D image, usually used within a video game.

  • Usually, partially transparent

Kenny Platformer Pack: p1_front
Kenny Platformer Pack: p1_front

What is sprite animation?

  • Changing between a set of sprites over time, to give the impression of change

    • movement

    • shape change

    • …​

Kenny Platformer Pack: p1 walk cycle
Kenny Platformer Pack: p1 walk cycle

What is sprite animation?

(for platforms not supporting apng)

  • Changing between a set of sprites over time, to give the impression of change

    • movement

    • shape change

    • …​

Kenny Platformer Pack: p1 walk cycle
Kenny Platformer Pack: p1 walk cycle

What are sprite sheets?

  • Single images containing multiple sprites and/or multiple frames of sprite animation

Kenny Platformer Pack: p1_walk spritesheet
Kenny Platformer Pack: p1_walk spritesheet

Challenges in sprite animation

  1. Sprites within sprite sheets

    • selecting the right set of pixels for each sprite

  2. Animation Cycles

    • selecting the right sprite at the right time

    • smoothing the transitions

    • animation frame rate != render frame rate

  3. Multiple Animation Cycles

    • when to transition from one cycle to another

Sprites within sprite sheets

  • selecting the right set of pixels for each sprite

Kenny Platformer Pack: p1_walk_annotated spritesheet
Kenny Platformer Pack: p1_walk_annotated spritesheet

Why Sprites within sprite sheets?

  • More efficient

    • in general, it is more efficient to have larger images and draw from just part of them

    • fewer texture binds (at the OpenGL level)

Sprites within sprite sheets

  • Somehow we have to figure out which area of the sprite sheet correspond to each sprite

  • we NEED more information to do this

    • it might be implicit - i.e. we expect all sprite sheets to conform to some standard

    • we might have that information in another file (or directly in our source code) (or, in theory, embedded in the meta-data of the image)

Sprites within sprite sheets

Let’s have a closer look at the sprite sheet

Kenny Platformer Pack: p1_walk_annotated spritesheet
Kenny Platformer Pack: p1_walk_annotated spritesheet

Animation Cycles

  • animation frame rate != render frame rate

  • selecting the right sprite at the right time

  • smoothing the transitions

Animation frame rate != render frame rate

  • Our sprite frame rate is frequently lower than our render frame rate

  • Our render frame rate is frequently variable

Kenny Platformer Pack - p1_walk_annotated spritesheet

Selecting the right sprite at the right time

  • When do we move from one sprite to another?

  • Usually at a fixed rate

    • e.g. 10 sprite frames per second

    • so we need to keep track of real time, and animation time

  • How do we represent where in the animation cycle we are?

    • which frame? or a normalised float?

    • DISCUSS …​

Smoothing the transitions

  • Frequently our sprites frame rate is lower than our render frame rate

    • we could somehow try to smooth between images to smooth out the transitions

    • this is really hard

    • better to do offline

    • or use another animation techniques (e.g. skeletal animation)

Multiple Animation Cycles

  • when to transition from one cycle to another?

multipleAnimationCycles

Sprite files

  • the imagery

  • meta-data

Sprite files - imagery

What file formats is the image data stored in?

Most image formats are, or can be, used.

  • bmp

  • gif

  • jpg

  • png

  • …​

Advantages / Disadvantages of these file formats??

format pro con

bmp

gif

jpg

png

Advantages / Disadvantages of these file formats ?? 2

format pro con

bmp

easy to load

no transparency; minimal compression

gif

transparency (full/none)

limited colour depth/palette

jpg

high compression; good for real-world scenes

lossy; has artefacts for some kinds of images (handles hard edges badly); hard to write a loader

png

transparency (alpha-levels); lossless; compressed

compression (lossless) isn’t (generally) as good as jpg; hard to write a loader

tga

transparency (alpha-levels); lossless; compressed; reasonably easy to write a loader

no web-support

format for the graphics card

very fast to load (data direct from file to GPU)

no web-support

More on file formats

  • Some formats may be better for PC-only, or Web-only

  • Different file formats for:

    • asset interchange (what your artists work on; what you keep; what you pass from tool to tool)

    • asset packing (for loading into a game)

      • e.g. gltf for 3D (OpenGL)

Loading Sprites

Sprite files - meta-data

  • json

  • xml (e.g. taml)

  • custom

  • …​

Sprite files - meta-data - an example 1

link:assets/kenny/platformerPack/Player/p1_spritesheet.txt[role=include]

Sprite files - meta-data - an example 2

link:assets/kenny/platformerPack/Player/p1_walk/p1_walk.json[role=include]

Texture Animation

  • If we’re using OpenGL (or DirectX) we can still do sprite animation

  • It is straightforward with texture

  • Each image is a texture

  • the pixel coordinates become UV coordinates

  • SDL’s 2D renderer (usually) uses OpenGL - just like this

Video Textures

  • We can also use video as a source for textures

  • Pros? Cons?