Live2D로 위치와 크기 조정
지금까지 자기 흐름으로 위치와 사이즈 조정하고 있었지만, 올바른 방법을 겨우 이해할 수있었습니다!
자세한 내용은 Live2D 커뮤니티에 기록되어 있습니다.
→ → Unity에서 Live2D 모델을 표시했을 때의 확축률은?
개발 환경
· Live2D Cubism SDK WebGL 2.0의 Simple 프로젝트 사용자 정의
WebGL 버전을 사용하지만 다른 플랫폼에서도 거의 유사합니다.
소스 코드
먼저 HTML 부분에 Live2DFramework.js를 추가합니다. 여기에 포함된 L2DMatrix44 클래스를 사용합니다.
simple.html의 12행당<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
Simple.draw() 부분의 행렬 부분을 다음과 같이 수정합니다.
setWidth()로 사이즈 조정, setCenterPosition()로 위치 조정을 할 수 있습니다!
요컨대 setWidth() 등의 반환값(행렬)을 배열로 변환해, 배열을 세트 해 주는 것 뿐입니다.
Simple.js의 150행당// 表示位置を指定するための行列を定義する
// var s = 2.0 / live2DModel.getCanvasWidth(); //canvasの横幅を-1..1区間に収める
// var matrix4x4 = [
// s, 0, 0, 0,
// 0,-s, 0, 0,
// 0, 0, 1, 0,
// -1, 1, 0, 1
// ];
// live2DModel.setMatrix(matrix4x4);
// 描画してるLive2Dモデルのサイズを取得
var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
// Live2D用の行列定義
var mmat = new L2DModelMatrix(width, height);
// サイズ(幅)
mmat.setWidth(2.0);
// ポジション(X, Y)
mmat.setCenterPosition(0.0, 0.0);
// 配列をセット
live2DModel.setMatrix(mmat.getArray());
슬라이더로 움직여보세요
슬라이더를 붙이면 이런 느낌으로 조작할 수 있습니다.
HTML 측에는 슬라이더를 붙입니다.
simple.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D Simple</title>
</meta>
</head>
<body onload="Simple()">
<canvas id="glcanvas" width = "400px" height="400px" style="border:dashed 1px #CCC"></canvas>
<div id="myconsole" style="color:#BBB">---- Log ----</div>
サイズ(幅)<input type="range" id="L2D_WIDTH" value="2.0" min="0.0" max="5.0" step="0.1">
<br>
位置X<input type="range" id="L2D_X" value="0.0" min="-3.0" max="3.0" step="0.1">
<br>
位置Y<input type="range" id="L2D_Y" value="0.0" min="-3.0" max="3.0" step="0.1">
<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
</body>
</html>
슬라이더로 동적으로 위치나 사이즈를 바꾸는 경우, 방금전과 달리 Live2D 초기화 처리의 괄호 밖에서 실시합니다.
Simple.js의 150행당var l2d_scale, l2d_x, l2d_y; // スライダー用
Simple.draw = function(gl/*WebGLコンテキスト*/)
{
// Canvasをクリアする
gl.clear(gl.COLOR_BUFFER_BIT);
// Live2D初期化
if( ! live2DModel || ! loadLive2DCompleted )
return; //ロードが完了していないので何もしないで返る
// ロード完了後に初回のみ初期化する
if( ! initLive2DCompleted ){
initLive2DCompleted = true;
// 画像からWebGLテクスチャを生成し、モデルに登録
for( var i = 0; i < loadedImages.length; i++ ){
//Image型オブジェクトからテクスチャを生成
var texName = Simple.createTexture(gl, loadedImages[i]);
live2DModel.setTexture(i, texName); //モデルにテクスチャをセット
}
// テクスチャの元画像の参照をクリア
loadedImages = null;
// OpenGLのコンテキストをセット
live2DModel.setGL(gl);
// スライダーを取得
l2d_scale = document.getElementById("L2D_WIDTH");
l2d_x = document.getElementById("L2D_X");
l2d_y = document.getElementById("L2D_Y");
// 表示位置を指定するための行列を定義する
// var s = 2.0 / live2DModel.getCanvasWidth(); //canvasの横幅を-1..1区間に収める
// var matrix4x4 = [
// s, 0, 0, 0,
// 0,-s, 0, 0,
// 0, 0, 1, 0,
// -1, 1, 0, 1
// ];
// live2DModel.setMatrix(matrix4x4);
//
}
// 描画してるLive2Dモデルのサイズを取得
var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
// Live2D用の行列定義
var mmat = new L2DModelMatrix(width, height);
// サイズ(幅)
mmat.setWidth(l2d_scale.value);
// ポジション(X, Y)
mmat.setCenterPosition(l2d_x.value, l2d_y.value);
// 配列をセット
live2DModel.setMatrix(mmat.getArray());
// キャラクターのパラメータを適当に更新
var t = UtSystem.getTimeMSec() * 0.001 * 2 * Math.PI; //1秒ごとに2π(1周期)増える
var cycle = 3.0; //パラメータが一周する時間(秒)
// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
live2DModel.setParamFloat("PARAM_ANGLE_X", 30 * Math.sin(t/cycle));
// Live2Dモデルを更新して描画
live2DModel.update(); // 現在のパラメータに合わせて頂点等を計算
live2DModel.draw(); // 描画
};
지금까지 어떻게 하는지 의문이었지만, 하나 깔끔했다.
Reference
이 문제에 관하여(Live2D로 위치와 크기 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naotaro0123/items/013a9731755cb0a0537a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
먼저 HTML 부분에 Live2DFramework.js를 추가합니다. 여기에 포함된 L2DMatrix44 클래스를 사용합니다.
simple.html의 12행당
<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
Simple.draw() 부분의 행렬 부분을 다음과 같이 수정합니다.
setWidth()로 사이즈 조정, setCenterPosition()로 위치 조정을 할 수 있습니다!
요컨대 setWidth() 등의 반환값(행렬)을 배열로 변환해, 배열을 세트 해 주는 것 뿐입니다.
Simple.js의 150행당
// 表示位置を指定するための行列を定義する
// var s = 2.0 / live2DModel.getCanvasWidth(); //canvasの横幅を-1..1区間に収める
// var matrix4x4 = [
// s, 0, 0, 0,
// 0,-s, 0, 0,
// 0, 0, 1, 0,
// -1, 1, 0, 1
// ];
// live2DModel.setMatrix(matrix4x4);
// 描画してるLive2Dモデルのサイズを取得
var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
// Live2D用の行列定義
var mmat = new L2DModelMatrix(width, height);
// サイズ(幅)
mmat.setWidth(2.0);
// ポジション(X, Y)
mmat.setCenterPosition(0.0, 0.0);
// 配列をセット
live2DModel.setMatrix(mmat.getArray());
슬라이더로 움직여보세요
슬라이더를 붙이면 이런 느낌으로 조작할 수 있습니다.
HTML 측에는 슬라이더를 붙입니다.
simple.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D Simple</title>
</meta>
</head>
<body onload="Simple()">
<canvas id="glcanvas" width = "400px" height="400px" style="border:dashed 1px #CCC"></canvas>
<div id="myconsole" style="color:#BBB">---- Log ----</div>
サイズ(幅)<input type="range" id="L2D_WIDTH" value="2.0" min="0.0" max="5.0" step="0.1">
<br>
位置X<input type="range" id="L2D_X" value="0.0" min="-3.0" max="3.0" step="0.1">
<br>
位置Y<input type="range" id="L2D_Y" value="0.0" min="-3.0" max="3.0" step="0.1">
<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
</body>
</html>
슬라이더로 동적으로 위치나 사이즈를 바꾸는 경우, 방금전과 달리 Live2D 초기화 처리의 괄호 밖에서 실시합니다.
Simple.js의 150행당var l2d_scale, l2d_x, l2d_y; // スライダー用
Simple.draw = function(gl/*WebGLコンテキスト*/)
{
// Canvasをクリアする
gl.clear(gl.COLOR_BUFFER_BIT);
// Live2D初期化
if( ! live2DModel || ! loadLive2DCompleted )
return; //ロードが完了していないので何もしないで返る
// ロード完了後に初回のみ初期化する
if( ! initLive2DCompleted ){
initLive2DCompleted = true;
// 画像からWebGLテクスチャを生成し、モデルに登録
for( var i = 0; i < loadedImages.length; i++ ){
//Image型オブジェクトからテクスチャを生成
var texName = Simple.createTexture(gl, loadedImages[i]);
live2DModel.setTexture(i, texName); //モデルにテクスチャをセット
}
// テクスチャの元画像の参照をクリア
loadedImages = null;
// OpenGLのコンテキストをセット
live2DModel.setGL(gl);
// スライダーを取得
l2d_scale = document.getElementById("L2D_WIDTH");
l2d_x = document.getElementById("L2D_X");
l2d_y = document.getElementById("L2D_Y");
// 表示位置を指定するための行列を定義する
// var s = 2.0 / live2DModel.getCanvasWidth(); //canvasの横幅を-1..1区間に収める
// var matrix4x4 = [
// s, 0, 0, 0,
// 0,-s, 0, 0,
// 0, 0, 1, 0,
// -1, 1, 0, 1
// ];
// live2DModel.setMatrix(matrix4x4);
//
}
// 描画してるLive2Dモデルのサイズを取得
var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
// Live2D用の行列定義
var mmat = new L2DModelMatrix(width, height);
// サイズ(幅)
mmat.setWidth(l2d_scale.value);
// ポジション(X, Y)
mmat.setCenterPosition(l2d_x.value, l2d_y.value);
// 配列をセット
live2DModel.setMatrix(mmat.getArray());
// キャラクターのパラメータを適当に更新
var t = UtSystem.getTimeMSec() * 0.001 * 2 * Math.PI; //1秒ごとに2π(1周期)増える
var cycle = 3.0; //パラメータが一周する時間(秒)
// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
live2DModel.setParamFloat("PARAM_ANGLE_X", 30 * Math.sin(t/cycle));
// Live2Dモデルを更新して描画
live2DModel.update(); // 現在のパラメータに合わせて頂点等を計算
live2DModel.draw(); // 描画
};
지금까지 어떻게 하는지 의문이었지만, 하나 깔끔했다.
Reference
이 문제에 관하여(Live2D로 위치와 크기 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/naotaro0123/items/013a9731755cb0a0537a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D Simple</title>
</meta>
</head>
<body onload="Simple()">
<canvas id="glcanvas" width = "400px" height="400px" style="border:dashed 1px #CCC"></canvas>
<div id="myconsole" style="color:#BBB">---- Log ----</div>
サイズ(幅)<input type="range" id="L2D_WIDTH" value="2.0" min="0.0" max="5.0" step="0.1">
<br>
位置X<input type="range" id="L2D_X" value="0.0" min="-3.0" max="3.0" step="0.1">
<br>
位置Y<input type="range" id="L2D_Y" value="0.0" min="-3.0" max="3.0" step="0.1">
<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>
<script src="../../framework/Live2DFramework.js"></script>
<!-- User's Script -->
<script src="src/Simple.js"></script>
</body>
</html>
var l2d_scale, l2d_x, l2d_y; // スライダー用
Simple.draw = function(gl/*WebGLコンテキスト*/)
{
// Canvasをクリアする
gl.clear(gl.COLOR_BUFFER_BIT);
// Live2D初期化
if( ! live2DModel || ! loadLive2DCompleted )
return; //ロードが完了していないので何もしないで返る
// ロード完了後に初回のみ初期化する
if( ! initLive2DCompleted ){
initLive2DCompleted = true;
// 画像からWebGLテクスチャを生成し、モデルに登録
for( var i = 0; i < loadedImages.length; i++ ){
//Image型オブジェクトからテクスチャを生成
var texName = Simple.createTexture(gl, loadedImages[i]);
live2DModel.setTexture(i, texName); //モデルにテクスチャをセット
}
// テクスチャの元画像の参照をクリア
loadedImages = null;
// OpenGLのコンテキストをセット
live2DModel.setGL(gl);
// スライダーを取得
l2d_scale = document.getElementById("L2D_WIDTH");
l2d_x = document.getElementById("L2D_X");
l2d_y = document.getElementById("L2D_Y");
// 表示位置を指定するための行列を定義する
// var s = 2.0 / live2DModel.getCanvasWidth(); //canvasの横幅を-1..1区間に収める
// var matrix4x4 = [
// s, 0, 0, 0,
// 0,-s, 0, 0,
// 0, 0, 1, 0,
// -1, 1, 0, 1
// ];
// live2DModel.setMatrix(matrix4x4);
//
}
// 描画してるLive2Dモデルのサイズを取得
var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
// Live2D用の行列定義
var mmat = new L2DModelMatrix(width, height);
// サイズ(幅)
mmat.setWidth(l2d_scale.value);
// ポジション(X, Y)
mmat.setCenterPosition(l2d_x.value, l2d_y.value);
// 配列をセット
live2DModel.setMatrix(mmat.getArray());
// キャラクターのパラメータを適当に更新
var t = UtSystem.getTimeMSec() * 0.001 * 2 * Math.PI; //1秒ごとに2π(1周期)増える
var cycle = 3.0; //パラメータが一周する時間(秒)
// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
live2DModel.setParamFloat("PARAM_ANGLE_X", 30 * Math.sin(t/cycle));
// Live2Dモデルを更新して描画
live2DModel.update(); // 現在のパラメータに合わせて頂点等を計算
live2DModel.draw(); // 描画
};
Reference
이 문제에 관하여(Live2D로 위치와 크기 조정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naotaro0123/items/013a9731755cb0a0537a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
