じゃんけんゲームの仕様〜Java製じゃんけんゲームの全容〜

イントロダクション

「じゃんけんゲームVer1.0」のリリースに向けて作業中です。その作業でやらなくてはならない項目が以下のようになります。

      1. プロジェクトサイトの作成
        • 目標達成PrjectにじゃんけんゲームPrjectをぶら下げる(目標達成のサンプルとしての位置付け)
        • 目標達成のフロー図を作成する(サンプルでじゃんけんゲームを表示)
        • 目標達成のフロー図を入力して表示できるようにする(余裕があれば。。。)
      2. ソースの解説と実装手順
        プログラミング初心者にもわかりやすいように、表示しているコンポーネントとソースコードを比較しながらプログラムの内容を説明する
        また、拡張(独自実装)する時の例を示しそれがどのように変わったのかサンプルを示す。
      3. 要件定義と画面設計書の作成
        作成したゲームの画像と各部品の処理内容、どのように動くのか?を定義する

画面設計をする

画面一覧

画面は以下のように使用する画面の数が4つあります、うち1つはアニメーションを使用するので、動画を載せておきます。

GLUONのライセンス表示

タイトル画面
じゃんけん開始画面

 

<じゃんけんゲームの動き>

タイトル画面仕様

タイトル画面のクラス: BasicView.java(Gitへのリンク)
1. タイトル文言を表示する
— 「じゃん」を青色のテキストで表示
— 「けん」を黄色のテキストで表示
— 「ぽん」を赤色のテキストで表示
— 「スタート」をボタンを表示
— 「スタート」ボタンを押下すると「TestingView」を表示する

<実装部分>

<ソース>

/** コンストラクタ */
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);
}

「縦のレイアウト」

縦のレイアウトにはVBoxクラスを使用します。イメージとしては下のようになります。ソース的にはこんな感じです。

VBox layout = new VBox();
layout.getChildren().add(new Button("1番目に追加したコンポーネント"));
layout.getChildren().add(new Button("2番目に追加したコンポーネント"));
 ・
 ・
 ・

じゃんけん開始画面

じゃんけんゲームの開始クラス: TestingView.java
1. 「Ready?」の文言をラベルで表示する。
2. 「勝負!」のボタンを表示する。
— ボタンを押下した時に以下の表示する。
— ・自分の手のアニメーション。
— ・CPUの手のアニメーション。

 

 

「Ready?」の文言をラベルで表示する。

<実装部分>

<ソース1: コンストラクタ>

judge = new Judgement();
// 画面サイズ取得
double height = MobileApplication.getInstance().getScreenHeight();
VBox tateLayout = new VBox();
// Rreadyの文言
ready = createReadyTxt();
// 一番上の横一列レイアウト
topLine = createLineLayout(height * 0.15, ready);
tateLayout.getChildren().add(topLine);

<ソース2: createReadyTxt()>

/**
 * 画面上部に表示する「Ready?」のテキストを作成する。
 * 
 * @return 「Ready?」のテキスト
 */
private Text createReadyTxt() {
	Text txt = new Text();
	txt.setText("RxEADY?");
	txt.setFont(new Font(45));
	txt.setTextAlignment(TextAlignment.CENTER);
	return txt;
}

赤い字は間違って入力している部分です(「バグ」と呼ばれます)、このメソッドではラベル(Textクラス)を使用して表示する文言を作成しています。(中央寄せ)

<ソース3: createLineLayout()>

/**
 * 1行文の横レイアウトを作成し、コンポーネントを追加します。
 * 
 * @param size 1行文の縦幅
 * @param txt 追加のコンポーネント
 * @return HBox 作成したレイアウト
 */
private HBox createLineLayout(double size, Text txt) {
	HBox layout = new HBox();
	layout.setAlignment(Pos.CENTER);
	layout.setMinHeight(size);
	layout.getChildren().add(txt);
	return layout;
}

「横のレイアウト」

HBoxを使用してコンポーネントを横に並べます。わかりやすい例としてはボタンが3つ並んでいるアニメーションの画面です。

<実装部分>

<ソース>

// ボタンを表示するための横一列レイアウト
bottomLine = createLineLayout(height * 0.20, goo, chi, pa);

<実行結果部分>

追加したコンポーネントを横に並べます。

次回はアニメーション部分について記載します。イメージは下のような感じです。

<じゃんけんゲームのアニメーション1「じゃん」>

  
自分の手(アニメーション)

 

でわでわ。。。

 








Github 使い方〜リポジトリにライセンスを設定する〜

ライセンスの設定手順

ライセンスを取得したいリポジトリに移動する。

