模型显示位置、放大/缩小比例操作

最終更新： 2022年12月8日

由于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);