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

[最終更新日:2022/10/06]

Cubism SDK for Javaは現在alpha版となっています。beta版や正式版で仕様が変わる場合もございます。

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

 

概要

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

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

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

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

 

CubismMatrix44

行列用の配列を取得

CubismMatrix44内の行列用の配列を取得するには以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::GetArray関数
  • Web(Typescript)ではCubismMatrix44.getAray関数
  • Java(alpha版)ではCubismMatrix44.getAray関数

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

 

 

行列用の配列を設定

CubismMatrix44内の行列用の配列を外部で生成した行列で上書きするには、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::SetMatrix関数
  • Web(Typescript)ではCubismMatrix44.setMatrix関数
  • Java(alpha版)ではCubismMatrix44.setMatrix関数

 

 

表示位置を移動

表示位置の平行移動には以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::Translate関数、またはCubismMatrix44::TranslateRelative関数
  • Web(Typescript)ではCubismMatrix44.translate関数、またはCubismMatrix44.translateRelative関数
  • Java(alpha版)ではCubismMatrix44.translate関数、またはCubismMatrix44.translateRelative関数

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

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

 

 

表示倍率を拡大/縮小

表示倍率の拡大縮小には、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::Scale関数、またはCubismMatrix44::ScaleRelative関数
  • Web(Typescript)ではCubismMatrix44.scale関数、またはCubismMatrix44.scaleRelative関数
  • Java(alpha版)ではCubismMatrix44.scale関数、またはCubismMatrix44.scaleRelative関数

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

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

 

 

座標の取得

行列で変換した座標を取得する場合、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::TransformX関数、またはCubismMatrix44::TransformY関数
  • Web(Typescript)ではCubismMatrix44.transformX関数、またはCubismMatrix44.transformY関数
  • Java(alpha版)ではCubismMatrix44.transformX関数、またはCubismMatrix44.transformY関数

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

 

行列で逆変換した座標を取得する場合は、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::InvertTransformX関数、またはCubismMatrix44::InvertTransformY関数
  • Web(Typescript)ではCubismMatrix44.invertTransformX関数、またはCubismMatrix44.invertTransformY関数
  • Java(alpha版)ではCubismMatrix44.invertTransformX関数、またはCubismMatrix44.invertTransformY関数

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

 

 

行列同士の計算

行列同士を計算させるには、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismMatrix44::Multiply関数、またはCubismMatrix44::MultiplyByMatrix関数
  • Web(Typescript)ではCubismMatrix44.multiply関数、またはCubismMatrix44.multiplyByMatrix関数
  • Java(alpha版)ではCubismMatrix44.multiply関数、またはCubismMatrix44.multiplyByMatrix関数

 

 

CubismModelMatrix

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

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

 

インスタンスの生成

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

 

 

model3.jsonのLayoutを適用

model3.jsonには、モデルのレイアウト情報を記述することができます。
こちらを用いてモデルの位置や拡縮を設定する場合、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismModelMatrix::SetupFromLayout関数
  • Web(Typescript)ではCubismModelMatrix.setupFromLayout関数
  • Java(alpha版)ではCubismModelMatrix.setupFromLayout関数

 

 

モデルの表示位置操作

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

 

 

モデルの表示サイズ操作

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

 

 

 

 

CubismViewMatrix

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

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

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

 

カメラの移動

カメラ(画面)の移動を行う場合、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismViewMatrix::AdjustTranslate関数
  • Web(Typescript)ではCubismViewMatrix.adjustTranslate関数
  • Java(alpha版)ではCubismViewMatrix.adjustTranslate関数

引数に渡す移動量はスクリーン座標です。

 

 

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

カメラの倍率を使用して拡縮をする場合、以下のいずれかの関数を使用します。

  • Native(C++)ではCubismViewMatrix::AdjustScale関数
  • Web(Typescript)ではCubismViewMatrix.adjustScale関数
  • Java(alpha版)ではCubismViewMatrix.adjustScale関数

第1引数、第2引数に渡す座標を中心に拡縮します。

© 2010 - 2022 Live2D Inc.