Cocos Creator で コンベアを作る

こんなの作ります。

こちら から実際に動かせます。

環境

Cocos Creator 2.4.3

作成手順

3Dモデルを作る

Blender で角と直線の 3Dモデル を作ります。今回は メッシュ だけで テクスチャ はありません。

3Dモデル が出来たら FBX形式 でエクスポートします。

Cocos Creator に FBX形式の3Dモデル をインポートします。

ファイルを掴んでドラッグすると、インポートする事が出来ます。

3Dモデル をインポートするとこんな感じになります。

Cocos Creator の設定を変更する

設定を 3Dモード に変更します。

シーンを作成する

始める前に、一度シーンを保存しておきます。

「Ctrl」+「S」を押して、assetsフォルダ内であることを確認してから ファイル名 を入力し、保存ボタンでシーンを保存できます。

3D制作用のテンプレートを追加する

まず「Node Tree」の Canvas を選択してから右クリックをして「Create」>「Create 3D Node」>「3D Stage」の順で選択して、3D制作用のテンプレートオブジェクトを追加します。

このように「New 3D Stage」が作られて、その中に「3D Camera」「New Directional Light」「New Ambient Light」「New Box」が出来上がります。

「New Box」は使わないので New Box を選択して「Delete」キーで削除しておきます。

床を作る

New 3D Stage を選択し右クリックから「Create」>「Create 3D Node」>「Plane」の順で選択します。

そうすると、平らなオブジェクトが追加されます。

カメラを動かす

今のままだと、カメラとオブジェクトが平行に配置されているため、実行画面には全く見えません。

なので、カメラを上方向に動かして見下ろす感じにします。

まず、カメラのロックを解除してカメラを動かせるようにします。

ひとまず「Position」と「Rotation」をいじってみました。

実行してみるとこんな感じに見えると思います。

背景色を変える

黒い背景だと嫌なので、背景色を変えます。

Node Tree の 3D Camera を選択してから「Background Color」を変えて、ClearFlags の「Color」にチェックを入れると、背景色を設定する事が出来ます。

床の色を変える

床の色も変えましょう。

最初は無地の DefaultMaterial が設定されているので、着色したマテリアルを作って、付け替えます。

assets を選択してから右クリックで「Create」>「Material」の順で選択して、新しいマテリアル を作成します。

新しく作ったマテリアルを選択して、Effect を「builtin-phong」に変更します。

そうすると diffuseColor が変更できるようになるので、床にしたい色を設定し「Apply」で確定します。

最後に、今作ったマテリアルを 床のマテリアルにドラッグして、変更完了です。

落ちるブロックを作る

3D空間に重力を設定して、落ちるブロックを作成します。

まず、落ちるブロックを作ってプレハブ化します。プレハブ化すると、同じオブジェクトを再利用することが出来ます。

Canvas に Box を置いて、その Box を assets にドラッグするとプレハブ化することが出来ます。

次にスクリプトを書くため、assets に TypeScriptファイル を追加します。

作ったスクリプトファイルに下記ソースを貼り付けます。

const { ccclass, property } = cc._decorator;
@ccclass
export default class NewScript extends cc.Component {
  start() {
    // 物理システムを有効にする.
    cc.director.getPhysics3DManager().enabled = true;
  }
}

ブロックが重力の影響を受けるようにする

ブロックに Rigid Body 3D を設定すると、重力の影響を受けるようになります。

実行すると、ブロックがひたすら落ちていきます。

コンベアを作る

Blender で作った 3Dモデル に当たり判定を付けていきます。

流れる部分と壁に BoxCollider3D を付けて行きます。

実行すると、このようにブロックがすり抜けなくなります。

あとは、同じ感じで作っていけば完成です。

おわりに

ソースコードを Github に上げたので、参考にどうぞ。

https://github.com/noitaro/cocos-creator-conveyor