「Create New File」をクリック、テキストボックスに「LICENSE」と入力する

そして、ライセンスのテンプレートがあるのでそれをクリックする

今回はApache2.0を選択しました。そして「Review amd submit」をクリック

細かいところを入力して「Commit New file」をクリック

こんな感じでライセンスの設定(LICENSEファイルの作成)ができました。

でわでわ。。。



Github 使い方〜Issueでやることを整理〜

イントロダクション

「じゃんけんゲーム」のリリースを行うのに以下のものが必要だというので調査を行いました。下のものは参考サイトの内容を翻訳したものです(Google翻訳)。

キーポイント

  • ライセンスは、ライセンスが要求されているオープンソースプロジェクトでのみ使用できます。
  • 非商用のオープンソース開発に限定されています。
  • 1年間有効で年間更新可能です。
  • 申請するには、プロジェクトリーダーまたはコアコミッターになる必要があります。
  • プロジェクトは3ヶ月以上経過している必要があります。
  • プロジェクトは活発に開発中です。
  • プロジェクトは、商用サービスを提供したり、有料のソフトウェアバージョンを配布したりしてはなりません。
  • プロジェクトは、定期的に更新されるニュースセクションまたはプロジェクトの更新が掲載されているソーシャルネットワークアカウントへのリンクを含むWebサイトを持っています。
  • プロジェクトリリースは定期的にビルドを更新しました。

Gitを使用して、プロジェクトの進捗やどのように進めていくのか?を表示する方法を調べていたらここにたどり着きました。

Issueを作る

GitHub(ウェブページのこと)にログインすると画面の上部に下のようなものが見れると思います。

ここでIssueをクリックするしたのような画面が表示されます。(入力済みの場合)

ここではマークダウンが使用できるので使える人はMDで作成するとおしゃれに作成できると思います。

Issueにラベルをつける

画面の上部にある「Issue」をクリックすると下のような画面に変わります。

赤で囲っている部分をクリックすると下のような画面に移動します。

ちなみにInternetExplorerではラベルの追加ができませんでした。サポートしていないようです。

こんな感じで入力ができるので入力します。

そして、Issueの画面で各項目に入力します。

最後に、「Issue」画面のLabelの隣にあるMilestoneをクリックすると下のような画面が出ます。進捗が確認できるようです。

最終的にできた画面


Eclipse Gluon Game〜じゃんけんゲームを作る4:ライセンスを取得する〜

イントロダクション

前回、じゃんけんゲームVer1.0を作成しました。

そして、アンドロイド端末にゲームをデプロイしようと思ったのですが、apkファイルを出力するビルドができないのでなんでか考えました。

考えられる原因:(フリー)ライセンスを取得していない

十中八九これが原因だと思います。そして、このライセンスを取得するために以下のような準備をする必要があります。参考サイト:GLUONでのライセンス

英語のサイトなので、これを翻訳(Google翻訳)をすると下のようになりました。

キーポイント

  • ライセンスは、ライセンスが要求されているオープンソースプロジェクトでのみ使用できます。
  • 非商用のオープンソース開発に限定されています。
  • 1年間有効で年間更新可能です。
  • 申請するには、プロジェクトリーダーまたはコアコミッターになる必要があります。
  • プロジェクトは3ヶ月以上経過している必要があります。
  • プロジェクトは活発に開発中です。
  • プロジェクトは、商用サービスを提供したり、有料のソフトウェアバージョンを配布したりしてはなりません。
  • プロジェクトは、定期的に更新されるニュースセクションまたはプロジェクトの更新が掲載されているソーシャルネットワークアカウントへのリンクを含むWebサイトを持っています。
  • プロジェクトリリースは定期的にビルドを更新しました。

とりあえずは、プロジェクトの情報を発信するためのウェブサイトが必要なのでそちらを先に作成しなくてはならない状態です。

次はどーするか?

とりあえずは「プロジェクトサイト」の作成に着手しようと考えています。これには考えが何個かあってどこから着手しようか思案中です。

<考え(希望し)ている内容>

  • Git(GitHubのウェブページ)を使用してプロジェクトサイトを作成、公開する。
  • このBLOGを記載しているサーバー(ミニムサーバー)でリポジトリ(Git)のコミットなどの操作を行ったときのSNS(Twitterの予定)への連携処理(PHPにて実装予定)を行う。つまり。このサーバーでPHPを使いTwitterとGitを連携させる。
  • ロードマップなど、どのように作業を進めていくかを示すものを表示する。
  • Redmineのように、作業タスクと計画をリンクさせた形で計画~実行までを行いたい。
  • できれば、開発を行う仲間(コミニティ)を作りたい。

