LessonEX HD-2Dもどき
EX-1 3D空間に2D画像を表示
ドット絵の2Dキャラクターと3Dの背景を組み合わせて表示する手法をHD-2Dと呼びます。有名なのはOCTOPATH TRAVELER（オクトパストラベラー）あたりでしょうか。
同じように3D空間に2D画像を表示してみましょう（本家は背景のテクスチャがドット絵ですが、ドット絵テクスチャの3Dモデルは用意できなかったのであくまで「もどき」です）
（公式サイトより転載）
画面から読み取れる特徴としては、
・3Dで作られたステージに2Dのドット絵で描かれたキャラクターが配置されている
・影やライトの影響を受ける
・被写界深度が強めにかかっている
といったところです。
それでは早速、3D空間に2D画像を配置してみましょう。
教材で使われている素材はここからDLできます →→→→→→
自前で用意した素材を使っても構いません。
ダウンロードした素材はそのままプロジェクト内に
ドラッグ＆ドロップで追加してOKです。
それでは3Dのプロジェクトを作成して「3D Object」→「Plane」で地面を追加してください。
プロジェクトに追加した画像素材を全て選んで、
FilterMode ：Point(no filter)
Compression ：None
に変更してからApplyをクリックしてください。
どちらの設定もUnityが勝手に画像を加工するのを防ぎ、元の素材（ドット絵）をそのまま表示するための設定です。
Ground_Normal（法線）を選び、TextureTypeをNormal mapに変更してからApplyをクリックしてください。
「Create」→「Material」で新しいマテリアルを作成して、名前をGroundにしておきます。Albedoには「Ground_Albedo」、Normal Mapには「Ground_Normal」をドラッグ＆ドロップしてください。
Metallic、Smoothness、Tilingなどのパラメータを調整して見栄えを整えましょう（お好みでOK）
マテリアルができたら、Planeにドラッグ＆ドロップで貼り付けてください。
ChikenとFireを選んでください。TextureTypeを「Sprite」に、SpriteModeを「Multiple」に変更してから、Applyをクリックしてください。
※ 自前の画像を使う場合、分割する画像だけをMultipleに変更してください
「Window」→「Package Manager」を選択してください。
左上のPackagesを「Unity Registry」に変更して、右上の検索欄に「Sprite」と入力しましょう。「2D Sprite」が左側に表示されるのでそれを選択して、右下のInstallボタンをクリックしてください。
2D SpriteはHD-2Dを作るときに必ずしも必要なものではないですが、画像を分割する時などに必要になります。
インストールできたら、ChickenのSprite Editorを開いてください。
左上のSliceボタンをクリックし、
・Type を「Grid By Cell Count」に変更
・Cloumn&Row をC=6、R=4に変更
以上の手順を実行してから、Sliceをクリックしてください。画像が分割されます。
最後に右上のApplyボタンをクリックして、Sprite Editorを閉じてください。
Chikenの正面の画像をシーン上にドラッグ＆ドロップしてください。
Chikenの位置や大きさを調整してください。少し大きめで、Y座標を少し上に上げておくのをオススメします。
カメラの位置や回転を調整して、Chikenが大きく見えるようにしてください。
画像が動かない点が気になるので、「Create」→「Animation」でアニメーションを作成してChikenにドラッグ＆ドロップしてください。
※ アニメーションの設定はやらなくてもOKです
アニメーションをダブルクリックして、アニメーションウィンドウを開いてください。
アニメーションウィンドウに画像をドラッグ＆ドロップするとアニメーションを作成できます。「Chicken_0」「Chicken_1」「Chicken_2」を使って、待機アニメーションを作成してみましょう。
アニメーションのLoop Timeにチェックがなかった場合、チェックを入れておいてください。
ゲームを実行してみると、3D空間上にある2D画像がアニメーションします。
ですが、地面をよく見ると影が落ちていません。このままでは不自然なので、次は影が落ちるようにしてみましょう。
新しいマテリアルMaterial2Dを作成して、RenderingModeはCutoutにしてください。
マテリアルをChikenにドラッグ＆ドロップしましょう。
ライトの影響を受けるようになりますが、まだ影は落ちません。
インスペクター右上のボタンを押して、デバッグモードに変更してください。
Unityのデバッグモードでは、普段は隠れているパラメータを確認することができます。影に関するパラメータも普段は隠されていますが、デバッグモードにすることで表示することができます。
SpriteRenderのCastShadowsを「On」に、ReceiveShadowsにチェックを入れてください。
CastShadows は「影を落とすかどうか」の設定です。これで地面に影が落ちるようになります。
ReceiveShadows は「影を落とされるかどうか」の設定です。これにチェックをいれることで、物陰に隠れたときに自分に影が落ちるようになります。
この設定ができたら、デバッグモードは解除しておきましょう。
CastShadows を「Two Siled」にすると、後ろから光が当たっても影が落ちるようになります（3Dアクションゲーム編の3-2で解説した内容と同じ）
Unity Tips!
ChikenにBoxColliderとRigidBodyをアタッチしてください。特に設定は変更しなくても構いません（HD-2Dの実装には不要ですが、影が落ちているのをわかりやすくするためにサンプルでは重力を実装します）
EX-2 背景を作る
同梱した3Dモデルを使って簡単な町を作ってみてください。後ほど被写界深度を実装するので、奥と手前に配置することを意識しましょう。地面が狭い場合は広くしても構いません。
作った町を歩き回れるようにしましょう。お試しなのでジャンプなどは実装せず、ただ移動できるだけです。
新しいスクリプトPlayerを作成して、赤い部分のコードを追加してください。内容は3Dアクションゲーム編1-3と同じなので、スクリプトを流用しても構いません。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Player : MonoBehaviour
{
public float MoveSpeed = 0.01f;
void Start()
{
}
void Update()
{
// 移動速度を初期化
Vector3 move = Vector3.zero;
// 前後移動
if (Input.GetKey(KeyCode.W))
{
move.z += MoveSpeed;
}
if (Input.GetKey(KeyCode.S))
{
move.z += -MoveSpeed;
}
// 左右移動
if (Input.GetKey(KeyCode.D))
{
move.x += MoveSpeed;
}
if (Input.GetKey(KeyCode.A))
{
move.x += -MoveSpeed;
}
// 移動させる
transform.localPosition += move;
}
}
コードがかけたらChikenにアタッチしておいてください。
今回は簡易版なので、カメラの実装も簡単に行いましょう。子オブジェクトは親オブジェクトに追従するというルールがあるため、カメラをプレイヤーの子オブジェクトにすることで簡単な追尾カメラを作ることができます。ただし、プレイヤーが回転するとカメラも回転してしまうため注意しましょう。
焚火を設置します。
FireのSprite Editorを開いて、Chickenと同じようにFireの画像を分割してください。
分割できたらFireのスプライトごと、シーン上にドラッグ＆ドロップしてください。自動でループアニメーションが作成されます。
3Dモデルにドラッグ＆ドロップしてしまうとテクスチャとして貼り付けられてしまうので、何もない空間にドラッグ＆ドロップしましょう。
アニメーションの名前や保存場所を決めるウィンドウが開きますが、名前は何でもOKです。保存ボタンをクリックしてください。
Fireをステージ上のいい感じの場所へ移動させ、拡大率を調整してください。
Chikenと同じようにマテリアルを貼り、デバッグモードで設定を行うことでFireも影が落ちるようになります。先ほどの内容を参考にFireにも影が落ちるように設定してみてください。
ですが、焚火なのに画像が暗くなってしまいます。これでは焚火っぽくありません。
新しいマテリアルを作成してください。サンプルではMaterial2D_Unlitと名前をつけています。
作成したシェーダーの種類を「Standard Unlit」に変更して、Rendering Modeを「Cutout」にしてください。
マテリアルをFireに貼り付けてください。
画像は明るいままで、地面に影が落ちるようになります。
「Light」→「Point Light」と選択して、ポイントライトを設置しましょう。
ポイントライトをオレンジ色にして、Range（範囲）、Intensity（強さ）を調整してください。
Shadows Typeを変更すると影が落ちるようになりますが、処理は重いので注意しましょう。
最後に3Dアクションゲーム編6-4と同じようにポストプロセスを導入してみましょう。
オススメのエフェクトは以下の通りです。
・Ambient Occlusion … 角になっている部分などが暗くなる
・Bloom … 明るい部分が更に明るくなる
・Depth of Field（被写界深度） … ピントの合っていない部分をぼかす
・Vignette … 画面の端を暗くする
特にDepth of Field は強めにかけておきます。パラメータを調整して、印象的な画面作りに挑戦してみてください。
