Help us understand the problem. What is going on with this article?

【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】

※補足

2020/6/18/ Qiita トレンド入りありがとうございます。
2020/6/19/ 一部修正 / Google Polyを使用して3Dモデルをインポートする手順について追記いたしました。
2020/6/22 続編 マルチプレイできるゲームを作るものを書きました。【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】

JavaScript製のゲームエンジンPlayCanvasを使用して、FPS視点の空間を作る方法を解説します。
コードはサンプルのものをそのまま使用しますので、15分〜30分程度でできる内容です。
d7.gif

完成品のプロジェクトはこちらになります。
https://playcanv.as/p/ygI1bj7M/

準備するもの

  • ブラウザ
  • PlayCanvasアカウント

PlayCanvasとは?

PlayCanvasはWebGLでのゲーム開発をするためのツールです。ソースコードはオープンソースで開発が進められており、MIT Licenseで公開されております。ウェブ開発のエディタが存在しています。

PlayCanvasの登録〜新規プロジェクト作成まで

今回使用するサンプルは、カメラのカテゴリーの中にある、First Personこのページにアクセスをすることで、スマートフォン、パソコンどちらでもFPS視点での操作を体験できます。

1. PlayCanvasで新規のプロジェクトを作成

アカウントや、PlayCanvasのプロジェクトがまだ存在しない場合には、こちらのページからPlayCanvasのアカウントを作成、新規プロジェクトの作成を行ってください。
https://playcanvas.com/

2.空のプロジェクトを追加

PlayCanvasに登録ができたら、PROJECTSNEWの手順で新規プロジェクトを作成します。

今回は、Blank Projectを選択してCREATEをしましょう。

PlayCanvas Editorについて

PlayCanvasで新規プロジェクトを立ち上げるとこのような画面になります。
こちらのEditorを使用して開発を進めていきます。


※画像はイメージです

Editorについてはこのような構成をされています。それぞれの簡単な説明はこちらになります。

シーン(SCENE)

シーンビューには製作中のゲーム世界(シーン)が表示され、自由な位置・角度から眺めることができます。

インスペクター(INSPECTOR)

シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。

ヒエラルキー(HIERARCHY)

シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。

ASSETS

製作中のプロジェクト(ゲーム全体)に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。

メニュー(MENU)

シーンのビューモードやプロジェクトセッティング等の作業が行えます。

Editorを使用して開発をはじめる

それでは実際に、Editorを使用して開発を進めていきましょう。

ASSETSから新規にスクリプトファイルを作成

PlayCanvas Editor上で、First Personのスクリプトを記述するためのJavaScriptファイルを作成します。

1. 右クリック → Scriptをクリック

2. first-person-character-contorller.jsとしてファイルを作成

3. このような形でASSETSに新規のファイルが作成されます

4. ダブルクリックでコードエディタから編集できます

Examplesのスクリプトを使用する。

PlayCanvasのリポジトリから、一人称視点のサンプルで使われている、First Person Character Controllerのスクリプトをコピーします。

1. リポジトリへアクセス & ソースコードをコピー

こちらのページにアクセスします。
GitHubにアクセスをしたら、ソースコードをコピーします。

2. コードエディタへコピー

コピーした内容を、先ほど作成したfirst-person-character-controllerにコードエディタを使用してコピーをします。

スクリーンショット 2020-06-10 15.29.07.png

3. ファイルを保存する

このとき左側のファイル名ががオレンジ色になっています。
この状態ではまだソースコードが保存されていませんので、
Ctrl + Sまたは、GUI上でFileSave Fileをクリックしてください。

スクリーンショット 2020-06-10 15.30.44.png

保存されるとファイル名が白色になります。

スクリプトを適用する

先程コピーした.jsファイルは、複数のPlayCanvasのスクリプトから構成されています。
PlayCanvasでは一つの.jsファイルの中にあるPlayCanvasのスクリプトをそれぞれエディタに摘要をする仕組みとして、GUI上からパースという操作をする必要があります。

1. first-person-character-controllerスクリプトを選択

コードエディタ上でソースコードの保存ができましたら次はエディタ上からソースコードのパースを行います。first-person-character-contoller.jsを選択。

スクリーンショット 2020-06-10 15.53.54.png

2. INSPECTORからPARSEをクリック

