using 2d sprite with opengl
DESCRIPTION
2010.4.8. Using 2D Sprite with OpenGL. Overview. Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class & example Demo. Basic requirements of implementation ( 1/2 ). - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/1.jpg)
2010.4.8
![Page 2: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/2.jpg)
Overview
Basic requirements of implementation
Image resource Texture mapping Advanced requirements of
implementation KGL sprite class & example Demo
![Page 3: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/3.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 4: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/4.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 5: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/5.jpg)
Image resource
Multiple images or Texture Atlas
Four Image with difference Texture ID
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timer
![Page 6: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/6.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 7: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/7.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 8: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/8.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 9: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/9.jpg)
Texture mapping
(0, 1)
(0, 0)
(1, 1)
(1, 0)
texture
The coordinate of a texture is normalized into an 2d unit square
(0.36, 0)
(0, 0.45)
(0.36, 0.45)
![Page 10: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/10.jpg)
Advanced requirements of implementation ( 1/2 ) ( 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](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/11.jpg)
Another things…
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](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/12.jpg)
KGL sprite class
![Page 13: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/13.jpg)
KGL sprite example(1/2)
KFLoadText() will return the index of the texture we load
![Page 14: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/14.jpg)
KGL sprite example(2/2)
mapping the texture onto a quad
![Page 15: Using 2D Sprite with OpenGL](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814d0f550346895dba4b84/html5/thumbnails/15.jpg)
DemoDemo
Sequentially load the textures below, then it will become an animation