MacOS版CLionでSDL2を使う際の覚え書き

同じことで躓いたときのための備忘録です. 
深い内容は存じ上げないのでご容赦ください. 
補助ライブラリの
SDL2_mixer(音声関連)
SDL2_image(画像関連, SDL単体だけではBMPファイルしか扱えません)
SDL2_ttf(テキスト出力関連, tureTypeFontを扱えます)
の導入も併せて紹介いたします. 

#CLionとは
IDE(統合開発環境)の開発を主に行っているJetBrains社のC++向けIDEです. MacとWindows両方で使えるため, 両方使う人にはとても便利です. 
詳しい導入方法などは他の記事をご覧ください. 
#SDLとは
Simple DirectMedia Layerの略でマルチプラットフォームで利用できるマルチメディアライブラリで, c系以外の主要言語にも移植がされています. 現在(2019/2/23)主に2系と1.2系に分かれます. 本記事では2系を導入することを前提にしています. 
非常に軽量で導入しやすい反面, 非常に限られたことしかできません. 
#環境導入
用意するもの(詳細, リンクは各項目で説明します)

* 最新版のSDL2のインストーラ(執筆時2.0.9)
* 各種補助ライブラリのインストーラ
* find_packageするためのcmake file
* FreeType2(SDL_ttfの導入に必要, 導入済みなら不要)
* 再生したい音声ファイル(wavファイルのみ動作確認済み)
* 表示したい画像ファイル(pngファイルのみ動作確認済み)
* 画面表示したい文字のttfファイル(例[IPAフォント](https://ipafont.ipa.go.jp/old/ipafont/download.html))

##SDL2の導入
以下**X.Y.Z**は導入したいバージョンで読み替えてください.
1.[ダウンロードページ](https://www.libsdl.org/download-2.0.php)から**SDL2-X.Y.Z.zip**及び**SDL2-X.Y.Z.dmg**をダウンロードします. 
2. SDL2-X.Y.Z.zipを展開し, ターミナルで展開したディレクトリに移動します. 
3. ターミナル上で `./configure`と入力. 
このとき, 必要なライブラリがないとき

```
configure: error: *** Unable to find ~~~ library (http:~~~)
```

のように表示されて終了します. 適宜必要なものを導入して再度`./configure`を入力してください. 
4. ターミナル上で `make`と入力. 正常終了するまで待つ. 
5. ターミナル上で `make install`と入力. 環境によっては 先頭に`sudo`が必要で, パスワードの入力を求められます. 
6. SDL2-X.Y.Z.dmgファイルを開き中の**SDL2.Framework**を**/ライブラリ(もしくはLibrary)/Frameworks**にコピーします. ディレクトリがない場合は作成してください. 

##各種補助ライブラリの導入
SDL2のバージョンと各種補助ライブラリのバージョンの数字は異なります. それぞれの安定版もしくは最新版を導入してください. 導入方法はほぼSDL2と同じです. 

1. [ダウンロードページ](https://www.libsdl.org/projects/)から
    * SDL2_mixer-X.Y.Z.zip(執筆時2019/2/23, 最新版2.0.4)
    * SDL2_mixer-X.Y.Z.dmg
    * SDL2_image-X.Y.Z.zip(執筆時2019/2/23, 最新版2.0.4)
    * SDL2_image-X.Y.Z.dmg
    * SDL2_ttf-X.Y.Z.zip(執筆時2019/2/23, 最新版2.0.15)
    * SDL2_ttf-X.Y.Z.dmg

をそれぞれダウンロードする
2. それぞれのdmgファイルを展開し, ターミナルでそれぞれのディテクトリに移動します. 
3. それぞれのディレクトリで先ほどと同様`./configure`, `make`, `make install`を順番に入力します. この際多くの場合`./configure`ののちに

```
configure: error: *** Unable to find FreeType2 library (http://www.freetype.org/)
```

と表示されます. この場合, 次の項目でFreeType2をインストールしたのち, `./configure`からやり直してください. 
4. それぞれのdmgファイルを開き, **~.Framework**を先ほどのを**/ライブラリ(もしくはLibrary)/Frameworks**に入れる. 

##FreeType2の導入(必要な場合)
前項目でFreeType2が導入されていなくて怒られた場合に必要です. 

1.  [ダウンロードページ](https://download.savannah.gnu.org/releases/freetype/)から**freetype-X.Y.tar.gz**もしくは**freetype-X.Y.Z.tar.gz**ををダウンロードします(執筆時2019/2/23, 最新版2.9.1). 
2.  展開してターミナル上でそのディレクトリに移動. 
3.  先ほどと同様, `./configure`, `make`, `make install`を順番に入力します. 

#Clionでの設定
ここまでの設定が終了すれば, 適切にコンパイル時の引数を渡した上でそれぞれのライブラリを用いたプログラムをコンパイルし実行できますが, IDE上では別途コンパイラの設定をする必要があるためCLionではこのままだと使えません. CLionではプロジェクトを作成した時に自動で**CMakeLists.txt**が作成されてこれを元にリンクやパスの設定がなされます. これに対応したcmakeファイルがgitHubで公開されているので, ありがたく使わせていただくことにします. 

1. [GitHubのページ](https://github.com/tcbrindle/sdl2-cmake-scripts)から**zipダウンロード**もしくは各種gitツールから**clone**する(ページの右あたりの<font color="DarkGreen">Clone or download</font>からダウンロードできます). 
2. それぞれのcmakeファイルを, プロジェクトのディレクトリ/cmake-build-debug/cmake内にコピーする. cmakeディレクトリはなければ適宜作成. 
3. **/usr/local/lib/cmake**内に**SDL2_image**, **SDL2_mixer**, **SDL2_ttf**ディレクトリを作成し, それぞれに以下のファイルを作成.

```cmake:SDL2_image/SDL2_imageConfig.cmake
set(prefix "/usr/local") 
set(exec_prefix "${prefix}")
set(libdir "${exec_prefix}/lib")
set(SDL2_IMAGE_PREFIX "/usr/local")
set(SDL2_EXEC_IMAGE_PREFIX "/usr/local")
set(SDL2_IMAGE_LIBDIR "${exec_prefix}/lib")
set(SDL2_INCLUDE_IMAGE_DIRS "${prefix}/include/SDL2")
set(SDL2_IMAGE_LIBRARIES "-L${SDL2_IMAGE_LIBDIR}  -lSDL2_image")
string(STRIP "${SDL2_IMAGE_LIBRARIES}" SDL2_IMAGE_LIBRARIES)
```
```cmake:SDL2_mixer/SDL2_mixerConfig.cmake
set(prefix "/usr/local") 
set(prefix "/usr/local") 
set(exec_prefix "${prefix}")
set(libdir "${exec_prefix}/lib")
set(SDL2_MIXER_PREFIX "/usr/local")
set(SDL2_EXEC_MIXER_PREFIX "/usr/local")
set(SDL2_MIXER_LIBDIR "${exec_prefix}/lib")
set(SDL2_INCLUDE_MIXER_DIRS "${prefix}/include/SDL2")
set(SDL2_MIXER_LIBRARIES "-L${SDL2_MIXER_LIBDIR}  -lSDL2_mixer")
string(STRIP "${SDL2_MIXER_LIBRARIES}" SDL2_MIXER_LIBRARIES)
```
```cmake:SDL2_ttf/SDL2_ttfConfig.cmake
set(prefix "/usr/local") 
set(exec_prefix "${prefix}")
set(libdir "${exec_prefix}/lib")
set(SDL2_TTF_PREFIX "/usr/local")
set(SDL2_TTF_EXEC_PREFIX "/usr/local")
set(SDL2_TTF_LIBDIR "${exec_prefix}/lib")
set(SDL2_TTF_INCLUDE_DIRS "${prefix}/include/SDL2")
set(SDL2_TTF_LIBRARIES "-L${SDL2_TTF_LIBDIR}  -lSDL2_ttf")
string(STRIP "${SDL2_TTF_LIBRARIES}" SDL2_TTF_LIBRARIES)
```
4. プロジェクトのCMakeLists.txtに以下を追加する. 
**project**は各自プロジェクト名(project()で指定したもの
)に置き換えてください.

```cmake:CMakeList.txt
set(CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake")

find_package(SDL2 REQUIRED)
find_package(SDL2_mixer REQUIRED)
find_package(SDL2_image REQUIRED)
find_package(SDL2_ttf REQUIRED)

include_directories(${SDL2_INCLUDE_DIRS})

target_link_libraries(project ${SDL2_LIBRARIES})
target_link_libraries(project ${SDL2_TTF_LIBRARIES})
target_link_libraries(project ${SDL2_IMAGE_LIBRARIES})
target_link_libraries(project ${SDL2_MIXER_LIBRARIES})

```

##その他のファイルの用意
今回は簡単のため**cmake-build-debug**に各種ファイルを置き実行します. 
[IPAフォント](https://ipafont.ipa.go.jp/old/ipafont/download.html)からipag.ttfをダウンロードし, プロジェクトの**cmake-build-debug**内にコピーしてください. 
また, 各自wavファイルとpngファイルを用意しそれぞれ**test.wav**, **test.png**とリネームして, プロジェクトの**cmake-build-debug**内に置いてください. 

以上で環境導入は完了です. 

#実行
今回はせっかくIDEを使うので, 音を鳴らすクラス**SoundTest**クラス, 画像を表示するクラス**ImageTest**クラス, 図形を表示する**FigureTest**クラス, 文字を表示する**TextTest**クラス, それらを統括する**SDLTest**クラスを作成しました[gitHub](https://github.com/hisatake-chuo/SDL_Samples). Clionの左上のプロジェクト名が表示されているところを右クリックし, new > c++ class を押してそれぞれのファイルを作成し内容を記述するか, ファイルをダウンロードしてプロジェクトのディレクトリ(main.cppがある場所)にコピーし, CMakeLists.txtに

```cmke:CMakeLists.txt
add_executable(project main.cpp 
                       SoundTest.cpp SoundTest.hpp
　　　　　　　　　　　　　　ImageTest.cpp ImageTest.hpp
　　　　　　　　　　　　　　FigureTest.cpp FigureTest.hpp
　　　　　　　　　　　　　　TextTest.cpp TextTest.hpp
                       SDLTest.cpp SDLTest.hpp)

```
を追加してください(project は適宜置き換えてください, すでにmain.cpp以外に
add_executableされている場合は, それらも残してください). 
main.cppを以下のように記述し実行して所望の結果が得られれば成功です. 

```c++:main.cpp
#include "SDLTest.hpp"

int main() {
    auto *obj = new SDLTest();

    obj->mainCall(30);
    return 0;
}
```


動くかだけチャチャっと確認したいしたい人は[gitHub](https://github.com/hisatake-chuo/SDL_Samples)内の**main_only_ver**のmain.cppだけをコピーして実行してみてください. 

参考にさせていただいたサイト
[Qiita: MacでのSDLの導入](https://qiita.com/inomasa/items/d5a9c6ebfb2ff2e40003)
[[Mac OS] [freetype] ソースからfreetype-2.8.1をインストールする](https://noknow.info/it/ja/macos/install/install_freetype_2_8_1_from_sourcecode)
[SDL2 の適当なサンプルコード](http://nyaocat.hatenablog.jp/entry/2014/01/27/153145)
[sdl2-0でpng画像と文字列を表示](https://www.hiroom2.com/2014/09/12/sdl2-0%E3%81%A7png%E7%94%BB%E5%83%8F%E3%81%A8%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E8%A1%A8%E7%A4%BA/#sec-1-2)
[gitHub: Using SDL_Mixer with SDL2](https://gist.github.com/armornick/3497064)