Using 2D sprite with OpenGL

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


Image data storage in memory and in files


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


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


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


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


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


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


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


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


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


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

Documents

Using 2D sprite with OpenGL