LibGDXチュートリアル-ユーザーインターフェイスの作成 パート1

libGDXライブラリをさらに処理すると、com.badlogic.gdx.scenes.scene2d.uiパッケージに到達しました。 このパッケージは、ユーザーインターフェイスを作成するように設計されています。 そして、失望が待っていました。チュートリアル記事はありません。 したがって、ソースとJavadocドキュメントを使用して、パッケージを個別に処理することにしました。 つまり、scene2d.uiのチュートリアルになりますが、翻訳にはなりません。 ここでは、コンストラクター、メソッドを詳細に説明せず、詳細な署名を提供します。 原則を知っていれば、ドキュメントからいつでももっと学ぶことができるので、鳥瞰図をとろうとします。 しかし、このアプローチを使用しても、資料が多すぎるため、2つの（おそらくそれ以上の）記事に分けます。



前の記事と、Stageクラスについて言ったことを思い出してください。 Stageクラスには、アクター（アクター）を含めて管理できます。 また、アクターとアクターのコンテナーの両方であるGroupクラスもあります。 そのため、scene2d.uaパッケージのすべてのビジュアルコンポーネントは、ActorまたはGroupから継承されます。 したがって、グループ相続人には他のコンポーネントが含まれる場合があります。 後でこれらのコンポーネントを見て、今度はアクターの相続人を見てみましょう。 直接の子孫はWidgetクラスであり、Label、TextField、Image、List、SelectBox、Sliderの6つのコンポーネントが継承されます。



すべてのビジュアルコンポーネントがレイアウトインターフェイスを実装していることに注意してください。 このインターフェイスは、コンテナコンポーネント内のコンポーネントの正しい場所に必要です。 コンポーネントを再描画し、推奨される最小サイズ、最大サイズを決定するメソッドを提供します。



別の重要な概念はスタイルです。 内部には、ほとんどすべてのグラフィックコンポーネントに<ComponentName> Styleという静的クラスがあります。 たとえば、LabelStyle。 このクラスには、このクラスの正しい操作に必要なリソース（フォント、フォントの色など）が格納されます。 実際、OpenGLはフォントを直接レンダリングできないため、いくつかの追加メカニズムが必要です。 明白なオプションは、文字の画像と、どの文字が配置されているかを説明するテキストファイルを含む画像を作成することです。 次に、この説明から、個々のレター画像からテキスト行を「作成」できるクラスを作成できます。 以下は、LabelクラスのLabelStyleクラスの例です。

static public class LabelStyle { public BitmapFont font; /** Optional. */ public Color fontColor; public LabelStyle () { } public LabelStyle (BitmapFont font, Color fontColor) { this.font = font; this.fontColor = fontColor; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一部のフィールドは、コメントによってオプションとしてマークされています。 これは、設定ファイルのスタイルの説明でそれらを記述できないことを意味します。



Skinクラスは、スタイルを保存するために使用されます。 Skinクラスは、設定からファイルからスタイルを読み取り、内部的に保存します。 次に、新しいグラフィックコンポーネントを作成するときに、コンストラクタでSkinをそのコンポーネントに渡します。 適切なスタイルがあれば、それが使用されます。 そうでない場合、例外がスローされます。 以下に、単純な設定クラスの例を示します。スタイルは、1つのコンポーネント-ラベルのみに対して定義されます。

