GaanZa » 2d sprite

Moving 2D Sprite using Opengl with SDL

padam — Wed, 03 Jun 2009 05:04:19 +0000

Moving 2D Sprite: SO on my previous post i showed you the code to display a 2D sprite using OpenGl with SDL. Now i’ll show how to move a 2D Sprite using opengl with sdl. There will be some minor changes in the code and rest will be the same.

I’ll write the new changes in black and bold and rest are the same as in previous code on my previous post.

Here is the full code:

#include "SDL.h"

#include "SDL_image.h"

#include "SDL_opengl.h"

#include <stdio.h>

GLuint texture=NULL; //this is a handle to our texture object

GLenum texture_format=NULL;

GLint nofcolors;

SDL_Event event;

bool LEFT=false;

bool RIGHT=false;

float x=100.0,y=100.0;

int loadImage()

{

SDL_Surface *surface; // this surface will tell us the details of the image

if ( (surface = IMG_Load(“flower.png”)) ) {

// Check that the image’s width is a power of 2

if ( (surface->w & (surface->w – 1)) != 0 ) {

printf(“warning: image.bmp’s width is not a power of 2\n“);

}

// Also check if the height is a power of 2

if ( (surface->h & (surface->h – 1)) != 0 ) {

printf(“warning: image.bmp’s height is not a power of 2\n“);

}

//get number of channels in the SDL surface

nofcolors=surface->format->BytesPerPixel;

//contains an alpha channel

if(nofcolors==4)

{

if(surface->format->Rmask==0x000000ff)

texture_format=GL_RGBA;

else

texture_format=GL_BGRA;

}

else if(nofcolors==3) //no alpha channel

{

if(surface->format->Rmask==0x000000ff)

texture_format=GL_RGB;

else

texture_format=GL_BGR;

}

else

{

printf(“warning: the image is not truecolor…this will break “);

}

// Have OpenGL generate a texture object handle for us

glGenTextures( 1, &texture );

// Bind the texture object

glBindTexture( GL_TEXTURE_2D, texture );

// Set the texture’s stretching properties

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

glTexImage2D( GL_TEXTURE_2D, 0, nofcolors, surface->w, surface->h, 0,

texture_format, GL_UNSIGNED_BYTE, surface->pixels );

}

else {

printf(“SDL could not load image.bmp: %s\n“, SDL_GetError());

SDL_Quit();

return 1;

}

// Free the SDL_Surface only if it was successfully created

if ( surface ) {

SDL_FreeSurface( surface );

}

void drawImage()

{

// Clear the screen before drawing

glClear( GL_COLOR_BUFFER_BIT );

glTranslatef( x, y, 0 );

// Bind the texture to which subsequent calls refer to

glBindTexture( GL_TEXTURE_2D, texture );

glBegin( GL_QUADS );

// Top-left vertex (corner)

glTexCoord2i( 0, 0 );

glVertex3f( 100, 100, 0 );

// Bottom-left vertex (corner)

glTexCoord2i( 1, 0 );

glVertex3f( 228, 100, 0 );

// Bottom-right vertex (corner)

glTexCoord2i( 1, 1 );

glVertex3f( 228, 228, 0 );

// Top-right vertex (corner)

glTexCoord2i( 0, 1 );

glVertex3f( 100, 228, 0 );

glEnd();

glLoadIdentity();

SDL_GL_SwapBuffers();

}

int init()

{

SDL_Surface *screen;

// Slightly different SDL initialization

if ( SDL_Init(SDL_INIT_VIDEO) != 0 ) {

printf(“Unable to initialize SDL: %s\n“, SDL_GetError());

return 1;

}

SDL_GL_SetAttribute( SDL_GL_DOUBLEBUFFER, 1 );

screen = SDL_SetVideoMode( 640, 480, 16, SDL_OPENGL|SDL_FULLSCREEN);

if ( !screen ) {

printf(“Unable to set video mode: %s\n“, SDL_GetError());

return 1;

}

void init_GL()

{

// Set the OpenGL state after creating the context with SDL_SetVideoMode

glClearColor( 0, 0, 0, 0 );

glEnable( GL_TEXTURE_2D ); // Need this to display a texture

glViewport( 0, 0, 640, 480 );

glMatrixMode( GL_PROJECTION );

glLoadIdentity();

glOrtho( 0, 640, 480, 0, -1, 1 );

glMatrixMode( GL_MODELVIEW );

glLoadIdentity();

}

void clean_up()

{

glDeleteTextures( 1, &texture );

SDL_Quit();

}

int main(int argc, char *argv[])

{

//Make sure the program waits for a quit

bool quit = false;

init();

init_GL();

loadImage();

drawImage();

while( quit == false )

{

if( SDL_PollEvent( &event ) )

{

//If a key was pressed

if( event.type == SDL_KEYDOWN )

{

switch( event.key.keysym.sym )

{

case SDLK_LEFT:

LEFT=true;

break;

case SDLK_RIGHT:

RIGHT=true;

break;

case SDLK_ESCAPE:

quit=true;

break;

}

//If a key was released

else if( event.type == SDL_KEYUP )

{

switch( event.key.keysym.sym )

{

case SDLK_LEFT:

LEFT=false;

break;

case SDLK_RIGHT:

RIGHT=false;

break;

}

if(LEFT==true){

x-=2;

drawImage();

}

else if(RIGHT==true){

x+=2;

drawImage();

}

clean_up();

return 0;

}

In above code i have used two bool variable(LEFT and RIGHT) and two float variables(x and y) to store the position of sprite. In the main function inside the loop we are taking the key input from the user. So when the user press left arrow key “LEFT bool variable is assigned TRUE” and when user releases the left arrow key ” LEFT bool variable is assigned FALSE”. Same applies for pressing right arrow key. So in this code :

if(LEFT==true){

x-=2;

drawImage();

}

else if(RIGHT==true){

x+=2;

drawImage();

}

when left arrow key is pressed “LEFT bool variable becomes TRUE” and x position of sprite is incremented by 2. Then we draw the sprite again. And when left arrow key is released “LEFT bool variable becomes FALSE” which means x position of sprite should not be updated. Same concept applies for moving right.

Now we have code to update the x and y position of sprite. But how to render the sprite with updated x and y coordinates. This is done by gTranslatef(x,y,z) function. It translates the position of sprite. So we’ll be updating x and y to move the sprite, and z will be zero. So in this code:

void drawImage()

{

// Clear the screen before drawing

glClear( GL_COLOR_BUFFER_BIT );

glTranslatef( x, y, 0 );

// Bind the texture to which subsequent calls refer to

glBindTexture( GL_TEXTURE_2D, texture );

glBegin( GL_QUADS );

// Top-left vertex (corner)

glTexCoord2i( 0, 0 );

glVertex3f( 100, 100, 0 );

// Bottom-left vertex (corner)

glTexCoord2i( 1, 0 );

glVertex3f( 228, 100, 0 );

// Bottom-right vertex (corner)

glTexCoord2i( 1, 1 );

glVertex3f( 228, 228, 0 );

// Top-right vertex (corner)

glTexCoord2i( 0, 1 );

glVertex3f( 100, 228, 0 );

glEnd();

glLoadIdentity();

SDL_GL_SwapBuffers();

}

when we update the position of x and y then we call the above function where we have included new code glTranslatef(x,y,z) which will make the sprite to be drawn in given x.y and z location.

So thats it. I hope this will give u some pretty basic idea. Now you can write your own code for moving 2d Sprite.

Gracias.

Drawing 2D Sprite Using OpenGl with SDL

padam — Wed, 03 Jun 2009 03:33:48 +0000

In many forums, i have seen people asking about making 2D games using OpenGl and there weren’t any satisfactory answers. So i searched the google on doing 2D graphics using Opengl. Surprisingly there were not many results on that, there were very very few info on doing 2D graphics using OpenGl.

So i did some research on this and came up with this code. I hope this will be of some use to those who wants to get started making 2D games using OpenGl. I don’t claim that this code is efficient way to do it. I am still learning OpenGl. But this code will give you a base to start off.

Here i’ll be using SDL with OpenGL. I’l be using SDL for creating the window, taking input, and loading texture data. And I’ll be using SDL_image extension library to load images(BMP, PNM, XPM, LBM, PCX, GIF, JPEG, TGA and PNG files.). Lastly, Opengl wiil be used for rendering the graphics.

If you don’t know how to set up libraries then here is the guide to set up SDL, guide to setup SDL_image extension library and guide to set up OpenGl.

This code has been tested on windows using visual studio 2005.

So lets start:

#include "SDL.h"
#include "SDL_image.h"
#include "SDL_opengl.h"

#include <stdio.h>

First we will include the necessary header files.

GLuint texture=NULL; //this is a handle to our texture object
GLenum texture_format=NULL;
GLint nofcolors;

SDL_Event event;

texture is the handle to our texture object. texture_format will store the information about the image loaded. A SDL_Event structure stores event data for us to handle.

int loadImage()
{
SDL_Surface *surface; // this surface will tell us the details of the image

if ( (surface = IMG_Load(“flower.png”)) ) {

// Check that the image’s width is a power of 2
if ( (surface->w & (surface->w – 1)) != 0 ) {
printf(“warning: image.bmp’s width is not a power of 2\n“);
}

// Also check if the height is a power of 2
if ( (surface->h & (surface->h – 1)) != 0 ) {
printf(“warning: image.bmp’s height is not a power of 2\n“);
}

//get number of channels in the SDL surface
nofcolors=surface->format->BytesPerPixel;

//contains an alpha channel
if(nofcolors==4)
{
if(surface->format->Rmask==0x000000ff)
texture_format=GL_RGBA;
else
texture_format=GL_BGRA;
}
else if(nofcolors==3) //no alpha channel
{
if(surface->format->Rmask==0x000000ff)
texture_format=GL_RGB;
else
texture_format=GL_BGR;
}
else
{
printf(“warning: the image is not truecolor…this will break “);
}

// Have OpenGL generate a texture object handle for us
glGenTextures( 1, &texture );

// Bind the texture object
glBindTexture( GL_TEXTURE_2D, texture );

// Set the texture’s stretching properties
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

glTexImage2D( GL_TEXTURE_2D, 0, nofcolors, surface->w, surface->h, 0,
texture_format, GL_UNSIGNED_BYTE, surface->pixels );
}
else {
printf(“SDL could not load image.bmp: %s\n“, SDL_GetError());
SDL_Quit();
return 1;
}

// Free the SDL_Surface only if it was successfully created
if ( surface ) {
SDL_FreeSurface( surface );
}
}

This is the loadImage() function to load the image. First we’ll use Img_Load() function to load an image. Then we’ll check whether the height and width of an image is power of 2. If its not a power of 2 then program will terminate. Then we’ll check the information of image i.e if image contains alpha channel or not. So according to that we’ll use our texture_format. Lastly we’l map the image to the texture object. glBindTexture(GL_TEXTURE_2D, &texture) tells OpenGL to bind the named texture texture to a texture target. The main function of glBindTexture is to assign a texture name to texture data. In this case we’re telling OpenGL there is memory available at &texture. When we create the texture, it will be stored in the memory that &texture references.

void drawImage()
{

// Clear the screen before drawing
glClear( GL_COLOR_BUFFER_BIT );

// Bind the texture to which subsequent calls refer to
glBindTexture( GL_TEXTURE_2D, texture );

glBegin( GL_QUADS );
// Top-left vertex (corner)
glTexCoord2i( 0, 0 );
glVertex3f( 100, 100, 0 );

// Bottom-left vertex (corner)
glTexCoord2i( 1, 0 );
glVertex3f( 228, 100, 0 );

// Bottom-right vertex (corner)
glTexCoord2i( 1, 1 );
glVertex3f( 228, 228, 0 );

// Top-right vertex (corner)
glTexCoord2i( 0, 1 );
glVertex3f( 100, 228, 0 );
glEnd();
glLoadIdentity();
SDL_GL_SwapBuffers();
}

This is the drawImage() function. As name suggest this will render our 2D sprite. There is nothing to explain here. We are creating a quad and mapping our texture to the quad and rendering that quad.

To properly map a texture onto a quad, you have to make sure the top right of the texture is mapped to the top right of the quad. The top left of the texture is mapped to the top left of the quad, the bottom right of the texture is mapped to the bottom right of the quad, and finally, the bottom left of the texture is mapped to the bottom left of the quad. If the corners of the texture do not match the same corners of the quad, the image may appear upside down, sideways, or not at all.

The first value of glTexCoord2i is the X coordinate. 0 is the left side of the texture and 1 is the right side of the texture. The second value of glTexCoord2f is the Y coordinate 0 is the bottom of the texture and 1 is the top of the texture.

int init()
{
SDL_Surface *screen;

// Slightly different SDL initialization
if ( SDL_Init(SDL_INIT_VIDEO) != 0 ) {
printf(“Unable to initialize SDL: %s\n“, SDL_GetError());
return 1;
}

SDL_GL_SetAttribute( SDL_GL_DOUBLEBUFFER, 1 );

screen = SDL_SetVideoMode( 640, 480, 16, SDL_OPENGL);
if ( !screen ) {
printf(“Unable to set video mode: %s\n“, SDL_GetError());
return 1;
}
}

This is a init() function to set up the window.We create our OpenGL window. When we want to use OpenGL we pass the SDL_OPENGL flag to SDL_SetVideoMode() instead of SDL_SWSURFACE. Now the window will use OpenGL’s hardware accelerated rendering instead of SDL’s software rendering.

void init_GL()
{
// Set the OpenGL state after creating the context with SDL_SetVideoMode

glClearColor( 0, 0, 0, 0 );

glEnable( GL_TEXTURE_2D ); // Need this to display a texture

glViewport( 0, 0, 640, 480 );

glMatrixMode( GL_PROJECTION );
glLoadIdentity();

glOrtho( 0, 640, 480, 0, -1, 1 );

glMatrixMode( GL_MODELVIEW );
glLoadIdentity();
}

This function will set up out Opengl world. The first thing we do is set the clear color.When we clear the screen, we want it to be black. So we set the clear color to be black (R, G, B, A) with glClearColor(). Then we set the matrix mode to projection using glMatrixMode(). Then we intialize the projection matrix by calling glLoadIdentity(). glLoadIdentity() essentially resets the matrix by setting it to be the identity matrix.We are using Orthographic projection for projecting two-dimensional image onto a two-dimensional screen. Above code glOrtho( 0, 640, 480, 0, -1, 1 ); will create two-dimensional screen with top left(0,0) and bottom right(640,480).

void clean_up()
{
glDeleteTextures( 1, &texture );

SDL_Quit();
}

The above function will clean up the resource and then terminate the window.

int main(int argc, char *argv[])
{
//Make sure the program waits for a quit
bool quit = false;

init();
init_GL();
loadImage();
drawImage();

while( quit == false )
{
if( SDL_PollEvent( &event ) )
{
//If a key was pressed
if( event.type == SDL_KEYDOWN )
{
//Adjust the velocity
switch( event.key.keysym.sym )
{
case SDLK_ESCAPE:
quit=true;
break;
}
}

}
}

clean_up();
return 0;
}

This is the main function. We’ll be calling all the function i.e setting up window and OpenGl; loading Sprite and rendering it.

So thats it. Now your are off.

displaying 2D sprite(PNG) using OpenGl with SDL

You can save this image(flower.png) for testing.

So here is the full code:

#include "SDL.h"
#include "SDL_image.h"
#include "SDL_opengl.h"

#include <stdio.h>

GLuint texture=NULL; //this is a handle to our texture object
GLenum texture_format=NULL;
GLint nofcolors;

SDL_Event event;

int loadImage()
{
SDL_Surface *surface; // this surface will tell us the details of the image

if ( (surface = IMG_Load(“flower.png”)) ) {

// Check that the image’s width is a power of 2
if ( (surface->w & (surface->w – 1)) != 0 ) {
printf(“warning: image.bmp’s width is not a power of 2\n“);
}

// Also check if the height is a power of 2
if ( (surface->h & (surface->h – 1)) != 0 ) {
printf(“warning: image.bmp’s height is not a power of 2\n“);
}

//get number of channels in the SDL surface
nofcolors=surface->format->BytesPerPixel;

// Have OpenGL generate a texture object handle for us
glGenTextures( 1, &texture );

// Bind the texture object
glBindTexture( GL_TEXTURE_2D, texture );

// Set the texture’s stretching properties
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

// Free the SDL_Surface only if it was successfully created
if ( surface ) {
SDL_FreeSurface( surface );
}
}

void drawImage()
{

// Clear the screen before drawing
glClear( GL_COLOR_BUFFER_BIT );

// Bind the texture to which subsequent calls refer to
glBindTexture( GL_TEXTURE_2D, texture );

glBegin( GL_QUADS );
// Top-left vertex (corner)
glTexCoord2i( 0, 0 );
glVertex3f( 100, 100, 0 );

// Bottom-left vertex (corner)
glTexCoord2i( 1, 0 );
glVertex3f( 228, 100, 0 );

// Bottom-right vertex (corner)
glTexCoord2i( 1, 1 );
glVertex3f( 228, 228, 0 );

// Top-right vertex (corner)
glTexCoord2i( 0, 1 );
glVertex3f( 100, 228, 0 );
glEnd();
glLoadIdentity();
SDL_GL_SwapBuffers();
}

int init()
{
SDL_Surface *screen;

// Slightly different SDL initialization
if ( SDL_Init(SDL_INIT_VIDEO) != 0 ) {
printf(“Unable to initialize SDL: %s\n“, SDL_GetError());
return 1;
}

SDL_GL_SetAttribute( SDL_GL_DOUBLEBUFFER, 1 );

screen = SDL_SetVideoMode( 640, 480, 16, SDL_OPENGL);
if ( !screen ) {
printf(“Unable to set video mode: %s\n“, SDL_GetError());
return 1;
}
}

void init_GL()
{
// Set the OpenGL state after creating the context with SDL_SetVideoMode

glClearColor( 0, 0, 0, 0 );

glEnable( GL_TEXTURE_2D ); // Need this to display a texture

glViewport( 0, 0, 640, 480 );

glMatrixMode( GL_PROJECTION );
glLoadIdentity();

glOrtho( 0, 640, 480, 0, -1, 1 );

glMatrixMode( GL_MODELVIEW );
glLoadIdentity();
}

void clean_up()
{
glDeleteTextures( 1, &texture );

SDL_Quit();
}

int main(int argc, char *argv[])
{
//Make sure the program waits for a quit
bool quit = false;

init();
init_GL();
loadImage();
drawImage();

}
}

clean_up();
return 0;
}

So i hope this will give u a base to start off. On the next post i’l tell you how to move the 2d Sprite in the screen. I’ll show u how to handle the key events in my next post.

Gracias.