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

プロジェクトの作成

Last update: 2014/12/08

ここでは、Adobe Bracketsを使って
Live2D モデルを表示するまでの手順を説明します。
推奨環境などはSDK付属のReadMeをご覧ください。



用意するもの
  • Adobe Brackets
  • Live2D ライブラリ
  • Live2D のリソース(ダウンロードしたLive2D SDK の「lib」フォルダ)
本来は、Live2Dのリソースは作成するモデルに応じてそれぞれ用意します。
ここではサンプルプロジェクトの「ハル」のリソースを使って説明をしていきます。

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オブジェクトの準備

Live2Dモデルを表示するための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);
}


◆モデルにテクスチャ、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
Comments