PlayCanvas入門- モデルの作成～ゲームに入れ込むまで

はじめに

３Dゲームを作りたいけれどなんもわからんという人向けの記事になります。私、自身も全く３Dエンジニアではないので、モデルを作ったり、マテリアルがよくわかっておりませんでしたが３Dのキャラクターを動かしたかったのでその時に得た知見を共有します。

環境

• Blender
• PlayCanvas
• Google Chrome

3Dモデルを作る

3Dモデルの作成なのですが、いきなりBlenderで作るとなるとハードルが高かったのと、マテリアルが入っているのが良かっため今回はVOXCEL CANVASで３Dモデルを作りました。

ギャラリーからボーンの入りそうなモデルVOXCELを選択して

VOXCELCANVAS EDITOR上で少しだけ厚みを付けたりしました。

編集が終わったらdownloadボタンを選択してダウンロードをします。

width="500" align="center" />

3Dモデルの作成にはBlenderを使用します。

次にVOXCEL CANVASで作成したオブジェクトをimportする

importされるとこのように表示されていると思います。

このままだと白いのでこの状態で表示されているモデルを右クリックをして、左下をmaterialにします。

今度は黒くなったと思うのでLampの位置を動かして調整をします。

ボーンかんたんBlender講座

ボーンとモデルを紐づけるときに、エラーが出た場合にはこのサイトを参考になりました。

【Blender】ボーンヒートウエイトのエラーが出たときに試す5つの解決策

エクスポート

ボーンを設定することができました。このモデルをexportをFBXとしてexportをします。

ゲームとして動かすのにはPlayCanvasを使用します。
PlayCanvasの登録ができたら新規のプロジェクトからプロジェクトの作成をします。

モデルをインポートする

３DモデルのインポートにはPlayCanvasのASSETSの中に先ほどexport‘したモデルデータをドラッグアンドドロップします。インポートできる形式はobjとfbxがともにインポートできるので、最初のボーンを入れていないモデルもインポートすることができます。

モデルをインポートすることができたらドラッグアンドドロップでゲームの中にゲームのシーンの中に入れます。

モデルの大きさによってはカメラの位置的に表示されないため左横のバーからimportをしたモデルを選択し、fキーを押してカメラの位置を調整します。

今回はモデルに対して回転を加えたいため新たにrotate.jsというスクリプトを追加します。

rotate.jsの編集をし、下記のスクリプトを追加します。

//rotate.js
const rotate = pc.createScript('rotate');

rotate.prototype.initialize = function() {

};

rotate.prototype.update = function(dt) {
    const {x,y,z}= this.entity.rotate

    this.entity.rotateLocal(0,0.8,0)
};

これでLaunchボタンを押します。

これで動きを確認できました。🎉🎉🎉

公開する

PlayCanvasで作成したスクリプトを作成したプログラムにURLを付与して公開することができます。

こちらのURLをTwitterなどに投稿すると共有する事ができます。

ちょっと宣伝です

Twitterカードが簡単に作れるジェネレーターを作ったので、こちらでシェアをしていただくとかんたんに、遊べるツイートをすることができます。

Twitterカードジェネレーター

３Dモデルが回ります。
https://t.co/5of0wad17J

— はが (@Mxcn3) August 8, 2019