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

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

それでは実際にiniファイルを作ってみましょう。
まずは、画像アイテムの配置方法を説明します。

[Preference]フィールドの設定

iniファイル内の先頭に、
以下のように[Preference]フィールドを記述してください。
今回は背景にBackImageアイテムを使用するので
CanvasWidth・CanvasHeightキーは省略します。

[Preference] Signature = "uLilith Face File" FaceName = "test face" DefaultMessage = "Sound Player Lilith for Unicode OSs" NeedVersion = 2011/11/27

画像ファイルの指定 - ImageFileキー

最初に背景画像を指定しましょう。

この画像ファイルを「face_bg.png」というファイル名にして
iniファイルと同じ位置に配置し、
iniファイル内の[Preference]フィールドの下の行に
以下のフィールドを書き込んでください。

[Base] Category = BackImage ImageFile = face_bg.png

と、画像の指定にはImageFileキーを使用します。
背景の設定は以上で終了です。
この状態でフェイスを表示すると背景画像だけが表示されます。

アイテム位置の指定 - PosX・PosYキー

次に普通の画像アイテムを作ってみましょう。
ここではDynamicImageカテゴリのアイテムを作っていきます。

この画像ファイルを使用します。

「ButtonA-1.png」と名前を付けてiniファイルと同じ位置に配置してください。
あるいは、↓からファイルをダウンロードしてください。

testface01.zip

（ここまでに記入したiniファイルと上に表示されている画像ファイルが入っています。）

画像が準備できたら以下の行をiniファイルに追加してください。
※以下の説明で途中でフィールドの記入例が出た場合
　ここと同じようにiniファイルに出てきた記入例のとおりに内容を追加・修正していってください。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png

背景と同じくImageFileキーで画像を指定します。
この状態でフェイスを再読み込みしてみると
（フェイスの再読み込みをする場合は、uLilith本体設定「表示→ウィンドウ→タスクトレイアイコン」の
　最小化時にタスクトレイアイコンを表示するか常にタスクトレイアイコンを表示するの
　『タスクトレイアイコンを使用している』設定で「最小化→元に戻す」をするか、
　「ショートカットキーの設定方法」のページで
　再読み込み用のショートカットキーを設定して再読み込みしてください。）

画像が表示されました。

しかしこのままでは左上に張り付いてしまっているので、位置を指定します。

[Button1] Category = DynamicImage Type = StaticItem ImageFile = ButtonA-1.png PosX = 10 PosY = 30

画像が右下に動きました。

位置の指定にはPosXキー・PosYキーを使用します。
PosXキーが横位置、PosYキーが縦位置を示し、
キャンバスの左上から数えて、各キーに指定した数値の分
アイテムの左上位置が右・下に配置されます。
キーを省略した場合はそれぞれ0が指定された扱いになり、
アイテムがキャンバスの左上端部分に配置されます。
なお、PosX・PosYはマイナスの数値も設定することもできますが、
アイテムがキャンバスからはみ出てしまうので
はみ出た左・上の部分は表示されなくなります。

背景色の設定 - BackgroundColorキー

それでは今度は、背景色を指定してみましょう。

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

画像の背景が青くなりました。
背景色の指定にはBackgroundColorキーを使用します。
画像ファイルの中で透過部分に色がつきます。
透過部分のない四角形の画像の場合背景部分は隠れてしまいますが、
その場合でも画像の背景には（裏には）色がついています。
キーを省略した場合は0x00000000（不透明度0の黒）＝完全透明になります。

表示サイズの設定 - Width・Heightキー

次は、アイテムの表示サイズを変更してみます。

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

青い部分が広がりました。
アイテムサイズの指定にはWidthキー・Heightキーを使用します。
Widthキーが幅、Heightキーが高さを示します。
キーを省略すると、画像アイテムの場合は
ImageFileキーで指定した画像ファイルのサイズに表示サイズが自動的に調整されます。
文字列アイテムの場合は表示する文字のサイズに調整されます。

画像の表示位置の設定 - Alignキー

アイテムの表示領域の中での画像の表示位置を調整することも出来ます。

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

画像が青い領域の真ん中に移動しました。
画像や文字の配置はAlignキーで調整します。
Alignキーで調整できる位置は、表示領域の四隅と四辺の中央、表示領域の中心の９箇所です。
以下の表に対応する値をまとめておきました。
キーが省略された場合は自動的にTopLeft（左上）に指定されます。

配置	表示例	配置	表示例	配置	表示例
値	表示例	値	表示例	値	表示例
TopLeft		TopCenter		TopRight
左上端		上端中央		右上端
CenterLeft		Center		CenterRight
左端中央		中央		右端中央
BottomLeft		BottomCenter		BottomRight
左下端		下端中央		右下端

画像の繰り返し・拡大縮小の設定 - TilingMethodキー

表示領域の中で画像を並べて表示したり、
領域に合わせて拡大縮小して表示することも可能です。

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

画像が縦横に繰り返し並べて表示されました。

画像を並べたり拡大縮小表示する場合はTilingMethodキーで設定します。
設定できる配置には以下の６つがあります。

配置	表示例	配置	表示例
値	表示例	値	表示例
Both		Scaling
縦横に繰り返し		表示サイズにあわせて拡大縮小表示
Horizontal		KeepAspectScaling
横方向に繰り返し		縦横比を保ったまま拡大縮小表示
Vertical		None
縦方向に繰り返し		繰り返しや拡大縮小を行わない

※上の表示例での配置位置はAlign = TopLeft（左上；初期状態）での表示例です。

この中で、HorizontalとVerticalはAlignキーと組み合わせて表示位置を指定することもできます。
（中央、あるいは両端に画像の列を寄せたりすることがます。）
キーが省略された場合はNoneが指定されたという扱いになります。
主に背景の枠部分など、繰り返し表示が必要なアイテムに使用します。

ImageFileキーの省略

Widthキー・Heightキーが設定されているアイテムの場合、ImageFileの省略が可能です。
それでは、ImageFileキーの行頭に;を挿入してコメント化しキーを無効にしてみましょう。

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

※ImageFileキーの行を消しても同じ状態になります。