Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

SDL.xcodeprojを追加

Linked Binariesとincludeヘッダーの追加

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

Linked Frameworks and Libraries

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

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

image.png

SDL2の実行

実行すると、ランダムなカラーの矩形がランダムにチカチカと表示されるサンプルが動きます。
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で見るとこのようになります。

Project navigator

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

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

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

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

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

Live2Dをシミュレータで実行

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

error

こちらは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を実機で実行

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

Live2Dサンプル

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

まとめ

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

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

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

参考文献

tattn
Yahoo! JAPANで乗換案内アプリの開発や社内のアプリの課題解決、新規技術の導入サポートなどをしています。 https://zenn.dev/tattn
https://twitter.com/tanakasan2525
yahoo-japan-corp
Yahoo! JAPAN を運営しています。
https://www.yahoo.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away