イントロダクション
前回は、チュートリアルの入り口、概要について記載しいました。アニメーションなのに3D描画から始めているのでちょっとずれている感じがします。
なのでタイトルを変更しました、木琴アプリの解析をやります。元のソース、音データはこちらからダウンロードできます。
そして、ソースを読んで見た内容にコメントをつけました。※Gitにアップしたソースです。
そして、ソースを読んでいてわからない部分もありました。その部分のコードを一度コメントアウトして実行して見ます。ちなみに参考サイトはこちらです。
https://docs.oracle.com/javase/jp/8/javafx/visual-effects-tutorial/transformation-types.htm
rectangleGroup(Group)を追加しないパターン
251行目、
setCamOffsetを設定しない(シーンサイズ半分、分の位置をずらさない)
338行目をコメントアウト:
340行目をコメントアウト:
341行目をコメントアウト:
342行目をコメントアウト:
そして255行目以降の「scene.setOn〜」はボタン押下などのアクション処理の実装になります。なので今は置いておきます。
とりあえずは、理解の整理
- Groupクラスを継承した「Cam」クラスをフィールド変数の「camOffset」「cam」で使用している。
- ステージ(Stageクラス)にカメラ(PerspectiveCameraクラス)を設定
- Groupクラスを継承した「Cube」クラスを木琴のバー、土台として使用(内訳としてはRectangleクラスを「面」として使用)
- 木琴は「cam(Group)」に追加
- 「cam」は「camOffset」に追加、「camOffset」をステージに追加
そして、「A」「F」のボタンを押下すると木琴の位置が変わります。そして「スペース」で全画面表示になります。注目ポイントは305行目〜328行目。
アニメーションに関連深そうなのはボタン押下時に木琴を移動する部分が怪しいです。
インナークラスのコードを記載します。
<Camクラス>
class Cam extends Group { Translate t = new Translate(); Translate p = new Translate(); Translate ip = new Translate(); Rotate rx = new Rotate(); { rx.setAxis(Rotate.X_AXIS); } Rotate ry = new Rotate(); { ry.setAxis(Rotate.Y_AXIS); } Rotate rz = new Rotate(); { rz.setAxis(Rotate.Z_AXIS); } Scale s = new Scale(); public Cam() { super(); getTransforms().addAll(t, p, rx, rz, ry, s, ip); } }
<Cubeクラス>
public class Cube extends Group { final Rotate rx = new Rotate(0, Rotate.X_AXIS); final Rotate ry = new Rotate(0, Rotate.Y_AXIS); final Rotate rz = new Rotate(0, Rotate.Z_AXIS); public Cube(double size, Color color, double shade) { getTransforms().addAll(rz, ry, rx); // back face Rectangle backFace = new Rectangle(size,size); backFace.setFill(color.deriveColor(0.0, 1.0, (1 - 0.5*shade), 1.0)); backFace.setTranslateX(-0.5*size); backFace.setTranslateY(-0.5*size); backFace.setTranslateZ(-0.5*size); // bottom face Rectangle bottomFace = new Rectangle(size,size); bottomFace.setFill(color.deriveColor(0.0, 1.0, (1 - 0.4*shade), 1.0)); bottomFace.setTranslateX(-0.5*size); bottomFace.setTranslateY(0); bottomFace.setRotationAxis(Rotate.X_AXIS); bottomFace.setRotate(90); // right face Rectangle rightFace = new Rectangle(size,size); rightFace.setFill(color.deriveColor(0.0, 1.0, (1 - 0.3*shade), 1.0)); rightFace.setTranslateX(-1*size); rightFace.setTranslateY(-0.5*size); rightFace.setRotationAxis(Rotate.Y_AXIS); rightFace.setRotate(90); // leftFace Rectangle leftFace = new Rectangle(size,size); leftFace.setFill(color.deriveColor(0.0, 1.0, (1 - 0.2*shade), 1.0)); leftFace.setTranslateX(0); leftFace.setTranslateY(-0.5*size); leftFace.setRotationAxis(Rotate.Y_AXIS); leftFace.setRotate(90); // topFace Rectangle topFace = new Rectangle(size,size); topFace.setFill(color.deriveColor(0.0, 1.0, (1 - 0.1*shade), 1.0)); topFace.setTranslateX(-0.5*size); topFace.setTranslateY(-1*size); topFace.setRotationAxis(Rotate.X_AXIS); topFace.setRotate(90); // frontFace Rectangle frontFace = new Rectangle(size,size); frontFace.setFill(color); frontFace.setTranslateX(-0.5*size); frontFace.setTranslateY(-0.5*size); frontFace.setTranslateZ(-0.5*size); getChildren().addAll(backFace, bottomFace, rightFace, leftFace, topFace,frontFace); } }
これで大分処理の概要が見えてきたと思います。(自分は見えてきました。)
【補足】
- Rectangleは四角を表現するクラスです。
- Rotateは回転を表現するクラスです。
- Boundsは境界を示すために使用されるクラスです。
-
AudioClipは音データを扱うためのクラスです。
[rakuten ids="neowing-r:10866284"]
そして、最後にチュートリアルにある「スケーリングの処理」を302行目に追加します。チュートリアルの「例2-3 スケーリング」にあるコードを追加します。
最終的なコードはこちらです。
次回はついにアニメーションにてが届く!