Setting up SDL_image 3.1.1 in Visual Studio 2022 using CMake

• Install SDL 3.1.10 using this guide: How to install SDL 3.1.10 using CMake and Visual Studio 2022 for Desktop
• Install SDL_image 3.1.1 using this guide: How to install SDL_image 3.1.1 using CMake and Visual Studio 2022 for Desktop
• Run Visual Studio
• Click on the "Create a new project" button:

• Click on the "CMake Project" and click on the "Next" button:

• Type a project name, set a project location, check the "Place solution and project in the same directory" checkbox, and click on the "Create" button:

• Wait a few seconds for configuration
• Run the project by click on the empty green triangle (or Ctrl+F5):

• The program prints "Hello CMake" to the console:

• Double click on the "CMakePresets.json" file:

• Add the "SDL3_DIR" and "SDL3_images_DIR" variables with the following "value" and "type" for "Debug":

        {
            "name": "x64-debug",
            "displayName": "x64 Debug",
            "inherits": "windows-base",
            "architecture": {
                "value": "x64",
                "strategy": "external"
            },
            "cacheVariables": {
                "CMAKE_BUILD_TYPE": "Debug",
                "SDL3_DIR": {
                    "value": "E:/libs/sdl-3.1.10-msvc/win/debug/cmake",
                    "type": "PATH"
                },
                "SDL3_image_DIR": {
                    "value": "E:/libs/sdl3_image-3.1.1-msvc/win/debug/cmake",
                    "type": "PATH"
                }
            }
        },

• Make the same for "Release":

        {
            "name": "x64-release",
            "displayName": "x64 Release",
            "inherits": "x64-debug",
            "cacheVariables": {
                "CMAKE_BUILD_TYPE": "Release",
                "SDL3_DIR": {
                    "value": "E:/libs/sdl-3.1.10-msvc/win/release/cmake",
                    "type": "PATH"
                },
                "SDL3_image_DIR": {
                    "value": "E:/libs/sdl3_image-3.1.1-msvc/win/release/cmake",
                    "type": "PATH"
                }
            }
        },

• Double click on the "CMakeLists.txt" file:

• Add this code to the "CMakeLists.txt" file:

find_package(SDL3)
find_package(SDL3_image)
target_link_libraries(hello-sdl3-image PRIVATE SDL3_image::SDL3_image SDL3::SDL3)

# Copy the assets folder to the dist folder
add_custom_command(TARGET hello-sdl3-image POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy_directory
    ${CMAKE_SOURCE_DIR}/assets $<TARGET_FILE_DIR:hello-sdl3-image>/assets)

• Replace the "hello-sdl3-image.cpp" file content with this one:

#define SDL_MAIN_USE_CALLBACKS 1 // Use the callbacks instead of main()
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
#include <SDL3_image/SDL_image.h>

// We will use this renderer to draw into this window every frame
static SDL_Window* window = NULL;
static SDL_Renderer* renderer = NULL;
static SDL_Texture* texture = NULL;

int frameIndex = 0;
uint32_t lastTickTime = 0;
float animationTime = 0.f;
const float animationPeriod = 0.1f;

// Define animation frames (adjust dimensions and positions as needed)
SDL_FRect frames[4] = {
    { 0, 0, 128, 128 }, // Frame 1
    { 128, 0, 128, 128 }, // Frame 2
    { 0, 128, 128, 128 }, // Frame 3
    { 128, 128, 128, 128 }  // Frame 4
};

// This function runs once at startup
SDL_AppResult SDL_AppInit(void** appstate, int argc, char* argv[])
{
    if (!SDL_Init(SDL_INIT_VIDEO)) {
        SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }

    if (!SDL_CreateWindowAndRenderer("Sprite animation using SDL3 and C++",
        350, 350, 0, &window, &renderer)) //
    {
        SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }

    SDL_SetRenderVSync(renderer, 1);

    const char* texturePath = "./assets/sprites/spritesheet.png";
    texture = IMG_LoadTexture(renderer, texturePath);
    if (!texture) {
        SDL_Log("Couldn't load %s: %s\n", texturePath, SDL_GetError());
        return SDL_APP_FAILURE;
    }

    return SDL_APP_CONTINUE; // Carry on with the program!
}

// This function runs when a new event (mouse input, keypresses, etc) occurs
SDL_AppResult SDL_AppEvent(void* appstate, SDL_Event* event)
{
    if (event->type == SDL_EVENT_QUIT) {
        return SDL_APP_SUCCESS; // End the program, reporting success to the OS
    }
    return SDL_APP_CONTINUE; // Carry on with the program!
}

// This function runs once per frame, and is the heart of the program
SDL_AppResult SDL_AppIterate(void* appstate)
{
    SDL_SetRenderDrawColor(renderer, 50, 50, 50, SDL_ALPHA_OPAQUE); // Canvas color
    SDL_RenderClear(renderer); // Clear the canvas and fill it with the canvas color

    // Update and render animation
    SDL_FRect srcRect = frames[frameIndex];
    SDL_FRect destRect = { 0, 0, 128, 128 }; // Adjust x, y for positioning

    // Render the current frame
    SDL_RenderTexture(renderer, texture, &srcRect, &destRect);

    SDL_RenderPresent(renderer);

    // Calculate dt
    uint32_t currentTickTime = SDL_GetTicks();
    float deltaTime = (currentTickTime - lastTickTime) / 1000.f;
    lastTickTime = currentTickTime;

    // Animation time
    animationTime += deltaTime;

    // Increment frame index and loop back to 0 when necessary
    if (animationTime > animationPeriod) {
        frameIndex = (frameIndex + 1) % 4;
        animationTime = 0.f;
    }

    return SDL_APP_CONTINUE; // Carry on with the program!
}

// This function runs once at shutdown
void SDL_AppQuit(void* appstate, SDL_AppResult result)
{
    // SDL will clean up the window/renderer for us
}

• Download this sprite sheet and place it to the "assets/sprites" folder
• Note. You can download this sprite sheet here: https://www.codeandweb.com/tp-online
• Press Ctrl+F5 to run the application
• You see a sprite animation