Customising Mouse Cursors

Animating Custom Cursors

Can I animate my custom cursor by loading multiple images? How would I implement a cursor that changes appearance?

Abstract art representing computer programming

Creating an animated cursor requires managing multiple frames and handling animation timing. Here's a complete implementation:

#include <SDL.h>
#include <SDL_image.h>
#include <vector>
#include <string>

class AnimatedCursor {
public:
  AnimatedCursor(
    const std::vector<std::string>& imagePaths,
    int frameDelay
  ) : FrameDelay{frameDelay} {
    // Load all animation frames
    for (const auto& path : imagePaths) {
      SDL_Surface* surface{IMG_Load(path.c_str())};
      if (!surface) {
        continue;
      }

      SDL_Cursor* cursor{SDL_CreateColorCursor(
        surface, 0, 0)};
      SDL_FreeSurface(surface);

      if (cursor) {
        Frames.push_back(cursor);
      }
    }

    LastUpdate = SDL_GetTicks();
  }

  ~AnimatedCursor() {
    for (auto cursor : Frames) {
      SDL_FreeCursor(cursor);
    }
  }

  void Update() {
    if (Frames.empty()) {
      return;
    }

    Uint32 now{SDL_GetTicks()};
    if (now - LastUpdate >= FrameDelay) {
      CurrentFrame = (CurrentFrame + 1) % Frames.size();
      SDL_SetCursor(Frames[CurrentFrame]);
      LastUpdate = now;
    }
  }

private:
  std::vector<SDL_Cursor*> Frames;
  size_t CurrentFrame{0};
  Uint32 LastUpdate;
  const int FrameDelay;
};

Here's how to use it:

int main() {
  SDL_Init(SDL_INIT_VIDEO);

  // Create animated cursor with frame images
  std::vector<std::string> frames{
    "cursor_frame1.png",
    "cursor_frame2.png",
    "cursor_frame3.png",
    "cursor_frame4.png"
  };

  AnimatedCursor cursor{frames, 100};// 100ms per frame

  // Game loop
  bool running{true};
  while (running) {
    SDL_Event event;
    while (SDL_PollEvent(&event)) {
      if (event.type == SDL_QUIT) {
        running = false;
      }
    }

    cursor.Update();

    // Rest of game loop...
  }

  SDL_Quit();
  return 0;
}

This implementation provides a smooth animation by switching between cursor frames at regular intervals. The FrameDelay value controls animation speed - lower values create faster animations.

For better performance, consider using SDL's texture system for cursor animation if you're using the bespoke rendering approach from the lesson rather than SDL_CreateColorCursor().

Answers to questions are automatically generated and may not have been reviewed.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 79 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2025 - All Rights Reserved