Help us understand the problem. What is going on with this article?

【Unityアドカレ2019】簡単にいい感じのUIが作れる Procedural UI Image について

More than 1 year has passed since last update.

この記事は、Unity アセット真夏のアドベントカレンダー 2019 Summer の、7日目の記事です。

本日ご紹介するのは、Procedural UI Image です。Procedural UI Image は、手続き的にUI画像を作成できるアセットです。アセットストアで人気上位のアセットなのですが、日本語の紹介記事がまだなかったため、書いてみようと思いました。

Procedural UI Image - Asset Store
d.png

概要

Procedural UI Imageは、Unityの標準UIコンポーネントであるImageコンポーネントの拡張です。いくつかのパラメータを指定すると、それをもとにリアルタイムに描画してくれます。画像素材を準備する必要がないので、Unityエディタから離れることなくサクッとフラットデザインのUIを作成できます。 パラメータをランタイムにいじることでアニメーションも簡単にすることができます。

どういう人におすすめか

  • 手軽にプロっぽいUIを作りたい人
  • UIのプロトタイプをサクっと作りたい人
  • Unityエディタと画像編集ソフトを往復するのが面倒臭い人

デモ

記事冒頭にも貼りましたが、こちらは Procedural UI Image のみ(アイコンを除く。) で作られた、同梱されているデモになります。 かっこいいですね。

d.png

使い方

Procedural UI Image を使うには、まずプロジェクトにインポートします。すると全てのファイルが Assets/ProceduralUIImageに入ります。そうしたら、ヒエラルキーで右クリックして UI/Procedural Image を選択。これだけでProcedural UI Imageが画面に現れます。

a.png

コンポーネント

Procedural UI Imageの各プロパティを説明します。

  • Color, Raycast Target: 標準のImageコンポーネントと同様です。
  • Image Type: FilledSimpleは、標準Imageコンポーネントと同様です。SlicedTiledは意味がなく、指定した場合はSimpleと同じになります。
  • Modifier Type: 現在のモディファイアタイプです。後で詳しく説明します。
  • Border Width: ボーダーの太さを指定します。この値を0にするとボーダーのない画像になります。
  • Falloff Distance: 境界線のぼかし具合を指定します。デフォルトは1になっており、いい感じのアンチエイリアスになります。1以上にすると、影っぽい感じになります。

e.png

モディファイア

モディファイアについて説明します。Procedural UI Image コンポーネントをオブジェクトに追加すると、自動的にモディファイアコンポーネントも追加されます。

モディファイアはBorder Radius(角丸具合)を柔軟に設定する仕組みです。以下の4つの組み込みモディファイアがあります。自作もできるらしいです。

  • Free Modifier: 左上、右上、右下、左下の4つの角の丸みを個別に指定します。デフォルトです。
  • Only One Side Modifier: 上下左右のうち1辺の両角の丸みを指定します。
  • Round Modifier: まん丸になります。円。
  • Uniform: 4つ角の丸みを一括で指定します。これが一番使うと思います。

設定例

b.png
c.png

姉妹アセット

同作者のアセット、UI Gradient というアセットがあります。こちらも一緒に使えるようです。こちらは私はまだ購入していないのですが、グラデーションを取り入れると表現力がさらに上がりそうですね。欲しい。

UI Gradient - Asset Store

おわりに

というわけで、基本的な説明は以上となります。いかがでしたでしょうか。個人的にマストバイなアセットです。私はこれからの全てのプロジェクトに使っていくと思います。

ちなみに、こちらは私が作成したミニゲームです。Procedural UI Image を使用して、Unity 1週間ゲームジャム で作成したものです。Webブラウザでプレイできますので、よければ是非遊んでみてください。

寿司を探すゲーム | フリーゲーム投稿サイト unityroom

ありがとうございました。

Chiwawa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away