INSPECTORにコードの詳細があります。パースを行うには、右下のPARSEボタンをクリックします。
スクリーンショット 2020-06-10 15.53.58.png

3. PARSE後

パースを行うとcharacterController, firstPersonCamera, keyboardInput, mouseInput, touchInput, gamePadInputというスクリプトに分解されます。これでPlayCanvas Editorでそれぞれのスクリプトを使用することができるようになります。
スクリーンショット 2020-06-10 15.55.00.png

シーンの構築

ここまでで、PlayCanvasの登録,プロジェクトの作成, スクリプトの用意という事前の準備はこれでできました、これからはPlayCanvas Editorを使用して実際のシーンを構築していきます。

一人称視点を実装する

現在はヒエラルキーの中にはCamera, Light, Box, Planeの4つのエンティティがあります。

この状態から一人称視点の操作を行うためにプレイヤー、床、カメラの設定をしていきます。

1. Boxを選択

左のINSPECTORにある、Boxを選択します。

スクリーンショット 2020-06-10 15.34.28.png

2. Boxの名前をPlayerに変更

選択したBoxの名前を分かりやすくするために、INSPECTORからPlayerという名前にします。

※追記です

このままだとすり抜けてしまうのでこのときにPlayerのPositiony0.5に設定してください。


プレイヤーにCOLLISIONRIGIDBODYを追加する

Boxの名前を変更したら次に、Playerエンティティに対して、COLLISIONRIGID BODYを追加していきます。

COLLISIONについて

コリジョン
コリジョンコンポーネントはエンティティにコリジョンボリュームを割り当てます。コンポーネントインターフェイスはType属性に基づいて動的に様々な属性を表示させます。
Collisionコンポーネントはコンポーネントパネルの右上のトグルで有効・無効を切り替えることができます。有効にした場合、また、コンポーネントがトリガーボリュームの場合(兄弟rigidbodyコンポーネントを持っていないため)、トリガーボリュームが有効になります。同様に、コンポーネントに兄弟rigidbodyコンポーネントがある場合、rigidbodyが有効になります。
https://developer.playcanvas.com/ja/user-manual/packs/components/collision/

RIGID BODYについて

リジッドボディ
Rigid Bodyコンポーネントはエンティティがシーンの物理シミュレーションに参加できるようにします。これにより、エンティティの動きを写実的にシミュレーションできます。コンポーネントインターフェイスは、Type属性に基づいて動的に異なる属性を表示します。
Rigid Body コンポーネントはコンポーネントパネルの右上のチェックボックスで有効と無効を切り替えることができます。有効になった場合、また、コンポーネントに兄弟コリジョンコンポーネントがある場合、Rigid Bodyは物理シミュレーションに含まれます。
https://developer.playcanvas.com/ja/user-manual/packs/components/rigidbody/

1. PlayerエンティティにCOLLISIONを追加

INSPECTORADD COMPONENTCOLLISIONの手順でCOLLISIONを選択します。

スクリーンショット 2020-06-10 15.35.19.png

これでエンティティコンポーネントとして追加されます。
キューブと同じ値が設定されていますので、値についてはこのまま使用します。

4. PlayerエンティティにRIGID BODYを追加

COLLISIONと同様に ADD COMPONENTからRIGIDBODYを追加します。

スクリーンショット 2020-06-10 15.35.29.png

5. Ammo.jsをインポート

PlayCanvasで物理演算を使用したい場合はammo.jsを追加する必要があります。
IMPORT AMMOをクリックして物理エンジンを追加します。

6. RIGIDBODYの値を変更する

※ここの作業をスキップすると動きません

Ammo.jsがインポートできたら
スクリーンショット 2020-06-10 16.09.03.png

サンプルで使用されている値を参考にRIGIDBODYの値を下記に設定します。

プロパティ名
Type Dynamic
Mass 80Kg
linearDamping 0
linearFactor 1,1,1
angularFactor 0, 0, 0
friction 0.3
restitution 0

これで、プレイヤーのCOLLISION,RIGIDBODYの設定ができました。

物理エンジンについて

PlayCanvasでは物理演算を使用する際には、JavaScriptベースの物理エンジンを使用します。Ammo.js以外の物理エンジンの選択肢としてPlayCanvasではp2.jsの対応がされています。

Physics Engine JS WASM 2D 3D PlayCanvas Integration
box2d.js
Matter.js
p2.js Yes
cannon.js
Oimo.js

