PC Games

Orb
Lasagne Monsters
Three Guys Apocalypse
Water Closet
Blob Wars : Attrition
The Legend of Edgar
TBFTSS: The Pandoran War
Three Guys
Blob Wars : Blob and Conquer
Blob Wars : Metal Blob Solid
Project: Starfighter
TANX Squadron

Android Games

DDDDD
Number Blocks
Match 3 Warriors

Tutorials

2D shoot 'em up
2D top-down shooter
2D platform game
Sprite atlas tutorial
Working with TTF fonts
2D adventure game
Widget tutorial
2D shoot 'em up sequel
2D run and gun
Roguelike
Medals (Achievements)
2D turn-based strategy game
2D isometric game
2D map editor
2D mission-based shoot 'em up
2D Santa game
2D split screen game
SDL 1 tutorials (outdated)

Latest Updates

SDL2 Versus game tutorial
Wed, 20th March 2024

Download keys for SDL2 tutorials on itch.io
Sat, 16th March 2024

The Legend of Edgar 1.37
Mon, 1st January 2024

SDL2 Santa game tutorial 🎅
Thu, 23rd November 2023

SDL2 Shooter 3 tutorial
Wed, 15th February 2023

All Updates »

Tags

android (3)
battle-for-the-solar-system (10)
blob-wars (10)
brexit (1)
code (6)
edgar (9)
games (43)
lasagne-monsters (1)
making-of (5)
match3 (1)
numberblocksonline (1)
orb (2)
site (1)
tanx (4)
three-guys (3)
three-guys-apocalypse (3)
tutorials (17)
water-closet (4)

Books


Firmware

HF-Tech's chips have changed the world. Embedded into the heads of over 90% of the world's population, they have cured autism, dementia, provided intelligence boosts, and helped to ease some of the more mundane tasks in life. Daniel Blair, hacker and Workshop member, however is not convinced that everything is as rosy as it seems. But is he looking in all the wrong places..?

Click here to learn more and read an extract!

« Back to tutorial listing

— 2D Shoot 'Em Up Tutorial —
Part 2: Drawing the player

Introduction

Note: this tutorial builds upon the ones that came before it. If you aren't familiar with the previous tutorials in this series you should read those first.

In the first tutorial, we learned how to open a window in SDL2. We're going to take another small step, but an essential one - loading and drawing graphics. This tutorial will show you how to achieve both in SDL2. Extract the archive, run cmake CMakeLists.txt, followed by make to build. Once compiling is finished type ./shooter02 to run the code.

A 1280 x 720 window will open, coloured a light shade of blue. A spaceship sprite will also be shown, as in the screenshot above. Close the window by clicking on the window's close button.

Inspecting the code

We're going to build upon the code that we wrote in the first tutorial. If we first take a look at initSDL in init.c we'll notice that a new line has been added:


IMG_Init(IMG_INIT_PNG | IMG_INIT_JPG);

This line initializes SDL Image, to allow us to load PNGs and JPGs, to be used as textures. Next, we'll take a look at the changes in draw.c. There are two new functions available: loadTexture and blit. These two functions will load an image and display one respectively. We'll start with the loadTexture function.


SDL_Texture *loadTexture(char *filename)
{
	SDL_Texture *texture;

	SDL_LogMessage(SDL_LOG_CATEGORY_APPLICATION, SDL_LOG_PRIORITY_INFO, "Loading %s", filename);

	texture = IMG_LoadTexture(app.renderer, filename);

	return texture;
}

This function is fairly simple. It calls the SDL Image function IMG_LoadTexture to load an image and return it as a texture. We pass over two parameters: the renderer that we're using and the filename of the image we want to load. It's possible to create a texture in SDL by first creating or loading a surface and then converting it into a texture, but this function does all the work for us in one call. Next, we have the blit function.


void blit(SDL_Texture *texture, int x, int y)
{
	SDL_Rect dest;

	dest.x = x;
	dest.y = y;
	SDL_QueryTexture(texture, NULL, NULL, &dest.w, &dest.h);

	SDL_RenderCopy(app.renderer, texture, NULL, &dest);
}

The blit function simply draws the specified texture on screen at the specified x and y coordinates. The actual drawing code is performed by an SDL function called SDL_RenderCopy that takes four parameters. The first is our trusty renderer and the second is the texture we want to draw. The next two parameters are the rectangular regions of the src texture and the target renderer. We pass NULL as the src rectangle to tell SDL to copy the entire texture. The dest rectangle is the x and y coordinates where we want to draw our texture, with its width and height being the width and height of the source texture.

The reason for allowing us to specify the source and dest rectangles is because we might have a large texture (such as a sprite atlas) that we only want to copy a portion of. The dest width and height would allow us to resize the source texture at the destination if we wanted to. For now, we'll keep things 1:1.

We've added a new object to structs.h. This Entity struct is going to be used to represent the player. Right now, it just holds the x and y coordinates, and the texture that it will use.


typedef struct {
	int x;
	int y;
	SDL_Texture *texture;
} Entity;

Finally, let's turn our attention to main.c. There have been a few changes here, but again nothing major or complicated.


int main(int argc, char *argv[])
{
	memset(&app, 0, sizeof(App));
	memset(&player, 0, sizeof(Entity));

	initSDL();

	player.x = 100;
	player.y = 100;
	player.texture = loadTexture("gfx/player.png");

	atexit(cleanup);

	while (1)
	{
		prepareScene();

		doInput();

		blit(player.texture, player.x, player.y);

		presentScene();

		SDL_Delay(16);
	}

	return 0;
}

We now have an Entity declaration called player. We assign the player its x and y coordinates and also call our loadTexture function to grab the texture to use. Finally, in the while loop, we call our blit function, passing the player's texture and coordinates. We put this draw call between the prepareScene and presentScene, so that it gets drawn after the scene has been cleared but not before the scene is presented. Everything else stays the same.

Exercises

  • Place the ship in a different location on the screen.
  • Double the size of the player's ship when it's drawn (have a look at the blit function).

Purchase

The source code for all parts of this tutorial (including assets) is available for purchase:

From itch.io

It is also available as part of the SDL2 tutorial bundle:

Mobile site