Friday, October 19, 2018

Amazon Lumberyard学習メモ:テクスチャーとライティング

今回はオブジェクトにPBR用テクスチャーをアサインし、ライティングする手順を紹介します。
使用するLumberyardのバージョンは1.15.0.0です。

参考資料:
Amazon Game TechのYoutubeチャンネルLumberyardユーザーガイド

まずはオブジェクトを用意します。今回はテスト用にこの様なキューブ状のオブジェクトを作成しました。これをFBXでエクスポートしておきます。


このオブジェクトの為のマテリアルを作成します。
今回は3D-Coatを使っています。


同様に床用のプレーンオブジェクトも用意します。


床用のプレーンオブジェクトから作成したPBR用のテクスチャーです。今回はPNGで作りました。
(2019/01/04追記:後から気づいたのですが、テクスチャーに追加したアルファチャンネルがPNGでセーブした時にロストしてました…画像フォーマットには詳しくないので良く分かりませんが、PNGのアルファって必ず透過として持つ仕様なんですかね?とりあえずTGAなら問題無いので、下の画像も差し替えました。)

LumberyardのPBRはスペキュラーワークフローなので、Diffuse・Specular・Glossiness・Normalの4種類を使います。この内Glossinessは、こちらのドキュメントに従いNormalのアルファチャンネルに格納します。なのでLumberyardで使用するテクスチャーファイルは3つという事になります。
各テクスチャーファイルにはこちらのドキュメント通りにサフィックスを付けます。

NormalのRGBは下図の様にします。

3D-Coatを使う場合、出力した画像のGreenチャンネルを反転させるとこの様になります。

全てのオブジェクトとテクスチャーが用意出来たらC:/Amazon/Lumberyard/1.15.0.0/dev/StarterGame/の下に適当なフォルダを作り移動させます。今回は以前キャラクターを作った際に用意した場所を再利用する事にし、以下の様にしました。

オブジェクトの移動先
C:/Amazon/Lumberyard/1.15.0.0/dev/StarterGame/Items_LowPolyMan/objects/

テクスチャーの移動先
C:/Amazon/Lumberyard/1.15.0.0/dev/StarterGame/Items_LowPolyMan/textures/

では、Lumberyard Editorでの作業に入ります。
まずFile - Newで新規レベルを作成して下さい。


次はオブジェクトの用意です。
Entity Outlinerでマウス右クリック → Create Entityを実行し、新規Entityを作成します。


作成したEntityを選択した状態でEntity InspectorでAdd Componentを実行します。


ComponentのリストからMeshを選びます。


追加されたMeshコンポーネントのMesh assetのブラウズアイコンをクリックしてファイルブラウザを出し、用意しておいたオブジェクトをロードします。


Perspectiveビューにオブジェクトが表示されました。


かなり遠いのでカメラを寄せてみます。Entity Outlinerでオブジェクトのエンティティを選び、マウス右クリック → Goto Entities in Viewportを実行します。


近くに表示されました。


マテリアルをアサインします。
まずTools - Material Editorを実行してマテリアルエディタを表示します。


マテリアルエディタ左カラムにあるファイルブラウザから、先ほどのオブジェクトを選択します。右カラムに球と「Default」と名前が付いたエリアが表示されます。


Defaultエリアをクリックします。


下に詳細が表示されます。


各テクスチャーのスロットにファイルをロードします。


(2018/11/30追記) Diffuse Color(Tint)、Specular Color、Smoothnessそれぞれの値を上限の255にします。


Perspectiveビューのオブジェクトにテクスチャーがアサインされました。


確認し易い様に視点を斜め位置にしました。視点はマウス各ボタンドラッグで動かします。


オブジェクトはMoveツールで移動させられます。


同じ手順で床のオブジェクトも配置しました。


タイリングはDiffuseのAdvancedの中にあるTilingで設定します。


太陽の方向を調整してみます。
Tools - Other - Sun Trajectory Toolを実行します。


Sun Trajectory ToolのTime of Dayスライダーで時刻を朝に変更します。


背景が朝になりました。

ですがオブジェクトを良く見ると、なんとなく明るい感じがします。環境光が更新されていないからです。

環境光を更新してみます。
Entity OutlinerでDefaultLevelSetupを選択します。


Entity Inspectorを見て下さい。DefaultLevelSetupエンティティの中にEnvironment Probeというコンポーネントがあります。その中にあるCubemap generationのCubemap - Resetボタンをクリックします。


キューブマップがリセットされ、環境光が真っ暗になりました。


次にCubemap - Generateをクリックします。


しばらく待つとキューブマップが生成され、オブジェクトが環境光で照らされました。


環境光の影響を調整してみましょう。
General SettingsのDiffuse multiplierとSpecular multiplierの値を変更してみます。


