Eclipse Gluon Game〜じゃんけんゲームを作る3:Ver1.0完成〜

イントロダクション

とりあえずではありますが、「じゃんけんゲームVer1.0」という形で完成させます。

現状としては「アイコ」の時に動きをストップせずに(現状では「もう一度」ボタン表示して)次の「アイコでしょ」と続く仕様になっています。

これはじゃんけん的にビミョウなのでちょっと足掻いてみました。が、これには「マルチスレッド処理」をやるしかないのでVer1.0という形でこのままリリースすることにしました。

じゃんけんゲームの処理はこちらのリンクから見ることができます。ポイントとしては、アニメーション、ボタンの押下などの画面側の処理クラスと勝敗判定を行うための処理クラスに分けて実装したところです。

  1. JankenGame.java: アプリケーションを起動する
  2. BasicView.java: タイトル画面「スタート」ボタンからTestingViewを起動する
  3. TestingView.java: じゃんけんゲームの実装クラス(画面側)
  4. /util/Judgement.java: じゃんけんの勝敗判定の処理クラス

ポイントとしては以下のようになります。

1. TestingViewクラスのコンストラクタで画面の部品を作成
2. アニメーションもコンストラクタで作成している
3. 細かいラベルテキスト作成などのメソッドを各イベントから呼び出す

リリースする

「どこにリリース?」と聞かれそうなので述べますとGLUONのモバイルアプリで、GooglePlay Storeへリリースしようと考えております。料金など色々とAndroidアプリの方がやりやすかったのでこのようになりました。

その前にGLUONのオープンソース・ライセンスを取得する必要があります。

Open Source License Request

詳細は上記のサイトを見ればわかりますが、とりあえずはSNSにリンクするウェブサイトが必要なのでこれを作る方向へ進もうと思います。

ウェブサイト

Gitのプロジェクトページなどでも良いと思うのですが、色々と考えがありこのサーバーをウェブサイトにしようと思います。

Gitは、プロジェクトサイトの作成に関しても機能が充実しているようです。

基本的な扱い方も記載されてました。









Eclipse Gluon Game〜じゃんけんゲームを作る〜

イントロダクション

前回までに、JavaFXによるアニメーションの作成など基本的なことをやってきました。

これで、Javaでスマホアプリを作る準備ができたので、実装してみました。

ver1.0

このレベルまで作成しました。
それは、スマホアプリでじゃんけんゲームを作ろうと思ったからです。そして、現状ではここまで作ることができました。

作成中

とりあえずは「動く」「じゃんけんをしているように見える」というところまで来たのですが、以下のような問題があります。

  1. 「じゃんけんぽん」で正常な「じゃんけん」にならない
  2. 何回かじゃんけんをしていると押下したボタンと違うて(イメージ)が表示されている
  3. 「じゃんけんぽん」の「ポン」が表示されない

ぱっと見で自分が認識している問題がこれだけあります。

リファクタリングする

これらの問題を解決するにはどうしたら良いか?これを考えて見たのですが、自分の出した答えは上記の通りです。「リファクタリング」です。そして理由は以下の通り

  1. コードが汚いので、想定通りに動いていない原因がわかりづらい
  2. 全ての(じゃんけんの)処理を1つのファイルに記載しているので「オブジェクト指向」していない。つまり「余計なもの(処理)がたくさんある」状態
  3. 問題のあるコードと問題のないコードの切り分けが面倒
  4. 次に改修して、新しいことをやろうとするときに使えないコード
  5. 「4」と同様に拡張したり、サンプル(参考にする)コードにならないので次につながらない
  6. 例外(エラー)処理が不適切なので、デバックがしづらい→保守する人がすごく苦労する
  7. 「このまま汚いコードでリリースする」=「汚いコードが正しい」となる ※個人でやる場合は問題ない?が企業など大きなプロジェクトでやると改修コストがものすごいことになる(コード解析、修正、テスト→修正したコードが問題なく動く動く確認をするのに人的コストが沢山必要になる)

