JavaFX

JavaFX の BarChart を試してみた

JavaFX

このところ JavaFX の学習をさぼっていたので(マイペースともいう)標準装備された Chart をいじってみることにした。

今回も ITPro の「JavaFX 2で始めるGUI開発 第10回 組み込みブラウザとチャート」を参考にさせてもらいました。

実はこちらの記事では Scene Builder を使っているサンプルはなかったので Scene Builder を使って創りはじめました。

スタイルの設定も簡単にできるんだろうなと甘い考えを持っていました。

結果をいうと恥ずかしながら撃沈です。(>_<。)

Scene Builder を使えばスタイルの設定が簡単にできるだろうと思っていたが使い方が解らなかった!

ネット上にサンプルがあるだろうと随分ググったけど見つけられなかった。

結局、Scene Builder 使って簡単にというのは幻となってしまった。

結局、ほとんど ITPro のサンプルまんまになってしまった。

選択した Chart が BarChart だということくらいしかないな・・・

せめて Chart 用のデータを創ってるクラスが Java 8 ならではの機能を利用しているから許してね!

そう言うことで Chart について知りたい方は ITPro の記事を読んでくださいね。

流れ的には X 軸、Y 軸を設定して、それを引数にとった Chart を作る。

BarChart<String, Number> ramdomNumberBarChart = new BarChart<>(xAxis, yAxis);

そして作った Chart にデータを読み込ませるって感じです。

肝心なところはデータを読み込ませるところですね。

このプログラムでは

XYChart.Series<String, Number> ramdomGaussian = new XYChart.Series<>();

IntStream.rangeClosed(0, 9).forEach(i -> {
            ramdomGaussian.getData().add(new XYChart.Data<>(String.valueOf(i), ramdomGaussianGenerator.counter.getOrDefault(i, 0L)));
        });

ramdomNumberBarChart.getData().add(ramdomGaussian);

としてます。

ガウス分布乱数の 0 から 9 のそれぞれの個数を BarChart にセットしました。

おっと、このプログラムの概要を説明するのを忘れてましたね。

大まかにザックリ説明するとガウス分布乱数を作り、それをもとに 0 から 9 の整数だけを 100 万個作る。

そして、それをそれぞれいくつあるかカウントして Map<Integer, Long> で保持する。

つくったガウス分布乱数 Map<Integer, Long> を 0 から 9 の BarChart として表示させる。

右肩下がりの BarChart が表示されればおそらく間違ってはないだろう。

それではツッコミどころはあるけどプログラムのソースを載せます。それはいろいろ試していたと言うことで笑ってください。

 

実行結果は次のようになります。

1

 

スタイルシートを使わない素の状態は次のようになります。

2

 

どちらにしろ右肩下がりの BarChart が表示されました。

めでたし!めでたし! (^_^)

後は、Scene Builder からスタイルの設定を簡単にする方法があればそれも試してみたい。

結局、CSS ファイルをコード側から読み込ませては意味ないし、Java 8 がリリースされたら JavaFX でプログラム組む人も増えるだろうからそのうち GOOD な情報を入手できるだろう。

いずれにしろ、JavaFX はスタイルシート使えるからプログラムの見栄えもガラッと変わってしまう。

デザインセンスのある人が使えば強力な武器となることは間違いない!

残念ながら私はデザインセンスは標準装備されてもないしオプション設定もないので泣きたくなります。

今回、Chart 関連の CSS の設定についてググってみても日本語ではあまり情報がなかった。

参考までに

JavaFX CSS Reference Guide

サンプルは無いし、英語なので泣きたくなります。(>_<。)

外国語での情報も少なかった。

これもそのうち情報が増えてくるのをゆっくりと待つとしよう。

マイペースでお気楽に楽しんでが私のモットーなので今日はここまでできた自分を褒めてあげよう!

Hatena タグ:
このエントリーをはてなブックマークに追加
Share on Facebook

JavaFX 3D Game GT Negative 6 創ってみた。

JavaFX

お正月休みに久しぶりにグランツーリスモやってみたら、もの凄く難しくてストレスたまった。

頭にきたので自分で人生2作目のゲームを創ることにした。

もちろん、JavaFX でね!