とりあえずはGitを学ぼう

オープンソースでJavaゲームから、人工知能までいろんなプロジェクトが存在しているGitを使用してやればうまくいきそうだと思っているのでここら辺を調べてみようと思っています。GitHubでは以下のようなことができるようです。(一部)

  • 静的(画面に動きのない、スクリプトなどがない)ウェブページの作成
  • リポジトリ(ソースなどのバージョン)管理
  • Issueの作成により、マイルストーン(ロードマップ的な実行手順を並べたもの)の作成
  • Webhookによるコミット時などのイベントによるリクエスト送信(SNS連携に使用できる)

まぁ調べてみないとなにもはじまらないかんじですね(笑)

 


Github 使い方〜プロフィールの設定〜

イントロダクション

じゃんけんゲームVer1.0を作成し、これをリリース(Google play store)しようと考えているのですが、GLUONのフリーライセンスを取得するのにプロジェクトサイトの作成が必須になると思われる。。。キーポイントと記載があったのでこのように思うわけです。。。

GLUONのフリーライセンスに関してはこのサイトに詳細が記載されています。(英語)

作成したGitのアカウントのページを開きます。自分の場合は「https://github.com/ZenryokuService」になります。プロフィールの入力部分は下のような部分になります。

編集(Edit)
 
編集後

 

上から順に。。。

  • BIO: 一言(コメント)を入力部分
  • URL; ブログなどへのURL
  • 所属 Git organizationがある場合は@<organization名>とすることでリンク可
  • 設定したくない項目は空で良い


<プロフィールの設定画面へ>

「Your profile」をクリックする

<最終的に作成したプロフィール>

Gitの使い方〜ブラウザのみで設定出来る事〜

Webhook

Webhookを使用して、外部の課題追跡システムを更新したり、CIの構築を開始したり、バックアップミラーを更新したり、運用サーバーに展開したりすることもできます

ということらしいです。詳細はこちら(Webhookのドキュメント)

イベント、ペイロードなどの内容に関しても記載がありました。

プロジェクト名の修正

 

 

上のような画面で「Setting」を選択すると

このような表示が見つけることができ、プロジェクト名の修正ができる。

GitHub Page

ホームページのようにプロジェクトサイトを作成することができる。

作成したページはこんな

https://zenryokuservice.github.io/JankenGame/

Project作成

 

こんな感じで入力しました。

下のように表示されました。

Wiki

これも単純にMarkDownで作成しました。

 

GitのリポジトリURLへアクセスした時の表示

※ READ ME の記載をしています。

ライセンスの設定

調査中

その他基本

 

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〜じゃんけんゲームを作る2〜

イントロダクション

前回は、作成したじゃんけんゲームの自己レビューの観点などを記載しました。

なので今回は、実際に自己レビューをやろうと思います。

自己レビューの内容

1:コードが汚い → コードが整理されていないので汚い。

ぱっと見で以下の点が気に入らない(「初めからやれよ!」と言われそうだが試行錯誤しながらだとそうも行かなかったのです。。。)

  • フィールド変数が多すぎる
  • アニメーションと勝敗判定がごちゃ混ぜになっている
  • コンポーネント(画面の部品)とアクションがごちゃ混ぜ

コードを眺めて見ると他にもあるが、とりあえずは目の前の敵を倒すことが先決! → 目の前のものを片付けると、先が見やすくなるなどメリットが沢山!

フィールド変数が多すぎる

前回記載しましたが「指摘した問題に対する『答え』」もセットにしておきます。問題と答えを同時は無理なので、問題→答えのように1問1答式に用意すると次にどうしたら良いか?がすぐにわかります。「答え」が難しいですがね(笑)

自分の出した答え

フィールドが多いのは、以下の部分で(クラス全体で)使用する変数が多いためです。

「じゃんけんの判定」と「結果の表示」

この部分はクラスを新たに作成して対応しようと思います。

<キーポイント>
1つのオブジェクトに1つの機能を実装する

なので、じゃんけんの判定と結果の文字列を返却する(まとめる)クラスを作成することにします。

この時点でのクラス構成は下のようになります。新しいクラスは「Judgement」クラスです。(なんかスタンドの名前みたい(笑))

「zenryokuservice.apps.fx.janken.util」パッケージを作成しそこに上のクラスを追加しました。Gitに登録していないので「?」が付いています。

そして、ここのコードから「じゃんけん判定」と「結果返却」の処理を抜き取ります。

