Live2DのCubism 3をiOSのネイティブ環境で動かす

1枚の絵からなめらかに立体的なアニメーションを作成できるLive2DのCubismというツールがあります。

http://www.live2d.com/ja/products/cubism3

このcubismの組込み用ネイティブ環境向けSDKのバージョン3がGitHubで先行公開されています。
こちらのSDKを利用したiOSのサンプルコードを動かすなかでいくつかの細かい手順やつまりどころがあったので、簡単に作業の流れをまとめておきます。

執筆時の環境はCubism 3.1 Core for Native Development EAP5、SDL2-2.0.8、Xcode 9.2、iOS 11.2.6です。

# SDL2を動かす
Live2Dのサンプルコードは[SDL2](https://www.libsdl.org/index.php)というクロスプラットフォーム用マルチメディアライブラリを利用しています。まずは、SDL2が動く環境を作成していきます。

## SDL2のダウンロードと配置
下記のサイトからソースコードのzipをダウンロードします。
https://www.libsdl.org/download-2.0.php

`SDL2-x.x.x.zip`を解凍し、`SDL2-x.x.x/Xcode-iOS/Template/SDL iOS Application`をコピー&リネームし、作業ディレクトリに配置します。

全体のディレクトリ構成はこのようになりました。

```
作業ディレクトリ/
   ┗ Live2dTest/ (SDL iOS Applicationをリネームしたディレクトリ)
      ┣ ___PROJECTNAME___.xcodeproj
      ┣ ...
      ┗ lib/
         ┗ SDL2/ (SDL-2.0.8をリネームしたディレクトリ)
```

## プロジェクトファイルをXcodeで開く

`Live2dTest`下にあるプロジェクトファイルをXcodeで開き、このようなGroupを作ります。

```
Sources
   ┗ lib/
      ┗ SDL2/
```

`Sources/SDL.xcodeproj`の参照が消えているので、Deleteし、代わりに`lib/SDL2/Xcode-iOS/SDL/SDL.xcodeproj`を`Sources/lib/SDL2`に追加します。

![SDL.xcodeprojを追加](https://qiita-image-store.s3.amazonaws.com/0/91631/0d1d1d1f-62b9-710d-a20d-b09cec8a6cf3.png)


## Linked Binariesとincludeヘッダーの追加

libSDL2.aとAVFoundation.frameworkをLinked Frameworks and Librariesに追加します。

![Linked Frameworks and Libraries](https://qiita-image-store.s3.amazonaws.com/0/91631/a24d55ea-c6c5-79f0-7833-b9b9635fbbe4.png)

`lib/SDL2/include`をgroupとして`Sources/lib/SDL2`下に追加します。

最終的なXcodeのプロジェクト構成はこのようになりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/91631/c6495174-61b4-5162-58f4-f44bb5cfdd03.png)

## SDL2の実行
実行すると、ランダムなカラーの矩形がランダムにチカチカと表示されるサンプルが動きます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/91631/e8dee31d-c95f-2340-4060-d544d8611f90.gif" width="400px" alt="SDL2サンプル" />

# Live2Dを動かす

上記でめでたくSDL2の環境が整いました :tada:
続いてLive2DのCubism3を動かす環境をこのプロジェクトを基準に作成します。

## SDKとサンプルファイルのダウンロード
Live2Dのサンプルを実行するためには、下記のダウンロードが必要です。zipでダウンロードしてください。

https://live2d.github.io/#native
https://github.com/Live2D/CubismNativeComponents/tree/early-access
https://github.com/nothings/stb

## 各種ファイルの配置

SDL2のサンプルのエントリーポイント`Sources/main.c`は不要のため削除します。
続いて、ダウンロードしてきたファイルを解凍し、下記のように配置します。

```
Sources/
   ┣ lib/
   ┃  ┣ stb (stb-masterをリネームしたもの)
   ┃  ┣ Live2D
   ┃  ┃  ┗ Cubism
   ┃  ┃     ┣ Core (Cubism31SdkNative-EAP5/Core)
   ┃  ┃     ┗ Components (CubismNativeComponents-early-accessをリネームしたもの)
   ┃  ┗ SDL2/
   ┗ app/
      ┗ sample/ (CubismNativeComponents-early-access/sample)

Resources/
   ┗ Koharu (CubismNativeComponents-early-access/sample/assets/Koharuをreferenceとして配置したもの)
```

※ Resources/Koharuはgroupではなくreferenceで配置が必要です。 (リソースの階層構造が必要なため)

Xcodeで見るとこのようになります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/91631/a252f2cf-50dd-4468-fb51-78a926e76204.png" height="400px" alt="Project navigator" />

## インクルードパスなどのプロジェクト設定

今回はMetalを利用するため、Linked Frameworks and LibrariesにMetal.frameworkを追加します。

Header Search Pathsをこのように設定します。
![Header Search Paths](https://qiita-image-store.s3.amazonaws.com/0/91631/2e40c638-ea76-9eca-7f77-be63a0777199.png)

Library Search Pathsをこのように設定します。
![Library Search Paths](https://qiita-image-store.s3.amazonaws.com/0/91631/b10477c3-364e-0b83-517c-2099b2e5be46.png)

Preprocessor Macrosに`_USE_GLES20`, `_IOS`, `_CSM_COMPONENTS_IOS`, `_CSM_COMPONENTS_USE_GLES20`を追加します。

## Live2Dをシミュレータで実行

これで設定は完了です。いざ、シミュレータで実行！...しようとするとビルドに失敗します... :cry:

![error](https://qiita-image-store.s3.amazonaws.com/0/91631/7c06a1b5-f03b-7587-2c8f-0f4ed495498b.png)

こちらはLive2DのCoreライブラリがまだx86_64をサポートしていないからのようです。

```bash
$ lipo -info lib/Live2D/Cubism/Core/lib/ios/libLive2DCubismCore.a
Architectures in the fat file: lib/Live2D/Cubism/Core/lib/ios/libLive2DCubismCore.a are: armv7 arm64
```

## Live2Dを実機で実行
仕方ないので実機で動かします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/91631/5d644ef2-8362-06d1-fb87-c920cf6edd9d.gif" width="400px" alt="Live2Dサンプル" />

無事実行できました :tada: 可愛いですね :smile:


# まとめ
サクッとすぐには動かせないですが、エラーメッセージを見ながらプロジェクト設定をしていくと、無事動作するところまで環境構築ができました。
困った時は下記の参考文献を見ると何とかなりました。

今回の完成プロジェクトはこちらに置いてあります。
https://github.com/tattn/Live2DSample

気が向いたら、Swiftでキャラクターを操作するまでの手順をまとめようと思います。

# 参考文献
- https://github.com/Live2D/CubismNativeComponents
- http://lazyfoo.net/tutorials/SDL/52_hello_mobile/ios_mac/index.php