libGDXにはUnityのAsset Storeのようなものはありませんが、代わりにskinが多数用意されています。
Free LibGDX Scene2D GUI skins.
https://github.com/czyzby/gdx-skins
今回はこれを使って、リスト画面を作ります。
まずメインのファイルを書き換えます。
これまではMyGdxGameクラスに直接描画処理を記載してきましたが、別ファイルにしていきます。
今後、複数の画面を簡単に切り替えるようにするためです。
core\src\com\mygdx\game\MyGdxGame.java
package com.mygdx.game; import com.badlogic.gdx.Game; public class MyGdxGame extends Game { @Override public void create() { // メインスクリーンをセット setScreen(new MainScreen(this)); } }
MyGdxGameクラスのスーパークラスがApplicationListenerからGameに変わりました。
そしてcreateメソッドでMainScreenをsetScreenするだけです。
MainScreenクラスの中身は以下になります。
core\src\com\mygdx\game\MainScreen.java
package com.mygdx.game; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.Screen; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.scenes.scene2d.Stage; import com.badlogic.gdx.scenes.scene2d.ui.Label; import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane; import com.badlogic.gdx.scenes.scene2d.ui.Skin; import com.badlogic.gdx.scenes.scene2d.ui.Table; public class MainScreen implements Screen { // 呼び出し元のインスタンス private MyGdxGame game; // ステージ private Stage stage; // レイアウトのコンテナー private Table container; public MainScreen(MyGdxGame game) { // 呼び出し元のインスタンスを保持 this.game = game; // ステージを生成 this.stage = new Stage(); Gdx.input.setInputProcessor(this.stage); // スキンを初期化 Skin skin = new Skin(Gdx.files.internal("skin/default/uiskin.json")); // レイアウトを初期化 this.container = new Table(); // ステージにレイアウトを追加 this.stage.addActor(container); // レイアウトの大きさを最大化 this.container.setFillParent(true); // テーブルレイアウトを生成 Table table = new Table(); // テーブルレイアウトを含むスクロールペインを生成 final ScrollPane scroll = new ScrollPane(table, skin); // テーブルに余白を設定 table.pad(10).defaults().expandX().space(4); for (int i = 0; i < 100; i++) { // 行を追加 table.row(); // ラベルを生成して追加 table.add(new Label(i + " row ", skin)); } // レイアウトにスクロールペインを追加 container.add(scroll).expand().fill().colspan(4); // レイアウトに余白を設定 container.row().space(10).padBottom(10); } @Override public void show() { } @Override public void render(float delta) { // 描画処理 Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); this.stage.act(Gdx.graphics.getDeltaTime()); this.stage.draw(); } @Override public void resize(int width, int height) { // 縦横切り替えなどで画面の大きさが変わった際の処理 this.stage.getViewport().update(width, height, true); } @Override public void pause() { } @Override public void resume() { } @Override public void hide() { } @Override public void dispose() { // 解放処理 this.stage.dispose(); } }
次の場所にフォルダを作成します。
android\assets\skin\default
最後に以下のサイトの[DOWNLOAD. ALL OF THEM.]からスキンをダウンロードします。
https://github.com/czyzby/gdx-skins
今回はdefaultスキンを利用します。
ダウンロードしたzipファイルを解凍し、default\skinフォルダ内のファイルをAndroid Studioからassets\skin\defaultに配置します。
ここで一度実行してみます。
※下記動画はフルスクリーンで再生すると文字がはっきり見えます
テキストが並ぶ単純な画面が表示されます。スクロールすることもできます。
AndroidはXML、iOSはStoryboard、HTML5はHTMLでレイアウトを定義するのが一般的ですがlibGDXではプログラム内で作ります。
プログラム内の1つのレイアウトで各プラットフォーム向けのレイアウトを組むことができますので一石二鳥です。
まとめ
今回はラベルとdefaultスキンしか使いませんでしたが、例えばリスト表示はランキングなど、多くのアプリで使える機能です。
ここまでは簡単なのですが、実はこの状態からカスタマイズしていくのはそれなりに大変です。
次回はこの画面をカスタマイズしていきたいと思います。