イントロダクション

前回、タイトル画面を妥協した形で作成しました。

言い訳ですが、今回はGluonプラグインを使ってアプリを簡単に作れる事を証明するのが目的なので。。。うーむ、ちょっと悔しい。。。

それはさておき、タイトル画面はGradleで生成されたクラス「BasicView」をカスタムして作成しました。そして、スタートボタンを押下した後に表示する「ゲーム画面」は新たに「Viewクラス」を継承して作成しました。特に難しいことはせずに、単純に画面(View)にコンポーネントを追加する実装をしています。

実装手順

JavaFXでの実装とほぼ同じ手順になります。JavaFXでの実装の場合は「Stage」に作成したコンポーネントを登録(setScene())するのですが、Gluonでの実装はViewクラスから継承している(本当はBorderPane)setCenter()メソッドに渡すところで実装は終了します。

具体的に

＜作成したプロジェク名のクラス(JankenGame)＞

MobileApplicationクラスがGluonのフレームワーク部品になります。そして赤い字のメソッドはこのクラスのメソッドです。

この「addViewFactory」メソッドに画面名と対象クラスを渡します。

下のコードでは「HOME_VIEW」は親クラス(MobileApplication)クラスに定義してある文字列"home"です。この文字列をキーにしてBasicViewクラスを登録しているということです。

今回は、初めの画面から直接次の画面へ遷移するのでこの場所では登録していません。画面遷移の方法を変えてやるときには使える仕組みだと思います。

public class JankenGame extends MobileApplication {

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, BasicView::new);
    }

    @Override
    public void postInit(Scene scene) {
        Swatch.BLUE.assignTo(scene);

        ((Stage) scene.getWindow()).getIcons().add(new Image(JankenGame.class.getResourceAsStream("/icon.png")));
    }
}

＜Viewクラス＞

public class 作成するクラス名 extends View {
   // 例としてGroupクラスにコンポーネントを追加
   Group gp = new Group();
   Button btn = new Button("Start");
   gp.getChildren().add(btn);
   ・
   ・
   ・
   cetCenter(gp);
}

上記の様な実装になります。

起動結果としてはこんな感じでできました。本当は今日中にじゃんけんゲームとして動かせるところまで実装したかったのですが、明日仕事が。。。(言い訳)風呂上がりなので集中力が。。。(言い訳)

というわけで今日はここまでで作業をやめることにしました。無理をしないことも大切なことなので。。。

※大切なのは継続的に作業を行い目的に向かっていくことだと思います。

ちょいとまとめ

今回の実装で必要になる技術は、JavaFXでのレイアウトクラス(Group, VBox, BorderPane etc...)を使ってスマホアプリの領域にうまく、レイアウトを使用してコンポーネント(ボタン、テキスト、アイコン(イメージ)など)を配置することです。

上のコードでは、ViewクラスがBorderPnaeクラスの子クラスなので、「setCenter()」などのメソッドでコンポーネントを配置しました。球体(Sphere)を１つだけ設定した時の表示結果は以下の様になります。

そして、VBox(縦のレイアウト)にHBox(横のレイアウト)を３つ登録して以下の様に領域を分けました。

1. タイトル部分(Ready?の文字列を表示)
2. 画像を表示する領域
3. ボタンを表示する領域

こんな感じでコードを書きました。

＜実際に作成したコード＞

public TestingView() {
	double height = MobileApplication.getInstance().getScreenHeight();
	VBox gp = new VBox();
	// Rready
	Text ready = new Text();
	ready.setText("READY?");
	ready.setFont(new Font(45));
	ready.setTextAlignment(TextAlignment.CENTER);
	HBox topLine = new HBox();
	topLine.setAlignment(Pos.CENTER);
	topLine.setMinHeight(height * 0.2);
	topLine.getChildren().add(ready);
	gp.getChildren().add(topLine);

	// じゃんけんの手
	final HBox midLine = new HBox();
	midLine.setMinHeight(height * 0.34);
	final Canvas canv = new Canvas();
	midLine.getChildren().add(canv);
	gp.getChildren().add(midLine);
	// ボタン
	final GraphicsContext ctx = canv.getGraphicsContext2D();
	Button btn = new Button("バトル");
	btn.setOnAction(evt -> {
		startJanken(ctx, midLine);
	});
	HBox bottomLine = new HBox();
	bottomLine.setAlignment(Pos.CENTER);
	bottomLine.setMinHeight(height * 0.3);
	bottomLine.getChildren().add(btn);
	gp.getChildren().add(bottomLine);
	setCenter(gp);
}

実行結果

なんとかここまで来たので、今日はここらでやめることにしようと思います。

でわでわ。。。

[rakuten ids="akibamac:10732227"]