メインコンテンツまでスキップ
HELP

画像素材の使い方

PNGをUnityへ取り込み、Fade・満員時メッセージ・到着通知などで使うための共通手順を紹介します。
透過PNG、用途別のサイズ目安、必要な場合だけ使う9-sliceも確認できます。
画像サイズは固定条件ではなく、作り始めるときの目安です。

1. PNGをUnityへ取り込む​

  1. 使用したいPNGをUnityのProjectビューへドラッグする

  2. ProjectビューでPNGを選択する

  3. Inspectorの Texture Type を Sprite (2D and UI) に変更する

    Texture TypeのプルダウンでSprite (2D and UI)を選ぶUnity Inspectorの例

  4. Apply を押す

  5. 使用したい機能の画像欄へ設定する（Fadeなら Fade画像、満員時メッセージなら 装飾PNG、到着通知なら 背景PNG）

  6. 各機能のプレビューで確認する

Sprite (2D and UI) は、PNGをUI用の画像として使うための設定です。
通常のPNG画像を使用するだけなら、基本的にはここまででOKです。

✓ 画像欄へ指定でき、プレビューに表示されればOKです。

付属PNGについて

満員時メッセージと到着通知のスクリーンショットで使用しているピンク色のPNGは、商品・配布データに付属する共通素材です。
そのまま使用することも、自分で用意したPNGへ差し替えることもできます。
FadeページのカラフルなPNGは説明用サンプルで、付属しません。

2. 画像サイズの目安​

使用場所目安サイズ比率用途
Fade・Desktop1024 × 576 px16:9Desktopの16:9プレビューに合わせやすい
Fade・VR1024 × 1024 px1:1VRの1:1目安プレビューに合わせやすい
満員時メッセージ・基本1024 × 192 px約16:3一般的な横長の枠・背景
満員時メッセージ・細め1024 × 128 px8:1細い枠やライン寄りの装飾
満員時メッセージ・高さあり1024 × 256 px4:1高さを持たせたい装飾
到着通知カードの縦横比に近い画像固定比率なしカードサイズに合わせて調整

画像サイズや比率に固定ルールはありません。
このサイズでなければ使用できないわけではなく、迷ったときに作り始めやすい目安です。
最終的な見た目は、各機能のプレビューを確認しながら調整してね。

Fade用画像​

Desktopは 1024 × 576 px（16:9）、VRは 1024 × 1024 px（1:1） を基準にすると、プレビューに合わせやすいです。
別の比率の画像も使用でき、表示方式の 中心 / Fit / Fill や 画像倍率・画像位置 で調整できます。
VRの1:1プレビューはデザイン確認用の目安で、実機の表示そのものを保証するものではありません。
最終的な見え方はVR実機で確認してね。

表示方式の違いは、Fadeで確認できます。

満員時メッセージ用画像​

横長の装飾PNGは 1024 × 192 px前後（約16:3） が基本の目安です。
細めなら1024 × 128 px、高さを持たせたい場合は1024 × 256 pxなどから作れます。
背景幅・上下左右の余白・テキスト量・ライブプレビューを見ながら調整してね。
枠の角を保って伸ばしたい場合は、9-sliceも使用できます。

到着通知用画像​

到着通知の背景PNGは、設定している通知カードの縦横比に近い画像を用意すると調整しやすいです。
カードサイズや背景画像の表示方式・倍率・位置を変更できるため、固定サイズではありません。

背景画像の調整方法は、到着通知で確認できます。

3. 透過PNGを使う​

背景の一部を透明にしたい場合や、枠・ロゴ・装飾だけを表示したい場合は 透過PNG を使えます。
満員時メッセージでは、装飾PNGの透明部分から下の背景色を見せられます。

4. 任意：9-sliceで枠の角を保つ​

横長の枠画像を伸ばしたとき、四隅まで大きく伸びてしまうのを防ぎたい場合に使います。
PNG利用の必須工程ではありません。
この説明書では、主に 満員時メッセージの装飾PNG 向けの補足です。

  1. PNGの Texture Type を Sprite (2D and UI) に設定する
  2. Apply を押す
  3. Sprite Editor を開く
  4. 枠に合わせて Border を設定する
  5. Sprite Editorで Apply を押す
  6. 満員時メッセージの 装飾PNG 欄へ設定する
  7. 縦横比を維持 をOFFにし、ライブプレビューで確認する

満員時メッセージは、縦横比を維持がOFFのとき、Borderを設定した9-slice装飾に対応します。

Sprite Editorが開けない場合

9-slice用のBorder設定には、Unityの 2D Sprite パッケージが必要です。
Sprite Editorを開いたときに未登録の案内が表示された場合は、Window → Package Manager → Unity Registry → 2D Sprite からインストールしてね。
通常のPNG画像をそのまま使用するだけなら、Sprite Editorや2D Spriteの追加設定は必要ありません。

Borderの詳しい操作は、UnityのSprite Editorマニュアルでも確認できます。

✓ 背景幅を変えても、枠の角が大きく伸びずに表示されればOKです。

関連ページ​