Using 2D sprite with OpenGL

1. Using 2D sprite with OpenGL 2003 team Koguyue

2. 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

3. Motivation and basic concepts( 1/3 ) • Digital image and pixels • The data structure for pixels

4. Motivation and basic concepts( 2/3 ) • Image data storage in memory and in files

5. 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

6. 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

7. 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

8. 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 color keying character to draw original image background removal

9. 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

10. 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

11. 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

12. 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

13. Advanced requirements of implementation ( 4/4 ) • For example , when developing XenoGalaxia Different map tiles have different properties to affect characters to move on them Information signs are also made of a sequence of sprites Each character has his own animation sprite , face window , and game parameters ( for example , attack rate , speed , … etc ) Scroll the sky image , and it looks more wonderful

14. 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 ; } ;

15. 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

16. 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

17. 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

18. 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

19. KGL sprite class and examples On the ground Character Bounding Box Character bounding box collides with the ground surface Character Bounding Box acceleration of gravity In the air Press a given button to jump ground ground Move the character each frame and count its position ( or even velocity ) to simulate some physical appearance

20. 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

21. 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

22. 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 Character bounding box x

23. 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

24. 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