using 2d sprite with opengl 2003 team koguyue. overview motivation and basic concepts advantages...
TRANSCRIPT
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
character to draw
original imagebackground removal
zoom in color keying
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 spriteof 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 signsare 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 ; } ;
• 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
A image of a cube with RGBA blended texture on each face
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
CharacterBounding
Box
ground ground
CharacterBounding
Box
acceleration of gravity
Move the character each frame and count its position ( or even velocity ) to simulate some physical appearance
On the ground
In the air
Press a given button to jump
Character bounding box collides with the ground surface
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
Character bounding box
x
yz
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