その他の物理エンジンについても頑張れば導入できそうです。
https://developer.playcanvas.com/en/user-manual/physics/ammo-alternatives/

SCRIPTコンポーネントを追加

先程、パースをしたスクリプトをPlayerに適用していきます。

1. ADD COMPONENTからSCRIPTを追加

ADD COMPONENTからSCRIPT追加します。

2. SCRIPTコンポーネントの中のADD SCRIPTからスクリプトを追加

3. すべてのスクリプトを追加

characterController, firstPersonCamera, gamePadInput, keyboardInput, mouseInput, touchInputのスクリプトすべてを追加します。
追加方法は、それぞれ出てきたスクリプトが名をクリックすることで追加できます。

スクリーンショット 2020-06-10 16.03.09.png

4. プレイヤーにスクリプトが適用される

スクリーンショット 2020-06-10 16.03.27.png

スクリプトを適用した結果はこのような状態です。

5. firstPersonCameraの中にあるSelect Entityをクリック

firstPersonCameraのスクリプトのCameraCameraエンティティを追加します。

6.ヒエラルキーのCameraを追加

ヒエラルキーの中にあるCameraをクリックします。Select Entityをクリックすると、ヒエラルキー以外が暗くなります。

スクリーンショット 2020-06-10 16.07.00.png

Select Entityをクリックすると、ヒエラルキー以外が暗くなります。

7.ヒエラルキーからCameraを選択

ヒエラルキーをクリックすると、Cameraという属性にCaemraエンティティが設定されます。

スクリーンショット 2020-06-10 16.07.04.png

床を作成

Playerの作成はできました、次に移動するための床の設定をします。

床にScaleの変更、COLLISION, RIGIDBODYを追加する

1.Planeエンティティを選択します。

スクリーンショット 2020-06-10 15.42.56.png

2.Scaleの変更

今回は広めに動き回りたいのでPlaneのScaleを変更します。
Scaleは下記の値に変更をします。

プロパティ名
Scale 50, 1, 50

スクリーンショット 2020-06-10 15.45.43.png

3. COLLISIONの設定

先ほどと同様にADD COMPONENTからCOLLISIONを選択します。
床の当たり判定も広く持ちたいのでCOLLISIONの値を変更します。

プロパティ名
Type BOX
Half Extents 25, 1, 25

スクリーンショット 2020-06-10 15.46.36.png

4. RIGIDBODYの追加

RIGID BODYも同様に、ADD COMPONENTから追加をします。
床の場合はこちらはStaticのままで大丈夫です。

床の作成はこれで完成しました。次は一人称視点を実装していきます。

一人称視点を実装する

この状態でゲームを起動するとキャラクターの操作ができるようになっています。これの後は、ヒエラルキーを調整して、1人称視点を実装します。

現状確認をするゲームを起動する

1. ゲームの起動をする

ゲームの起動は、シーンビューから行うことができます。

2. WASDで操作、Spaceキーでジャンプ

WASDキーでPlayerの操作を行うことができます。Spaceをクリックすることでジャンプすることができます。

d4.gif

カメラをPlayerのエンティティの下に配置

ゲームを起動すると分かりますが、現状はFirstPersonではありません、カメラの
カメラをPlayerのヒエラルキーの中に配置します。

1.CameraエンティティをPlayerエンティティの下にドラッグアンドドロップ

変更前

スクリーンショット 2020-06-18 12.38.09.png

変更後

CameraエンティティをPlayerの下に配置をします。

スクリーンショット 2020-06-18 12.38.13.png

起動

d5.gif

この状態で起動すると、FPS視点での操作が可能になります。

キューブのモデルを削除

FPS視点でキューブが見える必要は無いので、キューブのモデルを削除します。

1. Playerを選択

Playerエンティティを選択します。

スクリーンショット 2020-06-18 12.41.41.png

2. ENTITYのINSPECTORからモデルを削除

Playerが選択したあと、INSPECTORの中にある、MODELを削除します。

sakujo.png

モデル
モデルコンポーネントは、エンティティがプリミティブな形状やモデルのアセットをレンダリングすることを可能にします。
Modelコンポーネントはコンポーネントパネルの右上のトグルで有効と無効を切り替えることができます。有効にした場合、Modelはシーンに追加されレンダリングされます
https://developer.playcanvas.com/ja/user-manual/packs/components/model/