 { resources: { com.badlogic.gdx.graphics.Color: { black: { r: 0, g: 0, b: 0, a: 1 } }, com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } } }, styles: { com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { default: { font: default-font, fontColor: black } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いくつかのコメント。 このファイルはJSON形式で記述されています。 最初のセクションはリソースです。 黒は、RGBAモデルで定義された色です。 default-fontはフォントの名前です。 このフォントはcom.badlogic.utilsパッケージから取得しました。このパッケージでは、arial-15.fntおよびarial-15.pngと呼ばれていました。 2番目のセクションは直接スタイルです。 ここで、フォントとフォントの色が指定された1つのフォントを特定しました。 ファイル内のフィールドの名前は、スタイルクラスのパブリックフィールドの名前に対応していることに注意してください。 コンポーネントごとに異なる名前で複数のスタイルを定義できます。 SkinクラスのgetStyle（クラスタイプ、文字列名）メソッドを使用して、目的のスタイルを取得できます。 デフォルトでは、Skinコンポーネントをコンストラクタに渡し、そこからコンポーネントはdefaultというスタイルを取ります。



設定ファイルの場合、同じ名前の画像ファイルが同じディレクトリにあり、拡張子がpngであることが必要です。 たとえば、設定ファイルにSimpleSkinという名前を付けた場合、グラフィックファイルの名前はSimpleSkin.pngになります。 TextureRegionなどのリソースを使用する場合に必要です。 このファイルがないと、プログラムは例外をスローし、起動しません。



このフォントファイルにはロシア語の文字が含まれていないことに注意してください。 私はまだこの問題を詳細に理解していなかったので、例にはロシア語のテキストはありません。



ここで、個々のコンポーネント、そのスタイル、および使用法についてさらに詳しく説明します。

ラベル

これは、テキストを単語で折り返す機能を備えたシンプルなテキストラベルです。 私の意見では、最も重要な次の2人のデザイナーがいます。

 public Label (Skin skin)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキストなしのラベルを作成します。

 public Label (String text, Skin skin)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキスト付きのラベルを作成します。

スタイルを設定して返すメソッド-setStyle（）、getStyle（）、テキストsetText（）を設定するメソッド、および単語setWrapt（）に従ってラッピングを設定するメソッドがあります。 デフォルトでは、ワードラップは無効になっています。 これを使用するには、まずラベルに優先サイズ（優先サイズ）を設定します。

それ以外の場合、コンポーネントのプロパティは特に重要ではなく、その位置の制御、回転などは重要ではありません。 Actorクラスと同じ方法で実装されます。



コンポーネントスタイルクラス。 どうやら、彼はフォントとフォントの色だけが必要です。

 ... static public class LabelStyle { public BitmapFont font; /** Optional. */ public Color fontColor; public LabelStyle () { } public LabelStyle (BitmapFont font, Color fontColor) { this.font = font; this.fontColor = fontColor; } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設定ファイルのこのクラスに対応するリソース：

 resources: { com.badlogic.gdx.graphics.Color: { black: { r: 0, g: 0, b: 0, a: 1 } }, com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } } }, styles: { com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { default: { font: default-font, fontColor: black } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使用例：

 ... Skin skin = new Skin(Gdx.files.internal("data/skins/SimpleSkin")); Label label = new Label("I am label", skin); label.x = 10; label.y = 10; stage.add(label); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストフィールド

次のクラスはTextFieldです。 テキスト入力フィールドです。 このクラスは、リスナーを割り当てることができるため、すでに興味深いものです。 libGDXライブラリは、「subscribers-readers」パターンを使用して作成されましたが、制限があります。インストールできるリスナーは1つだけです。 リスナーは、TextFieldListener型のパラメーターを受け入れるsetTextFieldListener（）メソッドによって設定されます。 これはインターフェースです。コードは次のとおりです。

 ... static public interface TextFieldListener { public void keyTyped (TextField textField, char key); } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どうやら、1つのイベントが処理されている-文字が入力されます。



クラスにはいくつかのコンストラクタがあります。 私の意見では、2つの主なものについて説明します。

 TextField(String text, Skin skin)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキストを含むテキストボックスを作成します

 TextField(Skin skin)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-空のテキストフィールドを作成します



いくつかのクラスメソッド：

 setText()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキストを設定します

 setPasswordMode()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキストの代わりに、setPasswordCharacter（）メソッドを使用して選択した文字が表示されます

 setMessageText()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-テキストボックスに何も入力していない場合に表示されるヒントテキストを設定します。



TextFieldは、標準キーを使用してPC上でテキストのコピーと貼り付けをサポートします。 Androidでは、Androidの制限によりコピーと貼り付けはサポートされていません。



コンポーネントスタイルクラス。 ご覧のとおり、唯一の必須パラメーターはフォントです。

 ... static public class TextFieldStyle { /** Optional. */ public NinePatch background, cursor; public BitmapFont font; public Color fontColor; /** Optional. */ public TextureRegion selection; /** Optional. */ public BitmapFont messageFont; /** Optional. */ public Color messageFontColor; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設定ファイルのリソース：

 ... com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: { default: { font: default-font, fontColor: black } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして使用例：

 ... TextField textField = new TextField("I am text field", skin); textField.y = 30; stage.addActor(textField); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像

Imageクラスは、作業にスタイルを必要としない数少ないクラスの1つです。 したがって、その説明は非常に簡単です。 複数のデザイナーがこのクラスのオブジェクトを作成できます。最も単純なものの1つはImage（TextureRegion領域）です。 このクラスは、ClickListenerタイプのリスナーをサポートします。 このインターフェイスのソースは次のとおりです。

 ... public interface ClickListener { public void click (Actor actor, float x, float y); } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、画像のクリックイベントを処理できます。



便利なメソッドは、画像を変更できるsetRegion（）です。 テクスチャとその領域の両方をデザイナーに渡すことができます。 ただし、スケーリング、回転はテクスチャ領域の場合にのみ機能します。



使用例：

 ... Image image = new Image(new Texture(Gdx.files.internal("data/skins/default.png"))); image.y = 100; stage.addActor(image); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、コンストラクターのパラメーターとしてテクスチャーを使用します。 実際のアプリケーションでは、TextureRegionを使用することをお勧めします。

一覧

Listクラスは、特定のフィールドを選択できるテキストフィールドのリストです。 List Swingのアナログ、またはDelphiのListBox。

従来、いくつかのコンストラクターがあり、最も単純なものの1つはリスト（オブジェクト[]アイテム、スキンスキン）です。 items配列のリストからオブジェクトを作成します。 getSelection（）メソッドを使用して選択した要素を見つけることができ、そのインデックスはgetSelectedIndex（）です。 setItems（）メソッドを使用して新しいリストを設定でき、名前またはインデックスのいずれかで選択されたアイテムを作成できます：setSelection（）、setSelectionIndex（）。 ListはListListenerリスナーをサポートします。 クラスソース：

 ... public interface SelectionListener { public void selected (Actor actor, int index, String value); } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

selected（）メソッドは、アイテムが選択されると呼び出されます。



スタイルクラスは次のとおりです。

 ... static public class ListStyle { public BitmapFont font; public Color fontColorSelected = new Color(1, 1, 1, 1); public Color fontColorUnselected = new Color(1, 1, 1, 1); public NinePatch selectedPatch; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、色はすでに初期化されていますが、フォントとselectedPatchを記述する必要があります。 NinePatchに関する小さな余談。 これは通常の画像（.png）であり、1ピクセルのエッジにはオーバーヘッド情報が含まれています。 この画像は、選択したアイテムに使用されます。 詳細については、 habrahabr.ru / post / 113623をご覧ください。設定ファイルからの抜粋がリストに含まれています。

 ... com.badlogic.gdx.graphics.g2d.NinePatch: { default-nine : [ {width: 100, height: 100, x: 0, y: 0} ] } ... com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: { default: { font: default-font, selectedPatch: default-nine } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これは使用例です：

 ... List list = new List(new String[] {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}, skin); list.x = 300; stage.addActor(list); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セレクトボックス

SelectBoxクラスは、いくつかの要素のドロップダウンリストです。 非アクティブ状態では、これは選択されたアイテムを示す行です。 有効にすると、押すことで選択できる要素のリストが表示されます。 いくつかのコンストラクターがあり、最も単純なもの-SelectBox（オブジェクト[]アイテム、スキンスキン）-要素のドロップダウンリストを作成します。 最初のアイテムが選択されたと見なされます。 クラスの残りの部分はリストに非常に似ています。 List-SelectionListenerと同じリスナーをサポートし、リスト項目を操作するための同じメソッドを持っています。 スタイルクラスは次のとおりです。

 ... static public class SelectBoxStyle { public NinePatch background; public NinePatch listBackground; public NinePatch listSelection; public BitmapFont font; public Color fontColor = new Color(1, 1, 1, 1); public float itemSpacing = 10; ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、3つのNinePatch-aとフォントには必須の初期化が必要です。



設定ファイルからの抜粋は次のとおりです。

 ... com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: { default: { font: default-font, background: default-nine, listBackground: default-nine, listSelection: default-nine } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使用例：

 ... SelectBox selectBox = new SelectBox(new String[] {"Item 1", "Item 2", "Item 3"}, skin); selectBox.x = 400; stage.addActor(selectBox); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スライダー

最後のウィジェットの子孫クラス。 Sliderクラスは、最大値と最小値を持つスライダーです。 ユーザーは、ドラッグアンドドロップでスライダーの値を変更できます。 クラスには、最大値、最小値、ステップ数を指定したいくつかのコンストラクターがあります。 最も単純なのはSlider（スキンスキン）です。 最大値が100、最小値が0で、グラデーション数が100のスライダーが作成されます。このクラスは、ValueChangedListener型のクラスを使用して値変更イベントを処理できます。

 ... static public interface ValueChangedListener { public void changed (Slider slider, float value); } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スライダーの値を変更すると、changed（）メソッドが呼び出されます。



スタイルクラスには2つのパラメーターが必要です。

 ... static public class SliderStyle { NinePatch slider; // .    . TextureRegion knob; //  ,   . ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設定ファイルのコードは次のとおりです。

 ... com.badlogic.gdx.graphics.g2d.TextureRegion: { default-region: {width: 10, height: 12, x: 0, y: 0} } ... com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: { default: { slider: default-nine, knob: default-region } } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これは使用例です：

 ... Slider slider = new Slider(skin); stage.addActor(slider); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

scene2d.uiパッケージレビューの最初の部分が完了しました。 ウィジェットから継承されたクラスのみを考慮したことを思い出させてください。 ウィンドウ、リスト、スクロール可能なリスト、パネルなど、コンテナクラスの大部分はまだあります。これらには（ボタン）ボタンが含まれます。 時間が来たらすぐに、残りのクラスを検討する続編を書きます。



アプリケーション： 機会のデモンストレーションを伴うプロジェクト。

付録： ArgoUMLプログラムで私がコンパイルしたクラス図。