Handling Mouse Scrolling

Implement Inertia Scrolling in SDL

Can I implement inertia scrolling like on smartphones using SDL?

Abstract art representing computer programming

Inertia scrolling, commonly found on smartphones, provides a smooth and natural scrolling experience by continuing the scroll motion after the user stops scrolling. Implementing this in SDL requires additional logic to simulate the deceleration of the scroll.

Here’s how you can implement inertia scrolling in SDL:

Simulate inertia: In the event loop, increase the scroll velocity based on the mouse wheel input. Use a factor to simulate inertia by gradually decreasing the velocity over time. This creates a deceleration effect.

Update scroll position: Continuously update the scroll position based on the current velocity. This allows the scroll motion to continue smoothly even after the user stops scrolling.

Rendering: Render the content based on the current scroll position. In this example, a rectangle is rendered at the updated position to demonstrate the scrolling effect. Modify the inertia and coefficient constants to control the strength of the effect:

#include <SDL.h>
#include <iostream>
#include <chrono>

const float inertia = 0.999f;
const float coefficient = 100.0f;

float scrollPosition = 0.0f;
float scrollVelocity = 0.0f;

void HandleMouseWheel(SDL_MouseWheelEvent& wheel) {
  scrollVelocity += wheel.y * coefficient; 
}

int main(int argc, char* argv[]) {
  using namespace std::chrono;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window = SDL_CreateWindow(
    "Inertia Scrolling Example", 
    SDL_WINDOWPOS_UNDEFINED, 
    SDL_WINDOWPOS_UNDEFINED, 
    800, 600, 
    SDL_WINDOW_SHOWN
  );
  SDL_Renderer* renderer =
    SDL_CreateRenderer(window, -1, 0);

  SDL_Event event;
  bool running = true;
  auto lastTime = high_resolution_clock::now();

  while (running) {
    auto currentTime = high_resolution_clock::now();
    duration<float> deltaTime =
      currentTime - lastTime;
    lastTime = currentTime;

    while (SDL_PollEvent(&event)) {
      if (event.type == SDL_MOUSEWHEEL) {
        HandleMouseWheel(event.wheel);
      }
      if (event.type == SDL_QUIT) {
        running = false;
      }
    }

    scrollPosition += (
      scrollVelocity * deltaTime.count());
    scrollVelocity *= inertia;

    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(
      renderer, 255, 255, 255, 255);

    SDL_Rect rect = {
      375,
      static_cast<int>(scrollPosition),
      50,
      50
    };

    SDL_RenderFillRect(renderer, &rect);

    SDL_RenderPresent(renderer);
  }

  SDL_DestroyRenderer(renderer);
  SDL_DestroyWindow(window);
  SDL_Quit();
  return 0;
}
This Question is from the Lesson:

Handling Mouse Scrolling

Learn how to detect and handle mouse scroll wheel events in SDL2, including vertical and horizontal scrolling, as well as scroll wheel button events.

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

This Question is from the Lesson:

Handling Mouse Scrolling

Learn how to detect and handle mouse scroll wheel events in SDL2, including vertical and horizontal scrolling, as well as scroll wheel button events.

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:

  • 47 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 © 2024 - All Rights Reserved