フェイス作成編/サイズ変更可能なウィンドウの作成方法3 - uLilithフェイス作成方法wiki

サイズ変更可能なウィンドウの作成方法（３）

このページでは、サイズ変更可能なウィンドウの作成方法（１）で使用した
ウィンドウサイズ変更可能なサンプルフェイス（↓のファイル）の内容について説明します。

resize_test.zip

[Preference]フィールド

[Preference]
Signature = "uLilith Face File"
FaceName = "resize test face"
DefaultMessage = "Sound Player Lilith for Unicode OSs"
NeedVersion = 2011/11/27
CanvasWidth = 300
CanvasHeight = 140
MinWidth = 300
MinHeight = 140
MaxWidth = 2000
MaxHeight = 1000
InflateUnitX = 1
InflateUnitY = 1

サイズ変更可能なウィンドウを作成する場合、
CanvasWidth・CanvasHeightキーで初期状態のキャンバスサイズと
MinWidth・MinHeightキーで最小のウィンドウサイズを必ず指定してください。
ウィンドウは小さくしすぎると、アイテムの表示領域が確保できない
（完全にウィンドウの外にはみ出してしまい、表示できないアイテムが出てくる）状態になり
エラーが発生してしまいます。
最小のウィンドウサイズは、
全てのアイテムが問題なく表示できるサイズに調整してください。

MaxWidth・MaxHeightキーはウィンドウの最大サイズを設定します。
幅・高さどちらかしかサイズ変更できない状態にする場合に
変更させない方をCanvasWidth・CanvasHeightと同じ値に指定してください。
最大サイズを設定しない場合はキーを省略してもかまいません。
キーを省略した場合は無制限にサイズを広げられるようになります。

InflateUnitX・InflateUnitYキーはウィンドウが広がる間隔（ピクセル単位）を指定します。
枠の画像などを縦横に繰り返しで表示していて、
常に一定の間隔でウィンドウのサイズ変更をしたいなどの場合に指定してください。
キーを省略した場合は1が設定された状態になります。
※これらのキーについて詳しくは、[Preference]フィールドについて（３）を参照してください。

この記述例で挙げたキーは、
サイズ変更可能なフェイスに最低限設定しておくべきものだけなので、
PreviewImageキーなど、[Preference]フィールドで使える他のキーも
必要であれば合わせて設定してください。

背景画像の設定

サイズ変更可能なウィンドウを作る場合、
背景画像は四隅・四辺・中央の９つに分けることになります。

この背景を、

このように分離します。

左上から

と番号を付けて説明します。

なお、この分け方はサンプルフェイスに使っている画像での例なので
他の画像を使用する場合は、
画像の模様やデザインに合わせて切り分ける位置を調整してください。

背景画像アイテムの配置について

四隅の画像アイテム（１）（３）（７）（９）は、
ウィンドウサイズが変わっても表示サイズが変わらないので
TopLeftAnchorキーだけで表示位置を指定します。

四辺（２）（４）（６）（８）・中央（５）の画像アイテムは、
ウィンドウサイズに応じて表示サイズが変化するので
TopLeftAnchorキー・BottomRightAnchorキーの両方を記述して表示位置を指定します。
四辺に使用する画像は、表示する部分を細く切り取った画像を
TilingMethodキーで上下または左右に繰り返し表示します。
上下（２）（８）のアイテムは横が細い画像を左右に繰り返しで、
左右（４）（６）のアイテムは縦が細い画像を上下に繰り返しでそれぞれ表示します。
中央（５）のアイテムは画像ファイルを使う場合は上下左右に繰り返して表示しますが
このサンプルフェイスの例では画像を使用しない背景色のみの領域になっています。

サンプルフェイスのiniでは、
（１）：[Base01TopLeft]
（２）：[Base02Top]
（３）：[Base03TopRight]
（４）：[Base04Left]
（５）：[Base05Center]
（６）：[Base06Right]
（７）：[Base07BottomLeft]
（８）：[Base08Bottom]
（９）：[Base09BottomRight]
のフィールド名で記述しています。

それぞれのアイテムの表示位置は、
四隅の画像アイテム（１）（３）（７）（９）に使用する画像サイズで決まります。

四隅の画像アイテムの配置

（１）のアイテム（画像サイズ：幅5px×高さ5px）は、左上端に配置するので

TopLeftAnchor = TopLeft, 0, 0

左上座標の原点はTopLeft（左上）、相対X座標・相対Y座標共に0を指定します。

（３）のアイテム（画像サイズ：幅5px×高さ5px）は、右上端に配置するので

TopLeftAnchor = TopRight, -5, 0

左上座標の原点はTopRight（右上）、
   相対X座標は画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は0になります。

（７）のアイテム（画像サイズ：幅120px×高さ60px）は、左下端に配置するので

TopLeftAnchor = BottomLeft, 0, -60

左上座標の原点はBottomLeft（左下）、
   相対X座標は0に、
   相対Y座標は画像の高さ（60px）の分上（マイナス）＝-60になります。

（９）のアイテム（画像サイズ：幅5px×高さ60px）は、右下端に配置するので

