プロジェクト作成チュートリアル

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

プロジェクト作成チュートリアル

Last update: 2014/06/04

ここでは、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」をクリックします。

プロジェクトのルートフォルダを右クリックして、「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レイヤーの初期化を行います。

package
{
  import flash.display.Sprite;
  import flash.display.Stage3D;
  import flash.display3D.Context3D;
  import flash.display3D.Context3DRenderMode;
  import flash.events.Event;

  public class Main extends Sprite
  {
  public var context3D:Context3D;

  public function Main():void
  {
  var stage3D:Stage3D = stage.stage3Ds[0];

stage3D.addEventListener(Event.CONTEXT3D_CREATE, onCreateStage3D, false, 1);
stage3D.requestContext3D(Context3DRenderMode.AUTO);
  }

  public function onCreateStage3D(e:Event):void
  {
context3D = (e.target as Stage3D).context3D;
context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 0, false);
context3D.setRenderToBackBuffer();
  }
  }
}

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

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

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

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

live2DModel.setGraphicsContext(context3D);

  var tex00:Bitmap = new Texture_00;
  var tex01:Bitmap = new Texture_01;
  var tex02:Bitmap = new Texture_02;
live2DModel.setTexture(0, tex00.bitmapData );
live2DModel.setTexture(1, tex01.bitmapData );
live2DModel.setTexture(2, tex02.bitmapData );
}

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

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

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

stage.addEventListener(Event.ENTER_FRAME, update);

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

context3D.clear(1, 1, 1, 0);
live2DModel.draw();
context3D.present();
}

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

package
{
  import flash.display.Bitmap;
  import flash.display.Sprite;
  import flash.display.Stage3D;
  import flash.display3D.Context3D;
  import flash.display3D.Context3DRenderMode;
  import flash.events.Event;
  import flash.utils.ByteArray;
  import jp.live2d.Live2DModelAs3;
  import jp.live2d.util.UtSystem;

  /**
* ...
* @author
*/
  public class Main extends Sprite
  {
  public var context3D:Context3D;

  public var live2DModel:Live2DModelAs3;

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

  public function Main():void
  {
  var stage3D:Stage3D = stage.stage3Ds[0];

stage3D.addEventListener(Event.CONTEXT3D_CREATE, onCreateStage3D, false, 1);
stage3D.requestContext3D(Context3DRenderMode.AUTO);
  }

  public function onCreateStage3D(e:Event):void
  {
context3D = (e.target as Stage3D).context3D;
context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 0, false);
context3D.setRenderToBackBuffer();

  // モデルの設定
live2DModel = Live2DModelAs3.loadModel( ByteArray(new ModelData) );
live2DModel.setGraphicsContext(context3D);

  // テクスチャの設定
  var tex00:Bitmap = new Texture_00;
  var tex01:Bitmap = new Texture_01;
  var tex02:Bitmap = new Texture_02;
live2DModel.setTexture(0, tex00.bitmapData );
live2DModel.setTexture(1, tex01.bitmapData );
live2DModel.setTexture(2, tex02.bitmapData );

  // 表示位置の設定
  var scale:Number = 2 / live2DModel.getCanvasWidth();
live2DModel.scaleX = scale;
live2DModel.scaleY = -scale * (stage.stageWidth/stage.stageHeight);
live2DModel.x = -1;
live2DModel.y = 1;

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

  public function update(e:Event):void
  {
live2DModel.update(); // モデルのパラメータを更新

context3D.clear(1, 1, 1, 0); // 画面のクリア
live2DModel.draw(); // モデルを描画
context3D.present();  // 描画を適用
  }
  }
}

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

Comments

情報

制作

開発

ツール

サポート

プロジェクト作成チュートリアル

◯FlashDevelop

◯FlashBuilder