サイトのトップへ戻る

libGDX ドキュメント 日本語訳

サイト内検索

Skin



概要

Skin クラスは UI ウィジットが使うリソースを保持します。 これはTextureRegion、NinePatch、フォント、色などの便利なコンテナです。 またSkin にはTextureRegionをNinepatchや SpriteやDrawableとして取得するような、便利な変換機能があります。

とりあえず最初は、libgdx testsのSkinファイルを使用できます。 これには、 uiskin.png, uiskin.atlas, uiskin.json, default.fntといったファイルが必要です。 このSkinファイルを使用することでscene2d.uiを素早く使い始めることができ、後からskin素材を置き換えることもできます。

Skinの持つリソースは通常、TextureAtlas・JSONを使って定義されたウィジットスタイルとその他オブジェクト・コード上からSkinに追加されたオブジェクト、から成り立っています。 JSONを使わない場合でも、 TextureAtlas・コード上から追加されたオブジェクトで設定したskinを使用することを推奨します。 skinを使うとはdrawableのインスタンスを取得するのが非常に便利になり、UI リソースを取得する際に中心的な役割を果たすでしょう。



リソース

skin のリソースは 名前 と 型を持っています。TextureAtlasのRegionは、skinのリソースとして使用可能です。 TextureRegionは、 NinePatch・ Sprite・TintedDrawable・ drawableとして取得することができます。

TextureAtlas atlas = ...
Skin skin = new Skin();
skin.addRegions(atlas);
...
TextureRegion hero = skin.get("hero", TextureRegion.class);

skinのリソースは、JSONを使って(後述参照)定義したり、コードを使って追加することもできます:

Skin skin = new Skin();
skin.add("logo", new Texture("logo.png"));
...
Texture logo = skin.get("logo", Texture.class);


便利なメソッド

一般的な形式のリソースを取得するための便利なメソッドがあります。

Skin skin = ...
Color red = skin.getColor("red");
BitmapFont font = skin.getFont("large");
TextureRegion region = skin.getRegion("hero");
NinePatch patch = skin.getPatch("header");
Sprite sprite = skin.getSprite("footer");
TiledDrawable tiled = skin.getTiledDrawable("pattern");
Drawable drawable = skin.getDrawable("enemy");

ColorやBitmapFont といった適切なクラスを使って値を取得する場合と結果は変わりませんが、skinのメソッドを使ったほうがコードが少し簡潔になります。



変換

UI ウィジットの全てのstyleは、画像が必要な場合はDrawableを使用します。 これによりUIの任意の場所で TextureRegion・NinePatch・Spriteなどを使用できます。 Skin によって、TextureとTextureRegionを、drawableやその他形式に変換するのが簡単にできます:

Skin skin = new Skin();
skin.add("logo", new Texture("logo.png"));
...
Texture texture = skin.get("logo", Texture.class);
TextureRegion region = skin.getRegion("logo");
NinePatch patch = skin.getPatch("logo");
Sprite sprite = skin.getSprite("logo");
TiledDrawable tiled = skin.getTiledDrawable("logo");
Drawable drawable = skin.getDrawable("logo");

TextureRegionは、NinePatch, Sprite, TintedDrawable, drawableとして取得できます。 最初の変換が行われた時に新しいオブジェクトが割り当てられ、そのskin内に保持されます。 その後のgetterメソッドでは、skinが保持しているオブジェクトが戻り値として返されます。

TextureRegion を drawableへ変換する際に、 skin はそのTextureRegion に最も適したdrawable を選びます。 TextureRegion が9パッチ分割情報を持つAtlasRegion の場合、NinePatchDrawable が戻り値として返されます。 TextureRegion が回転処理や空白除去処理が行われていたAtlasRegion の場合、SpriteDrawable が戻り値として返されるので、そのTextureRegion は正しく描写されます。 それ以外の場合は TextureRegionDrawable が戻り値として返されます。



リソースを編集する

skinから取得されるリソースは新規作成されたインスタンスではなく、毎回同じオブジェクトが返されています。 そのオブジェクトが変更されると、その変更はアプリケーション全体に反映されます。 この動作が望ましくないのであれば、オブジェクトのコピーを作成すると良いでしょう。

newDrawable メソッドを使うとdrawableのコピーが取得できます。 新たに作成されたdrawableのサイズ情報は、オリジナルのdrawableに影響を与えずに変更できます。 このメソッドを使うことで、drawableに色を付けることもできます。

Skin skin = ...
...
Drawable redDrawable = skin.newDrawable("whiteRegion", Color.RED);

新たに作成されたdrawable はskin内には保持されないので注意してください。 skin内に保持するためには、他のリソース名を付けて明示的にskinへ追加する必要があります。



ウィジットのStyle

