部位で異なるモーション管理を行う
最終更新： 2020年1月10日
このページでは、右手左手で異なるモーションを並列で管理することを実現するために、
LAppModel.cubismMotionManagerの保有数を増やしてLAppModel.updateに組み込む場合を例として、
管理やモーション作成上の注意点などを見ていきます。
CubismMotionManagerを増やす理由
CubismMotionManagerはフェードに対応するため一時的な複数のモーションを再生する機能があります。
しかし、再生開始のAPIは再生中のモーションをフェードアウトさせて終了するため、
並列でモーションを再生し続ける機能はありません。
この問題を解決するために、モーションマネージャのインスタンスを複数用意し、
再生させるモーションマネージャをすみ分けることによって並列でのモーション再生を実現させます。
CubismMotionManagerを増やす
モーションマネージャを追加
まずはプログラム側の実装を見ていきます。
最初に行うのはモデルへのモーション管理クラスの追加です。
サンプルのLAppModelへCubismMotionManagerを追加していきます。
コンストラクタとrelease関数にも生成と解放の処理を追加します。
export class LAppModel extends CubismUserModel {
/*省略*/
/**
* コンストラクタ
*/
public constructor()
{
super();
/*省略*/
this._rightArmMotionManager = new CubismMotionManager(); // <<<追加！
this._leftArmMotionManager = new CubismMotionManager(); // <<<追加！
}
_rightArmMotionManager: CubismMotionManager; /// <<< 追加！
_leftArmMotionManager: CubismMotionManager; /// <<< 追加！
}
更新処理
Updateの処理にも追加して再生されたモーションがパラメータに影響を与えるようにします。
public update(): void
{
/*省略*/
//--------------------------------------------------------------------------
this._model.loadParameters(); // 前回セーブされた状態をロード
if(this._motionManager.isFinished())
{
// モーションの再生がない場合、待機モーションの中からランダムで再生する
this.startRandomMotion(LAppDefine.MotionGroupIdle, LAppDefine.PriorityIdle);
}
else
{
motionUpdated = this._motionManager.updateMotion(this._model, deltaTimeSeconds); // モーションを更新
}
motionUpdated != this._rightArmMotionManager.updateMotion(this._model, deltaTimeSeconds); // <追加
motionUpdated != this._leftArmMotionManager.updateMotion(this._model, deltaTimeSeconds); // <追加
this._model.saveParameters(); // 状態を保存
//--------------------------------------------------------------------------
/*省略*/
}
LAppModel.update内部に追加するときは、_model.loadParameters()と_model.saveParameters()の間に
updateMotionを設置するようにしてください。
また、同時に複数のモーションを再生すると、2つ以上のモーションから同一のパラメータの値が更新されることがあります。
この場合、後に実行されたupdateMotionの内容が優先されます。
再生開始
そして、startMotion系のメンバ関数を複製、改造する形で追加したモーションマネージャでモーション再生を指示できるようにしておきます。
startHandMotion関数では、引数としてモーションマネージャを指定することに注意してください。
なお以下の例では、.motion3.jsonで指定されているモーション（preLoad関数でロードされるモーション）のみ再生する実装となっています。
// startMotionより複製して作成
public startHandMotion(targetManage: CubismMotionManager, group: string, no: number, priority: number): CubismMotionQueueEntryHandle
{
if(priority == LAppDefine.PriorityForce)
{
targetManage.setReservePriority(priority);
}
else if(!targetManage.reserveMotion(priority))
{
if(this._debugMode)
{
LAppPal.printLog("[APP]can't start motion.");
}
return InvalidMotionQueueEntryHandleValue;
}
const fileName: string = this._modelSetting.getMotionFileName(group, no);
//ex) idle_0
let name: string = Utiles.CubismString.getFormatedString("{0}_{1}", group, no);
let motion: CubismMotion = this._motions[name];
let autoDelete = false;
if(motion == null)
{
// preLoadで読まれていない場合は再生しない
return InvalidMotionQueueEntryHandleValue;
}
if(this._debugMode)
{
LAppPal.printLog("[APP]start motion: [{0}_{1}]", group. no);
}
return targetmanage.startMotionPriority(motion, autoDelete, priority);
}
// startRandomMotionより複製して作成
public startRandomRightHandMotion(group: string, priority: number): CubismMotionQueueEntryHandle
{
if(this._modelSetting.getMotionCount(group) == 0)
{
return InvalidMotionQueueEntryHandleValue;
}
let no: number = Math.floor(Math.random() * this._modelSetting.getMotionCount(group));
return this.startHandMotion(this._rightArmMotionManager, group, no, priority);
}
// startRandomMotionより複製して作成
public startRandomLeftHandMotion(group: string, priority: number): CubismMotionQueueEntryHandle
{
if(this._modelSetting.getMotionCount(group) == 0)
{
return InvalidMotionQueueEntryHandleValue;
}
let no: number = Math.floor(Math.random() * this._modelSetting.getMotionCount(group));
return this.startHandMotion(this._leftArmMotionManager, group, no, priority);
}
モーション再生はモデルに当たり判定を追加して、クリックによって動作するようにします。
public onTap(x: number, y: number): void
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]tap point: {x: {0} y: {1}}", x.toFixed(2), y.toFixed(2));
}
for(let i: number = 0; i < this._models.getSize(); i++)
{
if(this._models.at(i).hitTest(LAppDefine.HitAreaNameHead, x, y))
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}]", LAppDefine.HitAreaNameHead);
}
this._models.at(i).setRandomExpression();
}
else if(this._models.at(i).hitTest(LAppDefine.HitAreaNameBody, x, y))
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}]", LAppDefine.HitAreaNameBody);
}
this._models.at(i).startRandomMotion(LAppDefine.MotionGroupTapBody, LAppDefine.PriorityNormal);
}
// ここから追加
else if(this._models.at(i).hitTest("Right", x, y))
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}]", LAppDefine.HitAreaNameBody);
}
this._models.at(i).startRandomRightHandMotion("Right", LAppDefine.PriorityForce);
}
else if(this._models.at(i).hitTest("Left", x, y))
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}], LAppDefine.HitAreaNameBody");
}
this._models.at(i).startRandomLeftHandMotion("Left", LAppDefine.PriorityForce);
}
// ここまで追加
}
}
担当パラメータの振り分け
更新処理でも示したように、再生する複数のモーション間でパラメータが重複すると、後の方に実行された更新内容が優先されてパラメータが上書きされます。
このためモーションマネージャを複数使用するときには、どのモーションマネージャがどの部位の動きを担当するのか？
ひいてはどのパラメータ操作を担当するのか決めておく必要があります。
上の動画は、優先順位の高いモーションマネージャ（左腕・右腕のモーションを担当）の再生が終了した直後に、優先順位の低いモーションマネージャ（モデル全体のアイドルモーションを担当）によって左腕・右腕のパラメータが更新されてしまった事例です。
優先順位の高いモーションマネージャによって更新されるパラメータを、モーション再生終了直後の状態に維持しておきたい場合には、望ましい表現とは言えません。
この現象は、優先順位が低いモーションマネージャで再生するモーションデータ内に更新対象としては意図していないパラメータに基準値が設定されている場合に見られます。
この時、モーションデータごとに更新するパラメータを分離しておくことで、優先順位の高いモーションマネージャによって更新されるパラメータを、再生終了直後の状態に維持しておくことができます。
パラメータごとに分離しておくのか、上書きを前提とするのか、
膨大な修正をしないためにもモーションの作成前に仕様をはっきりと定めておくことが重要です。