Edited at

ツクールMVでLive2D組み込んでみた

More than 1 year has passed since last update.

何番煎じかわからないし、こういう「使ってみた」系の記事は検索で邪魔になるとまで言われますが、書きます。

自分が使ってエラーが起きた部分をまとめます。

動くこと第一なので、処理の正しさは追及しません。

まずツクマテからサンプルプロジェクトをダウンロードしましょう。

さらに、ダウンロード後もあれこれ作業が必要です。


PlatformManager.prototype.loadBytes

ローカル環境で実行すると、request.statusに0が入ってしまい、エラーと認識されます。

しかし、ここで無視してcallback()にパラメータを渡すと動きます。

ローカル環境で動かすためのパラメータあれこれもあるでしょうが、飛ばします。


PlatformManager.js

PlatformManager.prototype.loadBytes       = function(path/*String*/, callback)

{
var request = new XMLHttpRequest();
request.open("GET", path, true);
request.responseType = "arraybuffer";
request.onload = function(){
switch(request.status){
case 0:
callback(request.response);

case 200:
callback(request.response);
break;
default:
console.error("Failed to load (" + request.status + ") : " + path);
break;
}
}
request.send(null);
//return request;
}



PlatformManager.prototype.loadTexture


PlatformManager.js

//第一引数のglが追加部分です

PlatformManager.prototype.loadTexture = function(gl,model/*ALive2DModel*/, no/*int*/, path/*String*/, callback)
{
// load textures
var loadedImage = new Image();
loadedImage.src = path;

var thisRef = this;
loadedImage.onload = function() {

// create texture
//var canvas = document.getElementById("glcanvas");
//var gl = getWebGLContext(canvas, {premultipliedAlpha : true});
var texture = gl.createTexture(); // テクスチャオブジェクトを作成する
if (!texture){ console.error("Failed to generate gl texture name."); return -1; }

//中略
gl.generateMipmap(gl.TEXTURE_2D);

// 画像からWebGLテクスチャ化を生成し、モデルに登録
model.setTexture(no, texture);// モデルにテクスチャをセット

//読み込み終わったので、戻す
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false)
// テクスチャオブジェクトを解放
texture = null;

if (typeof callback == "function") callback();
};

loadedImage.onerror = function() {
console.error("Failed to load image : " + path);
}
}


Live2Dにテクスチャを渡すためのコンテキストを送り込む必要があります。

ツクールMVのindex.htmlにはglcanvas要素が存在せず、実行時にWebGLを使うか使わないかを決めています。

そのため、document.getElementById("glcanvas")が失敗したのかnullが返ってきて、そのあとのgetWebGLContext(canvas, {premultipliedAlpha : true});が失敗してしまいます。

今回は動くことを第一に細かいことを考えずに上から引数で渡すことにします。

(本当はPremultipliedの関係で、このやり方は良くないみたいですが、PIXI側と競合すると面倒なのでこれで行きます。)

PlatformManager.prototype.loadTexture()でブレークポイントを設置してコールスタックを見ると、以下のようになっています。

最後の数字は行番号ですので、編集結果によって異なる数値になります。

PlatformManager.loadTexture (PlatformManager.js:78)

L2DBaseModel.loadTexture (Live2DFramework.js:208)

(anonymous function) (Live2DModelElement.js:339)

(anonymous function)(Live2DFramework.js:191)

(anonymous function)(PlatformManager.js:67)

request.onload (PlatformManager.js:31)

(anonymous function)とは、コールバック用に用意された匿名関数です。

ただ、行数でおおよその位置はわかります。

こんな感じで処理が行われているのですが、この中で確実にGLのコンテキストがある場所がLive2DModelElement.prototype.load()なので、ここから下へ送りこんでいきます。


必要なファイルをダウンロードする

公式で配布されているファイルです。(再配布禁止のファイル)

http://sites.cybernoids.jp/cubism-sdk2/webgl2-1

古いバージョンですが、今回はこちらを使います。


live2D.min.jsを組み込む

二重拡張子になっていて厄介ですので、live2D_min.jsという名前で空の.jsファイルを作成し、そこへコピペしましょう。

中身は複雑な呪文が書き込まれていますが、emscriptionで自動生成されたコードなので人間が読むものではありません。


PlatformManagerを組み込む

サンプル内のLive2D_SDK_WebGL_2.1.00_1_jp\sample\sampleApp1\src\にあるPlatformManager.jsをプロジェクトへ追加します。

そして以下の記述をLive2DFramework.jsの最期の行に追加しましょう。

```js:Live2DFramework.js

Live2DFramework.setPlatformManager(new PlatformManager());