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

この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というクロスプラットフォーム用マルチメディアライブラリを利用しています。まずは、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に追加します。

Linked Binariesとincludeヘッダーの追加

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

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

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

SDL2の実行

実行すると、ランダムなカラーの矩形がランダムにチカチカと表示されるサンプルが動きます。

Live2Dを動かす

上記でめでたくSDL2の環境が整いました
続いて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で見るとこのようになります。

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

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

Header Search Pathsをこのように設定します。

Library Search Pathsをこのように設定します。

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

Live2Dをシミュレータで実行

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

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

$ 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を実機で実行

仕方ないので実機で動かします。

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

まとめ

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

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

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

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