概要

このチュートリアルでは、”チュートリアル - PlayCanvasの基本操作”で作成したタンクゲームをベースとし、アニメーション、エフェクト、マテリアル設定にフォーカスして、よりリッチな演出を追加していく、という内容となっています。

今回のチュートリアルでは、タンクゲームの基本的な操作部分が既に出来上がっているプロジェクトを
" Fork "(複製)して行いますので、スクリプトに抵抗のある方でも、問題なくチュートリアルを進めることが出来ます。

PlayCanvas エディター上での各マテリアルスロットルの説明やテクスチャの設定、Particle System を使用したエフェクトの作成/制御を通してコンテンツのクオリティを"デザイナー目線"から仕上げるためのワークフローを学んでいきましょう。

[移動 : アローキー ↑ ← ↓ → / W A S D] [砲撃 : spaceキー]

左クリック＆ドラッグでカメラ自由回転 / shift ＆マウスホイールでカメラ自由移動

PlayCanvas アカウントをまだ作成していない場合は、3分でアカウント作成から3Dモデルビュワーまで体験ができるチュートリアルがございますので、まずはこちらから参照ください。
→ https://support.playcanvas.jp/hc/ja/articles/4404199480089

Chapter01 - Projectのフォーク

3D-TankGame のプロジェクトを複製( Fork )して使用します。下記 URL にアクセスしてください。

https://playcanvas.com/project/650805/

Fork ボタンを押すと、プロジェクト名とオーナーを決めるダイアログが出ますので、お好きなプロジェクト名を入力してください。オーナーはそのままの設定でOKです。入力が完了したら再度、ダイアログの Fork ボタンをクリックしてください。

Fork したら、EDITOR ボタンをクリックし、PlayCanvasのビジュアルエディターへ移動してください。

Chapter02 - Materialを適用する

シーン( SCENE )に配置されているオブジェクトを見ると、地面、 UFO とタンクの一部のマテリアルが未設定のため真っ白です。これから各 MATERIAL を設定していきます。

設定していくマテリアルは赤枠の tank_Material です。クリックすると MATERIAL の各項目が出てきます。

ASSETS 欄の中の texture フォルダをクリック。このシーンで使用されているテクスチャが入っています。

MATERIAL の各項目は何も設定されていません。

AMBIENT(アンビエントオクルージョン)

エンティティの周囲の環境光の色を反映します。Ambient を設定することで、エンティティが周囲の環境光に照らされた時の色合いを調整することができます。

DIFFUSE(カラー)

DIFFUSE に body.png を適用しました。

エンティティが直接光に当たった時の色合いを調整する重要なマテリアルプロパティです。Diffuse を適切に設定することで、エンティティの外観をよりリアルに表現することができます。

Diffuse と Ambient の違いは、Diffuse は直接光の色を反映するのに対し、Ambient は周囲の環境光の色を反映する点です。Diffuse はエンティティが直接光に当たった時の色合いを調整するのに適しており、Ambient は、エンティティが周囲の環境光に照らされた時の色合いを調整するのに適しています。

Diffuse マップが設定されていない場合、Diffuse カラーが代わりに使用されます。

SPECULAR/Glossiness(光沢)

エンティティの光沢を調整します。Specular を設定することで、エンティティが光を反射する際の反射率や色合いを調整することができます。

Glossiness を100%に上げてみると、光沢感と環境光が反映されますが、ポリゴン形状に沿った効果なので、全体的にツルツルした感じです。

SPECULAR/Metalness&Glossiness(メタル光沢)

Use Metalness にチェックを入れ、 body_metalness.png を適用、Glossiness には
body_glossiness.png を適用しました。Metalness で鈍いメタルな質感を出し、Glossiness で革や窓などの光沢が必要無いマットな部分と差別化しています。

OPACITY(透過)

窓部分を半透明にします。透過したい部分のテクスチャを黒#000000~で透過されます。

また、透過方法にはいくつかのブレンドタイプがあります。

NORMALS(法線マップ)

エンティティの表面の凹凸や光の反射を調整することができます。（ PlayCanvas では、Height マップではなく Normal マップを使用する必要があります）
Bumpiness で0～2で高低差を調整します。

基本的な効果としては以上です。ここからは、さらに特殊な効果を見ていきます。

EMISSIVE(自己発光)

エンティティが暗い場所でも光を放つようにすることができます。
発光させたい部分のカラー情報を持ったテクスチャを適用。今回はラインやマーク部分に使用。

ENVIRONMENT(環境マップ)

