ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

UnityのUGUIで「プレイエリアの外です」の様なものを作ってみた

こんにちは!VR事業部の長谷川(id:waffle_maker)です。
今回は小ネタで、「プレイエリアの外です」の様なものを作ってみました。

はじめに

「プレイエリアの外です」とは、PS VRの使用中にプレイエリア…つまりPS Cameraの認識範囲から外れた際に表示される警告表示のことです。
この素材を探したのですが、なかなか見つからず、だったら作ってしまえと言うことでやってみました。

以下イメージ画像です。 f:id:waffle_maker:20180408231107p:plain

縦横非などを柔軟に変更できるよう、Unityの9スライスの機能を使用します。 ※Androidの9-patchと同様の仕組みです。

docs.unity3d.com

環境は以下の通りです。

Photoshopで素材の作成

まずは、ファイルを新規作成します。
今回は、サイズを512x512ピクセルに設定しますが、適宜読み替えて下さい。

f:id:waffle_maker:20180408221144p:plain

楕円形ツールを選択し、キャンバスの適当なところをクリックして楕円形を作成します。

f:id:waffle_maker:20180408221205p:plain

円がキャンバスにぴったり合うように、バウンディングボックスを設定します。

f:id:waffle_maker:20180408221146p:plain

次にシェイプのディテールで、黒から透明への円形のグラデーションを設定します。

f:id:waffle_maker:20180408221148p:plain

不要な背景レイヤを非表示にするか削除し、ファイルを保存しましょう。

f:id:waffle_maker:20180408221153p:plain

メニューから、ファイル>書き出し>PNGとしてクリック書き出しを選択して、PNGファイルを書き出します。

f:id:waffle_maker:20180408221339p:plain

書き出したPNGファイルはこちらです。※ご自由にお使いください

OutOfPlayArea.png - Google ドライブ

Unity上での設定

Unityで起動し、書き出したPNGファイルをインポートします。
Project Viewでインポートしたファイルを選択し、Texture TypeをSprite (2D and UI)に設定してApplyボタンをクリックします。

f:id:waffle_maker:20180408224102p:plain

Sprite Editorボタンをクリックし、Borderを以下のように設定します。
ここでも忘れずにApplyしましょう。

f:id:waffle_maker:20180408224111p:plain

Hierarchy Viewに、CanvasとImageを追加し、確認しやすいようにWidthとHeightの値を横長に設定します。

f:id:waffle_maker:20180408224230p:plain

インポート設定で、Pixels Per Unitを256に変更するとこんな感じ…

f:id:waffle_maker:20180408224243p:plain

インポート設定で、Pixels Per Unitを512に変更するとこんな感じになります。

f:id:waffle_maker:20180408224300p:plain

まとめ

UGUIの9スライスは、非常に便利な機能です。
汎用素材を用意しておいて、後から設定で見た目を調整できるため、今後も活用したいと思いました!