挙げればキリがないのでここまでにしますが、まとめると「みんなが不幸になる」ということです。

みんな「不幸」になりたくないですよね(笑)、平和のために頑張りましょう!

とりあえず自己レビュー

仕事でもそうですが、人に作成したコードをレビューしてもらう前に自己レビューをやります。「本来は。。。」などと言ってレビューをやらないケースが世間にはありますが、自分の経験上、レビューした方が作業量が少なくて済むように思います。

自己レビューをする

確認ではないですが、自分流のレビュー方法です。

  1. とりあえずコードを眺める
  2. 直感的な感想をリストアップする(感覚で良い)
  3. コードを見て、わからない(理解できない、気に入らない)部分を理解(ピックアップ)する
  4. 変数名の意味を確かめる→変数の用途と名前がリンクしているか?
  5. 作成物(コード)の構成を見直す→プログラムの構成が複雑になっていないか?
  6. 作成物(コード)が整理されているか確認→どの処理がどこにあるかすぐにわかるか?
  7. 無駄な処理がないかどうか確認→余計な変数を使用していないか?処理(コード)を少なくすることはできないか?

上記のような部分を見直します。そして大切なことは

どのように修正するのか?ということです。理由に関しては語るに及ばずだと思います。

そんなわけでソースを眺めます。コードが420行あるのでリンクにします。部分的にコードをピックアップします。。。

問題1「コードが長い」

上記に記載したようにコードが長いので、レビューワー的に「見辛い」「見る気がなくなる」。。。などの問題が出ます。単純に「汚ねぇな。。。」って思うコードは見るのに時間がかかるから「面倒だな」と思うのでやる気が萎えます。

問題1の対策

この部分の対策としては「クラス分け」を行おうと思います。そして現状のクラス構成は以下になります。

JankenGame.java → じゃんけんゲームを起動します。GLUONで自動生成されたクラスなので、JavaDocコメントがないですが、23行のコード

・BasicView.java → じゃんけんゲームのタイトル画面クラスです。これもGLUONで自動生成ですが、多少修正したのでコメント(JavaDocも)付きで73行のコード

TestingView.java → じゃんけんゲームの本体部分のクラスです。今回のリファクタリング対象クラスになります。テストしながら作成したので420行のコード

そして「じゃんけんゲーム」を起動するのに必要な処理は以下の通りです。

  1. タイトル画面の表示「BasicView.java」で行なっています。これはEclipseにインストールしたGLUONプラグインで自動生成したものを、ほぼそのまま使用しています。
  2. タイトル画面から「スタート」ボタンを押下した時に起動する画面の表示「TestingView.java」で行なっています。以下の処理はこのクラスで実装しています。
  3. レイアウトクラスを使用して「Top」「Mid」「Btn」「Bottom」の表示領域を作成しています(VBoxとHBox使用)
  4. Topに「じゃんけん。。。」などの文字を表示、Midにじゃんけんの手(Image)及びアニメーションの表示、Btnに「勝負」と「もう一度」のボタン、Bottomにユーザーの手を入力するボタン「ぐー、ちょき、ぱー」を設定
  5. 「4」の各ボタンにボタン押下した時のアクション処理を実装
  6. じゃんけんの勝敗判定処理を実装
  7. 「じゃん〜ポン」のアニメーションを実装(Timer、AnimationTimer)
  8. アニメーション終了時の処理

とりあえずはここまでにします。

関連ページ一覧

  1. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label
  2. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label
  3. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button
  4. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫4:RadioButton
  5. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫5:ToggleButton
  6. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫6:CheckBox
  7. Eclipse AndroidGluonでアプリを作る6: アニメーションを作る準備〜
  8. Eclipse AndroidGluonでアプリを作る7: 木琴アプリの解析〜



