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スキンしか使いませんでしたが、例えばリスト表示はランキングなど、多くのアプリで使える機能です。
ここまでは簡単なのですが、実はこの状態からカスタマイズしていくのはそれなりに大変です。
次回はこの画面をカスタマイズしていきたいと思います。
