VSCode下SDL图形库编译配置，以及一个简单的排序算法图形展示

目的

练一下排序算法，同时通过图形界面直观的展示排序过程，包含十种排序算法。

记得原来网上也有过类似的作品。自己这里重新实现一遍，用的c++和SDL做图形展示。

最终效果：

SDL配置

通过visual studio编译SDL工程有不少教程，不过使用vscode我还是花了不少时间才配成功。

这里我用了SDL做图形展示，SDL_ttf做文字展示。

编译环境用的mingw

三方库下载

SDL的地址在这里，注意Runtime和Development两种库都要下载，Runtime用于运行的时候，而Development在编译链接时需要使用。

注意Development库需要对应解压相应编译器的库（我这里是x86_64-w64-mingw32）

SDL_ttf的地址在这里，同样也是需要Runtime和Development两种库。

vs code配置

这块费了不少时间，直接粘贴我可以使用的结果。

c/c++源代码配置

通过vs code功能（F1）中的c/c++: Edit Configurations(UI)，可以在.vscode文件夹中，生成c_cpp_properties.json文件。

比较重要的地方我加了注释：

c_cpp_properties.json:

{
    "configurations": [
        {
            "name": "GCC",
            "includePath": [
                "${workspaceFolder}/**",
                  //以下两项分别是解压后的SDL和SDL_TTF头文件地址，源代码应用sdf.h和sdl_ttf.h时，需要增加这个配置
                  //vscode才能补全
                "C:\\work\\software\\SDL2-2.0.14-win32-x64\\x86_64-w64-mingw32\\include\\SDL2",
                "C:\\work\\software\\SDL2-2.0.14-win32-x64\\SDL_TTF"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "windowsSdkVersion": "10.0.17763.0",
            //"compilerPath": "C:/Program Files (x86)/Microsoft Visual Studio/2017/BuildTools/VC/Tools/MSVC/14.16.27023/bin/Hostx64/x64/cl.exe",
            //这里替换了默认的msvc，采用了mingw的g++编译
            "compilerPath": "C:/Program Files/mingw-w64/x86_64-8.1.0-posix-seh-rt_v6-rev0/mingw64/bin/g++.exe",
            "cStandard": "c11",
            "cppStandard": "c++11",
            "intelliSenseMode": "gcc-x64"
        }
    ],
    "version": 4
}

编译配置

有的教程提到通过vs code功能中的Edit Default Build Task生成基础g++配置task.json，再在文件基础上修改，不过我的vs code版本选择这个功能后，并不能选择g++，于是我直接创建了task.json, 内容如下，关键内容有注释.

task.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "shell",
        //注意这里的label，后面配置launch运行任务时，需要制定前置的build任务名称，就是这个参数
        "label": "C/C++: g++.exe build active file",
         //对应Mingw的g++命令，注意需要先将mingw的bin目录加入到系统的PATH中
        "command": "g++",
        //关键的地方
        "args": [
            "-g", 
            //这里根据项目需求修改，是编译的源文件
            "src\\*.cpp", 
             //-I包含头文件路径，这里就是和上面c_cpp_properties.json相同，是SDL和SDL_TTF的解压缩位置
            "-IC:\\work\\software\\SDL2-2.0.14-win32-x64\\x86_64-w64-mingw32\\include\\SDL2",
            "-IC:\\work\\software\\SDL2-2.0.14-win32-x64\\SDL_TTF",
            //SDL相关库的lib路径，根据自己的情况修改
            "-LC:\\work\\software\\SDL2-2.0.14-win32-x64\\x86_64-w64-mingw32\\lib",
            "-LC:\\work\\software\\SDL2-2.0.14-win32-x64\\SDL_TTF",
            "-lmingw32",
            //之前碰到找不到Win_Main的问题，加上-lSDL2main和-mwindows以后就好了
            "-lSDL2main",
            "-lSDL2",
            "-lSDL2_ttf",
            "-mwindows",
            "-o", 
            //生成的可执行程序路径，我这里放在了build目录下
            "build\\main.exe"
        ],
        "options": {
          "cwd": "${workspaceFolder}"
        },
        "problemMatcher": ["$gcc"],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      }
    ]
  }

运行配置

运行配置是launch.json，这里配置的是通过gdb调试运行。

需要注意由于SDL依赖运行库，也就是前面提到的Runtime库，SDL和SDL_ttf共需要SDL2,SDL2_ttf,zlib1,libfreetype-6这几个库，如果不用SDL_ttf的文字显示功能，那么只要SDL2一个库就行了，都是在之前的下载链接有的。

launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "g++.exe - Build and debug active file",
        "type": "cppdbg",
        "request": "launch",
        //调试的程序，由于之前我编译生成在build目录下，这里也相应的用build目录
        "program": "${workspaceFolder}\\build\\main.exe",
        "args": [],
        "stopAtEntry": false,
        //运行目录，由于我们需要运行时的dll库，运行时的dll也要放在这个目录中，否则会找不到（比如找不到SDL2.dll）
        "cwd": "${workspaceFolder}\\build",
        "environment": [],
        "externalConsole": false,
        "MIMode": "gdb",
        //mingw 的gdb路径
        "miDebuggerPath": "C:\\Program Files\\mingw-w64\\x86_64-8.1.0-posix-seh-rt_v6-rev0\\mingw64\\bin\\gdb.exe",
        "setupCommands": [
          {
            "description": "Enable pretty-printing for gdb",
            "text": "-enable-pretty-printing",
            "ignoreFailures": true
          }
        ],
        //前面task.json中的label
        "preLaunchTask": "C/C++: g++.exe build active file"
      }
    ]
  }

运行

然后执行vs code中的Tasks: Run Build Task就能执行task.json中对应的编译任务，生成main.exe了。

我的算法图形化小程序

工程地址在https://github.com/mosakashaka/visual_sort，下载下来的build目录中的main.exe可以直接执行。

效果如下：

入口界面，通过按键选择运行的排序：

冒泡：

快排

还有其他的不一一截图了。

---