フェイス作成編/画像アイテムの配置方法2 - uLilithフェイス作成方法wiki

画像アイテムの配置方法（２）

今度は操作スイッチを作ってみましょう。
引き続き、前のページで使用したフィールドを利用して編集していきます。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30 BackgroundColor = 0xFFFF0000 Width = 20 Height = 20

※ほとんど前のページで作ったフィールドのままですが、
WidthキーとHeightキーは画像ファイルと同じ大きさに調整しなおしてあります。

↓に今の時点でのiniファイル・画像ファイルとこのページで使用する画像ファイルをまとめておきました。

testface02.zip

クリック可能にする - Enableキー

まずはクリックに反応するようにしてみます。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30 BackgroundColor = 0xFFFF0000 Width = 20 Height = 20 Enable = True

画像にマウスカーソルを当てると指カーソルに変わり、
クリックに反応するようになりました。
Enableキーを設定すると、クリックに反応するようになります。
アイテムをクリックすると、
クリック時の画像や背景色を指定していればその画像や背景色に変化します。
また、コマンドを指定していると、クリックしたときにそのコマンドが実行されます。
キーを省略した場合はFalseになっている扱いになるので、
クリックに反応させる場合は必ずTrueにしてください。

マウスオーバー・クリック時の画像の指定

それでは次に、クリック時・マウスオーバー時の画像を指定してみましょう。
この画像を追加してください。

・　

それぞれ、「buttonA-2.png」・「buttonA-3.png」と名前を付けて
iniファイルと同じ位置に置いてください。
※このページ冒頭で添付したファイル（

testface02.zip）の中にも入っています。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30 BackgroundColor = 0xFFFF0000 Width = 20 Height = 20 Enable = True PushedImageFile = ButtonA-2.png MouseOverImageFile = ButtonA-3.png

画像にマウスカーソルを当てるとButtonA-3.pngに、

クリックするとButtonA-2.pngに変化するようになりました。
クリック時の画像の指定にはPushedImageFileキーを、
マウスオーバー時の画像の指定にはMouseOverImageFileキーを使用します。

クリック可能範囲の変更 - DisableRegionキー

画像をクリックしていて気づいたかもしれませんが、
アイテムの領域のうち、画像が透過されていない部分のみクリック可能で、
画像が透過されている部分はマウスカーソルが反応しなくなっています。

これはuLilithの仕様なのですが、
このクリックに反応する領域を調整するキーがあります。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30 BackgroundColor = 0xFFFF0000 Width = 20 Height = 20 Enable = True PushedImageFile = ButtonA-2.png MouseOverImageFile = ButtonA-3.png DisableRegion = True

表示領域の矩形（四角形）全ての範囲が
マウスカーソルでクリック可能になりました。
画像の一部分が透過されている画像を使いたいけど、
クリックに反応する部分は表示領域いっぱいに広げたいというときは
DisableRegionキーをTrueに設定してください。
ImageFileの画像自体の透過領域に関係なく、
Widthキー・Heightキーで設定された範囲に調整されます。
キーを省略した場合はFalseに設定された扱いになり、
画像の透過領域ではクリックに反応しないようになります。

この例では背景が不透明のため問題なく当たり判定ができていますが、
背景に透過部分がある画像を使用していて、
DisableRegionキーを設定した透過部分が
背景の透過部分に重なっているときは当たり判定が正しく作成されません。

背景を含んだ全てのアイテムをあわせても完全に透明になっている部分には、
たとえDisableRegionキーを設定したアイテムの範囲内であっても
uLilithのウィンドウ内と認識されず
当たり判定が作成されなくなるのでマウスクリックが反応しなくなります。

この場合、透明に近い半透明の背景色（0x02000000くらいの色設定）を
BackgroundColorに設定することにより当たり判定を作ることができます。

コマンド・チップヒントの設定

最後にコマンドとチップヒントを設定します。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30 BackgroundColor = 0xFFFF0000 Width = 20 Height = 20 Enable = True PushedImageFile = ButtonA-2.png MouseOverImageFile = ButtonA-3.png DisableRegion = True Command = Play TipHint = "再生"