Skin とは、UIウィジットに必要なTextureRegionやその他リソースを提供するのに便利なコンテナです。 Skinでは、ウィジットの外観を定義するためのUIウィジットStyleを保持することもできます。

TextButtonStyle buttonStyle = skin.get("bigButton", TextButtonStyle.class);
TextButton button = new TextButton("Click me!", buttonStyle);

全てのウィジットには、skinとスタイル名を引数として渡すための便利なメソッドがあります:

TextButton button = new TextButton("Click me!", skin, "bigButton");

スタイル名が省略された場合は、"default" という名前が使用されます:

TextButton button = new TextButton("Click me!", skin);


Skin のJSON

skin は プログラム上から取り込むことができます。 それ以外にも、skinではJSONを使って名前付きオブジェクトを記述することができます。 これにより、UIウィジットStyleの定義が便利になります。 JSONでは、 texture atlas由来の TextureRegionやナインパッチスプリットやその他情報については記述しないので注意してください。 しかしJSONは、skin内で regionや ninepatchや その他リソースを名前を使って参照することがあります。 JSON の内容は以下のようになります:

{
    className: {
        name: resource,
        ...
    },
    className: {
        name: resource,
        ...
    },
    ...
}

className には、オブジェクトの完全修飾のJavaクラス名が入ります。 name には、各リソースの名前が入ります。 resource には実際のリソースオブジェクトの JSON が入ります。 The JSON corresponds exactly to the names of the fields in the resource's class. 以下が実際の例になります:

{
    com.badlogic.gdx.graphics.Color: {
        white: { r: 1, g: 1, b: 1, a: 1 },
        red: { r: 1, g: 0, b: 0, a: 1 },
        yellow: { r: 0.5, g: 0.5, b: 0, a: 1 }
    },
    com.badlogic.gdx.graphics.g2d.BitmapFont: {
        medium: { file: medium.fnt }
    },
    com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
        default: {
            down: round-down, up: round,
            font: medium, fontColor: white
        },
        toggle: {
            down: round-down, up: round, checked: round-down,
            font: medium, fontColor: white, checkedFontColor: red
        },
        green: {
            down: round-down, up: round,
            font: medium, fontColor: { r: 0, g: 1, b: 0, a: 1 }
        }
    }
}

最初には、いくつかの色とフォントが定義されています。次には、ボタンのStyleがいくつか定義されています。 down, up, checked といったフィールドは、 Drawableの種類です。 drawable にはオブジェクトが設定されることが想定されてますが、JSON内には文字列が設定されているので、この文字列を使ってskin内のdrawable を参照します。 "green"のテキストボタンStyleは{ r: 0, g: 1, b: 0, a: 1 }と直接定義がされていますが、それ以外のStyleについてはあらかじめ定義されたフォントと色を参照しています。

定義する順番が重要なので注意してください。 JSONにおいてリソースは、そのリソースが参照される場所よりも上で宣言する必要があります。 また、Libgdx が使用するJSONは標準のJSONとは違うので注意してください。引用符を使わずにキーや値を定義します。

とりあえず最初は、libgdx testsのSkinファイル(uiskin.atlas, uiskin.json, and default.fnt)を使用できます。



上記で見たように、JSONでは色が定義されます。rgb のプロパティが省略されると、そのプロパティの値は0になります。 a が省略されると、その値は 1になります。

上記やり方の他にも、16進で色を設定することができます:

com.badlogic.gdx.graphics.Color: {
    skyblue: { hex: 489affff }
}


BitmapFont

JSON では、ビットマップフォントは以下のように宣言します:

{
    com.badlogic.gdx.graphics.g2d.BitmapFont: {
        medium: { file: medium.fnt }
    }
}

フォントの BMFont ファイルを探すには、skinはまず最初にskin ファイルが保存されているディレクトリの中を探します。 見つからなかった場合、指定されたパスを内部パスとして使って BMFont ファイルを探します。

フォントの画像ファイルを探すには、skinはまず最初に、fntファイルのファイル名からファイル拡張子を外した名前の Texture Regionを探します。 見つからなかった場合、フォントファイルが保存されているディレクリ内の中にある、フォントファイル名から"png"拡張子を外した名前の画像を探します。



TintedDrawable

これはRegionに様々な色を付けるのにとても便利です。 例えば、白ボタンのRegionに色を付けて任意の色のボタンにすることができます。 コード上ではnewDrawableメソッドを使ってDrawableに色を付けることができます。 JSONではSkin.TintedDrawableクラスを使ってdrawableに色を付けることができます:

{
    com.badlogic.gdx.graphics.Color: {
        green: { r: 0, g: 1, b: 0, a: 1 }
    },
    com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
        round-green: { name: round, color: green }
    }
}

上記では"round"という名前のdrawableのコピーを作成し、それに緑の色をつけ、"round-green"という名前のdrawableとしてskinに追加しています。