Visual Studio Code で SDL2 サンプルプログラムをビルド


「SDL2 のサンプルプログラムを試す」
https://qiita.com/nanbuwks/items/379013b65fa10ce042a5

は vim と CUI で実現したのですが、VSCode が楽しそうなのでそれでビルド/デバッグ環境を作ってみます。

# 環境

- Ubuntu 22.04
- Visual Studio Code 1.74.0

# C++ プログラムのための設定をする

先の「SDL2 のサンプルプログラムを試す」記事で C++ 環境はインストールしていますので VSCode 上の設定を行っていきます。

「C++」で検索して、「C/C++ for Visual Studio Code」 拡張をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/eac9aa65-1461-88b7-9720-4bbe292453be.png)
同様に、「C/C++ Extension Pack」もインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/bf7643be-796d-e09e-bc61-54f8b59ce99f.png)

# C++ プログラムのビルドの確認

フォルダを開くで適当なフォルダを選択し、File の New File... で test-1.cpp を作成します。

サンプルプログラムとして、以下のコードとしました。

```
#include <iostream>

int main(void)
{
	std::cout << "Hello, C++" << std::endl;
	return 0;
}
```

左の虫マークを押して、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8f4bae81-6137-c19c-e3f9-3b4dabfeda86.png)

Run and Debug のボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/80801da3-6107-e04b-58fc-2d6b8ce343a4.png)

ここは一番上の g++ を選択するのでいいみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/98840401-d729-4d25-9c18-df38cc7dfa6b.png)

無事実行されました。標準出力の結果はTERMINALを選ぶと表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7928b9e2-6f89-e6a5-1765-da9e0d4c86cd.png)

行を選ぶとブレークポイントが設定されて、デバッグもできるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/03a29481-0544-f167-9774-f5510e166dcd.png)

# SDL を動かす

「SDL2 のサンプルプログラムを試す」
https://qiita.com/nanbuwks/items/379013b65fa10ce042a5
のプログラムをコンパイルしようとすると・・・

```
ビルドを開始しています...
/usr/bin/g++ -fdiagnostics-color=always -g /home/nanbuwks/Downloads/sdl/test.cpp -o /home/nanbuwks/Downloads/sdl/test
/usr/bin/ld: /tmp/cczzjnxT.o: in function `main':
/home/nanbuwks/Downloads/sdl/test.cpp:8: undefined reference to `SDL_Init'
/usr/bin/ld: /home/nanbuwks/Downloads/sdl/test.cpp:10: undefined reference to `SDL_CreateWindow'
/usr/bin/ld: /home/nanbuwks/Downloads/sdl/test.cpp:12: undefined reference to `SDL_CreateRenderer'
.
.
.
```

となります。

` -lSDL2  -lSDL2_image`

のオプションを指定するには? 

```
$ ls .vscode
c_cpp_properties.json  launch.json  tasks.json
```

プロジェクトフォルダに .vscode ができていて、そこの tasks.json で指定するようです。


.vscode/tasks.json の中身はこうなってました。

```
{
    "tasks": [
        {
            "type": "cppbuild",
            "label": "C/C++: g++ アクティブなファイルのビルド",
            "command": "/usr/bin/g++",
            "args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}"
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "デバッガーによって生成されたタスク。"
        }
    ],
    "version": "2.0.0"
}
```

args に以下を足しました。


```
                "-lSDL2",
                "-lSDL2_image"
```

うまくいきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9ff92823-342f-9b64-ea2c-999c9348bd3b.png)