ちなみに、ソースを修正して「間違った」「気に入らない」など元に戻したい場合はGit(バージョン管理)へコミット( or Push)をしなければいつでも元に戻せます。→リビジョン番号で取得すればそこの時点で戻すこともできます。

つまり「やれるだけやってから、いくらでも元に戻せる」ということです。

<リファクタ手順>

フィールドの移動
とりあえずは、移植(新規クラスへ移動したい)フィールドをサクッと移動してしまいます。

<移植した直後>

<TestingViewクラス>
<Judgementクラス>

ビルドエラーで赤くなっています、つまり修正が必要な部分です。

じゃんけん判定を行うために

今までは、TestingVIewクラスでじゃんけん判定を行っていたので描画処理で使用した変数などをごちゃ混ぜに使用していましたが、ここからは全て「じゃんけん判定」のために使用する変数を「Judgement」クラス、じゃんけんゲームの描画に使用する変数を「TestingView」クラスに作成する必要があります。

現状で出ているビルドエラー(赤い行)はここで必要になる修正部分になります。

どのように修正するか?

ここで考える必要があるのは「Judgement」クラスにどのようにして「判定」を行わせるか?になります。

どのようにするか?は直感的なもの(センス?)が必要な感じもしますが、1つずつやっていけばセンスなんぞはいりません!(センスとかダメダメなので。。。)

まずはビルドエラーを解消する
ビルドエラーのでている部分は以下の部分です。

  • ユーザーの手を設定
  • CPUの手を設定
  • じゃんけんの判定

そして、じゃんけんの判定は「Judgement」クラスでやるので判定メソッドは移植します。つまり「shobu()メソッド」を移植します。

shobu()メソッドの移動

ソースがこんな感じになりました。ビルドエラーに着目してください。左「TesingView」右「Judgement」

ユーザーとCPUの手を設定している部分を直す → Judgementクラスに「setUserTe()」と「setCpuTe()」のメソッドを追加する。

TestingViewクラスにユーザーの手とCPUの手を設定している部分を修正する。下のようなコードを修正します。そして、ちょっと悩んだのですが「Judgement」クラスは「new 」することにしました。なのでTestingViewクラスのコンストラクタに以下のコードを追加します。

// フィールド変数にJudgementクラスを定義
Judgement judge;
public TestingView() {
 ・
 ・ 
  judge = new Judgement();
 ・
 ・
}

ソースの修正

// ユーザーの手を設定
userTe = ? → judge.setUserTe(?);
// CPUの手を設定
cpuTe = ?  → judge.setCpuTe(?);

ここで、Getter/Setterの自動生成をしておきます。

下のようにビルドエラーが解消できました。

最後に起動して今までと同じように動くか確認します。

そして、リファクタリング後のコードです。(Gitにアップしています。)

でわでわ。。。



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

イントロダクション

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

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

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

  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 Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
  8. Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜



Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜

イントロダクション

前回はこちらのサイトを参考にして「パス遷移」をやりました。(参考サイトの呼び方)そして今回はその続き「パラレル遷移」をやります。

パラレル遷移は単純に複数のアニメーションを組み合わせてアニメーションするというものでした。

とりあえずは実行結果から

実装内容

public void start(Stage primaryStage) throws Exception {
	Group gp = new Group();
	// チュートリアルにあるコード
	final Rectangle rect = new Rectangle(60, 60);
	rect.setArcHeight(15);
	rect.setArcWidth(15);
	rect.setFill(Color.DARKBLUE);
	rect.setTranslateX(50);
	rect.setTranslateY(75);

	FadeTransition fadeTransition = 
	  new FadeTransition(Duration.millis(3000), rect);
	fadeTransition.setFromValue(1.0f);
	fadeTransition.setToValue(0.3f);
	fadeTransition.setCycleCount(2);
	fadeTransition.setAutoReverse(true);
	TranslateTransition translateTransition =
	 new TranslateTransition(Duration.millis(2000), rect);
	translateTransition.setFromX(50);
	translateTransition.setToX(350);
	translateTransition.setCycleCount(2);
	translateTransition.setAutoReverse(true);
	RotateTransition rotateTransition = 
	 new RotateTransition(Duration.millis(3000), rect);
	rotateTransition.setByAngle(180f);
	rotateTransition.setCycleCount(4);
	rotateTransition.setAutoReverse(true);
	ScaleTransition scaleTransition = 
	 new ScaleTransition(Duration.millis(2000), rect);
	scaleTransition.setToX(2f);
	scaleTransition.setToY(2f);
	scaleTransition.setCycleCount(2);
	scaleTransition.setAutoReverse(true);
	
	ParallelTransition parallelTransition = new ParallelTransition();
	parallelTransition.getChildren().addAll(
	  fadeTransition,
	  translateTransition,
	  rotateTransition,
	  scaleTransition
	);
	parallelTransition.setCycleCount(Timeline.INDEFINITE);
	parallelTransition.play();
	// シーンをステージに登録
	gp.getChildren().addAll(rect);
	Scene scene = new Scene(gp, 450, 450);
	primaryStage.setScene(scene);
	primaryStage.setTitle("Animation Basic3");
	primaryStage.show();
}

