웹용 간단한 사용자 정의 Live 2D Cubism SDK

Cubism4SDK for Web R3은 어디선가 쉽게 사용하고 싶은 사람을 위한 콘텐츠입니다.
SDK 샘플의 데모 코드 라이브 2D 모델을 간단히 교체하고 Canvas 사이즈를 변경하려면

개발 환경

Cubism4 SDK for Web R3

고친 곳

데모 샘플의 수정 부분은 다음 두 개의 파일로 하면 됩니다.
폴더:/SAmples/Type Script/Demo/

lappdefine.ts

이미지 또는 Live 2D 모델의 경로, Canvas 크기 지정

lappdelegate.ts

캔버스의 배경색을 검은색으로 지정

lappdefine.ts에서 수정부분만 발췌(삭제-행, 증가+행)

lappdefine.ts

// Canvasサイズを指定する
- export const CanvasSize: { width: number; height: number } | 'auto' = 'auto';
+ export const CanvasSize: { width: number; height: number } | 'auto' = {
  width: 500,
  height: 500,
};
// 背景画像を消す
- export const BackImageName = 'back_class_normal.png';
+ export const BackImageName = '';

// 歯車画像を消す
- export const GearImageName = 'icon_gear.png';
+ export const GearImageName = '';

// 表示したいモデル1体を指定する。Resourcesフォルダに自分のLive2Dモデルを配置しよう
- export const ModelDir: string[] = ['Haru', 'Hiyori', 'Mark', 'Natori', 'Rice'];
+ export const ModelDir: string[] = ['Hiyori'];

이 수정을 통해 자신이 좋아하는 Canvas 사이즈로 지정한 Live 2D 모델로 표시할 수 있습니다 (여기는 Canvas 사이즈 = 500x500)

appdelegate.ts에서 수정부분만 발췌(삭제-행, 증가+행)

appdelegate.ts

// 透明度を0にする
- gl.clearColor(0.0, 0.0, 0.0, 1.0);
+ gl.clearColor(0.0, 0.0, 0.0, 0.0);

이렇게 하면 canvas의 배경색이 투명해져 웹 사이트의 주요 부분의 표시를 방해하지 않는다.

그리고 css로 canvas를 원하는 위치에 놓으면 모든 기능의 Live 2D로 사이트를 가져올 수 있습니다.
WordPress 등을 웹 팩 build에 넣어 보십시오.