Cubism SDK‎ > ‎プラットフォーム‎ > ‎FLASH‎ > ‎

プロジェクトの作成

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レイヤーの初期化を行います。

  1. package
  2. {
  3.         import flash.display.Sprite;
  4.         import flash.display.Stage3D;
  5.         import flash.display3D.Context3D;
  6.         import flash.display3D.Context3DRenderMode;
  7.         import flash.events.Event;
  8.        
  9.         public class Main extends Sprite
  10.         {
  11.                 public var context3D:Context3D;
  12.                
  13.                 public function Main():void
  14.                 {
  15.                         var stage3D:Stage3D = stage.stage3Ds[0];
  16.                        
  17.                         stage3D.addEventListener(Event.CONTEXT3D_CREATE, onCreateStage3D, false, 1);
  18.                         stage3D.requestContext3D(Context3DRenderMode.AUTO);
  19.                 }
  20.                
  21.                 public function onCreateStage3D(e:Event):void
  22.                 {
  23.                         context3D = (e.target as Stage3D).context3D;
  24.                         context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 0, false);
  25.                         context3D.setRenderToBackBuffer();
  26.                 }
  27.         }
  28. }


次に、モデルの初期化を行います。
3Dレイヤー作成完了後に呼ばれる関数内で
ロードするモデルファイルやテクスチャは、あらかじめエンベッドしておきます。

  1. [Embed(source = '../assets/haru.moc', mimeType = 'application/octet-stream')] private var ModelData:Class;
  2. [Embed(source = '../assets/haru.1024/texture_00.png')] private var Texture_00:Class;
  3. [Embed(source = '../assets/haru.1024/texture_01.png')] private var Texture_01:Class;
  4. [Embed(source = '../assets/haru.1024/texture_02.png')] private var Texture_02:Class;

  1. public var live2DModel:Live2DModelAs3;
  2. public function onCreateStage3D(e:Event):void
  3. {
  4.     context3D = (e.target as Stage3D).context3D;
  5.     context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 0, false);
  6.     context3D.setRenderToBackBuffer();

  7.     live2DModel = Live2DModelAs3.loadModel( ByteArray(new ModelData) );

  8.     live2DModel.setGraphicsContext(context3D);

  9.     var tex00:Bitmap new Texture_00;
  10.     var tex01:Bitmap new Texture_01;
  11.     var tex02:Bitmap new Texture_02;
  12.     live2DModel.setTexture(0, tex00.bitmapData );
  13.     live2DModel.setTexture(1, tex01.bitmapData );
  14.     live2DModel.setTexture(2, tex02.bitmapData );
  15. }


モデルの位置やサイズを設定します。
今回は横幅で合わせてあります。

  1. var scale:Number 2 / live2DModel.getCanvasWidth();
  2. live2DModel.scaleX = scale;
  3. live2DModel.scaleY = -scale * (stage.stageWidth/stage.stageHeight);
  4. live2DModel.x = -1;
  5. live2DModel.y = 1;



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

  1. stage.addEventListener(Event.ENTER_FRAME, update);

  1. public function update(e:Event):void
  2. {
  3.     live2DModel.update();

  4.     context3D.clear(1, 1, 1, 0);
  5.     live2DModel.draw();
  6.     context3D.present();
  7. }


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


  1. package
  2. {
  3.         import flash.display.Bitmap;
  4.         import flash.display.Sprite;
  5.         import flash.display.Stage3D;
  6.         import flash.display3D.Context3D;
  7.         import flash.display3D.Context3DRenderMode;
  8.         import flash.events.Event;
  9.         import flash.utils.ByteArray;
  10.         import jp.live2d.Live2DModelAs3;
  11.         import jp.live2d.util.UtSystem;
  12.        
  13.         /**
  14.          * ...
  15.          * @author
  16.          */
  17.         public class Main extends Sprite
  18.         {
  19.                 public var context3D:Context3D;
  20.                
  21.                 public var live2DModel:Live2DModelAs3;
  22.                
  23.                 [Embed(source = '../assets/haru.moc', mimeType = 'application/octet-stream')] private var ModelData:Class;
  24.                 [Embed(source = '../assets/haru.1024/texture_00.png')] private var Texture_00:Class;
  25.                 [Embed(source = '../assets/haru.1024/texture_01.png')] private var Texture_01:Class;
  26.                 [Embed(source = '../assets/haru.1024/texture_02.png')] private var Texture_02:Class;
  27.                
  28.                 public function Main():void
  29.                 {
  30.                         var stage3D:Stage3D = stage.stage3Ds[0];
  31.                    
  32.                         stage3D.addEventListener(Event.CONTEXT3D_CREATE, onCreateStage3D, false, 1);
  33.                         stage3D.requestContext3D(Context3DRenderMode.AUTO);
  34.                 }
  35.            
  36.                 public function onCreateStage3D(e:Event):void
  37.                 {
  38.                         context3D = (e.target as Stage3D).context3D;
  39.                         context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 0, false);
  40.                         context3D.setRenderToBackBuffer();
  41.                        
  42.                         // モデルの設定
  43.                         live2DModel = Live2DModelAs3.loadModel( ByteArray(new ModelData) );
  44.                         live2DModel.setGraphicsContext(context3D);
  45.                        
  46.                         // テクスチャの設定
  47.                         var tex00:Bitmap new Texture_00;
  48.                         var tex01:Bitmap new Texture_01;
  49.                         var tex02:Bitmap new Texture_02;
  50.                         live2DModel.setTexture(0, tex00.bitmapData );
  51.                         live2DModel.setTexture(1, tex01.bitmapData );
  52.                         live2DModel.setTexture(2, tex02.bitmapData );
  53.                        
  54.                        
  55.                         // 表示位置の設定
  56.                         var scale:Number 2 / live2DModel.getCanvasWidth();
  57.                         live2DModel.scaleX = scale;
  58.                         live2DModel.scaleY = -scale * (stage.stageWidth/stage.stageHeight);
  59.                         live2DModel.x = -1;
  60.                         live2DModel.y = 1;
  61.                        
  62.                         stage.addEventListener(Event.ENTER_FRAME, update);
  63.                 }
  64.                
  65.                
  66.                 public function update(e:Event):void
  67.                 {
  68.                         live2DModel.update(); // モデルのパラメータを更新
  69.                        
  70.                         context3D.clear(1, 1, 1, 0); // 画面のクリア
  71.                         live2DModel.draw(); // モデルを描画
  72.                         context3D.present() // 描画を適用
  73.                 }
  74.         }
  75. }


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




Comments