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

最終更新： 2023年1月26日

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ではCubismMatrix44.getAray関数

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

csmFloat32* matrixArray = cubismMatrix44->GetArray();

let matrixArray = mubismmatrix44.getAray();

float[] matrixArray = CubismMatrix.getArray();

行列用の配列を設定

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

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

csmFloat32* matrixArray;

cubismMatrix44->SetMatrix(matrixArray);

let matrixArray: Float32Array;

cubismMatrix44.setMatrix(matrixArray);

CubismMatrix44 cubismMatrix44 = CubismMatrix.create();
float[] matrixArray = new float[16]

for (int i = 0; i < 16; i++) {
  matrixArray[i] = 0.5f;
}

cubismMatrix44.setMatrix(matrixArray);

表示位置を移動

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

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

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

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

cubismMatrix44->Translate(translateX, translateY);

cubismMatrix44->TranslateRelative(translateX, translateY);

cubismMatrix44.translate(translateX, translateY);

cubismMatrix44.translateRelative(translateX, translateY);

cubismMatrix44.translate(translateX, translateY);

cubismMatrix44.translateRelative(translateX, translateY);

表示倍率を拡大／縮小

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

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

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

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

cubismMatrix44->Scale(scaleX, scaleY);

cubismMatrix44->ScaleRelative(scaleX, scaleY);

cubismMatrix44.scale(scaleX, scaleY);

cubismMatrix44.scaleRelative(scaleX, scaleY);

cubismMatrix44.scale(scaleX, scaleY);

cubismMatrix.scaleRelative(scaleX, scaleY);

座標の取得

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

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

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

csmFloat32 positionX = cubismMatrix44->TransformX(localX);
csmFloat32 positionY = cubismMatrix44->TransformY(localY);

let positionX: number = cubismMatrix44.transformX(localX);
let positionY: number = cubismMatrix44.transformY(localY);

float positionX = cubismMatrix44.transformX(localX);
float positionY = cubismMatrix44.transformY(localY);

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

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

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

csmFloat32 localX = cubismMatrix44->InvertTransformX(inputPositionX);
csmFloat32 localY = cubismMatrix44->InvertTransformY(inputPositionY);

let localX: number = cubismMatrix44.invertTransformX(inputPositionX);
let localY: number = cubismMatrix44.invertTransformY(inputPositionY);

float localX = cubismMatrix44.invertTransformX(inputPositionX);
float localY = cubismMatrix44.invertTransformY(inputPositionY);

行列同士の計算

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

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

CubismMatrix44* matrixA, matrixB;

// 以下はいずれも同一の処理。

CubismMatrix44::Multiply(matrixA->GetArray(), matrixB->GetArray(), matrixA->GetArray());

matrixA->MultiplyByMatrix(matrixB);

let matrixA, matrixB: CubismMatrix44;

// 以下はいずれも同一の処理。

CubismMatrix44.multiply(matrixA->GetArray(), matrixB->GetArray(), matrixA->GetArray());

matrixA.multiplyByMatrix(matrixB);

CubismMatrix44 matrixA = CubismMatrix44.create();
CubismMatrix44 matrixB = CubismMatrix44.create();

// 以下はいずれも同一の処理

CubismMatrix44.multiply(matrixA.getArray(), matrixB.getArray(), matrixA.getArray());

matrixA.multiplyByMatrix(matrixB);

CubismModelMatrix

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

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

インスタンスの生成

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

CubismModel* cubismModel;
CubismModelMatrix* cubismModelMatrix;

cubismModelMatrix = new CubismModelMatrix(cubismModel->GetCanvasWidth(), cubismModel->GetCanvasHeight());

let cubismModel: CubismModel;
let cubismModelMatrix: CubismModelMatrix;

cubismModelMatrix = new CubismModelMatrix(cubismModel.getCanvasWidth(), cubismModel.getCanvasHeight());

// CubismModel生成処理は省略
CubismModelMatrix cubismModelMatrix;

cubismModelMatrix = CubismModelMatrix.create(cubismModel.getCanvasWidth(), cubismModel.getCanvasHeight());

model3.jsonのLayoutを適用

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

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

CubismModelSettingJson* model3Json;

csmMap<csmString, csmFloat32> layout;
model3Json->GetLayoutMap(layout);

// モデルのレイアウトを設定。
cubismModelMatrix->SetupFromLayout(layout);

let model3Json: CubismModelSettingJson;

let layout: csmMap<string, number>
model3Json.getLayoutMap(layout);

// モデルのレイアウトを設定。
cubismModelMatrix.setupFromLayout(layout);

CubismModelSettingJson model3Json;
Map<String, Float> layout = new HashMap<String, Float>();
model3Json.getLayoutMap(layout);
 
// モデルのレイアウトを設定
cubismModelMatrix.setupFromLayout(layout);

モデルの表示位置操作

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

// モデルのキャンバスの上辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix::Bottom()とは共存できず、後に設定されたほうで上書きされる。
void Top(csmFloat32 y);

