UnityでFPSをつくる その6 [ 照準の表示 ]

2020年6月17日

今回は照準のUIを実装します。
白い十字で背景を透過した以下の画像を使用するので、右クリックで保存してください。

No.233

Assetsフォルダ直下に Imagesフォルダを新規作成します。

No.234

さきほど保存したファイルを Imagesフォルダ内に置いてください。
画像インポートの方法はすでに紹介した D&D(ドラッグ アンド ドロップ)以外にも、
Projectウィンドウのインポートしたいフォルダ内で右クリック →「Import New Asset」を選択する方法があります。

No.235

Unityで任意の画像を扱う場合 Sprite という形式に変換して読み込む必要がある為、
インポートしたファイルを選択して TextureType を「Sprite(2D and UI)」 に変更します。
最後に「Apply」を押して変更を確定させます。

No.236

次に、Hierarchyウィンドウから UI → Image を選択してください。

No.237
No.238

Canvas(UIの配置・描画を設定する領域)を親に持つ Imageオブジェクト、そして EventSystem(UIに対しての入力を検知する仕組み) が一緒に作られました。

SourceImageにSprite変換した画像を指定します。

No.239

RectTransformコンポーネントで高さと幅を決めます。

No.240
No.241

Spriteは直にScene上に配置することはできず、このようにCanvasを通じて使用します。
Canvas自体も初期設定ではScene上に配置されず、スクリーンに直接描画されます。

No.242

試しにカメラをOFFにしてみます。
Inspectorウィンドウから、カメラの親であるPlayerオブジェクトのチェックボックスを外します。

No.243

Gameビューが暗くなり、Sceneに配置されたものが表示されなくなりました。
しかし、UIの表示は消えていません。

No.244

文字に隠れて見えづらいですが、十字が表示されています。
Playerオブジェクトのチェックボックスを元に戻して実行します。

No.245

カメラの向きを変えてもUIがスクリーン中央に表示されています。
この実行画面には、2つほど改良ポイントがあります。

1つ目は十字のぼやけです。
Gameビューでマウスホイールを奥に回して画面を拡大するとわかりますが、十字がぼやけて表示されています。

No.246

Imagesフォルダ → SightImageのInspectorウィンドウからFilterModeを「Point(no filter)」に変更してApplyを押します。

No.247
No.248

ぼやかす処理を無くしたことで画像が鮮明に表示されました。

2つ目はマウスカーソルの表示です。
照準は十字の画像に合わせていくので、マウスカーソルの表示は不要になります。
スクリプトでマウスカーソルを非表示にしましょう。
Scirptフォルダに「CursorState」と名付けてスクリプトを作成します。

No.249

CursorStateスクリプトを開き、以下の記述を追加してください。

No.250

Hierarchyウィンドウで右クリック、「CreateEmpty」を作成 →「CursorControll」にリネーム → CursorStateスクリプトをアタッチ

No.251
No.252

CreateEmptyで作成したGameObjectはチェックボックスにチェックが付いた状態でもSceneビューには透明に表示されます(ギズモの表示のみ)。
そのオブジェクト固有 (プレイヤー、カメラ、敵など) の役割をさせる為にスクリプトをアタッチするのとは違い、UIの表示や複数オブジェクトを一度に移動させるようなシーン全体の動作を管理する時などに使われます。

No.253

実行すると、マウスカーソルが非表示になったのが確認できます。

No.254

ゲームの実行を停止するには、Escキーを押すことでカーソルの表示&固定解除ができます。

以上で[ 照準の表示 ]の説明をおわります、おつかれさまでした!

FPS

Posted by kenji