マテリアル個別に環境マップを適用できます。ワールドに適用されている環境マップより優先的に描画されます。
※ Environment はワールド環境への設定が個別にあり、後半で作成/設定方法を解説します。

PARALLAX(視差マッピング)

Parallax は、グレースケールの濃淡をテクスチャの繰り返しを調整することで、エンティティの表面の凹凸を表現します。
テクスチャを繰り返し表示することで、エンティティの表面が立体的に見えるようになります。

キャラクターに入れると効果が分かりにくいので、地面のマテリアルを設定しながら見ていきます。

DIFFUSE

NORMAL

PARALAX

これで、テクスチャとマテリアルの設定は終了です。次は Particle System を使って煙のエフェクトを作成していきます。

Chapter03 - ParticleSystemでエフェクトを作る

ここでは３つのタイプのエフェクトを ParticleSystem を使用し、作成していきます。"常に発生し続けるタイプ"、"アクションの瞬間にだけ発生するタイプ"、"アニメーションを含んだタイプ"です。

パーティクルを発生させます。HIERARCHY から、関連付けしたいオブジェクトを選択した状態で、HIERARCHY の右側にある＋ボタンをクリックすると ParticleSystem があるので選択してください。ビューポート上の、オブジェクトの中心から、粒子状のパーティクルが発生していることが確認できます。

排気ガスを作成してみよう

添付のアニメーションは完成動画です。

HIERARCHY から、tank 内に格納されている tank_cater → Exhaust_pipe を選択した状態で、HIERARCHY の右横にある
+ ボタンをクリックし、 Particle System を選択してください。

位置の調整

Exhaust_pipe の中心点に発生しているパーティクルを排気口のある位置に移動します。左上の"矢印十字"を選択し、ビューポート上で移動調整します。

または、ENTITY 内の Position の X Y Z 値に数値入力で移動させます。

X : -1.3 / Y : 5.3 / Z : 7

常に発生し続ける煙の設定

まずはパーティクルの ParticleCount (発生個数)、 Lifetime (発生から消滅までの時間)などの設定です。

ParticleCount	1000
Lifetime	2
Emission Rate	From: 0.01 / To: 0.1

ColorMap に smoke_1.png を適用することで粒子状が煙のテクスチャへ変更されます。
また、アルファ(背景色が透過100%)を持っている場合、透過されます。

ASSETS 欄の texture フォルダ内にある" smoke_1.png "を ENTITY の ColorMap スロットルに
ドラッグ＆ドロップし、適用させます。

グラフエディタの使い方

グラフエディタを使用し、発生する位置や、移動する方向、速度、スケール、カラー、透過を調整していきます。また、" Randomize "にチェックを入れると指定した範囲内でランダム化します。

グラフエディタの操作は上記の通りです。

●左クリックでポイントの移動と追加
●ポイント上で右クリックでポイント削除
●ライン外で右クリック＆ドラッグでグラフ全体の移動
●ホイールでスケールの拡大縮小

Local Velocity

パーティクルの発生ポイントから、進む方向を指定できます。Y で上下、Z で前後、X で左右。今回の排気ガスの様なエフェクトは排管から勢い良く出る煙なので、Y と Z を下記の様に設定します。

X	Time 0.0 / Value 0.0
Y	Time 0.0 / Value 0.0	Time 0.8 / Value 1.0	Time 1.0 / Value 4.0
Z	Time 0.0 / Value 0.0	Time 0.5 / Value 2	Time 1.0 / Value 0.3

発生範囲の再調整

Lifetime の値に合わせて発生範囲が決まりますが、LocalVelocity で移動方向の値を入れると発生範囲外へパーティクルが出てしまいます。この時パーティクルは Lifetime が終了するまで飛ぶので、逆側から出てきてしまいます。

リロードボタンをクリックすることで正しい状態で発生するようになります。

Velocity

パーティクルの発生ポイントから0.0~1.0の間で移動方向を指定できます。マイナス値を指定すると原点へ戻ろうとする力が働きます。" Randomize "にチェックを入れてパーティクル Y 、 Z 方向に移動していくパーティクルの速度と方向をランダム化します。

X	Time 0.0 / Value -0.8	Time 0.0 / Value 0.8
Y	Time 0.0 / Value 0.0	Time 1.0 / Value 4.0
Z	Time 0.0 / Value 0.0	Time 0.43 / Value 2.0	Time 1.0 / Value 0

Radial Speed