TopLeftAnchor = BottomRight, -5, -60

左上座標の原点はBottomRight（右下）、
   相対X座標は画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は画像の高さ（60px）の分上（マイナス）＝-60になります。

四辺の画像アイテムの配置

（２）のアイテムは、
（１）のアイテム（画像サイズ：幅5px×高さ5px）と
（３）のアイテム（画像サイズ：幅5px×高さ5px）に挟まれる部分に配置します。

TopLeftAnchor = TopLeft, 5, 0
BottomRightAnchor = TopRight, -5, 5

左上座標の原点はTopLeft（左上）、
   相対X座標は（１）の画像の幅（5px）の分右＝5に、
   相対Y座標は0になります。
右下座標の原点はTopRight（右上）、
   相対X座標は（３）の画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は（３）の画像の高さ（5px）の分下＝5になります。

            （←拡大：）
画像ファイルは↑の、表示部分を細切りにした縦長の画像を
TilingMethod = Horizontalで左右繰り返しで配置します。

（４）のアイテムは、
（１）のアイテム（画像サイズ：幅5px×高さ5px）と
（７）のアイテム（画像サイズ：幅120px×高さ60px）に挟まれる部分に配置します。

TopLeftAnchor = TopLeft, 0, 5
BottomRightAnchor = BottomLeft, 5, -60

左上座標の原点はTopLeft（左上）、
   相対X座標は0に、
   相対Y座標は（１）の画像の高さ（5px）の分下＝5になります。
右下座標の原点はBottomLeft（左下）、
   相対X座標は（１）の画像の幅（5px）の分右＝5に、
   相対Y座標は（７）の画像の高さ（60px）の分上（マイナス）＝-60になります。

            （←拡大：）
画像ファイルは↑の、表示部分を細切りにした横長の画像を
TilingMethod = Verticalで上下繰り返しで配置します。

（６）のアイテムは、
（３）のアイテム（画像サイズ：幅5px×高さ5px）と
（９）のアイテム（画像サイズ：幅5px×高さ60px）に挟まれる部分に配置します。

TopLeftAnchor = TopRight, -5, 5
BottomRightAnchor = BottomRight, 0, -60

左上座標の原点はTopRight（右上）、
   相対X座標は（３）の画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は（３）の画像の高さ（5px）の分下＝5になります。
右下座標の原点はBottomRight（右下）、
   相対X座標は0に、
   相対Y座標は（９）の画像の高さ（60px）の分上（マイナス）＝-60になります。

            （←拡大：）
画像ファイルは↑の、表示部分を細切りにした横長の画像を
TilingMethod = Verticalで上下繰り返しで配置します。

（８）のアイテムは、
（７）のアイテム（画像サイズ：幅120px×高さ60px）と
（９）のアイテム（画像サイズ：幅5px×高さ60px）に挟まれる部分に配置します。

TopLeftAnchor = BottomLeft, 120, -60
BottomRightAnchor = BottomRight, -5, 0

左上座標の原点はBottomLeft（左下）、
   相対X座標は（７）の画像の幅（120px）の分右＝120に、
   相対Y座標は（７）の画像の高さ（60px）の分上（マイナス）＝-60になります。
右下座標の原点はBottomRight（右下）、
   相対X座標は（９）の画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は0になります。

     
画像ファイルは↑の、表示部分を細切りにした縦長の画像を
TilingMethod = Horizontalで左右繰り返しで配置します。

中央のアイテムの配置

（５）のアイテムは、フェイスの中央部分に配置します。
左上の（１）のアイテム（画像サイズ：幅5px×高さ5px）と
右下の（９）のアイテム（画像サイズ：幅5px×高さ60px）が
このアイテムの表示位置の指定に関わっています。

TopLeftAnchor = TopLeft, 5, 5
BottomRightAnchor = BottomRight, -5, -60

左上座標の原点はTopLeft（左上）、
   相対X座標は（１）の画像の幅（5px）の分右＝5に、
   相対Y座標は（１）の画像の高さ（5px）の分下＝5になります。
右下座標の原点はBottomRight（右下）、
   相対X座標は（９）の画像の幅（5px）の分左（マイナス）＝-5に、
   相対Y座標は（９）の画像の高さ（60px）の分上（マイナス）＝-60になります。

ウィンドウサイズ変更用のドラッグ領域の配置

このサンプルフェイスでは背景画像アイテムにはType = WindowResizerを設定せず、
上に重ねた透明の画像アイテムにType = WindowResizerを設定しています。
アイテムの配置方法は、先ほどの背景四隅の画像アイテム（１）（３）（７）（９）と同様で、
アイテムのサイズ（ドラッグに反応させるサイズ）に合わせて
TopLeftAnchorキーに指定する内容で表示位置を調整してください。
サンプルフェイスでは、四隅に10px×10pxのドラッグ領域を設定しています。
iniファイル内ではそれぞれ
左上：[TopLeftResizer]
右上：[TopRightResizer]
左下：[BottomLeftResizer]
右下：[BottomRightResizer]
のフィールド名で記述しています。