Creating a project using a sample



We are going to explain the process from how to create a project by two editors of FlasDevelop and Flash Builder, to how to display the Live2D model.
Please refer to ReadMe attached to SDK about the system requirements.



◆Things to prepare
  • FlashBuilder
  • Live2D library ("live2d_flash.swc" in the "lib" folder of the downloaded Live2D SDK)
  • Live2D resources
You need to prepare the Live2D resources according to each model.
In this example, we use the resource of the sample project "Haru" as an example.

simple/assets/haru/
  • haru.moc
  • haru.1024/texture_00.png
  • haru.1024/texture_01.png
  • haru.1024/texture_02.png



◆Create a new project and its preparation
Create a new project and import required files.

◯FlashDevelop

From the menu bar, select "Project" > "New Project...".

Select "AS3 Project" from the items in ActionScript 3, and enter the name, location, and the package name then click ok button.





Right-click the root folder of the project, and select "Add" > "New Folder..." to create the "assets" folder and the "lib" folder.


Drag and drop "haru.moc" of the model file and the "haru.1024" folder which stores the Textures into the assets folder of the project.
Drag and drop the Live2D library file into "lib" of the project as well.


Lastly, describe the path to the imported library file.
Right-click the imported library file, and click "Add To Library".

If the letters of the library file become in blue, the setting is completed.




◯FlashBuilder

From the menu bar, select "File" > "New" > "ActionScript project".


Enter the project name, and click "終了" button in the lower right of the window.


When the project is created, right-click the root folder of the project and select "New" > "Folder" to create folders named "assets" and "lib".






Drag and drop "haru.moc" of the model file and the "haru.1024" folder which stores the Textures from the SDK samples into the "assets" folder of the project.
Drag and drop the Live2D library file into "lib" of the project as well.



Lastly, describe the path to the imported library file.
Right-click the root folder of the project, and click "Properties".


Select "ActionScript ビルドパス" >"ライブラリパス" > "SWCの追加(C)...".

Click the "Reference" button.


Go to "live2d_flash.swf" that is imported in the previous setting, and click the "Open" button.

Click ok button.

The setting is completed if the window is like as below. Click ok button to close the window.




◆Load and draw the model


Create the 3D layer to display the Live2D model.

Open the class which was generated when creating the project, and change the description as below to initialize the 3D layer.

  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. }


Next, initialize the model.
You need to embed the model file and the Texture beforehand that are loaded in the function invoked after completing to create the 3D layer.

  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. }


Make settings of the position and the size of the model.
In this example, the setting is made according to its width.

  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;



Lastly, create the function which draw the model.

  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. }


The code will be as below.


  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.                         // Make setting of the model
  43.                         live2DModel = Live2DModelAs3.loadModel( ByteArray(new ModelData) );
  44.                         live2DModel.setGraphicsContext(context3D);
  45.                        
  46.                         // Make setting of the Texture
  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.                         // Make setting of the display position
  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(); // Update the model's Motion Parameter
  69.                        
  70.                         context3D.clear(1, 1, 1, 0); // Clear the screen
  71.                         live2DModel.draw(); // Draw the model
  72.                         context3D.present() // Apply the drawing
  73.                 }
  74.         }
  75. }


The setting is completed if the model is displayed after executing it!



Comments