Manipulate the display position and zoom rate of the model

[Last update: 01/30/2020]

Since Live2D uses polygons for rendering, it uses matrices as in 3DCG when rendering.
This article describes how to handle matrices in Cubism SDK sample programs.
We will not deal with the description of the matrix itself.



To perform matrix calculations on the Cubism SDK, use CubismMatrix44 or a class that extends it.

CubismMatrix44 internally holds an array for 4*4 matrices.
The order of array elements conforms to OpenGL.

CubismMatrix44 and its inherited classes do not support rotation, Z-axis movement, or scaling rate operations.

However, if the data is converted to GMatrix44 when passed to the renderer, it can be processed by a third-party matrix calculation library.



Get array for matrix

To get the array for a matrix in CubismMatrix44, use CubismMatrix44::GetArray() in Native or CubismMatrix44.getAray() in Web.

CubismMatrix44::GetArray() and CubismMatrix44.getAray() are used to get an array of matrices to be passed to the renderer.



Set array for matrix

To overwrite the array for the matrix in CubismMatrix44 with an externally generated matrix, use CubismMatrix44::SetMatrix() in Native and CubismMatrix44.setMatrix() in Web.



Move display position

To translate the display position, use CubismMatrix44::Translate() or CubismMatrix44::TranslateRelative() for Native and CubismMatrix44.translate() or CubismMatrix44.translateRelative() for Web.

The coordinates set in the arguments are all in the screen coordinate system.

CubismMatrix44::Translate() and CubismMatrix44.translate() overwrite the current coordinates with their arguments.
CubismMatrix44::TranslateRelative() and CubismMatrix44.translateRelative() translate relative to the current coordinates by the argument.



Zoom in/out on display magnification

To scale the display magnification, use CubismMatrix44::Scale() or CubismMatrix44::ScaleRelative() for Native and CubismMatrix44.scale() or CubismMatrix44.scaleRelative() for Web.

CubismMatrix44::Scale() and CubismMatrix44.scale() override the current display scale factor with an argument.
CubismMatrix44::ScaleRelative() and CubismMatrix44.scaleRelative() set the current display magnification relative to the value of the argument.

If 1 is set for the display magnification, it will be the original size of the model.



Obtaining coordinates

To get the transformed coordinates by matrix, use CubismMatrix44::TransformX() and CubismMatrix44::TransformY() in Native and CubismMatrix44.transformX() and CubismMatrix44.transformY() in Web.

It is used, for example, to obtain the position on the screen from the vertex coordinates of a model in the local coordinate system.


To get the inverted transformed coordinates by matrix, use CubismMatrix44::InvertTransformX() and CubismMatrix44::InvertTransformY() for Native and CubismMatrix44.invertTransformX() and CubismMatrix44.invertTransformY() for Web.

Used to obtain the coordinates in the model's local coordinate system from the coordinates entered in the screen coordinate system, such as in a hit decision.



Matrix-to-Matrix Calculations

To compute matrices against each other, use CubismMatrix44::Multiply() and CubismMatrix44::MultiplyByMatrix() for Native and CubismMatrix44.multiply() and CubismMatrix44.multiplyByMatrix() for Web.




This class inherits from CubismMatrix44.
It is intended for setting model coordinates, allowing the display position to be set from an edge or center point, and manipulating the display magnification by height and width.

The Cubism SDK sample displays the height of the Cubism model canvas across the entire screen.


Instance Creation

CubismModelMatrix requires that the model canvas size be set at instantiation.



Apply Layout in model3.json

model3.json can describe the layout information of the model.
To set the model position and scaling using this method, use CubismModelMatrix::SetupFromLayout() in Native and CubismModelMatrix.setupFromLayout() in Web.



Model display position manipulation

CubismModelMatrix allows you to set coordinates based on each edge, center, etc. of the canvas.



Model display size manipulation

CubismModelMatrix has a scaling factor that can be manipulated while maintaining the model's aspect ratio.






This class inherits from CubismMatrix44.
The camera is intended to be used by changing its position and zooming.

The Cubism SDK sample creates a matrix from the size of the drawing area.

The transformation matrices handled within CubismViewMatrix are assumed to be parallel projections.


Camera Movement

To move the camera (screen), use CubismViewMatrix::AdjustTranslate() in Native and CubismViewMatrix.adjustTranslate() in Web.
The amount of movement passed as an argument is the screen coordinates.



Zoom in and out of camera

To scale using the camera's magnification, use CubismViewMatrix::AdjustScale() in Native and CubismViewMatrix.adjustScale() in Web.
Scale around the coordinates passed as the first and second arguments.

© 2010 - 2022 Live2D Inc.