在vscode中配置搭建SDL2项目（超详细，多图预警）

原创已于 2025-08-01 17:38:21 修改 · 971 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #编辑器 #c语言 #linux

于 2025-07-31 23:36:00 首次发布

SDL2教程专栏收录该内容

3 篇文章

订阅专栏

01.SDL2简介

SDL2官网

SDL2（Simple DirectMedia Layer 2）是一个跨平台的多媒体开发库，用于提供对图形、声音、输入设备（键盘、鼠标、手柄等）的底层访问。它用C语言编写，支持Windows、Linux、macOS、iOS、Android等平台，被广泛用于游戏、模拟器、多媒体应用和引擎开发。

核心特性

跨平台：一份代码可在多平台运行，无需大幅修改。
硬件加速：通过OpenGL/Vulkan/Direct3D提供2D图形渲染（SDL_Renderer）和3D上下文创建。
输入处理：统一封装键盘、鼠标、手柄、触摸屏等输入事件。
音频播放：支持WAV、OGG等格式，提供回调式音频API。
窗口管理：创建窗口、全屏模式、多显示器支持。
线程与定时：跨平台线程、互斥锁、高精度定时器。

以下教程的文件保存在网盘中，会根据教程进度实时更新捏：SDL2资源

02.SDL2环境搭建–基于vscode

第一步：打开vscode，新建工程

新建或打开新的文件夹，用于保存SDL2示例代码
在这里插入图片描述

创建main.c文件，注意：main函数内的参数 main(int argc, char *argv[]) 要写全，否则SDL2运行时可能会出现错误
在这里插入图片描述

配置默认生成任务

在这里插入图片描述

如上，初始工程框架搭建成功。

第二步：下载SDL2相关库

从SDL2的github库中下载相关的库配置到我们的项目文件中，：SDL2 main，SDL_image，SDL_mixer,SDL_ttf。

首先是SDL main，这是SDL的基础库，包含SDL2的基础函数，我下载的是SDL2.32.4版本。

下载地址：SDLmain
在这里插入图片描述

下载SDL_image库文件，它的核心功能是扩展 SDL 的图像加载能力，使其能够加载多种常见的图像文件格式，而不仅仅是 SDL 原生支持的 BMP 格式。我下载的是SDL2_image2.8.8版本。

下载地址：SDL_image
在这里插入图片描述

下载SDL_mixer库文件，专门用于处理音频功能。它极大地简化了游戏和多媒体应用中的音频加载、解码、播放和混音操作。这里下载的是2.8.0版本

下载地址：SDL_mixer
在这里插入图片描述

下载SDL_ttf库，专门用于在图形应用（尤其是游戏）中渲染 TrueType 字体（TTF）。它基于著名的 FreeType 字体引擎，将矢量字体高效地转换为位图（或表面），并支持抗锯齿渲染，为游戏和多媒体应用提供高质量的文本渲染能力。这里下载的是2.24.0版本

下载地址：SDL_ttf
在这里插入图片描述

下载之后是这几个文件，放到同一个文件夹中

第三步：开始配置SDL2

将库文件分别解压，放到同一个文件夹中
在这里插入图片描述

在项目文件夹中创建src文件夹
在这里插入图片描述

配置SDL_main

我们首先配置SDL2的基础库，基础库配置完之后就可以尝试简单的SDL2创建窗口功能。

打开 SDL2-2.32.4 文件夹中的 x86_64-w64-mingw32 文件夹，路径为SDL2\SDL2库解压\SDL2-2.32.4\x86_64-w64-mingw32

在这里插入图片描述

将 include、lib两个文件夹复制到刚刚创建的项目文件夹src中

在这里插入图片描述

将 SDL2-2.32.4\x86_64-w64-mingw32/bin 中的 SDL2.dll 复制到项目文件夹中，和main.c放在一个层级

在这里插入图片描述

以上是配置SDL_main的方法，到这一步之后可以尝试写一段程序，创建一个SDL2的窗口了。我们先不写代码，接下来我们开始配置SDL2的其他库。

配置SDL2_image

打开SDL2_image-2.8.8文件夹中的x86_64-w64-mingw32文件夹，路径为 SDL2_image-2.8.8\x86_64-w64-mingw32
请添加图片描述

打开 include 文件夹中的 SDL2 文件夹，将其中的 SDL_image 文件复制到我们项目中创建的 src 文件夹中的 include 文件夹下的SDL2文件夹中
在这里插入图片描述

打开 SDL2_image-2.8.8\x86_64-w64-mingw32\lib 将cmake文件夹中的SDL2_image复制到 src\lib\cmake中
在这里插入图片描述

将 SDL2_image-2.8.8\x86_64-w64-mingw32\lib\pkgconfig 中的 SDL2_image.pc 复制到 SDL2-Cprogram\src\lib\pkgconfig（创建的项目相应的目录中，为了方便接下来我都用路径代替，请注意不要复制到错误的位置了）
在这里插入图片描述

