3）ボタン追加とフレームワーク読み込み
まず、HTMLファイルにモーション再生ボタンと「Live2DFramework.js」の読み込みを追加します。
buttonタグを2つ追加（simple.html）
<button onclick="Simple.motionChange(1)">音声なしモーション</button> <button onclick="Simple.motionChange(2)">音声ありモーション</button> <br/> <canvas id="glcanvas" width = "400px" height="400px" style="border:dashed 1px #CCC"></canvas>
「Live2DFramework.js」の読み込み（simple.html）
<!-- Live2D Library --> <script src="../../lib/live2d.min.js"></script> <script src="../../framework/Live2DFramework.js"></script>
4）モーションとサウンドの定義を追加
モデル設定部分にモーションとサウンド用の変数を追加します。また、モーションファイルとサウンドファイルのパスを追加します。
変数とファイルパスを追加（Simple.js）
this.motions = []; // モーション配列
this.motionMgr = null; // モーションマネジャー
this.motionnm = 0; // モーション番号
this.sounds = []; // サウンド配列
this.soundnum = 0; // サウンド番号
/**
* Live2D モデル設定。
*/
this.modelDef = {
"type":"Live2D Model Setting",
"name":"haru",
"model":"assets/haru/haru.moc",
"textures":[
"assets/haru/haru.1024/texture_00.png",
"assets/haru/haru.1024/texture_01.png",
"assets/haru/haru.1024/texture_02.png"
],
"motions":[
"assets/haru/motions/idle_02.mtn",
"assets/haru/motions/tapBody_03.mtn",
"assets/haru/motions/tapBody_02.mtn"
],
"sounds":[
"assets/haru/sounds/tapBody_02.mp3"
]
};
5）モーションとサウンドファイルのコピー
モーションとサウンドファイルはSampleApp1からコピーしてきます。motionsとsoundsのフォルダごとコピーし「Simple¥assets¥haru」配下にペーストします。
コピー元のSampleApp1プロジェクトのフォルダ
コピー先のSampleプロジェクトのフォルダ
6）描画ループ前にモーションとサウンド読み込みを追加
モーションとサウンドを読み込み、配列に格納します。モーションファイルはコールバックで読み込みます。
モーションとサウンド読み込み（Simple.js）
// モーションの読み込み
for(var j = 0; j < modelDef.motions.length; j++){
Simple.loadBytes(modelDef.motions[j], function(buf){
motions.push(new Live2DMotion.loadMotion(buf));
});
}
motionMgr = new L2DMotionManager();
// サウンドの読み込み
for(var k = 0; k < modelDef.sounds.length; k++){
sounds.push(new Sound(modelDef.sounds[k]));
}
//------------ 描画ループ ------------
(function tick() {
7）モーションとサウンド再生を追加
キャラクターのパラメータ更新処理は不要のため、コメントアウトします。替わりにモーションとサウンド再生処理を追加します。
パラメータ更新の替わりにモーションとサウンド再生（Simple.js）
// キャラクターのパラメータを適当に更新
// var t = UtSystem.getTimeMSec() * 0.001 * 2 * Math.PI; //1秒ごとに2π(1周期)増える
// var cycle = 3.0; //パラメータが一周する時間(秒)
// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
// live2DModel.setParamFloat("PARAM_ANGLE_X", 30 * Math.sin(t/cycle));
// モーションが終了 または アイドルモーション以外ならモーション再生
if(motionMgr.isFinished() || motionnm != 0){
// モーションの再生
motionMgr.startMotion(motions[motionnm]);
// 前回のサウンド0停止
this.SoundStop(0);
// モーション2の場合、サウンド0を再生
switch(motionnm){
case 2:
// サウンド0再生
this.SoundPlay(0);
break;
}
motionnm = 0;
}
// モーションマネジャーの更新
motionMgr.updateParam(live2DModel);
// Live2Dモデルを更新して描画
live2DModel.update(); // 現在のパラメータに合わせて頂点等を計算
live2DModel.draw(); // 描画
8）モーション切り替えとサウンド管理クラスを追加
ファイルの末尾にモーション切り替えとサウンド管理クラスを追加します。サウンドはaudioタグを追加し、再生します。
モーション切り替えとサウンド再生処理の追加（Simple.js）
/*
* モーション切り替え
*/
Simple.motionChange = function(num){
motionnm = num;
}
/**
* サウンド管理クラス
*/
var Sound = function (path) {
this.snd = document.createElement("audio");
this.snd.src = path;
};
/*
* サウンド再生
*/
Simple.SoundPlay = function(num){
sounds[num].snd.play();
}
/*
* サウンド停止
*/
Simple.SoundStop = function(num){
// サウンドが再生中ならとめる
if(sounds[num].snd.paused == false){
sounds[num].snd.pause();
sounds[num].snd.currentTime = 0;
}
}
9）モーション再生の確認
以上でコード修正は完了です。ライブビューして確認してみましょう。
Sampleの実行結果
ボタンからモーションが再生できるようになり、更にキャラクターの可愛さが増しました。この可愛らしさを表現できる所がLive2Dの大きな魅力です。
最終的なコードは、記事に添付されているサンプルファイル（Simple.zip）を参照して下さい。
