プロジェクトの作成

Last update: 2014/06/04

ここでは、iOSアプリのプロジェクト作成から Live2D モデルを表示するまでの手順を説明します。

◆用意するもの

  • Xcode （ここではXcode 5.1.1を使用します）

  • Live2D ライブラリ

  • （ダウンロードしたLive2D SDK の「lib」フォルダにある「Debug-iphoneos」、「Debug-iphonesimulator」、「Release-iphoneos」、「Release-iphonesimulator」フォルダ。 ここでは、1.0.02のバージョンを使用します）

  • Live2D のリソース

本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ準備します。

ここではサンプルプロジェクトの「ハル」のリソースを使って説明をしていきます。

/sample/simple/res/haru/

  • haru.moc

  • haru.1024/haru.1024/texture_00.png

  • haru.1024/haru.1024/texture_01.png

  • haru.1024/haru.1024/texture_02.png

◆プロジェクトの作成と下準備

新規プロジェクトを作成して、必要なファイルをインポートしていきます。

Xcodeを起動して、メニューバーの「File」 ＞ 「New」 ＞ 「Project...」をクリックします。

作成するプロジェクトを聞かれるので、「Single View Application」を選択して「Next」をクリックします。

プロジェクト名などを設定して「Next」をクリックし、保存場所を指定して「Create」をクリックします。

ここでは、Product Nameを「Live2DSample」とします。

次に、必要なファイルをプロジェクトに追加していきましょう。

まずはライブラリやモデルファイルなどを入れるグループを作成します。

Xcode上でプロジェクトのルートで右クリックし、「New Group」をクリックします。

ここでは、グループ名は「Resources」とします。

Live2D SDKの、/sample/simple/res の中にある、モデルファイルとテクスチャを、

先ほど作成した Resources グループにドラッグアンドドロップします。

追加時の設定では、ここでは以下のようにします。

SDKの/lib内のライブラリ、/include内のヘッダファイルも同様に追加します。

追加したら以下のようになります。

ライブラリなどの追加が終わったら、追加したライブラリを使えるように設定しましょう。

プロジェクトから、「Build Settings」 ＞ 「Linking」 ＞ 「Other Linker Flags」 に、-lLive2D と記述します。

※-lLive2D の "l" は小文字のLです。大文字の I （アイ）や | （バーティカルバー）ではありませんので注意してください。

プロジェクトから「Build Settings」 ＞ 「Search Paths」 ＞ 「Library Search Paths」 には、ライブラリまでのパスを、

「Build Settings」 ＞ 「Search Paths」 ＞ 「User Header Search Paths」には、

ライブラリのヘッダファイル（上で追加した「include」フォルダ内のファイル）までのパスを設定します。

ここでは、「Library Search Paths」に $(SRCROOT)/$(CONFIGURATION)-$(PLATFORM_NAME) 、

「User Header Search Paths」に $(SRCROOT)/include と設定します。

・$(SRCROOT) : プロジェクトまでのフルパス

・$(CONFIGURATION) : デバッグとリリースのどちらでビルドされるか（Debug、Release）

・$(PLATFORM_NAME) : プラットフォームの名前（iPhoneosなど）

最後に、「Build Settings」 ＞ 「Apple LLVM 5.0 - Preprocessing」 ＞ 「Preprocessor Macros」に、

L2D_TARGET_IPHONE を追加すれば、ライブラリを使用する準備は完了です。

◆OpenGLの設定

次はLive2Dモデルを表示させるための、OpenGLの設定を行います。

プロジェクト内の Live2DSample グループを右クリックして、「New File...」をクリック。

Objective-C class を選択して「Next」をクリック、クラス名を設定して「Next」をクリック、

ファイルの保存場所を指定して「Create」をクリックします。

ここでは、クラス名を「EAGLView」とし、SubclassはUIViewとします。

また、プロジェクト作成時に自動生成されたAppDelegate.m、ViewController.m、上で作成したEAGLView.m

の拡張子を、 ".m" から ".mm" に変えます。

Live2Dのライブラリは、C++で記述されているため、iPhoneで利用するには

拡張子が .cpp （C++用拡張子）もしくは .mm ( Objective-CとC++を混在できる拡張子)

である必要があります。

それではOpenGLの設定をしていきます。

作成した EAGLView.h を開き、以下のように書き換えます。

EAGLView.mm を開き、initWithFrame 関数を以下のように書き換え、OpenGLを初期化します。

同じく EAGLView.mm に、 layoutSubViews 関数を追加し、以下のように書き換えます。

次に、モデルの初期化を行います。

EAGLView.h に、Live2Dモデルとテクスチャの変数、テクスチャ作成用の関数の宣言を、

EAGLView.mm に、その実装を追加します。

EAGLView.mm の initWithFrame 関数で、Live2Dのモデルを初期化します。

EAGLView.mmに、画像からOpenGL用のテクスチャを作成する関数を追加します。

毎フレームの描画を行う関数を作成します。

EAGLView.mm に drawView 関数を追加し、以下のようにします。

layoutSubViews 関数の一番最後に以下のように記述し、 drawView 関数が毎フレーム呼び出されるよう設定します。

最後に、ビューコントローラーの awakeFromNib 関数を以下のように書き換えて完了です！

ViewController.h

最終的なコードは以下のようになります。

以下のもの以外は、自動生成された状態から手を加えていません。

ViewController.h

ViewController.m

EAGLView.h

EAGLView.mm