パーティクル全体の速度と方向を設定できます。プラス値でより遠くへ加速していきます。逆にマイナス値に設定すると原点へ戻っていく力が働きます。このパーティクルでは速度が徐々にゆっくりとなるように指定します。

Time 0.0 / Value -3.0

Time 0.5 / Value -2.5

Time 1.0 / Value -5.0

Rotation Speed

パーティクルが発生してから消滅するまでの間の回転を指定できます。煙の様なテクスチャマップを使用している場合、回転値を指定しないと固定された状態のテクスチャが飛んでいきます。

Time 0.0 / Value 0.0

Time 0.2 / Value 180.0

Scale

パーティクルが発生してから消滅するまでの間のスケール(大きさ)を指定します。

Time 0.0 / Value 0.0

Time 0.5 / Value 0.5

Time 1.0 / Value 1.0

Color

パーティクルの発生から消滅までの間のカラー変化を指定できます。

Opacity

パーティクルの透過度を指定できます。

Time 0.0 / Value 0.5

Time 0.25 / Value 0.2

Time 1.0 / Value 0.0

Duplication(複製)

HIERARCHY の右側 Duplicate Entity をクリックし、パーティクルを複製します。同じ位置に複製されるので、位置を調整します。

X : 1.2 / Y : 5.3 / Z : 7

Chapter04 - 砲撃の煙エフェクト作成

HIERARCHY から tank → tank_cater にある Pounding_smoke を選択してください。

砲撃の瞬間に発生するエフェクトを作成する。

Emission Rate でパーティクルの発生が永続的か、瞬間的かを指定します。砲撃の瞬間のみ発生させたいので、Emission Rate は、From: 0 / To: 0 にします。

Particle Count	50
Lifetime	1
Emission Rate	From: 0 / To: 0

ColorMap に smoke_1.png を適用します。

Local Velocity

Z 軸方向に広がりながら移動するように指定します。

X	Time 0.0 / Value 0.0
Y	Time 0.0 / Value 0.0
Z	Time 0.0 / Value -2.0

Velocity

+Z 軸方向にある程度進み、ほんの少しだけ-Z 軸へ戻る動きにします。

X	Time 0.0 / Value 3.0	Time 0.0 / Value -3.0
Y	Time 0.0 / Value 3.0	Time 0.0 / Value -3.0
Z	Time 0.0 / Value 1.0	Time 0.0 / Value -1.0

Radial Speed

パーティクルの移動速度と方向を、発生から徐々に”ランダム＆ゆっくり”にします。

Time 0.0 / Value -2.5

Time 0.3 / Value 5.0

Rotation Speed

パーティクル発生時に +180° 回転角がある状態から、パーティクル終了時までに -180° まで回転して終了します。

Angle

Time 0.0 / Value 180.0

Time 1.0 / Value -180.0

Scale

スケール値０から Time 0.6 秒までの間で、スケール値 +3.0 へ拡大させ、Time 1.0 でスケール値を 0.0 にしています。

Scale

Time 0.0 / Value 0.77

Time 0.6 / Value 3.0

Time 1.0 / Value 0.0

Opacity

透過率１から Time0.5 までの間で、透過率０へ変化するようにしています。

Opacity

Time 0.0 / Value 0.5

Time 0.7 / Value 0.0

Loopを停止させる

砲撃のアクション時のみ再生されるように、Loop のチェックを外し、繰り返さない状態にします。

Chapter05 - アニメーションするエフェクト作成

HIERARCHY から UFO → UFO_Spark を選択してください。

スパークするエフェクトを作成する

Emitter Shape で Sphere を指定し、球状の空間内でエフェクトをランダムに発生させます。

Particle Count	100
Lifetime	0.2
Emission Rate	From: 0.01 / To: 0
Intensity	1
Emitter Shape	Sphere
Emitter Radius	5
Inner Radius	10

Color Map

発生するパーティクルをアニメーションさせたい時は、Color Map に複数の画像(透過情報を持った)を
並べたスプライトシート画像を指定します。

テクスチャは ２のn乗 pixel で作成することでタイリングが正確に行われます。

Horizontal Tiles	3
Vertical Tiles	3
Animation Count	1
Animation Index	0
Frame Count	6
Start Frame	0
Animation Speed	1

Radial Speed

パーティクルの進む移動速度と方向を+方向～ -方向～ +方向へと変化させています。

Time 0.0 / Value -1.0

Time 0.5 / Value 5.0

Time 1.0 / Value -1.0

Rotation Speed

Angle

Time 0.0 / Value 180

Time 1.0 / Value -180

Scale

パーティクル発生時、ランダムな大きさから徐々に小さくしています。

