PC Games

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

Number Blocks
Match 3 Warriors


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
SDL 1 tutorials (outdated)

Latest Updates

SDL2 Rogue tutorial
Wed, 29th September 2021

SDL2 Gunner tutorial
Thu, 26th August 2021

SDL2 Shooter 2 tutorial
Tue, 13th July 2021

SDL2 Widget tutorial
Fri, 18th June 2021

SDL2 Adventure tutorial
Tue, 8th June 2021

All Updates »


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


« Back to tutorial listing

— 2D Top-down shooter tutorial —
Part 1: Reading the mouse


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

This first tutorial will explain how to read the mouse in SDL2. Unpack the code and then type make to build. Once compiling is finished type ./bad01 to run the code.

A 1280 x 720 window will open, with a dark grey background. A targetter will be shown that will track the mouse movements. Close the window by clicking on the window's close button.

Inspecting the code

Reading the mouse in SDL is very easy. We're going to take a look at structs.h first:

typedef struct {
	int x;
	int y;
} Mouse;

typedef struct {
	Mouse mouse;
} App;

We've created a struct to hold our mouse data, called Mouse. We're then declaring one such object in App. Quite straightforward. Next, we'll come to the actual reading of the mouse. This is a simple one line call in input.c:

void doInput(void)
	SDL_GetMouseState(&app.mouse.x, &app.mouse.y);

In our doInput function (which reads the SDL events) we make a call to SDL_GetMouseState. The function takes two parameters: references to variables that will hold and x and y coordinates of the current mouse position. We're passing over our app.mouse.x and app.mouse.y to hold the values. Note that there is no need to code in anything to open the mouse for reading, etc; this is all done by SDL_Init.

So far, so good. If we now turn our attention to stage.c (which will represent our game level when we fill everything in - same as the shooter tutorial), we see just three functions - initStage, logic, and draw. If we first consider initStage:

void initStage(void)
	app.delegate.logic = logic;
	app.delegate.draw = draw;

	targetterTexture = loadTexture("gfx/targetter.png");

We're assigned our logic and draw functions to the delegate and then loading a texture called targetter.png into a variable called targetterTexture. We'll use this for drawing the mouse pointer. Next, the logic and draw functions:

static void logic(void)


static void draw(void)
	blit(targetterTexture, app.mouse.x, app.mouse.y, 1);

There's nothing to do yet with logic, as the mouse reading is happening in input.c. Our draw function does one simple thing: blits targetterTexture at the mouse's coordinates. Compared to our shooter tutorial, our blit function now takes four parameters: the texture, the x and y coordinates, and a variable to say whether the texture should be centered (1 or 0). In this case, we want the targetter to be centered around the mouse coordinates, so we pass 1.

As we can see, stage.c is very simple. It does the job, however. We'll take a look at the updated blit function in draw.c quickly:

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

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

	if (center)
		dest.x -= dest.w / 2;
		dest.y -= dest.h / 2;

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

All that is happening here is that we're testing the center variable and shifting the texture by half its width and height if needed, to center it around the input coordinates.

Finally, we should remember to turn off the OS's native mouse cursor:

void initSDL(void)

We do this in init.c, in our initSDL function. A call to SDL_ShowCursor, sending over 0, is enough for this.

As you can see, reading the mouse in SDL is easy. We'll ramp things up a bit in the next tutorial by drawing our main character and other things. Again, this tutorial series will run a bit faster than the 2D shoot 'em up, so if you get a little confused do go back to it.


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

It is also available as part of the SDL2 tutorial bundle (with on-going updates):

If you do not wish to create an itch.io account, you can also purchase the tutorial bundle using PayPal. This method will be slower, however, as it will require manual verification of the transaction.


Share your comments and thoughts below. All comments are anonymous and cannot be edited.


Mobile site