JavaFx サンプル起動方法〜カスタムしてスマホアプリを作ろう〜

イントロダクション

JavaFX(+Gluon)を使用して、クロスプラットホーム開発を行いました。サンプルとして「じゃんけんゲーム」を作成しました。(リンク先にセットアップ手順あり)
このじゃんけんゲームを作成するためにやった事をまとめました。

  1. 開発環境の構築方法
  2. サンプルをGitから取得して起動する方法

じゃんけんゲームの処理詳細に関してはリンク先に記載しています。

<じゃんけんゲームに使用してる技術>

<じゃんけんゲーム作成手順>

  1. Eclipseのインストール
  2. Gluon pluginのインストール
  3. 使用するイメージファイルのダウンロード(Gitにあります)
  4. Gluon pluginでハローワールド
  5. アプリケーション構成理解
  6. JavaFxでの実装方法の学習(英語)
  7. じゃんけんゲームのプログラム設計
  8. 実装と起動確認

作り始める

初めに「前提」になる部分があります。JavaFXについて理解しているかどうかの部分です。自分の場合はJavaFXでのアプリケーションはちょっとOpenCVとか使うために作成した程度にやったことはあったのですが、アニメーションや3Dモデルなどの作成、操作はやったことがなかったのでJavaFXの理解をすることが必要でした。

とりあえずは、アニメーションの概要と実装に必要な技術についての学習(記事)をここで一覧できます。参考にどうぞ。

前提と留意点

自分はすでに作成したので、やってみて反省するところが以下になります。

前提として自分は手探りでこのアプリを作成したので、作り終わってからできた「仕様」になります。

  1. 部品を作成するメソッド(関数)、画面(見た目)を作成するコンストラクタ(もしくはメソッド)を計画的に住み分けしていないので、最終的にソースがぐちゃぐちゃになってしまった。
  2. アニメーション処理に使用する「AnimationTimer」などのクラスの扱い方をちゃんと理解していなかったのでユーザー入力とアニメーションの処理タイミングが合わずアニメーションが想定通りにいかなかった

作成するときは上の部分に留意して、ちゃんと設計しましょうということが言いたかった次第です。

手順1:画面(見た目)の作成

じゃんけんゲームの大まかな設計に関しては、こちらのページに記載しています。

画面に表示するものを1つずつ作成していきます。

必要な画面の部品は以下の通りです。

  1. 文言を表示するためのラベル(Label)
  2. 画面の表示用レイアウト(HBox, VBox)
  3. イメージ(画像)ファイルの表示部品(ImageView)
  4. アニメーション(部品が色々ある)(英語です。。。)

実際作業を行うのに、英語のドキュメントや、日本語のドキュメントはある程度仕組みなどを理解している人にはわかる内容なのですが、いかんせん初めて学習する人間にはわからないことの方が多いです(経験上)。

なので、サンプルコードなどをみながら実際に作成してみて動かして。。。理科しました。

  1. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫6:CheckBox〜
  2. Eclipse Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
  3. Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜
  4. Eclipse Android〜Gluonでアプリを作る8:アニメーションの基本(遷移)〜
  5. Eclipse Android〜Gluonでアプリを作る9:アニメーションの基本(パス遷移)〜
  6. Eclipse Android〜Gluonでアプリを作る10:アニメーションの基本(パラレル遷移)〜

こんな感じで「わからない部分」に対しては理解していきます。ちょうど、RPGなどのゲームで「〜が現れた!」的な感じなので普段から不明点やわからないこと、問題などのことを「モンスター」と呼んでいます(笑)。

最終的にはコードを見てカスタムするのが早いのですが「考え方」という部分で記載しました。

アプリをカスタムする

自分の作成したソースはこちらにあるのでこいつをPULLして自分のワークスペースへインポートして、とりあえずはアプリを起動します。そのために下の手順を踏んでください。

  1. Eclipseのインストール
  2. Gluon pluginのインストール
  3. GitからソースをPULLh方法(PULLするのではなく、ソースをダウンロードしてください。Gitに上がっている環境は自分の環境になるので動きません。。。)

【注意】上記の手順でGitからソースをPULLするのではなくダウンロードしてください。GItのソースはここからダウンロードできます。

ソースをダウンロードしてとりあえずは起動してください。下のような動きをするはずです。

Ver1.0では「アイコ」時も処理が一度ストップします。問題としては本来はマルチスレッド(2つの処理が同時に動いているように見せる実装方法、主にアニメーションなどの処理はこの実装方法を使用します。)がうまく動いていないためです。

これには使用している部品に対する理解が足りなかったため上のような実装になっています。Ver1.0以降この部分を修正しようと思っています。

とりあえずは、環境を作って、ソースをダウンロードして動かして見てください。

健闘を祈ります。

でわでわ。。。