Cubism SDK‎ > ‎多平台开发‎ > ‎FLASH‎ > ‎

创建项目

Last update: 2015/04/06

这里介绍在 FlashDevelop 和 Flash Builder 两种编辑器中,从创建项目到显示 Live2D 模型的步骤。
推荐环境请参照 SDK 的 ReadMe 文件。






准备工作
  • FlashBuilder
  • Live2D 库 (Live2D SDK 的「lib」文件夹中的「live2d_flash.swc」
  • Live2D 资源
Live2D 资源的准备根据所使用的模型而有所不同。
这里使用样例中「haru」的资源来说明。

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,所以对应的 FlashPlayer 版本必须在 11 以上。
如果未安装 FlashPlayer11以上的版本,请事先装好

右击项目的根目录,点击「Properties...」。


把 Output 中「Platform」设置为 Flash Player,版本选择 11.0 以上。




然后,把 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)...」。

点击浏览「浏览(W)


选择上文中已导入的 live2d_flash.swc 文件,点击「打开(O)」。


点击「确定」。

达到如下状态即完成。最后点击「确定」。




◆模型的读取和绘制


创建 3D 图层,用于显示 Live2D 模型。

打开项目创建时自动生成的类,进行 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 图层创建完成后,所调用的函数中需要加载模型文件和贴图,所以在这里事先用 Embed 标签把模型和贴图嵌入。

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


运行后显示出模型即为完成。




コメント