LoginSignup
8

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

Last updated at Posted at 2019-08-08

はじめに

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

環境

  • Blender
  • PlayCanvas
  • Google Chrome

3Dモデルを作る

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

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

###このボタンから VOXCELの編集画面に入ります。

編集する

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

ダウンロードする

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

解凍する

ZIPで落とされたファイルを解凍するとobjファイル、matファイル,pngファイルが入っています。
ダウンロードされたファイルの説明としては

  • OJBファイル
    3Dモデル
  • matファイル
    マテリアル
  • png
    テクスチャ
    がそれぞれ入っています。

ボーンを作成する

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

Blenderを起動すると最初に四角の箱があると思うのですがこれはXキーで消します。

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

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

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

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

ボーンの作成を入れる

ボーンはこのサイトを参考してボーンをいれます

ボーンかんたんBlender講座

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

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

エクスポート

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

ゲームとして動かす

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

モデルをインポートする

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

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

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

3D空間に作ったモデルを入れることができました!🎉🎉

今回はモデルに対して回転を加えたいため新たに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などに投稿すると共有する事ができます。

PlayCanvas開発で参考になりそうな記事の一覧です。 入門 応用 その他の記事はこちらになります。 その他関連 - [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)

PlayCanvasのユーザー会のSlackを作りました!

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください!

日本PlayCanvasユーザー会 - Slack

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8