// モデルのキャンバスの下辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix::Top()とは共存できず、後に設定されたほうで上書きされる。
void Bottom(csmFloat32 y);


// モデルのキャンバスの右辺（画面向かって右側）が引数で指定したX軸の座標になるように配置。CubismModelMatrix::Left()とは共存できず、後に設定されたほうで上書きされる。
void Right(csmFloat32 x);

// モデルのキャンバスの左辺が引数で指定したX軸の座標になるように配置。CubismModelMatrix::Right()とは共存できず、後に設定されたほうで上書きされる。
void Left(csmFloat32 x);


// モデルの原点が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
void SetPosition(csmFloat32 x, csmFloat32 y);

// モデルのキャンバスの中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。これを呼び出す前にキャンバスの高さ、幅を設定する必要がある。
void SetCenterPosition(csmFloat32 x, csmFloat32 y);


// モデルのキャンバスのY軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
void CenterX(csmFloat32 x);

// モデルのキャンバスのX軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
void SetY(csmFloat32 y);

// モデルのキャンバスの上辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix::Bottom()とは共存できず、後に設定されたほうで上書きされる。
public top(csmFloat32 y): void

// モデルのキャンバスの下辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix::Top()とは共存できず、後に設定されたほうで上書きされる。
public bottom(csmFloat32 y): void


// モデルのキャンバスの右辺（画面向かって右側）が引数で指定したX軸の座標になるように配置。CubismModelMatrix::Left()とは共存できず、後に設定されたほうで上書きされる。
public right(csmFloat32 x): void

// モデルのキャンバスの左辺が引数で指定したX軸の座標になるように配置。CubismModelMatrix::Right()とは共存できず、後に設定されたほうで上書きされる。
public left(csmFloat32 x): void


// モデルの原点が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public setPosition(csmFloat32 x, csmFloat32 y): void

// モデルのキャンバスの中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。これを呼び出す前にキャンバスの高さ、幅を設定する必要がある。
public setCenterPosition(csmFloat32 x, csmFloat32 y): void


// モデルのキャンバスのY軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public centerX(csmFloat32 x): void

// モデルのキャンバスのX軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public setY(csmFloat32 y): void

// モデルのキャンバスの上辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix.bottom()とは共存できず、後に設定された方で上書きされる。
public void top(float y) {...}

// モデルのキャンバスの下辺が引数で指定したY軸の座標になるように配置。CubismModelMatrix.top()とは共存できず、後に設定された方で上書きされる。
public void bottom(float y) {...}

// モデルのキャンバスの右辺(画面向かって右側)が引数で指定したX軸の座標になるように配置。CubismModelMatrix.left()とは共存できず、後に設定された方で上書きされる。
public void right(float y) {...}

// モデルのキャンバスの左辺(画面向かって左側)が引数で指定したX軸の座標になるように配置。CubismModelMatrix.right()とは共存できず、後に設定された方で上書きされる。
public void left(float y) {...}

// モデルの原点が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public void setPosition(float x, float y) {...}

// モデルのキャンバスの中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。これを呼び出す前にキャンバスの高さ、幅を設定する必要がある。
public void setCenterPosition(float x, float y) {...}

// モデルのキャンバスのX軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public void centerX(float x) {...}

// モデルのキャンバスのX軸が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public void setX(float x) {...}

// モデルのキャンバスのY軸の中心が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public void centerY(float y) {...}

// モデルのキャンバスのY軸が引数の座標になるよう配置。引数で渡す座標はワールド座標のものとして扱う。
public void setY(float y) {...}

モデルの表示サイズ操作

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

// モデルの縦横比を維持したままキャンバスの横幅を引数で指定した値になるようスケールさせる。
cubismModelMatrix->SetWidth(w);

// モデルの縦横比を維持したままキャンバスの高さを引数で指定した値になるようスケールさせる。
cubismModelMatrix->SetHeight(h);

// モデルの縦横比を維持したままキャンバスの横幅を引数で指定した値になるようスケールさせる。
cubismModelMatrix.setWidth(w);

// モデルの縦横比を維持したままキャンバスの高さを引数で指定した値になるようスケールさせる。
cubismModelMatrix.setHeight(h);

// モデルの縦横比を維持したままキャンバスの横幅を引数で指定した値になるようスケールさせる。
cubismModelMatrix.setWidth(w);

// モデルの縦横比を維持したままキャンバスの高さを引数で指定した値になるようスケールさせる。
cubismModelMatrix.setHeight(h)

CubismViewMatrix

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

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

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

カメラの移動

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

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

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

cubismViewMatrix->AdjustTranslate(x, y);

cubismViewMatrix.adjustTranslate(x, y);

cubismViewMatrix.adjustTranslate(x, y);

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

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

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

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

cubismViewMatrix->AdjustScale(centerX, centerY, scale);

cubismViewMatrix.adjustScale(centerX, centerY, scale);

cubismViewMatrix.adjustScale(centerX, centerY, scale);