サイトのトップへ戻る

libGDX ドキュメント 日本語訳

サイト内検索

Scene2D Part 4 – UI スキン

Scene2Dも最も良い機能の一つは、その上位に構築されたUIレイヤーです。 Scene2D.ui には、UIの作成をスムーズにする一連のウィジットが用意されています。この機能はゲーム開発ライブラリではしばしば実装されていなかったりします。 そうは言っても、UIを扱う前に非常につまずきやすい部分が一つあります… それはSkinです。

skin とは、ユーザーインタフェースを作成するために使用するいくつかのファイルのことです。

一つ目は JSON ファイル ( JavaScript Object Notation )です。これはXML-lightのような、人気のあるJavaScriptベースのデータ保存形式です。 JSON ファイルでは、ウィジットをどのような外観にするか、といったような様々なskinのプロパティを記述します。

二つ目は texture atlasです。 以前のグラフィックチュートリアルでは、TexturePacker を使ってtexture atlasを作成する方法を見ました。 texture atlas には、UIを構成する全ての画像のレイアウトが記述されています。 これは.atlasという拡張子のファイルです。

texture atlasに加えて、TexturePacker が生成した実際の画像についても見てきました。

最後に、fntファイルとその関連画像を用意します。 fontについては以前にHello World チュートリアルで説明しました。

これらを用意するのは、特にゼロから自分でやるのであればかなり難しいでしょう。 幸い、 LibGDX tests内にskin が含まれています。 これらのファイルの中で注目するのは、 uiskin.atlas, uiskin.json, uiskin.png, default.png ,default.fntです。 単純に、これらのファイルをダウンロードしてAndroidプロジェクトの assets/data フォルダに置いてください。 私が提示したGithub のリンクからダウンロードしている場合は、各ファイルはRAW バージョンをダウンロードするようにしてください!

上記の各ファイルについて理解を深めるために、いくつかを簡単に見てみましょう。 font ファイルについては既に説明済みなので無視します。 同様にatlasファイルとpngファイルについても既に説明済みです、 but here is uiskin.png, so you’ve got some idea what is included:

uiskin

これらは、UIを作成するための様々なグラフィックです。 それでは uiskin.jsonを見てみましょう:

{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
},
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
    dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } }
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, 
    downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
    default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, 
    vScrollKnob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
    default: {
        font: default-font, fontColor: white, background: default-select,
        scrollStyle: default,
        listStyle: { font: default-font, selection: default-select-selection }
    }
},
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
    default-vertical: { handle: default-splitpane-vertical },
    default-horizontal: { handle: default-splitpane }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default: { titleFont: default-font, background: default-window, titleFontColor: white },
    dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
    default-horizontal: { background: default-slider, knob: default-slider-knob }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    default: { font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
    default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
    default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
    default: { fontColorUnselected: white, selection: default-rect-pad, fontColorSelected: white, font: default-font }
},
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
    default: { background: default-pane, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
    default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }
}
}

あなたがCSSを使用している場合は、これは見覚えのあるものと即座に分かるでしょう。 基本的には、完全修飾のJavaクラス名を使用して各クラスのスタイルをどのようにするのかをLibGDX へ指示しています。 それでは、この後使用する予定のTextButtonの例を見てみましょう。

com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, 
    
fontColor: white, 
    downFontColor: red }
}

TextButtonStyleクラス、もしくはそれを継承するクラスの値を設定しています。 fontColorに “white”が渡されていることに気づいたかもしれません。skinの中を見ると、以下のような定義を見ることができます:

com.badlogic.gdx.graphics.Color: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
}

white” とは、rgb の値が1/1/1で、透明値が1の色(言い換えれば、白)だと分かるでしょう。Smile

他の重要な点はdown値です。 TextButtonStyleから分かるように、down は Drawableです。 設定されている値のdefault-round-downは、atlas ファイルに登録されています:

default-round-down
  rotate: false
  xy: 99, 29
  size: 12, 20
  split: 5, 5, 5, 4
  orig: 12, 20
  offset: 0, 0
  index: -1

上記では、uiskin.pngファイル内でのサイズと位置を指定しています。 skinの詳細についてはwikiに記載されています



skin ファイルの準備ができたので、Scene2d.uiを使った例について見てみましょう:

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;

public class UIDemo implements ApplicationListener {
    private SpriteBatch batch;
    private Skin skin;
    private Stage stage;

    @Override
    public void create() {        
        batch = new SpriteBatch();
        skin = new Skin(Gdx.files.internal("data/uiskin.json"));
        stage = new Stage();

        final TextButton button = new TextButton("Click me", skin, "default");
        
        button.setWidth(200f);
        button.setHeight(20f);
        button.setPosition(Gdx.graphics.getWidth() /2 - 100f, Gdx.graphics.getHeight()/2 - 10f);
        
        button.addListener(new ClickListener(){
            @Override 
            public void clicked(InputEvent event, float x, float y){
                button.setText("You clicked the button");
            }
        });
        
        stage.addActor(button);
        
        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void dispose() {
        batch.dispose();
    }

    @Override
    public void render() {        
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        
        batch.begin();
        stage.draw();
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

このアプリを実行すると以下が表示されます:

image

今のところ、コードのうち大部分はこれまでにも見たことのあるものです。 Skin オブジェクトを作成し、一般的なファイルIO呼び出しを使ってそれを読み込んでいます。 読み込むファイルは、json の設定が記述された uiskin.jsonです。 uiskin.jsonファイルでは他の全てのファイルを参照しており、それら参照先ファイルはSkinによって自動的に読み込まれます。 次にTextButtonを作成します。コンストラクタに渡している値は、ボタンに表示するテキスト・skin・skinで使用する値、になります。 TextButton に適用される設定値は、skinの JSONファイル内の以下の部分です:

com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},

ここでは“default”の設定値を使用したいと通知しています。同時に、何も設定しなければ“default”値が使用されます。 コードではボタンの位置とサイズを設定し、ボタンがクリックされると表示されるテキストを変更するだけのクリックリスナーを設定しています。 Now the cool part… TextButton のようなUI ウィジットは単なる Actorなので、他のScene2D actorと同じ様に動作します。 stage に追加すれば準備完了です。

Scene2D ui はかなり複雑なテーマのため、次のチュートリアルで引き続きより高度な例を説明します。