イントロダクション

前回は、チュートリアルの入り口、概要について記載しいました。アニメーションなのに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〜」はボタン押下などのアクション処理の実装になります。なので今は置いておきます。

とりあえずは、理解の整理

1. Groupクラスを継承した「Cam」クラスをフィールド変数の「camOffset」「cam」で使用している。
2. ステージ(Stageクラス)にカメラ(PerspectiveCameraクラス)を設定
3. Groupクラスを継承した「Cube」クラスを木琴のバー、土台として使用(内訳としてはRectangleクラスを「面」として使用)
4. 木琴は「cam(Group)」に追加
5. 「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);

    }
}

これで大分処理の概要が見えてきたと思います。(自分は見えてきました。)

【補足】

1. Rectangleは四角を表現するクラスです。
2. Rotateは回転を表現するクラスです。
3. Boundsは境界を示すために使用されるクラスです。

4. AudioClipは音データを扱うためのクラスです。

[rakuten ids="neowing-r:10866284"]

そして、最後にチュートリアルにある「スケーリングの処理」を302行目に追加します。チュートリアルの「例2-3 スケーリング」にあるコードを追加します。

最終的なコードはこちらです。

次回はついにアニメーションにてが届く！