今回はチュートリアルをコピペで変数名を多少修正してお終いだったので、まぁ楽でした。今までの実装を行なっていれば「こんな感じ」というのが掴めると思います。

<ソースの内容>

final Rectangle rect = new Rectangle(60, 60);
rect.setArcHeight(15);
rect.setArcWidth(15);
rect.setFill(Color.DARKBLUE);
rect.setTranslateX(50);
rect.setTranslateY(75);

毎度おなじみ、四角形クラス(Rectangle)です。これを縦横60の大きさで作成します。そしてArcHeight, ArcWidthを設定します。(リンクはJavaDocです)

JavaDocの説明は「矩形の4隅にある弧の水平方向の直径を定義します。円弧の幅と円弧の高さの両方のプロパティが0.0より大きい場合にのみ、矩形の角が丸くなります。」とありました。四角形の先っちょが丸くなるんですね(笑)

そしてFill()は色を指定します。setTranslateは位置を指定します。

FadeTransition fadeTransition = 
  new FadeTransition(Duration.millis(3000), rect);
fadeTransition.setFromValue(1.0f);
fadeTransition.setToValue(0.3f);
fadeTransition.setCycleCount(2);
fadeTransition.setAutoReverse(true);

これは初めの方に出てきたアニメーションです。色をフェードアウト・インするアニメーションです。

TranslateTransition translateTransition =
 new TranslateTransition(Duration.millis(2000), rect);
translateTransition.setFromX(50);
translateTransition.setToX(350);
translateTransition.setCycleCount(2);
translateTransition.setAutoReverse(true);

TranslateTransitionクラスを使用した、四角形の移動アニメーションです。

X座標が「50」〜「350」の間を移動します。JavaDocの説明は「このアニメーションのサイクル数を定義します。アニメーションを無限に繰り返す場合はcycleCountをINDEFINITEに設定できます、それ以外の場合は0より大きくする必要があります。」です。

そして最後のsetAutoReverseは名前から想像できますね。※動きからも見て取れると思います。

ちょっと余談ですが、「想像できますね」という記載をしましたが、コーディングをするときのメソッド名をつけるとき、変数名をつけるとき、処理の内容が「簡単に想像できる」というのはとても大切なことです。これがわかりづらいと結局ソースの中身を追いかけることになります。

そして、「RotateTransition」「ScaleTransition」は説明を割愛します。

最後のクラスです。

ParallelTransition parallelTransition = new ParallelTransition();
parallelTransition.getChildren().addAll(
  fadeTransition,
  translateTransition,
  rotateTransition,
  scaleTransition
);

本題の「パラレル遷移」クラスです。今まで作成したアニメーションクラスを登録しています。これでアニメーションを複合して実行しています。

最後に。。。

ここまでで、とりあえずはチュートリアルを止めようと思っております。

なぜかというと「じゃんけんゲーム」で必要なアニメーションの作成ができるようになったからです。つまり今回の「パラレル遷移」をじゃんけんゲームで使用します。ちょいとした戦いになりそうですが。。。

追加でやって見た

四角をコインのように回転してみる。

追加で修正した部分は以下の「RotateTransition」の部分です。

RotateTransition rotateTransition = 
 new RotateTransition(Duration.millis(800), rect);
rotateTransition.setAxis(new Point3D(0, 10, 0));
rotateTransition.setByAngle(360f);
rotateTransition.setInterpolator(Interpolator.TANGENT(Duration.millis(100), 10000.0));
rotateTransition.setCycleCount(RotateTransition.INDEFINITE);

コンストラクタに渡している「Duration」が回転のスピードになります。値が少ないほど回転が早い。

そしてPoint3Dで回転する方向を指定します。今回は横軸(Y軸)方向に回転するのでYの値のみを設定しています。

そして参考サイトはこちら(Java Code Examples)

でわでわ。。。

関連ページ一覧

  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 Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
  8. Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜
  9. Eclipse Android〜Gluonでアプリを作る8:アニメーションの基本(遷移)〜
  10. Eclipse Android〜Gluonでアプリを作る9:アニメーションの基本(パス遷移)〜
  11. Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