海賊王をめざす男 マツです。こんにちは。

スキンをひとつ用意してつかいまわす方法です。

たとえばこんなフレームの素材を用意したとします。今回の方法を使えば、フレームの中身によって幅と高さを変えた素材を用意する必要はありません。

	.categoryTitleWindow {
		border-skin: Embed("assets/categoryTitleWindowBackground.png"
		,	scaleGridTop="40"
		,	scaleGridRight="215"
		,	scaleGridBottom="95"
		,	scaleGridLeft="10");
		padding-top: 40;
		padding-right: 10;
		padding-bottom: 12;
		padding-left: 10;
		title-style-name: "categoryTitle";
	}

border-skin を利用し、scaleGrid で元の素材をスライス指定します。左上からの px です。
padding で、top, right, bottom, left それぞれの幅を指定します。

後は、width, height を指定すればスライスしたところは固定で、スキンが適応されます。

【デモ】

このようにひとつの素材をスキンとして汎用的に利用することが可能です。
レイアウトの変更によって都度素材を用意する必要もなく、うまく利用すればデザイナーの負担もデベロッパーの負担も軽減されます。
Button や ComboBox コンポーネントの他にもこのように scaleGrid を指定できる例でした。

ソースをのせておくので、ダウンロードしてお使いください。

【ダウンロード】