Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages...
-
Upload
hallie-seamster -
Category
Documents
-
view
225 -
download
3
Transcript of Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages...
![Page 1: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/1.jpg)
Using 2D sprite with OpenGL
2003 team Koguyue
![Page 2: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/2.jpg)
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
![Page 3: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/3.jpg)
Motivation and basic concepts( 1/3 )
Digital image and pixels The data structure for
pixels
![Page 4: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/4.jpg)
Motivation and basic concepts( 2/3 )
Image data storage in memory and in files
![Page 5: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/5.jpg)
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
![Page 6: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/6.jpg)
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
![Page 7: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/7.jpg)
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
![Page 8: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/8.jpg)
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
![Page 9: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/9.jpg)
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
![Page 10: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/10.jpg)
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
![Page 11: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/11.jpg)
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
![Page 12: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/12.jpg)
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
![Page 13: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/13.jpg)
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
![Page 14: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/14.jpg)
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 ; } ;
![Page 15: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/15.jpg)
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
![Page 16: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/16.jpg)
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
![Page 17: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/17.jpg)
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
![Page 18: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/18.jpg)
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
![Page 19: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/19.jpg)
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
![Page 20: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/20.jpg)
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
![Page 21: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/21.jpg)
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
![Page 22: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/22.jpg)
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
![Page 23: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/23.jpg)
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
![Page 24: Using 2D sprite with OpenGL 2003 team Koguyue. Overview Motivation and basic concepts Advantages with using OpenGL Basic requirements of implementation.](https://reader036.fdocuments.in/reader036/viewer/2022062318/55178a435503460e6e8b574a/html5/thumbnails/24.jpg)
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