Eclipse Android〜Gluonでアプリを作る5: ゲーム部分を作る〜

イントロダクション

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

言い訳ですが、今回は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)を1つだけ設定した時の表示結果は以下の様になります。

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

  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);
}

実行結果

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

でわでわ。。。









Eclipse Android〜Gluonでアプリを作る4: 普通に作る〜

イントロダクション

前回は、3Dでのじゃんけんゲームを作成しようと悪戦苦闘しました。そして諦めました。。。

3D関連の実装は理解しなくてはならないことが多いので2日では実装できそうにないと判断しました。戦略的撤退です、逃げてはいません(笑)。

実装状況

現在は簡単なタイトル文言とボタンを表示するだけの実装ができています。

シンプルイズベスト?

作成したコードと流れ

自動生成された、Mainクラスの「JankenGameクラス」から同様に生成されたクラス「BasicView」を表示したのがタイトル部分です。「じゃんけんゲーム」と上部に表示しています。

「スタートボタン」を押下したら隣の球体のみの画面に画面遷移します。

コードはいたってシンプルです。

BasicView

public class BasicView extends View {

    public BasicView() {
    	// 縦のレイアウト
    	VBox layout = new VBox(300);
    	layout.setAlignment(Pos.CENTER);
    	
    	// タイトル文言
    	layout.getChildren().add(this.getTitleNode());
    	// スタートボタン
    	Button start = new Button("スタート");
    	start.setOnAction(event -> setCenter(new TestingView()));
    	layout.getChildren().add(start);
        // 画面に登録
        Group gp = new Group(layout);
        setCenter(gp);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
//        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
//        appBar.setTitleText("Basic View");
//        appBar.getActionItems().add(MaterialDesignIcon.SEARCH.button(e -> System.out.println("Search")));
    }

    /**
     * 画面のタイトルを作成します。
     * @return タイトル部分のノード
     */
    private HBox getTitleNode() {
    	HBox hbox = new HBox(20);
    	Text jan = new Text("じゃん");
    	this.settingFont(jan, Color.BLUE);
    	hbox.getChildren().add(jan);

    	Text ken = new Text("けん");
    	this.settingFont(ken, Color.YELLOW);
    	hbox.getChildren().add(ken);

    	Text game = new Text("ゲーム");
    	this.settingFont(game, Color.RED);
    	hbox.getChildren().add(game);
    	return hbox;
    }

    /**
     * テキストの設定を行います。
     * @param tx 表示するテキスト
     * @param color 設定する色
     */
    private void settingFont(Text tx, Color color) {
    	double width = MobileApplication.getInstance().getGlassPane().getWidth();
    	tx.setFont(new Font(width / 10));
    	tx.setFill(color);
    	tx.setStroke(Color.BLACK);
    	tx.setStrokeWidth(1.0);
    }
}

TestingView

/**
 * JavaFXでの3Dモデルの描画(作成?)、とりあえず写経する。
 * 
 * @author takunoji
 * @see https://docs.oracle.com/javase/jp/8/javafx/graphics-tutorial/overview-3d.htm#CJAHFAHJ
 */
public class TestingView extends View {
	public TestingView() {
		Sphere sp = new Sphere(30.0);
		setCenter(sp);
	}
	
}

これで、タイトル表示からゲームの起動画面まで来ました。

残すはじゃんけんゲームの実装部分になります。残すところは11時間。。。

でわでわ。。。









JavaFX 3Dグラフィックス〜チュートリアル1:バージョンが古かった〜

イントロダクション

今までに、Gluonのプラグインでスマホアプリの起動をやってきました。とりあえずは画面が表示されて、画面の遷移もできた状態です。

 

次は。。。

じゃんけんゲームを作ろうとしていますが、今回は3D描画でやりたいと思っています。数学の勉強も兼ねるので。。。そこで使用するのが

JavaFX 3D