Scale上	Time 0.0 / Value 6.0	Time 0.5 / Value 4.0	Time 1.0 / Value 0.0
Scale下	Time 0.0 / Value 0.5

Opacity

パーティクル発生時から徐々に透過率を上げ、透明にしています。

Opacity

Time 0.0 / Value 0.5

Chapter06 - ENVIRONMENT(環境マップ)を作成

PlayCanvas では個々のマテリアルとワールド環境に ENVIRONMENT (環境マップ)を設定できます。前述で紹介したのは個々のマテリアルに直接 Cubemap を適用した例でした。
ここでは、ワールド環境への設定方法と CubeMap の作成方法を解説していきます。

ENVIRONMENT無し

ENVIRONMENT有り

CubeMap用画像の生成

元となる画像をインポートし、右クリックから Create Cubemap を選択します。

自動で6枚の画像が生成され、FACESがセッティングされます。

参考: ワンクリックでCubemapを作成！

Prefilter

Prefilter をクリックすると環境マップとして機能します。
Prefilter をオンにしないとただの画像のままなので、画像の彩度から光度を算出できません。

RENDERINGに適用

Settings の RENDERING 内にある Skybox の空きスロットルに作成した CubeMap をドラッグ＆ドロップします。

Chapter07 - H2MD(ムービーテクスチャ―)

株式会社アクセル様がサードパーティ H2MD を PlayCanvas に対応して頂き、使用可能となったムービーテクスチャ―です。.mp4 もしくは .avi をコンバーターで .h2md へ変換したデータを PlayCanvas のマテリアルとして使用します。

今回のタンクの場合は、ラインやマーク部分が光るようにしました。展開した EMISSIVE 用のテクスチャをベースにして、Adobe After Effects でラインアニメーションを作成し、背景を透過した .mp4 をコンバーターで .h2md へ変換しました。

PlayCanvasへ適用

HIERARCHY から tank を選択した状態で、 ADD COMPONENT 内の Script を選択し、H2MDTexture.js を適用します。
空きスロットルが現れますので、tank_Material と body.h2md を空きスロットルへドラッグ＆ドロップしてください。

h2md.min.js : minify 化された PlayCanvas で H2MD を再生するためのライブラリです。

H2MDTexture.js : ENTITY 内でマテリアル .h2md を指定するためのスクリプトです。

Emissive の値が0だと効果を確認できないので、0以上の数値を入力してください。

Chapter08 - 公開

ここまで作成したものを PlayCanvas の公開環境に公開してみましょう。

左のメニュー、またはシーンの左上の Manage Scenes から以下の Publish 画面を開きます。

PUBLISH 画面の" PUBLISH TO PLAYCANVAS "をクリック。

下までスクロールすると PUBLISH NOW のボタンがありますので、任意に Version 情報や Release Notes を記入して(何も記述しなくてもOKです)クリック。

PUBLISH が完了すると、共有用の URL が生成されます。

URL で PC 、スマホ、他ユーザーにもログインすることなく共有することができます。
チュートリアルは以上となります。お疲れさまでした。

このセクションの記事

目次

概要

Chapter01 - Projectのフォーク

Chapter02 - Materialを適用する

AMBIENT(アンビエントオクルージョン)

DIFFUSE(カラー)

SPECULAR/Glossiness(光沢)

SPECULAR/Metalness&Glossiness(メタル光沢)

OPACITY(透過)

NORMALS(法線マップ)

EMISSIVE(自己発光)

ENVIRONMENT(環境マップ)

PARALLAX(視差マッピング)

Chapter03 - ParticleSystemでエフェクトを作る

排気ガスを作成してみよう

位置の調整

常に発生し続ける煙の設定

グラフエディタの使い方

Local Velocity

発生範囲の再調整

Velocity

Radial Speed

Rotation Speed

Scale

Color

Opacity

Duplication(複製)

Chapter04 - 砲撃の煙エフェクト作成

砲撃の瞬間に発生するエフェクトを作成する。

Local Velocity

Velocity

Radial Speed

Rotation Speed

Scale

Opacity

Loopを停止させる

Chapter05 - アニメーションするエフェクト作成

スパークするエフェクトを作成する

Radial Speed

Rotation Speed

Scale

Opacity

Chapter06 - ENVIRONMENT(環境マップ)を作成

CubeMap用画像の生成

Prefilter

RENDERINGに適用

Chapter07 - H2MD(ムービーテクスチャ―)

PlayCanvasへ適用

Chapter08 - 公開

関連記事