コントラストが強めになりました。


ちなみに、局所用にEnvironment Probeを追加する事が出来ます。
作り方は、新規にエンティティを作成しAdd ComponentでEnvironment Probeコンポーネントを追加するだけです。
下図では、左右に赤色と青色のEnvironment Probeを配置しています。キューブがエリアに入るとその色で照らされるのが分かります。






調整に戻ります。
キューブオブジェクトの影のエッジが甘いのでシャープにしてみます。
キューブオブジェクトのEntityを選択して下さい。


Add ComponentでHigh Quality Shadowを選択します。


影のエッジがシャープになりました。


ライトを作ってみます。
まず新規Entityを作成します。


Add Componentでライトのコンポーネントを追加します。今回はPoint Lightにします。


作ったライトで正面から照らしてみました。


ライトのOptionsのCast shadow specをNever以外にします。ライトの影が落ちる様になりました。


今回は以上です。

Sunday, October 7, 2018

Amazon Lumberyardで自作のキャラクターモデルを動かしてみる(7) -キャラクターを移動させる-

今回はキャラクターを移動させてみます。

前回から引き続き、今回の記事を書くにあたってこちらのサイトの記事を参考にさせて頂きました。
PaperSloth’s diary
Lumberyard ScriptCanvasで簡単なゲームロジック作成

前回までと同様、使用しているLumberyardのバージョンは1.15.0.0です。

今回は、今までの復習的に一通りの作業をやってみます。細かい手順はこれまでの記事を参照して下さい。

今回は移動という事で、新たに歩きモーションを作りました。移動値は無しです。つまり、その場で足を滑らせながら足踏みするモーションです。


これを以前Animation Editorで作ったMotion Setに追加します。


Anim graphのState Machineにも追加します。Anim graph上での構成は他のモーションと全く同じです。
このモーションはAnim graphのSelectパラメータを4.0にした時に再生される様にしました。


Input BindingとScript Canvasのスクリプトも、他のモーションと同様に設定します。
Input Bindingでのボタンアサインは、ゲームパッドのLスティックにしました。


このInputに対応するスクリプトは、今まで作った他のモーションのスクリプトをコピーして作ります。今回はAnim graphのSelectパラメータを4.0にした時にモーションが流れる設定にしました。


これでとりあえず、ゲームに入った時にLスティックを傾けると歩きモーションが流れる様になりました。ただし移動の処理をまだ作っていないので移動はしません。


続いて移動のシステムを作っていきます。
まずは回転です。
Input BindingでSpinというイベントを作り、ボタンアサインをゲームパッドRスティックのX方向の傾きにします。
スクリプトはスティックをHoldした時に動く様にし、値を(そのままだと回転が速すぎるので)0.1倍し、その値でキャラモデルのエンティティ"LowPolyMan"をZ軸回転させます。
こちらが作成したスクリプトです。

これで、Rスティックを横方向に傾けるとそちらの方向にキャラクターが回転する様になりました。

次に、これに移動処理を追加します。移動にはMove Entityというノードが用意されています。これは、与えられた値を速度としてエンティティを移動させる物です。速度はワールドXYZ各軸で指定します。
このノードにゲームパッドのスティックのXとYの傾きをアサインすれば、スティックの傾きに応じてX軸とY軸方向に動く様になります。
このやり方をベースに、先程作った回転処理を組み込んだスクリプトを組みます。具体的には、
1)回転によって生じた角度を取得し、単位ベクトルを作る
2)スティックのXとYの傾きの値それぞれに上記ベクトルを掛け算し、得られた値をMove Entityに入力する
…というスクリプトを作ります。

こちらが完成した移動/回転スクリプトです。先程の回転スクリプトの後ろに単位ベクトルを取得する部分を追加し、その数値をVariable(変数)に入れ、その下にある移動処理に渡しています。


黄色いノードが値を受け渡す為のVariable(変数)です。Script Canvas右下のCreate Variableで作成します。ここではNumber型を使っています。


Input BindingにはMoveXとMoveYという二つのイベントを追加作成しました。


ではPlay Gameでテストです。
歩きました!
(実はこのスクリプトでは、キャラクターを最初に一度回転させる必要があります。スクリプト上でVariableに初期値を設定していないので、まず回転させないと値が入らないんですね。)

カメラをキャラクターの階層下に置けば、TPSの様な操作になります。カメラはEntityにCameraコンポーネントを追加して作成します。


以上で、7回に渡って書いてきました「Lumberyardで自作のキャラクターモデルを動かしてみる」は一旦終了です。
「横や後ろ移動の時も同じ歩きモーションだよな」とか「斜め45度移動の時は√2倍の速度になってるのでは」とか色々ありますが、その辺りはまたの機会に挑戦しようかと思います。

お疲れ様でした!