ついでに 3D ゲームにしちゃえ!(なんちゃってだけどね。

目標はシンプルで誰でもそれなりに楽しめるゲーム。しかもお手軽に創れる範囲でとしました。

そう、古の白黒ゲームのようにシンプルで優しいゲーム。

出来上がったのはこちら(動画)になります。(ちょっとファイルサイズが大きいです。ごめんね!)

自動車のモデルも作ろうかと思ったのですが面倒なのとお正月休みといえど、いろいろお仕事があるので・・・

メタセコ素材!様のモデルデータ(車とタイヤ)を使わせていただきました。

素敵なモデルデータをありがとうございました。(^_^)

この動画をご覧になって気付かれた方もいらっしゃると思うのですが、

タイヤバリア、と車のナンバープレートがちらついてます。

これ何でこうなるのか解らない! (>_<。)

えっ、ゲーム下手くそだって・・・

それは禁句です。

もの凄く傷つきますのでそってしておいてあげてください。

それとず~~~っと気になってるこのメソッドって何に使うんだろう?

setDepthTest(DepthTest.ENABLE);

これ使うといったい何が幸せになれるんだろう?

まだまだ解らないことだらけだ。

とりあえず今回のゲーム作成においての収穫はフロントタイヤをスピードに合わせて回転させながら、ステアリング操作によって舵角も付けることができたことかな。

ちょっとしたミスでなんでできないのだろうと悩んだことは秘密にしておきます。(ヲヒ

この不完全でシンプルなプログラムで遊んでみたいという人のために Dropbox に置いておきます。

Java 8 build 121 で創りましたので実行環境あるかたはどうぞ!

Dropbox 障害発生からまだ復活してないようなので Google ドライブにおいときます。

https://drive.google.com/folderview?id=0B2xIvGdIzGbAX1lvcTJSTXhPcU0&usp=sharing

MyApp ディレクトリ内にある GT Negative 6 ディレクトリをダウンロード後、

その中にある 3D_Race.jar ファイルをダブルクリックでゲーム開始します。

PC の性能が低いとゆっくりとしたゲームになるかもしれませんがお楽しみいただけると幸いです。

なんでもありのルール無用のゲームです!!!(基本的なルールの実装が面倒くさかったわけではありません。絶対に・・・)

最後にこのシンプルで不完全なゲームを創ってみて、高いお金払ってゲーム買って上手く操作できずにストレスためるより

自分で創った欠陥だらけのゲームのほうが楽しめた。

今年はいい年になるな。きっと!

JavaFX 最高!

Hatena タグ:
このエントリーをはてなブックマークに追加
Share on Facebook

JavaFX 3D 学習ついでに創った 3D ゲーム

JavaFX

このエントリーは、JavaFX Advent Calendar 2013, 10日目です。

昨日は @sk44 さんの JavaFX でページめくりアニメーション的ななにか でした。

明日は @kis さんです。

今日は私が最近グリグリしている JavaFX 3D について断片的ではありますがネット上で見つけることが困難なことについて書きたいと思います。

と言っても私は素人で本来このようなイベントで熱く語るようなスキルは持ち合わせていません。

よっておかしなことや間違ったことをしている可能性は極めて大きいのでコメントでご指摘いただけると幸いです。

そういうことで本来、3D の基礎であるカメラ、ライト、テクスチャ、モデルの移動、回転、スケーリング、そして SubScene といった必ず必要となることは割愛させていただきます。

基礎が知りたいと思われる方もいらっしゃると思います。

ここで耳寄りな情報を!

12 月 13 日に JavaFX 勉強会 & 忘年会 で @skrb さんが初心者にも分かりやすく 3D について解説される予定です。

都会に住まわれている方や、どうしても聞きたい方はこの機会に参加されてグリグリしましょう!(^_^)

残念ながら参加できない方は @skrb さんが 24 日の JavaFX Advent Calendar エントリーに 13 日の内容を紹介してくれる予定です。

 

このエントリーで紹介しているプログラムは JDK 8 Build b118 で創りました。

JDK のバージョンが上がると現在の仕様では動作しなくなるかもしれませんのでご容赦くださいませ。

なぜ 3D なのか? 今年の JavaOne でチェスボードの上を歩く Duke に感動して自分でも創れないかなと思いチャレンジしてきました。

 

その結果が次のようになりました。

 

JavaOne のようになめらかに綺麗に自由自在に動いているわけではありませんが目的は達成しました。Complete Success!! (^_^)

ごく一部の方に喜んでいただけたようなので、JavaFX Advent Calendar のエントリーに 3D ネタを持ってきたわけです。

現在ではネット上で Shape3D を利用したサンプルもけっこう出てます。

ご覧になられた方もけっこういらっしゃると思うのですが、それでは限界があります。

やっぱりモデリングツールで作ったモデルを読み込ませ動かしたい!

そこでこのエントリーではモデルの読み込みと位置情報の取得に焦点をあてていきます。

モデルの読み込みには 3DViewer ってのがあるそうですが動かないようです。(現在は不明です。

ちょっとググってみても使い方やサンプルもヒットしませんでした。(ググり方が甘いかも

そういう訳で私は Jim さんが作られた JFX3DModelImporters を使わせていただいてます。

// Thanks a million!
IntStream.rangeClosed(1, 1_000_000).forEach(i -> {
    System.out.println(“Thanks!”);
});

それではメタセコイアで作った Duke のモデルをインポートしてみます。

a1

 

 

obj ファイルをインポートしてます。

mtl ファイルやテクスチャファイルを忘れずにリソースディレクトリに obj ファイルと一緒にいれといてください。

他のファイル形式もサポートされているのがあるようですが試していないので誰か試してみてください。

読み込みだけだと問題はなさそうですがその後に一工夫いるようです。

MeshView[] にそれぞれのパーツが格納されてしまうのでそれを扱いやすくするために Group として管理します。

258 行目から 262 行目の処理です。

261 行目はドローモードをワイヤーフレームに変更するときにまとめて変更できるように苦肉の策としてついでにやってます。

さぁ、これであなたのキュートな 3D モデルをインポートすることが可能となりました!

私はモデルが管理しやすいようにモデルを複数に分けてインポートしました。

Duke、ボード、タイトル文字、GAMEOVER 文字、ブロックといった具合に。

このやり方が正しいかどうかは解りませんが一度にたくさんのモデルを含んだファイルをインポートしてしまうと管理不能になってしまいそうだから。

インポートしたモデルを解りやすく使いやすく Group として管理してしまえば楽です。

たとえばこの場面ではこの Group は表示させたくないなぁって思うときはこのように管理できるのでいいです。

 

 

これらのインポートしたモデルをノードとして扱えるようにしてしまえばあとは簡単です。

それぞれインポートしたモデルの位置情報さえ取得できればあとはお好きにグリグリ動かしてしまえばいいのです。

たとえば Duke の現在位置(Z 軸手前側の位置)を知るには次のようにすればいいようです。

 

 

Z 軸奥側の位置を知りたければ行末のメソッドを getMaxZ() にすれば OK です。

もちろん X 軸、Y 軸の位置情報も取得するためのメソッドが用意されてます。

同様にしてボードや他のモデルの位置情報を取得して、AnimationTimer や Timeline を使いちょっとした 3D ゲームのできあがりというわけです!

ここで注意が必要なのが getBoundsInParent()の他に getBoundsInLocal() メソッドと getLayoutBounds() があってこれらは現在位置を取得するためのものではないようです。

現在位置という表現をさっきから使っていますが動かして更新された位置というのが適切かもしれません。

ちょっと JavaDoc を見たのはいいけど、英語が難しくて翻訳ソフトに頼っても???でした。

1.transforms ObservableList
2.scaleX, scaleY
3.rotate
4.layoutX, layoutY
5.translateX, translateY

これら5項目に対応して位置情報を取得できるのは getBoundsInParent() メソッドだけのようです。

英語が問題ない方はすみませんがご自分でご確認くださいませ。m(_ _)m

 

 

このようにして初期位置から Z 軸マイナス方向(手前)に Duke を少しずつ移動させる [ dukeGroup.setTranslateZ(dukeGroup.getTranslateZ() -5); ] アニメーションを実行すると次のように出力されます。

getBoundsInParent(): -175.40234375
getBoundsInLocal():  -175.40234375
getLayoutBounds():   -175.40234375
getBoundsInParent(): -180.40234375
getBoundsInLocal():  -175.40234375
getLayoutBounds():   -175.40234375
getBoundsInParent(): -185.40234375
getBoundsInLocal():  -175.40234375
getLayoutBounds():   -175.40234375
getBoundsInParent(): -190.40234375
getBoundsInLocal():  -175.40234375
getLayoutBounds():   -175.40234375

使いどころを間違えると思わぬバグを仕込んでしまいます。

IDE のお気楽な補完技術に頼っているとやってしまいそうなミスですね。(経験者語る

さて、モデルをインポートして位置情報を把握することが可能となった今、モデルをあなたの意のままに制御可能になったわけです。

たとえば AnimationTimer の handle() メソッドを使って Duke を歩かせてみる。

 

 

このコードは X 軸、Z 軸の現在の位置にそれぞれ d_vx, d_vz 分だけ足した位置に移動させる。

次にボードの右または左に行き当たったら落ちないように反転させる処理はこうなる。(反転モーションは turn() メソッドで Timeline を使って別途処理させてます。)

 

 

このように位置情報さえ把握できてしまえばモデルの移動、回転、拡大、縮小などを AnimationTimer や Timeline を使って誰でも簡単にできます。

ここでちょっとした疑問がでてきます。

Group として扱ってきたのはいいけど個々の MeshView[] として扱うにはどうすればいいの? そうですよね!

Duke を歩かせるために手足のパーツをそれぞれ動かしたい!そこで MeshView[] として扱ってます。

 

 

MeshView[] が何か解らない場合は標準出力させて確認すればいいでしょう。

メタセコイアではモデルオブジェクトのパーツの順番通りになっているようです。

したがって、obj ファイルの順番通りになっていると思います。(あまり自信がない

歩行モーションはこれらを Timeline を使ってアニメーションさせています。

 

 

これで歩く Duke の歩行モーションは完成です。

あとは AnimationTimer で移動させれば OK です。

位置情報を取得できるのでお好きなように制御をすれば面白いことができるかもしれませんね!

あと MeshView[] として使っているのは音楽に合わせてスケーリングしている DUKEWALK という文字オブジェクトです。

やってることは単純だけどけっこうインパクトありますね。

 

 

JavaFX 3D API の基礎はなにも語らず断片的な内容となってしまいましたがいかがでしたでしょうか?

この学習用に作ったサンプルプログラムは下記アドレスからダウンロード可能となってます。

https://www.dropbox.com/sh/itmywi67zb5i3gq/zMn5vf5LPm

こちらはもともとカメラの学習用に移動、回転、拡大、縮小の制御がスライダーでできるようにしてあります。

カメラと言えばこのプログラムを組むときに悩んでいたカメラワークの答えを出してくれた方がいらっしゃいます。

下記サイトより答えをまるっといただきました。(日本語です!)

JavaFX 3Dを理解する

// Thanks a million!
IntStream.rangeClosed(1, 1_000_000).forEach(i -> {
    System.out.println(“Thanks!”);
});

さて、このプログラムのソースはおまじないをはじめ、ぐちゃぐちゃになってしまっているので隠蔽してます。( ̄。 ̄;)

と思ったけど心優しいプロの方もこのエントリーを見られていると思うので恥ずかしながら載せます。

優しく解りやすいアドバイスは大歓迎です!(^_^)

3DViewer が動き、ボーンの埋め込まれたモデルが自由自在になめらかに動かせる時代が来ればこんなことは必要なくなるかもしれませんね。

JavaOne の Duke がどのように作られたのか?

一般の開発者にも簡単にできることなのか?

いろいろ謎はあるけど待っているだけでは面白くないよね。

ちょっと古いけど 「いつやるの?」 「今でしょ!」

最後に一言

JavaFX 楽しい! (^_^)

Hatena タグ:
このエントリーをはてなブックマークに追加
Share on Facebook

JavaFX で 3D ゲームを創ってみた。

JavaFX

生まれて初めてゲームを創ってみた。

JavaFX を今年の夏からかじりだして興味のあるところ優先で、あーでも無い、こうでも無いと悪戦苦闘しながらも

ぼちぼちと少しずつ学習してきた。

自分の無力さを棚に上げときながら twitter で泣きをいれると親切な JavaFX マン達が助けてくれた。

感謝感激です!

初期の頃のドタバタで JavaFX 大嫌いになっていたが今は好きになっている。

楽しい!(^_^)

最近調子ぶっこいて良く解らないのに 3D をグリグリしていた。

ある人が twitter で Duke のゲームをつくってみたいと呟いていた。

楽しみにしていたが待ちきれないし、ちょうど学習用素材のアプリにゲームを載っけちゃえってノリで創ってみた。

私はゲームは今まで一度も創ったことが無い!

しかも、ゲームは好きだけど上手くない!(>_<。)

不器用なので最近の凝ったシステムのゲームはほとんど途中でリタイアしてしまう。

バイオハザード5 だけはなんとかクリアできた。

とても疲れたのでその後のシリーズはパスしてます。( ̄。 ̄;)

そう言うことなので非常にシンプルで誰でも遊べるゲームにしました。

上の文章を翻訳すると「まともなゲームの作り方は解りません。」となります。(ヲヒ

なんだかんだで出来上がったのはこんな感じのものになりました。

UI がリッチな JavaFX のはずなのにちょっと残念なことになってますが学習用につくったものに付け足したから仕方ないってことで・・・(^_^;)

JavaFX (Java 8 Build b118) で創ってあるのでインストールされている勇者様は下記リンクにプログラムをダウンロードできるようにしてありますのでお楽しみくださいませ!

https://www.dropbox.com/sh/itmywi67zb5i3gq/zMn5vf5LPm

ソースは非常にぐちゃぐちゃになって酷くなってしまったので隠蔽してます。(;´Д`)

あっ、Duke の姿がちょっと変だとは言わないでね。

歩きやすいようにしっかりした足を付けてあげたんだ。

私ってなんて優しいんだろう(ヲヒ

Hatena タグ:
このエントリーをはてなブックマークに追加
Share on Facebook

Duke を歩かせてみた。 JavaFX 3D アニメーション

JavaFX

今年の JavaOne でチェスの駒に扮した Duke が格好良く歩いていた。

JavaFX 3D テクノロジーを駆使したデモアプリケーションが披露されて会場をわかせていた。

とても素敵だったが Maya と言う高価な 3DCG ソフトと 3DViewer (何故か今は動かないらしい)を使って作られているらしい。(未確認です。)

ネット上にも 3D アニメーション作成のチュートリアルやサンプルもまだ見当たらない。

とは言え、JavaFX 8 には標準で 3DAPI が実装されているので近い将来目にすることもあるだろう。

でも、新しい物好きの私は待ちきれないので手探りでグリグリしてみた。

日本語での情報は下記サイトが解りやすくて良いですね。

JavaFX 3Dを理解する

カメラの円軌道のさせ方は非常に参考になりました。(^^)

// 感謝のコード
IntStream.rangeClosed(1, 1_000_000).forEach(i -> {
    System.out.println(“Thanks!”);
});

現在ネット上にある情報をあちことからかき集め、ちゃんと読めない英語の API ドキュメントを格闘しながら Duke を歩かせることに成功した!

サブシーン用のカメラの設定を

PerspectiveCamera subCam = new PerspectiveCamera(true);

とすることによって、確実に座標位置を把握することに成功した。(たぶん・・・)

JavaOne と同じことはできないがボードの上を Duke が落ちないように行ったり来たり歩かせることにした。

今回は前回使っていたプログラムをカメラの設定変更によって少し変更し、

モデルも自前で用意した。

メタセコイアというリーズナブルな 3DCG ソフトを使用して作りました。

ただ、後で解ったことだけど今は Blender という 3DCG ソフトが人気らしい。

Blender は比較的新しい参考書も出ているし、雑誌やムックでも取り上げられてる機会が多い。

メタセコイアは人気はあるけど新しい参考書や雑誌は見ないですね。

どちらにしろ不器用な私には使いこなせません。(>_<。)

話を核心に戻して、3D アニメーションアプリを作るのに必要なものを考えてみました。

まず、手足が動かせる Duke のモデル。

これはパーツを分けてそれぞれ Timeline を使ってアニメーションさせてみました。

次に、チェスボード。 といってもそれらしきものでいいのでこれも簡単に済ませました。

あとはこれらをジムさんが作られた JFX3DModelImporters を使わせていただきインポートします。

後は座標位置を調べて AnimationTimer を使いアニメーションさせています。

ボードから落ちないようにターンさせてます。

ターンの部分も Timeline を使ってます。

こんなに AnimationTimer や Timeline を使って問題ないのかなって思ったりもしますが動いてます。( ̄。 ̄;)

ひたすら行ったり来たしするだけの面白みの無いアプリとなってます。

これでは寂しいので音楽を流すことにしました。

ちょっと画面も寂しいので DUKE WALK と文字オブジェクトモデルも作って追加しました。

せっかくだからこれも動かしたくなりますよね。

オーディオスペクトラムリスナーを実装して文字数の文だけ 0.01 秒ごとにサンプリングしてそれをもとに適当にスケーリングさせて賑やかにしました。

以上、非常にシンプルに作ることができました。

ただ、影を映す方法が解らなかった。

JavaOne のデモも影は無いように見えるので現時点では無理なのかもしれない。

これでも私的には Complete Success! (^^)

完全版の動画は次になります。各種カメラ操作による写り方が理解できます。

それではこのプログラムを載せておきます。

プログラムの詳しい内容は説明しませんが何をやっているかだいたい解るようにコメントをいれてあります。

特に複雑なことはしてないので解らないことはないでしょう。

注意して欲しいのは、まだ JavaFX 触り初めて間もない私があちこちからかき集めた情報と英語の API ドキュメントとにらめっこしてたぶんこれでいいのだろうと作ったものだということです。

間違いがあれば御教示いただければ幸いです。