MODELコンポーネントを削除するとCOLLISION, RIGID BODY, SCRIPTがPlayerエンティティの中に残ります。

スクリーンショット 2020-06-18 12.44.12.png

お疲れさまでした、これで一人称視点の設定ができました。

起動して確認

こちらがここまで作ったプロジェクトになります。
配置されているエンティティが床だけだと、少しわかりにくいので、建物を配置します。

d6.gif

※補足

建物を配置する

このままでは少し見栄えが寂しいので、建物を追加していきます。
建物についてはPlayCanvasで用意されているSTOREの機能使います。

1. STOREにアクセス

ASSETSの上にある、STOREをクリックして、STORE画面にアクセスします。

store.png

2. Small Villaを選択

STOREの中にあるSmall Villaをクリックします。

スクリーンショット 2020-06-18 12.49.12.png

3. DOWNLOADをクリックし、プロジェクトへインポート

ページ内のDOWNLOADをクリックし、プロジェクトへインポートします。

スクリーンショット 2020-06-18 12.51.52.png

4.プロジェクトへ戻り、Small Villaをドラッグアンドドロップで配置します。

Sna.png

これでPlayCanvasで1人称の操作を実装する事ができました。
ストアからSmall Villaを配置しましたが、ローカルのFBXやOBJファイルをエディタにドラッグアンドドロップすることで配置することができます。

ゲームを公開する

PlayCanvasでは作成したゲームをウェブ上ですぐに公開することができます。

1. 左のMEBUからPUBLISH/DOWNLOADをクリック

publish.png

2. PUBLISH TO PLAYCANVASから公開

oc.png

3. BUILDSを確認

PUBLISHが成功するとBUILDSに共有できるURLが生成されます。
こちらを共有することで、第三者に完成したプロジェクトを公開することができます。

URL.png

完成品のプロジェクトはこちら
https://playcanv.as/p/ygI1bj7M/

※補足

2020/6/18 Qiitaトレンド入りしました!
この後に繋がりそうなリンクを追記しました。

3Dモデルの素材について

この後、作った空間に3Dモデルを配置したくなったときに使えるウェブサイトを紹介します。

Google Poly

素材の配布場所としておすすめなのがGoogle Polyです。

CC-BYライセンスで、公開されている3Dモデルが多数あります。
https://support.google.com/poly/answer/7418679

スクリーンショット 2020-06-19 13.43.05.png

https://poly.google.com/

1. 検索

検索ボックスから動物の名前などで検索をします。

スクリーンショット 2020-06-19 13.45.13.png

2. モデルを選択

製作者の名前がPoly by GoogleのFoxを選択し、モデルの詳細を確認できます。

スクリーンショット 2020-06-19 13.47.32.png

画像の狐のモデルはこちらになります。
https://poly.google.com/view/10u8FYPC5Br

3. OBJ形式でダウンロード

3DモデルをOBJ形式でダウンロードできますのでダウンロードします。
スクリーンショット 2020-06-19 13.47.38.png

4. PlayCanvasへインポート

ダウンロードした3DモデルはドラッグアンドドロップでPlayCanvasにインポートできます。

dd.png

5. インポートしたモデルを配置する

インポートした3Dモデルを配置します。配置するためにはASSETSから、シーンにドラッグアンドドロップドロップをします。
Scaleがこのままだと小さいのでINSPECTORScale1100に変更します。
model1.png

テクスチャを適用する

このままだと色がついていないので、先程ダウンロードしたフォルダの中にある、テクスチャを適用します。

1. マテリアルの設定(1) - モデルに適用されているマテリアルを確認

モデルのマテリアルテクスチャを設定するには、モデルコンポーネントの中にある、適用されているモデルをクリックします。
model.png

+#### 2. マテリアルの設定(2) - マテリアルの確認

mat1.png

3. マテリアルの設定(3) - テクスチャをDIFFUSEに設定

アップロードした、テクスチャをASSETSからドラッグアンドドロップして、マテリアルのDIFFUSEに設定します。

adad.png

これで、設定ができました。
質問などが有りましたら @mxcn3までお願いします。


PlayCanvas開発で参考になりそうな記事の一覧です。


その他関連
- PlayCanvasタグの付いた記事一覧

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

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

yushimatenjin
インターネットに無限の可能性を感じています。
https://twitter.com/Mxcn3
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした