プロジェクトの作成

Last update: 2015/04/06

ここでは、FlashDevelop、Flash Builderのふたつのエディターでのプロジェクト作成から

Live2D モデルを表示するまでの手順を説明します。

推奨環境などはSDK付属のReadMeをご覧ください。

◆用意するもの

  • FlashBuilder

  • Live2D ライブラリ （ダウンロードしたLive2D SDK の「lib」フォルダにある「live2d_flash.swc」）

  • Live2D のリソース

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

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

simple/assets/haru/

  • haru.moc

  • haru.1024/texture_00.png

  • haru.1024/texture_01.png

  • haru.1024/texture_02.png

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

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

◯FlashDevelop

メニューバーの「Project」 ＞ 「New Project...」をクリックします。

ActionScript 3の項目から「AS3 Project」を選択し、プロジェクト名や保存場所などを記述して「OK」をクリックします。

Live2Dの描画にはStage3Dを利用しているため、それに対応したFlashPlayer11以上のバージョンを指定する必要があります。

FlashPlayer11以上がインストールされていない場合は、あらかじめインストールしてください。

プロジェクトのルートフォルダを右クリックして、「Properties...」をクリックします。

Outputタブ内の「Platform」をFlash Playerに設定し、バージョンを11.0以上にしてOKをクリックします。

次に、Live2Dのライブラリやモデルなどをプロジェクトに追加していきます。

プロジェクトのルートフォルダを右クリックして、「Add」 ＞ 「New Folder...」をクリックして、

「assets」フォルダ、「lib」フォルダを作成します。

SDKのサンプルから、モデルファイルの「haru.moc」と、テクスチャが格納された「haru.1024」フォルダを、

プロジェクトのassetsフォルダにドラッグアンドドロップします。

同様に、Live2Dのライブラリファイルも、プロジェクトの「lib」にドラッグアンドドロップします。

最後に、インポートしたライブラリファイルにパスを通します。

インポートしたライブラリファイルを右クリックし、「Add To Library」をクリックします。

ライブラリファイルの文字が青くなれば完了です。

◯FlashBuilder

メニューバーの「ファイル(F)」 ＞ 「新規(N)」 ＞ 「ActionScript プロジェクト」をクリックします。

プロジェクト名を設定して右下の「終了(F)をクリックします。

プロジェクトが作成できたら、プロジェクトのルートフォルダを右クリックして、

「新規(W)」 ＞ 「フォルダ」をクリックし、「assets」、「lib」という名前のフォルダを作成します。

SDKのサンプルから、モデルファイルの「haru.moc」と、テクスチャが格納された「haru.1024」フォルダを、

プロジェクトのassetsフォルダにドラッグアンドドロップします。

同様に、Live2Dのライブラリファイルも、プロジェクトの「lib」にドラッグアンドドロップします。

最後に、インポートしたライブラリファイルにパスを通します。

プロジェクトのルートフォルダを右クリックし、「プロパティ(R)」をクリックします。

「ActionScript ビルドパス」 ＞ 「ライブラリパス」 ＞ 「SWCの追加(C)...」をクリックします。

参照をクリックます。

上でインポートした live2d_flash.swf まで移動して「開く(O)」をクリックします。

「OK」をクリックします。

以下のようになっていれば完了です。最後に「OK」をクリックします。

◆モデルの読み込み、描画

Live2Dモデルを表示するための3Dレイヤーを作成します。

プロジェクト作成時に生成されていたクラスを開き、以下のように書き換えて3Dレイヤーの初期化を行います。

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

3Dレイヤー作成完了後に呼ばれる関数内で

ロードするモデルファイルやテクスチャは、あらかじめエンベッドしておきます。

モデルの位置やサイズを設定します。

今回は横幅で合わせてあります。

最後に、モデルの描画を行う関数を作成します。

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

実行してモデルが表示されれば完了です！