昔、Java3Dとかいうライブラリがあってそれと似た様な感じのソースになってました。が参考にしたサイトが古いのか?うまく動かずOracleのチュートリアルで頑張ろうという流れになりました。参考にするサイトはこちらです。

Oracleのチュートリアル

チュートリアルのページを読んで見ると部分的にしか記載がないのでコードが全部書いてあるものを探しました。ここであたりかな?とか部分的にやろうとしましたが、全部つながっている様です。諦めて全部やります。

初めに、参照するソースをダウンロードする必要があります。MoleculeSampleApp.zip

上のZipファイルです、駄菓子菓子これはNetBeas用のプロジェクトらしくEclipseには使えないと思ったのですが、ソースだけ失敬することにしました。

余計なものもありますが、こんな感じでパッケージエクスプローラ上は表示されています。

とりあえずはこれで準備完了。

チュートリアルを追いかける

まぁ色々書いてあるけど、このコードコピって貼り付けて。。。と書いてあります。実際にコピペでも読むだけよりは全然違います。

そして実行

あれ?なんかチュートリアルと違うぞ?なんなんだろう?

ソースを追いかけていくと。。。なるほどソース読んで足りないコードを追加しろというわけですな。

実行結果はこんな感じになりました。


これも違う様な気が。。。

続きをやったけど、コードのコピーをしている最中にビルドエラーが出るし。。。

ちょいとこのチュートリアルは中止するかな?

うん、やめとこう(笑)

<追記>

ちょいと気になり、JavaFXのバージョンを確認したところ

JAVA_HOME/jre/lib/javafx.propertiesの中を見ると。。。

javafx.runtime.version=8.0.141
javafx.runtime.build=b14

とりあえずは「古い」ということで。。。

ここは、3Dではなく2Dでやろうかと。。。

言い訳ですが、戦略的撤退です!

でわでわ。。。









Eclipse Android〜Gluonでアプリを作る3: 3Dモデル〜

イントロダクション

今までに、以下の様なことをやりました。

  1. EclipseにGLUONのプラグインをインストールとハローワールド
  2. 画面の遷移

3Dモデルを表示する

とりあえずは、球(Sphere)を表示しました。

シンプルに球のみです、ソースコード以下に。。。

// Viewクラスを継承して作成
public TestingView() {
	Sphere sp = new Sphere(30.0);
	setCenter(sp);
}

前提として、JankenGameクラスからBasicViewを表示した後にボタンを押下してから上のクラスを表示しています。

public class BasicView extends View {

    public BasicView() {
        
        Label label = new Label("Hello JavaFX World!");

        Button button = new Button("Change Text!");
        button.setGraphic(new Icon(MaterialDesignIcon.LANGUAGE));
        button.setOnAction(e -> {
        	setCenter(new TestingView());
        });
        
        VBox controls = new VBox(15.0, label, button);
        controls.setAlignment(Pos.CENTER);
        
        setCenter(controls);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
//        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
//        appBar.setTitleText("Basic View");
//        appBar.getActionItems().add(MaterialDesignIcon.SEARCH.button(e -> System.out.println("Search")));
    }
    
}

上の赤い字が作成したクラスです。

ここからが難しい

どんな画面にして「じゃんけんゲーム」を開始するか?サンプルで作成するので深く考えるつもりはありませんが、如何せん「見た目」に関してはとことん弱いので大きな課題です。。。

まとめ

「JanakenGame」クラスが起動して→「BasicView」が起動(表示)→ボタンを押下すると「TestingView」が起動(表示)する流れでアプリケーションを作成しました。

Gitには以下のファイルがアップロードしてあります。

  1. JankenGame.java
  2. BasicView.java
  3. TestingView.java

ソースの内容は上のファイルを参照してください。









Eclipse Android〜Gluonでアプリを作る2〜

イントロダクション

前回は、GLUONプラグイン(for Eclipse)をインストールしました。とりあえずは画面が表示されたので次のステップです。

