Cocos Creator で Live2dモデル を表示する

Cocos Creator, ゲーム制作Cocos Creator, Live2d

Live2dForCocosCreator

Cocos Creator で Live2d-web を動作させるライブラリが公開されていたので、試してみました。

前提条件

手順

準備

GitHub から ライブラリのソースファイルをダウンロードします。

Live2d for CocosCreator

ダウンロードした「Live2dForCocosCreator-master.zip」を展開します。

邪魔な metaファイル を全て削除します。

エクスプローラーの検索欄に「*.meta」と入力し、見つかったファイルを全て削除。

新規プロジェクトの作成

Cocos Creator で 新規プロジェクトを作成します。

プロジェクトを起動したままライブラリを入れると不具合が発生するため、一旦終了しておきます。

Live2d-web ライブラリ

ダウンロードして展開しておいた Live2dForCocosCreator を新規プロジェクトに移植します。

Live2dForCocosCreator-master\assets フォルダ内の「components」と「resources」を、新規プロジェクトの assets フォルダ内にコピーします。

こんな感じになればOK。

モデルを配置

改めてプロジェクトを起動します。

何回かプラグイン設定ダイアログが出るので「Yes」を選択します。

Canvas に Live2dComponent を追加

Canvas に Live2dComponent を追加します。

assets -> components -> live2d -> CubismSdkForWeb -> Live2dComponent

上記コンポーネントをキャンバスにドラッグ移動すると追加できます。

Live2dComponent

こんな感じになればOK

Live2dComponent

動作確認

実行ボタンを押してちゃんと動くか確認します。

表示されましたが、逆さまです。あと、大きすぎて画面からはみ出してしまいました。

Live2dForCocosCreator

なので、Live2dComponent のプロパティを変えます。

Live2dComponent のプロパティ

逆さまを治すには Node の Scale を「-1」に変更します。

CocosCreator
Live2dForCocosCreator

はみ出しているので、モデルをちょっと小さくします。

Live2dComponent の Scale を変更すると、モデルのサイズも変わります。

CocosCreator

モデルを変えるには?

Live2dComponent の Model Name を変えると表示されるモデルが変わります。

CocosCreator

Hiyori

Hiyori

Haru

Haru

Mark

Mark

Natori

Natori

Rice

Rice

デフォルトではこの 5人 が用意されています。

おわりに

次は、オリジナルキャラクターを作って表示させたいです。

スポンサーリンク