2010.4.8
Using 2D Sprite with OpenGL
Overview






Basic requirements of implementation
Image resource
Texture mapping
Advanced requirements of implementation
KGL sprite class & example
Demo
Basic requirements of
implementation ( 1/2 )
 Load image files that you need , transform
their data into OpenGL and bind them in a
proper way
 Image color keying for background removal
background
to remove
zoom in
original image
color keying
character
to draw
background removal
Basic requirements of
implementation ( 2/2 )
 Hold the position and size of the sprite , and
so we can move it or span it freely
 By controlling the texture coordinates , we
can play a sequence of animation frames in a
same image
Time t0
Time t0+1
Image resource
 Multiple images or Texture Atlas
Four Image with difference Texture ID Swap Texture coord. in timer
Swap Texture ID in timer
Packing all texture in one atlas
Image resource
 Multiple images or Texture Atlas
Four Image with difference Texture ID Swap Texture coord. in timer
Swap Texture ID in timer
Packing all texture in one atlas
Image resource
 Multiple images or Texture Atlas
Four Image with difference Texture ID Swap Texture coord. in timer
Swap Texture ID in timer
Packing all texture in one atlas
Image resource
 Multiple images or Texture Atlas
Four Image with difference Texture ID Swap Texture coord. in timer
Swap Texture ID in timer
Packing all texture in one atlas
Texture mapping
(0, 1)
(0, 0.45)
(0, 0)
texture
(0.36, 0.45)
(0.36, 0)
(1, 1)
The coordinate of a texture is
normalized into an 2d unit square
(1, 0)
Advanced requirements of
implementation ( 1/2 )
 ( In this section , we take more from OpenGL )
 Taking advantage of alpha buffer and depth
buffer , we can happily create the effect of
transparency with little effort
This effect alpha blending is a
standard function in OpenGL
To use it , it is necessary to set
frame color buffer as RGBA
The value of alpha to form
different level of transparency
can be set both in image data
and in color4 value
Another things…
 Again , we control the texture coordinates to
add the function of scrolling the image
 It is convenient and useful to perform some
small sprite automatic action if we add a
frame ( or time ) counter into it
In this example , a sprite of
spotlight is drawn over a sprite
of wall texture , and the spot
light is controlled to scroll
again and again
KGL sprite class
KGL sprite example(1/2)
KFLoadText()
will return the index of
the texture we load
KGL sprite example(2/2)
mapping the texture onto a quad
Demo
Sequentially load the textures below,
then it will become an animation