Skip to content
SplashKit
Announcements

Getting Started with SDL2 Graphics

This brief guide provides code to show simple graphics functionality without SplashKit such as how to open a window, keep a window open, draw a rectangle and display a bitmap. These are then combined to create a simple "eye dropper" program to compare with and without SplashKit.
Written by: Simon Rhook and Olivia McKeon
Last updated: December 2024

Getting Started without SplashKit

Section titled “Getting Started without SplashKit”

Installing SDL2 and SDL2_image

Section titled “Installing SDL2 and SDL2_image”

If you have not already installed SplashKit, you will need to install SDL2 and SDL2_image to be able to compile the code shown in this guide.

You can use the following command, which is usually run during the SplashKit installation, which will ensure you have installed the required libraries/dependencies.

Terminal window
pacman -S --needed --disable-download-timeout mingw-w64-x86_64-clang mingw-w64-x86_64-gcc mingw-w64-x86_64-gdb mingw-w64-x86_64-cmake mingw-w64-x86_64-SDL2 mingw-w64-x86_64-SDL2_gfx mingw-w64-x86_64-SDL2_mixer mingw-w64-x86_64-SDL2_image mingw-w64-x86_64-SDL2_ttf mingw-w64-x86_64-SDL2_net mingw-w64-x86_64-civetweb

Compiling Your Code

Section titled “Compiling Your Code”

With C++ programs, you will need to adjust the compiling command to link to any libraries being used. Below you will see the different commands to compile with and without SplashKit.

Now, assuming the code filename is program.cpp.

As usual, you will compile the SplashKit C++ code using the following command:

Terminal window
g++ program.cpp -o test -l SplashKit

SDL2 Versions of SplashKit Functions

Section titled “SDL2 Versions of SplashKit Functions”

The following sections show how to create the same functionality given in SplashKit, but without using SplashKit. These code examples are using SDL2 which is actually one of SplashKit’s dependencies, and are quite similar to what is happening behind the scenes when using SplashKit functions.

Open Window

Section titled “Open Window”

The following code shows how to open a Window with and without SplashKit:

#include "splashkit.h"


int main(int argv, char **args)
{
    // Create Window
    window win = open_window("SK Window: OpenWindow", 800, 600);


    // Hold window 4 seconds
    delay(4000);


    // Cleanup and free memory
    close_all_windows();


    return 0;
}

Quit Requested

Section titled “Quit Requested”

The following code shows how to open a Window and hold the window open until the user quits, with and without SplashKit:

#include "splashkit.h"


int main(int argv, char **args)
{
    open_window("SK Window: QuitRequested", 600, 600);


    // Hang window until quit
    while (!quit_requested())
    {
        process_events();
    }


    // Cleanup and free memory
    close_all_windows();


    return 0;
}

Draw Rectangle

Section titled “Draw Rectangle”

The following code shows how to draw a rectangle to the screen (Window), with and without SplashKit:

#include "splashkit.h"


int main(int argv, char **args)
{
    // Create window
    open_window("SK Window: DrawRectangle", 600, 600);


    // Define a rectangle
    rectangle rect = rectangle_from(100.0, 100.0, 400.0, 300.0);


    // Clear screen with a black color
    clear_screen(COLOR_BLACK);


    // Draw & fill blue rectangle
    fill_rectangle(COLOR_BLUE, rect);


    // Display drawing
    refresh_screen();


    // Hold window until quit requested
    while (!quit_requested())
    {
        process_events();
    }


    // Cleanup and free memory
    close_all_windows();


    return 0;
}

Draw Bitmap

Section titled “Draw Bitmap”

The following code shows how to display a bitmap image on the screen (Window), with and without SplashKit:

#include "splashkit.h"


int main(int argv, char **args)
{
    // Create window
    open_window("SK Window: DrawBitmap", 800, 600);


    // Load image
    bitmap image = load_bitmap("photo", "photo.jpg");


    // Hold window until quit requested
    while (!quit_requested())
    {
        process_events();


        // Clear screen with black
        clear_screen(COLOR_BLACK);


        // Draw image to screen
        draw_bitmap("photo", 75, 125);


        // Display drawing
        refresh_screen();
    }


    // Cleanup and free memory
    close_all_windows();
    free_all_bitmaps();


    return 0;
}

Combining Functionality

Section titled “Combining Functionality”

You can then combine the elements above into a small program such as the eyedropper (colour picker) program shown below.

Eyedropper Program

Section titled “Eyedropper Program”

This program combines the above into a small program that will change the screen (Window) colour based on the colour of the image at the point where you click on it:

#include "splashkit.h"


int main(int argv, char **args)
{
    // Print instructions in terminal
    write_line("\nClick anywhere on the image to change the background colour\n");


    // Declare Variables
    color eye_select = COLOR_BLACK;


    // Open Window
    open_window("SK Window: Eyedropper", 800, 600);


    // Load bitmaps
    load_bitmap("image", "photo.jpg");
    load_bitmap("eyedrop", "eyedrop.png");


    while (!quit_requested())
    {
        process_events();


        // Clear screen with mouse color
        clear_screen(eye_select);


        // Draw image
        draw_bitmap("image", 75, 125);


        // Draw eyedropper as curser
        draw_bitmap("eyedrop", mouse_x() - 3, mouse_y() - bitmap_height("eyedrop") + 3);
        hide_mouse();


        // Set color at cursor when click
        if (mouse_clicked(LEFT_BUTTON))
            eye_select = get_pixel(mouse_x(), mouse_y());


        // Display drawing
        refresh_screen();
    }


    // Cleanup and free memory
    close_all_windows();
    free_all_sound_effects();
    free_all_music();


    return 0;
}