シンプルなゲームの作成 - パート1

このチュートリアルでは、PlayCanvasを使って一本の完全なゲームを作る流れを説明します。"Keepy Up"という、ボールをタッチかクリックし続けることでボールを滞空させ続けるゲームを作りましたのでそれを、題材として説明します。

以下の項目について説明していきます:

シーンと階層構造
マテリアルの設定
ゲームスクリプト
ボールの物理シミュレーションと入力
効果音とエフェクト
ユーザインターフェース

このチュートリアルは手順を一つ一つ説明するガイドではありません。その代わり、ゲームを構成するすべてのスクリプト要素について、それらがどのように機能するかを説明していきます。チュートリアルを読むにあたって、このゲームプロジェクトをフォークし、自分のアカウント上で見ながら進めることをおすすめします。

その1: シーンと階層構造

PlayCanvasではシーンはエンティティの階層構造によって構築されています。それぞれのエンティティはゲームの中の「物体」に相当します。それぞれのエンティティはID, 名前とトランスフォームを持ちます。トランスフォームは3D空間でのエンティティの位置・回転・拡大縮小を表す行列です。シーンを構築するには、画面左側のパネルに表示されているツリー構造で、エンティティを作成したり並び替えたりします。ツリー構造では親要素が子要素に影響を及ぼします。例えば、すべての子要素は親要素の位置, 回転, スケールを引き継ぎます。また、親要素が無効にされた場合には、子要素も全て無効になります。

Keepy Upのシーンの階層構造には、7つのエンティティが最上位のエンティティとして存在します。

階層構造

Cameraエンティティ

カメラはゲームが実行中の時に、その場所からシーンを見ることになる場所です。このゲームにはカメラは一つしか存在せず、またカメラは静止しています。

Directional Lightエンティティ

ライトはシーン内の3Dモデルを照らします。有効になっているライトの数が増えれば増えるほど、シーンのレンダリングにかかる時間が増えます。これはゲームのフレームレートに影響します。通常は同時に有効になっているライトの数は数個に抑えることをおすすめします。このゲームでは、静止している指向性ライトを一つ使っています

Footballエンティティ

サッカーボールはシーンの中心となる動的なエンティティです。Footballエンティティは三つのコンポーネントを持っています。サッカーボールを選択すると、エディタ右側のアトリビュートパネルから確認することができます。三つのコンポーネントはそれぞれ以下のとおりです:

サウンドコンポーネント

サウンドコンポーネントを使うと、サウンドファイルを再生することができます。それぞれのサウンドコンポーネントはサウンドファイルごとに一つ割り当てられるスロットをいくつも持っています。サウンドをループさせるか、ボリュームやピッチといったオプションを指定することもできます。このサッカーボールにはボールがバウンドした時の効果音用のスロットがひとつ割り当てられています。

モデルコンポーネント

モデルコンポーネントは3Dモデルをエンティティにつける際に使います。エンティティについているモデルコンポーネントを有効にすると、3D空間のエンティティの場所に3Dモデルがレンダリングされます。このゲームでは、サッカーボールのモデルをつけてあります。

スクリプトコンポーネント

スクリプトコンポーネントを使うと、JavaScriptをエンティティにつけることができます。それぞれのエンティティは、エンティティの動作をカスタマイズできるよう、JavaScriptファイルの中のスクリプトのインスタンスを生成します。スクリプトの詳細についてはチュートリアルのその3で詳しく説明します。

Backgroundエンティティ

Backgroundエンティティにはもう一つのモデルコンポーネントがついています。今回はゲームの背景に使う板です。背景は標準エンティティの一つであるPlane(平面)エンティティに競技場のテクスチャを使ったマテリアルを割り当てることで作られています。このゲームではEmissive(発光性)スロットにマテリアルを割当て、サッカーボールや照明にかかわらず、影が落ちず一定の絵が表示されるようにしています。このエフェクトは昔の映画の背景のベタ塗りのような働きをします。

Impact Effectエンティティ

Impact Effect Entityはボールがバウンスする時に再生されるパーティクルエフェクトです。その4で詳細を説明します。

オーディオ

Audioエンティティにはいくつかのサウンドコンポーネントがついています。このエンティティは音楽とゲームオーバー時の効果音を鳴らすためのエンティティです。

UI (ユーザインタフェース)

UIエンティティはいくつかのエンティティの親エンティティです。子エンティティは、それぞれがゲームのある画面でのユーザインタフェースです。UIエンティティについてはチュートリアルその5で説明します。

チュートリアルその2ではメインのゲームスクリプトについて説明します。