Programming Fundamentals

Welcome to our SplashKit activity page! Designed to ignite your creativity, these walkthroughs will guide you into the world of Graphical User Interfaces (GUIs) with ease.

With SplashKit, a toolkit tailored for beginners, you'll find GUI development both accessible and enjoyable. It simplifies the process of creating windows, drawing graphics, and managing user input, allowing you to focus on bringing your ideas to life.

Through the activities on this page, you'll gain hands-on experience with SplashKit, mastering the basics while building confidence in your programming skills.

Dive in, explore, and let your imagination guide you as you discover the exciting possibilities of GUI programming!

SplashKit.io (2017) Let’s Build A Game In One Minute - SplashKit.

Activity 1: Getting Started
Activity 2: Windows

Are you ready to bring your C programs to life with colour, graphics, and interactivity?

This activity is the first in a series that will take your programs beyond printf() and the terminal.

SplashKit

Graphical User Interfaces (GUIs) allow programs to display graphics, text, buttons, and other dynamic elements in dedicated application windows.

SplashKit is a beginner-friendly toolkit that simplifies GUI development, making it easy to write programs that create windows, draw graphics, and handle user input with minimal setup.

Getting Started

Let's get everything set up so you can start coding with SplashKit:

Create a Project Directory.
Install SplashKit.
Compile an Example File.
Run the Example Program.
Set up the VS Code Project.

1. Create a Project Directory

As you progress through these activities, you will be working with many files. Creating a folder for each activity is essential and will help to keep your files organised.

First, create a new directory to store all of your SplashKit projects and cd into it.

mkdir splashkit
cd splashkit

Similarly, create another new directory for your first project and cd into it.

mkdir getting_started
cd getting_started

2. Install SplashKit

From your getting_started directory, install SplashKit to your CSE account using:

1511 setup-splashkit splashkit_getting_started

SplashKit should now be installed.

Use the ls command to confirm that splashkit_examples.c has been copied to your getting_started directory.

3. Compile an Example File

Until now, we’ve used dcc to compile C code.

SplashKit projects require a different compiler called skm clang++.

Compile the splashkit_examples.c file using:

skm clang++ splashkit_example.c -o splashkit_example

If SplashKit was installed correctly, you will see this message:

🎉  clang++ command run successfully 🎉

Use the ls command to confirm that a file named splashkit_example exists in your getting_started directory

Compiler Warnings

When compiling your SplashKit code, you may have noticed a C++ warning:

skm clang++ splashkit_example.c -o splashkit_example
clang: warning: treating 'c' input as 'c++' when in C++ mode, this behavior is deprecated [-Wdeprecated]
🎉  clang++ command run successfully 🎉

You can safely ignore this error.

(Optional): If the compiler warning bothers you, click here for a solution.

The warning can be eliminated by adding the -x c++ flags to the compilation command.

For example:

skm clang++ -x c++ splashkit_example.c -o splashkit_example
🎉  clang++ command run successfully 🎉

4. Run the Example Program

We run SplashKit programs the same way that we run our C programs.

Run the example program with the following command.

./splashkit_example

A window opens, displaying "Hello, SplashKit!", then closes after 5 seconds.

Audio Errors

Running the example may display "ALSA" messages in the terminal:

./splashkit_example
ALSA lib confmisc.c:855:(parse_card) cannot find card '0'
ALSA lib conf.c:5180:(_snd_config_evaluate) function snd_func_card_inum returned error: No such file or directory
...

These messages are harmless and can be ignored.

(Optional) If the ALSA messages bother you, click here for a solution.

These messages can be eliminated by disabling audio output with export SDL_AUDIODRIVER=dummy before running your program.

For example:

export SDL_AUDIODRIVER=dummy
./splashkit_example

5. Set Up the VS Code Project

Use pwd to ensure that you're in the getting_started directory, then open it with code ..