参考サイトはこちらのドキュメントページです。

まずは画面の遷移を行いたい

ここのサイト(GLUONサイト)で調べて、Eclipseからアプリを動かしながら確認しました。

<クラスの構成>

「src/main/java」にメインになるクラスがありました。自分の作成するアプリの名前が「JankenGame」なので「JankenGame.java」と言うファイルが生成されていました。

中のソースはこんな感じです。

<JankenGame.java>

@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")));
}

init()で表示する画面(View)を登録、今回は1つだけ登録します。

実装しやすい方法で画面遷移などを実装できるので、複数パターンの画面遷移方法がある様です。

今回の実装方法は、単純に。。。

ボタンを押すと画面が変わる方法です。

初期表示される「BasicView」にボタンを登録しておき、ボタンが謳歌されたら「TestingView」を開くと言う様な形で実装しました。


JankenGameクラスから表示されたBasicView画面のコードは以下になります。

public BasicView() {
    
    Label label = new Label("Hello JavaFX World!");

Button button = new Button("Change Text!");
    button.setGraphic(new Icon(MaterialDesignIcon.LANGUAGE));
    button.setOnAction(e -> {
    	setCenter(new TestingView());
    });
    
    VBox controls = new VBox(15.0, label, button);
    controls.setAlignment(Pos.CENTER);
    
    setCenter(controls);
}

// 画面の上部分にあるバーは不要なのでコメントアウト
@Override
protected void updateAppBar(AppBar appBar) {
//        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
//        appBar.setTitleText("Basic View");
//        appBar.getActionItems().add(MaterialDesignIcon.SEARCH.button(e -> System.out.println("Search")));
}

赤文字で記載した部分が画面の切り替え部分です。

そして、TestingViewクラスは単純にLabelを表示しているだけです。

こんな感じで画面の遷移ができました。

<ポイント>

  1. 画面を意味する「View」クラスを継承して自分の作成したい画面を作成する
  2. ViewクラスはGroupクラスなどと同じ様にLayerとして使用できる
  3. Viewクラスを継承したクラスを量産して画面をあちらこちらと切り替えができる

動かしてみたところ、こんな風に思いました。

でわでわ。。。

Eclipse Android〜Gluonでアプリを作る〜

イントロダクション

ここ数日、JavaFXを使用していたのでAndroidのアプリでも作ろうかと考えました。JavaでAndroidってことは「Android Studio?」と思ったのですが、ありました。

Gluon

IDE Plugins

英語のサイトなので翻訳して読みます(笑)

<初めページ(リンクあり)>

ここで無料版とか、有料版とか選びます。今回は無料版を選択。

色々書いてあります。が下の方に。。。

こんなものがあり、Eclipseのプラグインでインストールできる様でした。

そして、サイトの内容は読んでいないけれどEclipseのプラグインがあると言うことで。。。


上記の様な感じで簡単にインストールでいました。

そしてこのページの手順に従いプロジェクトを作成します。

途中Emailとかの入力が求められるけど入力しなくても良さそうです。※自分は入力しました。

こんな感じで入力していきます。

そしてできたプロジェクトを見ると2つあります。

「入力名」プロジェクトと「入力名App」プロジェクトがありました。

作成されたものの内容はサイトに記載がありました。

さまざまなフォルダが作成されたことがわかります。

main: すべてのプラットフォームに共通のコード用
desktop:  デスクトップ上でのみ実行されるべきコード用
android:  Android固有のコード用
ios:  iOS固有のコード用

 

そして、Graldeのタスクビューを開きます。

Gradleのタスクビューを開くと下の様な感じになります。

そして、とりあえず起動(PC上で動きます。)自分はダブルクリックで起動できました。(有能だなぁー)

とりあえずは、起動したのでこれからアプリの作成に入りたいと思います。

チュートリアル

でわでわ。。。