モデルの表示位置、拡大・縮小率の操作

[最終更新日:2020/01/30]

Live2Dは描画にポリゴンを使用しているため、描画時に3DCGと同じく行列を使用しております。
この記事ではCubism SDKのサンプルプログラムで行列を扱う方法について説明します。
行列自体についての説明は扱いません。

 

概要

Cubism SDK上で行列の計算をする場合、CubismMatrix44、またはそれを継承したクラスを用います。

CubismMatrix44内部に4*4の行列用の配列を保持しております。
配列の要素の並び順はOpenGLに準拠しております。

CubismMatrix44やその継承したクラスでは、回転やZ軸の移動や拡大・縮小率操作に対応しておりません。

ただし、レンダラへ渡す際にGMatrix44へ変換されるのであれば、サードパ-ティの行列計算ライブラリで処理させることも可能です。

 

CubismMatrix44

行列用の配列を取得

CubismMatrix44内の行列用の配列を取得するには、NativeではCubismMatrix44::GetArray()、WebではCubismMatrix44.getAray()を使用します。

CubismMatrix44::GetArray()、CubismMatrix44.getAray()は、レンダラへ渡す行列の配列を取得するとき等に使用します。

 

 

行列用の配列を設定

CubismMatrix44内の行列用の配列を外部で生成した行列で上書きするには、NativeではCubismMatrix44::SetMatrix()を、WebではCubismMatrix44.setMatrix()を使用します。

 

 

表示位置を移動

表示位置の平行移動には、NativeではCubismMatrix44::Translate()、またはCubismMatrix44::TranslateRelative()を、WebではCubismMatrix44.translate()を、またはCubismMatrix44.translateRelative()を使用します。

引数で設定する座標はいずれもスクリーン座標系になります。

CubismMatrix44::Translate()、CubismMatrix44.translate()は、現在の座標を引数で上書きします。
CubismMatrix44::TranslateRelative()、CubismMatrix44.translateRelative()は、現在の座標から引数の分だけ相対的に平行移動させます。

 

 

表示倍率を拡大/縮小

表示倍率の拡大縮小には、NativeではCubismMatrix44::Scale()、またはCubismMatrix44::ScaleRelative()を、WebではCubismMatrix44.scale()、またはCubismMatrix44.scaleRelative()を使用します。

CubismMatrix44::Scale()、CubismMatrix44.scale()は、現在の表示倍率を引数で上書きします。
CubismMatrix44::ScaleRelative()、CubismMatrix44.scaleRelative()は、現在の表示倍率を引数の値で相対的に倍率を設定します。

表示倍率に1が設定された場合、モデルのオリジナルのサイズになります。

 

 

座標の取得

行列で変換した座標を取得する場合、NativeではCubismMatrix44::TransformX(), CubismMatrix44::TransformY()を、WebではCubismMatrix44.transformX(), CubismMatrix44.transformY()を使用します。

ローカル座標系のモデルの頂点座標から画面上の位置を取得する場合などに使用します。

 

行列で逆変換した座標を取得する場合は、NativeではCubismMatrix44::InvertTransformX(), CubismMatrix44::InvertTransformY()を、WebではCubismMatrix44.invertTransformX(), CubismMatrix44.invertTransformY()を使用します。

当たり判定等、画面の座標系に入力された座標からモデルのローカル座標系での座標を取得する際に使用します。

 

 

行列同士の計算

行列同士を計算させるには、NativeではCubismMatrix44::Multiply()、CubismMatrix44::MultiplyByMatrix()を、WebではCubismMatrix44.multiply()、CubismMatrix44.multiplyByMatrix()を使用します。

 

 

CubismModelMatrix

CubismMatrix44を継承したクラスです。
モデル座標の設定を目的としており、表示位置を辺や中心点から設定できたり、高さや幅によって表示倍率を操作することができます。

Cubism SDKのサンプルでは、Cubismモデルのキャンバスの高さを画面全体に表示します。

 

インスタンスの生成

CubismModelMatrixは、インスタンス生成時にモデルのキャンバスサイズを設定する必要があります。

 

 

model3.jsonのLayoutを適用

model3.jsonには、モデルのレイアウト情報を記述することができます。
こちらを用いてモデルの位置や拡縮を設定する場合、NativeではCubismModelMatrix::SetupFromLayout()を、WebではCubismModelMatrix.setupFromLayout()を使用します。

 

 

モデルの表示位置操作

CubismModelMatrixでは、キャンバスの各辺や中心等を基準に座標を設定することができます。

 

 

モデルの表示サイズ操作

CubismModelMatrixには、モデルの縦横比を維持したまま拡大縮小率を操作できます。

 

 

 

 

CubismViewMatrix

CubismMatrix44を継承したクラスです。
カメラの位置変更やズームなどによる利用を目的としております。

Cubism SDKのサンプルでは、描画範囲のサイズから行列を作成しています。

CubismViewMatrix内で扱う変換行列は平行投影が想定されています。

 

カメラの移動

カメラ(画面)の移動を行う場合、NativeではCubismViewMatrix::AdjustTranslate()を、WebではCubismViewMatrix.adjustTranslate()を使用します。
引数に渡す移動量はスクリーン座標です。

 

 

カメラのズームイン、ズームアウト

カメラの倍率を使用して拡縮をする場合、NativeではCubismViewMatrix::AdjustScale()を、WebではCubismViewMatrix.adjustScale()を使用します。
第1引数、第2引数に渡す座標を中心に拡縮します。

© 2010 - 2021 Live2D Inc.