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

创建项目

Last update: 2014/12/08

这里介绍在 Adobe Brackets 中,从创建项目到显示出 Live2D 模型的步骤。
推荐环境请参照 SDK 的 ReadMe 文件。



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

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



创建项目和预先准备

创建项目所需的文件夹(这里命名为 Live2DSample)
把库文件( lib 文件夹)和资源(assets)复制进去。
创建 src 文件夹,用来存放源码。


◯Adobe Brackets

点击菜单栏「打开文件夹...」,打开项目文件夹。





◆显示模型的流程
  1. 获得 Canvas 对象
  2. 生成 WebGL对象
  3. Live2D 初始化
  4. 对 live2DModel 设置贴图、WebGL对象、矩阵
  5. 更新 live2DModel 并绘制

◆Canvas 对象和 WebGL对象的准备

获得 Canvas 对象,用于显示模型
1
2
// 初始化Canvas
var canvas = initCanvas("glcanvas");


用获得的 Canvas 对象创建 WebGL 对象。

1
2
// 获得WebGL上下文
var gl = getWebGLContext(canvas);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getWebGLContext(canvas) {
    "use strict";
   
    var NAMES = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
       
    for( var i = 0; i < NAMES.length; i++ ){
        try{
            var ctx = canvas.getContext(NAMES[i]);
            if( ctx ) return ctx;
        }
        catch(e){
            console.error(e);
        }
    }
       
    return null;
};


◆Live2D 的初始化和 Image 对象(贴图用)的创建

Live2D.init()初始化后,准备模型对象和 Image 对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Live2D初始化
Live2D.init();
   
// 从moc文件读取Live2D模型对象
loadBytes(modelDef.model, function(buf){
    live2DModel = Live2DModelWebGL.loadModel(buf);
});
   
// 读取贴图
var loadCount = 0;
for(var i = 0; i < modelDef.textures.length; i++){
    // 把i值累加至tno(用在 onerror)
    (function (tno){
        loadedImages[tno] = new Image();
        loadedImages[tno].src = modelDef.textures[tno];
        loadedImages[tno].onload = function(){
            if((++loadCount) == modelDef.textures.length) {
                loadLive2DCompleted = true; //全部读取完毕
            }
        }
        loadedImages[tno].onerror = function() {
            console.error("Failed to load image : " +
                          modelDef.textures[tno]);
        }
    })(i);
}


◆对 live2DModel 设置贴图、WebGL对象、矩阵

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
initLive2DCompleted = true;
   
// 从图像生成WebGL贴图,添加到模型中
for(var i = 0; i < loadedImages.length; i++){
    // 从Image类型对象生成贴图
    var texName = createTexture(gl, loadedImages[i]);
    //把贴图添加到模型中
    live2DModel.setTexture(i, texName);
}
   
// 清空贴图原文件的引用
loadedImages = null;
   
// 设置WebGL上下文
live2DModel.setGL(gl);
   
// 定义数组,用于存放模型位置
// canvas宽度设置在-1..1区间
var s = 2.0 / live2DModel.getCanvasWidth();
var matrix4x4 = [s, 0, 0, 0,
                 0, -s, 0, 0,
                 0, 0, 1, 0,
                 -1, 1, 0, 1];
live2DModel.setMatrix(matrix4x4);


◆模型的更新和绘制

模型设置完成后调用 update()、draw()。

1
2
3
// 更新Live2D模型,绘制
live2DModel.update(); // 根据当前参数,计算出顶点等值
live2DModel.draw(); // 绘制


◆源码和运行结果

最终代码和运行结果如下。

◯ HTML

◯ Javascript

◯ 运行结果





サブページ (2): index.html main.js
コメント