SDK をインポート

最終更新： 2023年3月14日

Cubism Editor から書き出した組み込み用モデルファイルを、Cocos Creator のプロジェクトにインポートして画面に表示するまでのチュートリアルです。

用意するもの

Cocos Creator と Cubism SDK for Cocos Creator

Cubism SDK for Cocos Creator が対応している Cocos Creator バージョンは、v3.6.2 以降になります。
v3.6.2 未満の場合、SDK 内のアセットにシリアライズされている情報が破棄される場合があります。
Cocos Creator のインストールについては こちら をご覧ください。

また、 Cubism SDK for Cocos Creator をあらかじめダウンロードしておいてください。
こちらは zip形式として配布しています。
SDK は Github でも公開しておりますがこちらにはCubism Coreライブラリが含まれないため、モデルを組み込む際にはパッケージを使用するか、パッケージにあるCubism Coreライブラリを同ディレクトリに配置してください。

Node.js

Cubism SDK for Cocos Creator を使用する際に npm コマンドを使用してモジュールをインストールする必要があります。
必ずCubism SDK for Cocos Creatorに対応しているバージョンのNode.jsを下記よりインストールしてください。
Node.js
nvm等、Node.js 管理ツールからインストールしたものでも結構です。
インストールと同時にnpmが実行できる環境変数を設定してください。

Cubism モデルデータ

SDK で Live2D のモデルを扱う場合は、編集用の .cmo3 や.can3 ではなく、組み込み用モデルとして書き出す必要があります。
組み込み用のモデルの書き出し方については「組み込み用データ」をご覧ください。
書き出されるデータは、.moc3 ファイル、.model3.json ファイル、テクスチャの入ったフォルダです。
これらを一つのフォルダにまとめてください。

SDK をプロジェクトにインポート

• Cocos Creator の新規プロジェクトを作成します。
• Cocos Creator の新規プロジェクト作成については、 こちら をご覧ください。

• Cubism SDK for Cocos Creator を Extension に追加します。
• Extension Manager を開きます。(Menu->Extension->Extension Manager)
• Extension Manager の Project を選択し、 Import Extension ([+]ボタン) をクリックします。
• Cubism SDK for Cocos Creator（.zip ファイル） を選択し開きます。
• インポートが完了したら、Cocos Creator を閉じます。
• ※Extension Manager を使わず、エクスプローラーでプロジェクトルートに extensions フォルダを作成し、そこで zip ファイルを展開しても問題ありません。
• Extension プロジェクトをビルドします。
• 上記で追加した Extension（{プロジェクトルート}/extensions/{SDK フォルダ}）に移動し、コマンドプロンプトなどで以下のコマンドを実行します。
  • npm install
  • npm run build
• ビルドが完了したら、プロジェクトを開き直してください。

モデルをインポート

Cubism Editor から書き出した組み込み用モデル一式を、フォルダごと Asset パネルにドラッグアンドドロップします。

正常にインポートが完了すると、SDK に含まれている Cubism の Importer により自動的に Prefab が生成されます。
※Prefab が生成されない場合、 model3.json ファイルを右クリックし、 Reimport Asset をクリックしてください

この生成された Prefab は、Live2D のモデルを Cocos Creator で取り扱える状態にコンバートされたものです。
パラメータやパーツの表示は、この段階で Hierarchy パネルから操作が可能な状態となっています。

生成された Prefab を Hierarchy パネル、または Scene パネルに追加してシーンを実行すれば、モデルを配置することができます。

Original Workflow 方式について

Original Workflow 方式でモデルをインポートする場合、Project ウィンドウにドラッグアンドドロップする前に、
メニューバーの Live2D > Cubism > Original Workflow > Should Import As Original Workflow にチェックを入れてください。

Cubism SDK for Cocos Creator は、デフォルトで Original Workflow 方式でのインポートが有効化されています。
Original Workflow 方式を使用しない場合、メニューバーの Live2D > Cubism > Original Workflow > Should Import As Original Workflow のチェックを外してください。

ここにチェックが入った状態でインポートした場合、生成される Prefab に追加で OW 方式のコンポーネントがアタッチされます。