将 SDL2_image-2.8.8\x86_64-w64-mingw32\lib 中文件复制到 SDL2\SDL2-Cprogram\src\lib 中
在这里插入图片描述

将 SDL2_image-2.8.8\x86_64-w64-mingw32\bin 中的文件复制到 SDL2-Cprogram（我们的项目文件中）

在这里插入图片描述

以上 SDL2_image 库配置完成，剩下的两个库配置步骤是一样的

配置SDL2_mixer

打开 SDL2_mixer-2.8.0\x86_64-w64-mingw32 ，将 include\SDL2 中的文件复制到 src\include\SDL2 （我们的项目文件夹）中
在这里插入图片描述

将 SDL2_mixer-2.8.0\x86_64-w64-mingw32\lib\cmake 中的文件夹复制到 SDL2-Cprogram\src\lib\cmake 中
在这里插入图片描述

将 SDL2_mixer-2.8.0\x86_64-w64-mingw32\lib\pkgconfig 中的文件复制到 src\lib\pkgconfig 中
在这里插入图片描述

将 \SDL2_mixer-2.8.0\x86_64-w64-mingw32\lib 中的文件复制到 src\lib 中

在这里插入图片描述

将 SDL2_mixer-2.8.0\x86_64-w64-mingw32\bin 中的文件复制到 src 中
在这里插入图片描述

以上，SDL2_mixer 库配置完成

配置SDL2_ttf

打开 SDL2_ttf-2.24.0\x86_64-w64-mingw32 ，将 include\SDL2 中的文件复制到 src\include\SDL2 中
在这里插入图片描述
将 SDL2_ttf-2.24.0\x86_64-w64-mingw32\lib\cmake 中的文件复制到 src\lib\cmake 中

将 SDL2_ttf-2.24.0\x86_64-w64-mingw32\lib\pkgconfig 中的文件复制到 src\lib\pkgconfig 中
在这里插入图片描述

将 SDL2_ttf-2.24.0\x86_64-w64-mingw32\lib 中的文件复制到 src\lib 中
在这里插入图片描述

将 SDL2_ttf-2.24.0\x86_64-w64-mingw32\bin 中的文件复制到项目文件中和main.c同级
在这里插入图片描述

以上SDL2_ttf库配置完成

03.测试 SDL2 项目是否配置成功

启动 vscode 打开我们配置好的 SDL2 项目
在这里插入图片描述

在 main.c 中输入一下代码

#include <SDL2/SDL.h>

int main(int argc, char *argv[])
{
    // 初始化 SDL
    if (SDL_Init(SDL_INIT_VIDEO) != 0)
    {
        printf("SDL 初始化失败: %s\n", SDL_GetError());
        return 1;
    }

    // 创建窗口
    SDL_Window *window = SDL_CreateWindow("SDL2 测试窗口",
                                          SDL_WINDOWPOS_CENTERED,
                                          SDL_WINDOWPOS_CENTERED,
                                          640, 480,
                                          SDL_WINDOW_SHOWN);
    if (!window)
    {
        printf("创建窗口失败: %s\n", SDL_GetError());
        SDL_Quit();
        return 1;
    }

    // 创建渲染器
    SDL_Renderer *renderer = SDL_CreateRenderer(window, -1, 0);
    if (!renderer)
    {
        printf("创建渲染器失败: %s\n", SDL_GetError());
        SDL_DestroyWindow(window);
        SDL_Quit();
        return 1;
    }

    // 设置渲染颜色（红色）
    SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255);

    // 清除屏幕
    SDL_RenderClear(renderer);

    // 显示渲染内容
    SDL_RenderPresent(renderer);

    // 延迟5秒
    SDL_Delay(5000);

    // 清理资源
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();

    return 0;
}

如图

在这里插入图片描述

这段代码的作用是创建一个 640*480 全红的窗口，窗口显示5秒后关闭

选中 main.c 右键选择在集成终端中打开

在这里插入图片描述

在集成终端中输入

gcc -g -c main.c -Isrc/include -lsrc/lib -lmingw32 -lSDL2main -lSDL2

回车，生成main.o文件

在这里插入图片描述

再在集成终端中输入

gcc -g -o show main.o -Lsrc/include -Lsrc/lib -lmingw32 -lSDL2main -lSDL2

生成可执行文件 show.exe
在这里插入图片描述

在集成终端中输入

.\show.exe

在这里插入图片描述

在桌面中心生成一个640*480的红色窗口，5秒后窗口消失

以上SDL2项目示例配置成功！

总结

以上就是SDL2的示例项目配置过程，写这个教程是因为工作中需要使用SDL2，花了很多时间搜索都没有看到完整的vscode配置教程，于是做了这个。

以上教程的文件保存在网盘中，会根据教程进度实时更新捏：SDL2资源

后续会继续写SDL2的使用教程，基于SDL2官网的C++教程，我会按自己的理解写成C语言的教程。

第一次写这么长的教程文件，如果有什么不对的地方请大家多多包涵，欢迎一起交流。

如果在配置过程中有什么问题也可以来问我。

谢谢观看！！
项目示例配置成功！