Cocos Creator 3.0 を使ってみる

Uncategorized
950 words

先日 Cocos Creator 3.0 Tech Preview が公開されました。

Cocos Creator は 2Dゲームの開発に重点を置いて作られた IDE(統合開発環境)です。今回 Cocos Creator 3.0 が テクニカルプレビュー版 としてリリースされたので、早速試してみたいと思います。

Cocos Creator 3.0 になったことで、3Dゲームの開発がよりしやすくなったとの事です。Cocos Creator 2.x 時代でも 3Dゲームの開発は出来ていたのですが、どうにも使い勝手が良くありませんでした。

なのでメチャクチャ楽しみです!

始めに

今現在(2020年10月31日)では、Cocos Creator 3.0 を Cocos Dashboard からダウンロードする事が出来ないので、直接 zipファイル ダウンロードして展開する必要があります。

Cocos Dashboard

正式にリリースされれば、Cocos Dashboard からダウンロード出来るようになると思います。

Cocos Creator 3.0 テクニカルプレビュー版

公式ブログ からダウンロード出来ます。

Cocos Creator 3.0 のダウンロード

とりあえず、Cドライブの直下に展開しておきました。

圧縮ファイルの展開

展開が出来たら「CocosCreator3D.exe」をポチポチッとして起動させます。

CocosCreator3Dを実行

「New Project」>「empty」を選び、プロジェクトの保存先を指定して「Create」ボタンを押すと、CocosCreator3D のプロジェクトが作成されます。

CocosCreator3D のプロジェクト作成

見た目は一緒ですね。

CocosCreator3Dの画面

3Dモデルをアニメーションさせてみる

試しに 3Dモデルを表示して、アニメーションさせてみましょう。

昔やった事 と同じ事を CocosCreator3D でもやってみます。

FBXモデルのインポート

assets に fbxモデル をドラッグして 3Dモデルを追加します。

3Dモデルのインポート方法

こんな感じになればOK

3Dモデルインポート

Scene に 3Dモデル を追加

次に、Scene に 3Dモデル を追加します。

assets の cat_rigged を Scene にドラッグすると 3Dモデル を追加出来ます。

3Dモデルの追加方法

こんな感じになればOK

3Dモデル追加

実行

試しに実行してみましょう。

実行するとブラウザが立ち上がります。

実行

う~ん、何か小さいですね。

動作確認

カメラを移動させる

カメラを 3Dモデルに近づけましょう。

Scene の「Main Camera」を選択して、青矢印を動かします。

右下にカメラから見えてる映像がプレビューされるので、それを頼りに丁度よい位置を探します。

カメラを移動

近づき過ぎると深度を外れてしまうので、これぐらいが限界でした。

プレビューで確認

もう一度実行して、ブラウザで確認してみます。

今度は、いい感じになりました。が、アニメーションしていませんね。

3Dモデルの確認

アニメーションさせる

今回使っている 3Dモデル は、走るアニメーションが付いているんで、走らせてみましょう。

Play on Load

Scene の「cat_rigged」3Dモデル を選択してから cc.SkeletalAnimation の「Play on Load」にチェックを入れます。

Play on Load にチェックを入れる

AnimationClip

既に3つのアニメーションが付いているので、一度全て外します。

Clips の三角をクリックしてプルダウンを開き、ゴミ箱アイコンで設定済みのアニメーションを全てクリアします。

アニメーションをクリアする

こんな感じになれば、ひとまずOK

アニメーションクリア

で、改めて DefaultClip に走るアニメーションをドラッグで設定します。

アニメーションを設定

こんな感じになればアニメーションの設定はOK

アニメーションの設定

実行してアニメーションするか確認します。

3Dモデルアニメーションプレビュー

おわりに

以前の Cocos Creator 2.x と比べると、使い方は全く一緒に感じました。

動作は軽くなった気がします。

もっと色々試してみたいと思います。