Cubism 4 SDK for Web R3をどこから見て良いかわからん、簡単に使いたい人向けの内容です。
SDKサンプルのDemoコードを簡単にLive2Dモデル差し替え、Canvasサイズを変更する手順です。
開発環境
- Cubism4 SDK for Web R3
修正箇所
Demoサンプルの修正箇所は、以下2ファイルでOKです。
フォルダ: /Samples/TypeScript/Demo/
- lappdefine.ts
- 画像やLive2Dモデルのパス、Canvasサイズが指定されてる
- lappdelegate.ts
- canvasの背景色が黒に指定されている
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サイズで指定したLive2Dモデルで表示できます（ここでは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の背景色が透明になり、Webサイトのメイン部分の表示を阻害しなくなるかと思います。
あとはcssでcanvasを好きな位置に配置してあげれば、全機能入りでLive2DがWebサイトに導入できます。
webpack buildしてWordPressなどに入れみて下さい。