VS Code lists your project files on the left (press Ctrl+B if it's missing).

Click on splashkit_example.c to open it:

VS Code highlighting errors in splashkit_example.c

Notice anything strange? VS Code is highlighting errors on nearly every line!

This is because VS Code doesn't know about SplashKit.

Close VS Code and run the following command from inside your project directory:

1511 setup-splashkit-directory

Reopen the project with code . and the errors should be gone!

You will need to run 1511 setup-splashkit-directory for every new SplashKit project you start.

This is separate from installing SplashKit to your CSE account, which only needs to be done once.

You will learn more about how the example code works in the upcoming SplashKit activities. For now, note the line #include <splashkit.h> at the top of the file. This is similar to #include <stdio> and it allows us to use the SplashKit toolkit in our code.

SplashKit Summary

We've covered a lot of material to get started. Here's what to remember:

SplashKit is installed once with 1511 setup-splashkit splashkit_getting_started.
Create a separate directory for each SplashKit project.
Set up each SplashKit directory with 1511 setup-splashkit-directory.
SplashKit projects are opened with code ..
Compile SplashKit code with skm clang++ instead of dcc.
Run SplashKit programs normally e.g. ./program_name.

In this activity, you will learn how to manage windows with SplashKit.

A window is a rectangular area on the screen where graphical programs display visual elements and interact with the user. Windows are everywhere. If you're viewing this in a browser (such as Firefox, Chrome, or Safari) then the browser is open in a window. Familiar applications such as VS Code, the terminal, and file managers (Finder on macOS, File Explorer on Windows) all open in their own windows.

Setting Up

Step 1. Navigate to your SplashKit directory (the one created during SplashKit #1 - Getting Started).

cd splashkit

Step 2. Create a new directory for this activity and cd into it.

mkdir windows
cd windows

Step 3. Set up the windows directory.

1511 setup-splashkit-directory

Step 4.

Download splashkit_master.c here

Or, copy these file(s) to your CSE account using the following command:

1511 fetch-activity splashkit_master

Step 5. Open the SplashKit project directory in VS Code.

code .

When working with SplashKit, avoid opening individual files in VS Code:

❌ code splashkit_windows.c

Instead, always open the whole project directory:

✅ code .

This ensures VS Code recognises SplashKit correctly and avoids showing false error messages.

SplashKit Windows

SplashKit includes a windows library that allows programs to open and close windows. Opening a window gives your program a dedicated space to display graphics and receive user input, while closing it is crucial for freeing up resources and providing a clear way for users to exit.

To use SplashKit's libraries add #include <splashkit.h> near the top of a .c file. Once you do this, you have a starting point for all of your SplashKit programs:

#include <splashkit.h>

int main(void) {
    // we will be adding more code here

    return 0;
}

Opening Windows

SplashKit's open_window() function creates a new window and displays it on the screen.

window open_window(string caption, int width, int height);

The following statement opens a window titled "My Window" with a width and height of 800 and 600 pixels respectively.

open_window("My Window", 800, 600);

Delay/Wait

Imagine you want to show a quick welcome message or instructions on the screen, but you don't want the program to instantly jump to the next step. By pausing for a couple of seconds you give the user time to understand what's being shown before continuing.

SplashKit provides a delay() function. Calling this will pause our program for a specified amount of time.

void delay(int milliseconds);

For example:

delay(7000);

This pauses program execution for 7 seconds (7000 milliseconds) before continuing.

Closing Windows

When you're finished with the window, you can close it with close_all_windows().

void close_all_windows(void);

We call this function with no arguments:

close_all_windows();

Putting It All Together

Combining these operations yields a short program:

#include <splashkit.h>

int main(void) {
    open_window("My Window", 800, 600);
    delay(7000);
    close_all_windows();

    return 0;
}

This program:

Opens a window titled "My Window" width and height of 800 and 600 pixels respectively.
Pauses program execution for 7 seconds, keeping the window open.
Closes the window before exiting.

Code Demo

Demo Code: Windows

#include <splashkit.h>

#define WIDTH 400
#define HEIGHT 240
#define DELAY_DURATION 4000

int main(void) {
    // window open_window(string caption, int width, int height);
    // Open a window of width 640 pixels and height 480 pixels
    open_window("My First Window", 640, 480);

    // void delay(int milliseconds);
    // Wait two seconds (2000 milliseconds)
    delay(2000);

    // void close_all_windows(void);
    // Close the window
    close_all_windows();

    // Open a second window, this time using #defined constants
    open_window("My Second Window", WIDTH, HEIGHT);
    delay(DELAY_DURATION);
    close_all_windows();

    // Open a third window, this time using variables as arguments
    int width = 960;
    int height = 360;
    int duration = 3000;
    open_window("My Third Window", width, height);
    delay(duration);
    close_all_windows();

    return 0;
}

Activity

Now you have a chance to practice what you've learned!

Create a program splashkit_windows.c. It should:

Prompt the user for a width.
Prompt the user for a height.
Prompt the user for a duration.
Open a window of the given size.
Wait for the specified duration, keeping the window open.
Close the window.

Remember to compile with skm clang++ instead of dcc.

Examples

Example 1: Opening a 400×300 Window for 5 Seconds

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a window width (pixels): 400
Enter a window height (pixels): 300
Enter a duration (seconds): 5

After the user enters these values, a window should appear as shown below and automatically close after 5 seconds.

Screenshot of a SplashKit window (width=400px, height=300px)

Example 2: Opening a 600×200 Window for 12 Seconds

skm clang++ splashkit_master.c -o splashkit_master
./splashkit_master
Enter a window width (pixels): 600
Enter a window height (pixels): 200
Enter a duration (seconds): 12

After the user enters these values, a window should appear as shown below and automatically close after 12 seconds.

Assumptions/Restrictions/Clarifications

There are no autotests for this activity.

Summary

In this activity, you learned how to work with three functions to manage windows:

open_window(caption, width, height) - Opens a new window on the screen.
delay(milliseconds) - Pauses program execution.
close_all_windows() - Closes all windows.

List of New Functions

At the end of each activity, you'll find a list of all new function prototypes.

Keeping a list of these functions as you progress will be useful for whenever you need a quick refresher.

New Functions

// Window Management
window open_window(string caption, int width, int height);
void close_all_windows(void);

// Program Control
void delay(int milliseconds);