UIを作成

体力を可視化するため、新しい Canvas を作成し、必要な素材を追加しましょう。Canvasが画面サイズに合わせて自動的にリサイズするように設定しましょう：

ゲージの作り方

「スライス（Sliced）」スプライトについて

次の事例について考えてください：セリフ用の枠を作成したいが、文字の数は固定ではなく、長い文章もあるし、短い文章もありえるので、枠のサイズも固定できない。文章に合わせようとして、枠を強制的にリサイズすると…

…スプライトが変に伸びてしまい、おかしくみえます。これを解決するにな、スプライトを「スライス」し、伸びると伸びない領域を指定できます。スプライトエディタでは：

「Border」を指定し、伸ばしてはいけない角と伸ばしても良い中央部分を定義できる。Imageコンポーネントで「Image Type：Sliced」にすると、問題なく、きれいに枠をリサイズできる：

UIマスクについて

単純に、「マスク」は、UIの一部を隠すためのコンポーネントである。例えば、ポーションのチャージを可視化したく、以下のように設計した：

この場合は、ポーションの「溜まり具合」はビンの形に合わせる必要があるので、マスクが最適です。具体的に：

ばらば、最後のポーションＵＩは、各層（レイヤー）のサンドイッチになる：

ゲージの仕組み

いろんな画面サイズを対応しないといけないので、体力ゲージが伸びたら、短くなったりするので、スライス画像を使用し、ゲージの形に合わせるため、マスクを使いましょう。また。ゲージのすぐ隣に卵の絵も追加しましょう。

そして、中には卵の絵とHPのゲージを追加してください（Canvas > Image）：