• トップ
• この版へ差し戻し
• 差分
• 添付
• 名前変更

9Slice の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 9Slice へ行く。
• 9Slice の差分を削除

> [[UIWidget]] &br();
> [[FlxUI9SliceSprite]]
＞ [[UIWidget]] &br();
＞ [[FlxUI9SliceSprite]]

* 9スライスの仕組み [#h3530dd8]

9スライスとは、スプライトを9分割して拡縮可能なUI素材にする仕組みです。例えば、以下のような画像があるとします。

#ref(9Slice001.png);

これをHPゲージとして使うために横に引き延ばします。
すると、画像のフチのドットが拡大されておかしな見た目になってしまいます。

#ref(9Slice002.png);

これを回避するために、画像を9分割します。薄い白い線画分割の境界です。

#ref(9Slice003.png);

例えば、横に引き延ばす場合は、② / ⑤ / ⑧ の部分だけ、横に引き延ばします。

#ref(9Slice004.png);

そうすると、ドットのつぶれがなくなり問題なく拡大できるようになります。

#ref(9Slice005.png);

このように、

 ドットのつぶれがなくなるように境界を決める

のが9スライスの仕組みとなります。

HaxeFlixelの拡張UIである[[FlxUI9SliceSprite]]を使うと、9スライス画像を簡単に指定できるようになります。