Using 2D sprite with OpenGL
2003 team Koguyue
Overview








Motivation and basic concepts
Advantages with using OpenGL
Basic requirements of implementation
Advanced requirements of implementation
Pseudo code for implementation
KGL sprite class and examples
Here come some issues …
Conclusion and feature work
Motivation and basic concepts( 1/3 )


Digital image and pixels
The data structure for
pixels
Motivation and basic concepts( 2/3 )

Image data storage in memory and in files
Motivation and basic concepts( 3/3 )



Redraw each sprite at different position in each
frame , and we can make it move smoothly
Each sprite might have its own animation ( for
example , a running character ) , so we should
control the data of pixels for the sprite to draw
( in general case , we manage them by file )
Design your algorithm and rules for the game ,
calculate the data , draw the result as sprites
on screen , and you make it alive
Advantages with using OpenGL(1/2)

Shall we have to draw each pixel onto screen ?
–

No , high level graphic libraries support us to draw a
range of pixels fast and easily
We may have some choice …
–
–
–
–
–
OpenGL draw pixel
DirectX DirectDraw
OpenGL draw polygon with texture
DirectX Direct3D draw polygon with texture
… etc
Advantages with using OpenGL(2/2)

Here is a comparison result , test PC :
–
–
–
CPU:K6III-400mhz
VGA:TNT 8M
RAM: 128M
Even though D3D might draw faster than glTexture , it is not necessary in this case , and
OpenGL is much easier to learn and use for our implementation . Consequently , we will
introduce sprite in this tutorial as we are using glTexture
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
Advanced requirements of
implementation ( 1/4 )


( 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
Advanced requirements of
implementation ( 2/4 )


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
Advanced requirements of
implementation ( 3/4 )




Now , we get many of the main functions when using
sprite , but it’s not enough if we are to make a game 
it should be more attractive
In a game , we must have different objects , for
example characters , items , weapons , map tiles , and
so on
If one is serious to try to design a game , he should
think of the interactive relations and calculations
among his world
When programming , Inherit the sprite class that we
have done , add more properties to it . Take advantage
of c++ , and the work of showing image is easily done
Advanced requirements of
implementation ( 4/4 )

For example , when developing XenoGalaxia
Different map tiles
have different
properties to affect
characters to move
on them
Each character has
his own animation
sprite , face window ,
and game parameters
( for example , attack
rate , speed , … etc )
Information signs
are also made of
a sequence of
sprites
Scroll the sky
image , and it
looks more
wonderful
Pseudo code for implementation
( 1/2 )

Basic requirement part ( look also slide 8 ) :
–
–
Color keying is done when we load image file by using
KFLoadText()
class Sprite {
active_flags ;
pos_x ; pos_y ;
size_x ; size_y ;
*image ;
current_frame ;
first_frame ;
last_frame ;
frame_timer ;
frame_time ; } ;
Pseudo code for implementation
( 2/2 )

Advanced requirement part ( look also slide 10 )
–
–
Associated work : camera projection mode , frame color buffer
mode , blend flag and blend function
Class Sprite {
……..
max_alpha ; min_alpha ;
Rate_alpha ;
scroll_x ; scroll_y ;
scroll_rate ; } ;
A image of a
cube with RGBA
blended texture
on each face
• Then we can inherit the sprite as we need .
• To control the texture coordinate , we have other
alternative ways , but we don’t discuss here
KGL sprite class and examples

Simple sprites move example
Sprites move and animate
Sprites size span and fade in/out
Sprites texture scroll in x and y direction
Rotation

Introduction to program code




KGL sprite class and examples

Example(1) : Act type

Decide the format for editing
Draw the scene ( or map )
Draw the characters
Draw special effects
Control the character movement by state
Count the result and redraw in next frame





KGL sprite class and examples

An example of tiled map file :
Width of a tile
Height of a tile
Number of tile types
Type1 texture
Type2 texture
Type3 texture
Tiling data for arrangement of the map
// generally speaking , when developing a game project , we
// must discuss and decide our file formats in order to design the
// main program and tools for it
KGL sprite class and examples
Character
Bounding
Box
On the ground
Character bounding
box collides with the
ground surface
acceleration
of gravity
ground
Character
Bounding
Box
Press a given
button to jump
In the air
ground
Move the character each frame and count its position ( or
even velocity ) to simulate some physical appearance
KGL sprite class and examples

Example(2) : Iso-Matrix strategy type

Decide the format for editing
To present different effect for different objects , we give
them properties and counting formulas
Draw the scene ( or map ) with a re-arranged order
Draw the characters
Draw special effects
Control the character movement by state
Count the result and redraw in next frame






KGL sprite class and examples
Width of a tile
Height of a tile
Number of tile types
move cost 1 Type1 texture
move cost 2 Type2 texture
move cost 3 Type3 texture
Tiling data for arrangement of the map
// in this case , we add move cost into a map tile data structure
// to show different properties of the map tile
KGL sprite class and examples


Iso-matrix is a popular skill in 2D games that
we try to present some height effect in our
scene
Sometimes some books or
articles call it 2.5D
y
z
x
Character
bounding box
Here may come some issues …

What’s wrong with color keying ? ( Mr. Chen effect )
–
–

Because the color keying here just remove a given color value
for each pixel , but human eyes can not detect the tiny
difference of color values , we have to take care of the edges
in the image ( .bmp )
BMP files do not have the information of alpha value , but each
pixels in TGA files have a extra byte for channel alpha , and so
we can have much more smooth result
This is a tradeoff between
capacity and convenient ,
the Photoshop fast tutorial
will talk about it
The edge of
the character
in the image
form Mr.Chen
effect
Conclusion and feature work



It is intuitively for human beings to understand and
control by using images , and so it has played an
important role from past to now
In today’s games , even though the whole scene and
characters are almost shown by 3D models because of
hardware acceleration , we still need 2D sprites for
controlling ( panels , buttons ) and information
This part in KGL still needs to develop and add new
functions ( for example , rotating with any given center
and axis , and picking detection … ) to form a much
more powerful and friendly gaming tool