Cocos Creator で 3Dモデル を表示して、アニメーションをさせてみます。
3Dゲーム制作の第一歩を踏み出します。
はじめに
Cocos Creatorは、コンテンツの作成に焦点を当てたスクリプト開発、エンティティコンポーネント、およびデータ駆動型のゲーム開発ツールです。
クロスプラットフォーム 対応なので、ブラウザーでも Android でも iPhone でも、あらゆる環境で動かせるのが魅力的です。
中国で開発しているため中国語のドキュメントは豊富なのですが、日本語や英語のドキュメントが少ないため、手探りでさぎょうする場面があります。
ご了承下さい。
Cocos Creator のインストールは事前に済ませてある前提で進めます。
無料の3Dモデルを探す
表示させたい3Dモデルを探します。
Cocos Creator が使える 3Dモデルは FBX形式の3Dモデルです。
今回は「Lowpoly Cat Rigged + Run Animation」で試してみます。
ダウンロードして、展開しておきます。
プロジェクト作成
まず初めに、プロジェクトを作成します。
FBXモデルのインポート
fbxモデル を assets にドラッグして 3Dモデルを読み込みます。
3Dモデルが追加されればOK
モデルパラメータの構成を修正
このままだと使いにくいので、3Dモデルのパラメータを修正します。
倍率(Scale Factor)
まず、3Dモデル毎に大きさが違うので 倍率(Scale Factor) を修正します。
今回は 10 が丁度よかったので 10 にしましたが、表示した時に大きすぎたり小さすぎた場合は、ちょうどよい倍率を探して下さい。
assets の cat_rigged を選択し、右側の 倍率(Scale Factor) を 10 に変更し「Apply」で確定します。
ジョイントマトリックスの事前計算を有効に
ジョイントマトリックスの事前計算を有効にします。
これを有効にすると、各スケルトンのマトリックスが事前に計算されるため効率が大幅に向上します。
Animation タブの Precompute Joint Matrix にチェックを入れて「Apply」で確定します。
NodeTree に 3Dモデル を追加
Node Tree の キャンバス内に 3Dモデル を追加します。
assets の cat_rigged を Node Tree の キャンバス にドラッグ したら追加されます。
こんな感じになればOK
3Dカメラを追加
3Dカメラが無いので、まだ 3Dモデルは表示されません。
3Dモデル が見れる 3Dカメラ を追加します。
Node Tree の Canvas を右クリックし Create > Create Camera > 3D Camera の順で選択して 3Dカメラ を追加します。
キャンバス内に「New 3D Camera」が追加されればOK
ここまでで 3Dモデル が見えるようになります。
試しにブラウザーで実行してみます。
光を設定していないので、何かよく分からない影がみえます。
光(Light) を追加
影を見ても楽しくないので、光も追加します。
Node Tree の Canvas を右クリックし Create > Create Light > Directional の順で選択して 光 を追加します。
キャンバス内に「New Directional Ligth」が追加されればOK
ディレクショナルライト(Directional Ligth)は、最も一般的なタイプのライトで、ライティングエフェクトはライトの位置と方向に影響されません。
ディレクショナルライトは太陽光を得るのに適しています。
実行してみると、こんな感じになります。
う～ん、何かネコっぽい。
今回の3Dモデルはテクスチャが無いので、粘土みたいな色になっています。
アニメーションを再生
アニメーションをするように設定します。
assets の cat_rigged内にある「Armature|ArmatureAction」を SkeletonAnimation の「Default Clip」にドラッグして、アニメーションを設定します。
最後に「Play On Load」にチェックを入れてあげると、アニメーションが再生されます。
実行するとこんな感じになります。
とってもいい躍動感です。
おわりに
こちらで実際の動きを確認できます。
今回のソースを GitHub で公開しました。
https://github.com/noitaro/cocos-creator-3d-model-animation-github
次は、テクスチャとかキー入力とかやってみたいと思います。
Cocos Creator 3.0
Cocos Creator 3.0 がリリースされたので試しに使ってみました。