Java FXでの”待つ”という振る舞いの実装の仕方について

Question

JavaFXを使ってカードゲームを作っています。カードをImageViewで作成し、TranslateTransitionクラスを使ってアニメーションさせました。全員にカードが行きわたったところで、1秒間、間をおいてゲームを始めるという振る舞いをさせたいのですがうまくいきません。Transitionを行った後、Thread.sleep()やwait()などで1秒間スレッドを止めると、スレッドを再開した時、1秒後の偏移状態が表現されてしまいます。（カクっとなったり、すでにアニメーションが終わっていたり。）
なので、まず、Transitionクラスのplayメソッドが終わってからスレッドを止めればいいんだと考えたのですが、それがうまくいきません。ImageViewではありませんが下記のようなクラスを作ってみました。

package jp.ocn;

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TransitionTestMain extends Application {
	BooleanProperty flagProperty = new SimpleBooleanProperty(false);
	int abs = 1;

	@Override
	public void start(Stage primaryStage) throws Exception {

		Button start_button = new Button("Transition Start");
		Label status_label = new Label("Ready");
		Label transition_label = new Label("Transition Label");

		start_button.setLayoutX(250);
		start_button.setLayoutY(100);
		status_label.setLayoutX(270);
		status_label.setLayoutY(50);

		AnchorPane root = new AnchorPane();
		root.getChildren().add(start_button);
		root.getChildren().add(transition_label);
		root.getChildren().add(status_label);

		start_button.setOnAction(new EventHandler<ActionEvent>() {

			@Override
			public void handle(ActionEvent event) {
				
				status_label.setText("runnning");

				TranslateTransition transition = new TranslateTransition(
						new Duration(500), transition_label);
				transition.setToX(500*abs);
				transition.setToY(375*abs);

				transition.setOnFinished(new EventHandler<ActionEvent>() {

					@Override
					public void handle(ActionEvent event) {

						flagProperty.set(true);
					}

				});

				transition.play();
				
//				 while(!flagProperty.get()){
//               ここでスレッドの進行を止めようと考えました
//				}
				
				abs*=-1;
				status_label.setText("Succeeded");
				flagProperty.set(false);
			}
		});

		Scene scene = new Scene(root, 600, 400);
		primaryStage.setScene(scene);
		primaryStage.centerOnScreen();
		primaryStage.show();

	}

	public static void main(String[] args) {
		launch(args);
	}

}

やってみて、Transitionは非同期処理ではないのだと分かったのですが、では、どのように実装をしたらいいのでしょうか？
transition.play()の後に、ボタン一つのダイアログボックスを表示させ、進行ごとにプレイヤーにクリックしてもらえば、仕様通りにはなりますが、ゲームとして不自然だと思います。
よろしくお願いします。

Answer 1

こんな感じで、非同期スレッドとJavaFXスレッドを組み合わせるとスリープさせることができます。

※（2015-01-09追記）JavaFXの場合は、ForkJoinPoolではなく、PauseTransition (javafx.animation.PauseTransition)を使うべきとのご指摘がありました。
詳しくは、skrbさんのコメントをご参照ください。

    // 追加するimport
    // import javafx.application.Platform;
    // import java.util.concurrent.ForkJoinPool;

    // ここまでJavaFXスレッドで実行

    // ここでスレッドの進行を止めようと考えました

    ForkJoinPool.commonPool().submit(() -> {
        // 非JavaFXスレッドを非同期で実行
        try {
            Thread.sleep(2000L);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
        abs*=-1;
        Platform.runLater(() -> {
            // 後でJavaFXスレッドで実行
            status_label.setText("Succeeded");
        });
        flagProperty.set(false);
    });

この場合、flagPropertyとabsの状態の一貫性が崩れる可能性がありますので、同期が必要かどうかを検討してください。具体的には、transition.setToX(500*abs);の次の行でabsの符号が反転する可能性があります。
正しく同期をしないとデッドロックも有り得ますのでご注意ください。

Comments

[ReiLeiLei1025]

教えていただいたコードで思い通りの振る舞いを実装出来ました。
まだ、何も分かっていないので ForkJoinPoolクラスと同期について勉強してきます。
ありがとうございました。

[skrb]

ForkJoin F/Wを使うのは間違いだとまでは言わないですけど、JavaFX的にはないですね。

通常、GUIの一時停止をしたいのであれば、PauseTransitionを使います。
この場合は、TranslateTransitionと一体化することができるので、SequentialTransitionと組み合わせて、次のように記述することができますよ。

public class TransitionTestMain extends Application {
int abs = 1;

@Override
public void start(Stage primaryStage) {
Button start_button = new Button("Transition Start");
Label status_label = new Label("Ready");
Label transition_label = new Label("Transition Label");

start_button.setLayoutX(250);
start_button.setLayoutY(100);
status_label.setLayoutX(270);
status_label.setLayoutY(50);

AnchorPane root = new AnchorPane();
root.getChildren().add(start_button);
root.getChildren().add(transition_label);
root.getChildren().add(status_label);

start_button.setOnAction(event -> {
status_label.setText("runnning");

TranslateTransition transition = new TranslateTransition(
Duration.millis(500), transition_label);
transition.setToX(500 * abs);
transition.setToY(375 * abs);

PauseTransition pause = new PauseTransition(Duration.millis(1_000));
pause.setOnFinished(e -> {
abs *= -1;
status_label.setText("Succeeded");
});

new SequentialTransition(transition, pause).play();
});

Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String... args) {
launch(args);
}
}

[argius]

skrbさん

コメントありがとうございます。

PauseTransitionは知りませんでした。
JavaFXの場合は、PauseTransitionを使うべきですね。
というか、アニメーション関連は、まずjavafx.animationのAPIを検討すべきってことですね。
参考になりました。ありがとうございます。

[ReiLeiLei1025]

skrbさん、コメントありがとうございます。
スレを立てたものですが、実装しようとしたところ、理解が足らないのかうまくいきませんでした。僕の考えている振る舞いは、アニメーションが終わるまで処理の進行（スレッドのことでいいはずです）を待たせておきたいというものです。
argiusさんの教えてくださったForkJoinPoolクラスを使ってこのようなコードを組んでみました。

public class TransitionTestMain extends Application {
int abs = 1;

@Override
public void start(Stage primaryStage) throws Exception {

Button start_button = new Button("Transition Start");
Label status_label = new Label("Ready");
Label status_label2 = new Label("before sleep");
Label transition_label = new Label("Transition Label");

start_button.setLayoutX(250);
start_button.setLayoutY(100);
status_label.setLayoutX(270);
status_label.setLayoutY(50);
status_label2.setLayoutX(270);
status_label2.setLayoutY(250);

AnchorPane root = new AnchorPane();
root.getChildren().add(start_button);
root.getChildren().add(transition_label);
root.getChildren().add(status_label);
root.getChildren().add(status_label2);

start_button.setOnAction(new EventHandler<ActionEvent>() {

@Override
public void handle(ActionEvent event) {

status_label.setText("runnning");
status_label2.setText("before sleep");

TranslateTransition transition = new TranslateTransition(
new Duration(1500), transition_label);
transition.setToX(500 * abs);
transition.setToY(375 * abs);

transition.play();

Thread nowThread = Thread.currentThread();
System.out.println(nowThread);

ForkJoinPool fork=ForkJoinPool.commonPool();

fork.submit(() -> {
try {
Thread.sleep(2000L);
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException(e);
}
abs *= -1;
Platform.runLater(() -> {
status_label.setText("Succeeded");
});
});

try {
fork.shutdown();
fork.awaitQuiescence(10000l, TimeUnit.SECONDS);
} catch (Exception e) {
e.printStackTrace();
}

status_label2.setText("after sleep");
}
});

Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.centerOnScreen();
primaryStage.show();

}

public static void main(String[] args) {
launch(args);
}

}

このように書くと、すぐに、status_label2が"after sleep"になりませんので
fork.awaitQuiescence(10000l, TimeUnit.SECONDS);
の部分でスレッドの進行を止めてくれるみたいです。
タイムアウト10000ミリセコンドと書きましたが、1500ミリセコンドで処理が帰ってくるのでJavaFXスレッドと、Forkしたスレッドがjoinされて帰ってきていると思われます。ただ、Transitionが実行され、偏移している様が見られません。このコードだと1500ミリセコンド経ったら、Transitionが終わった状態で再開されます。forkしたスレッドのsleepを2500ミリセコンドにして、TransitionのDurationを5000ミリセコンドにすると丁度、真ん中ぐらいのTransitionアニメーションが見られます。つまり、forkしたスレッドも正常に動いていて、JavaFXスレッドも正常に動いていて、forkされて帰ってきているのです。ただ、問題は、fork.awaitQuiescence();を通過するまでは（正確には違うと思いますが見かけでは）アニメ処理を見ることができないということです。分かる方がいらしたら教えてください。
自分でも、Transitionがどのように処理されているのか、やJavaFXでのコードの組み方の作法など調べなくてはと思っています。
よろしくお願いします。

[skrb]

「アニメーションが終わるまで処理の進行を待たせる」ということと、「スレッドを待機させる」は別ですよ。

JavaFXなどGUIの処理では、イベントが頻繁に発生しているため、GUIを処理させるスレッド(JavaFXの場合、JavaFX Application Threadという名前です)はスリープさせたり、ブロックさせたりしないようにします。

JATをスリープやブロックをさせずに待機をさせるためには、JATで時間を扱うためのクラス、つまりTransitionやTimelineを使う必要があります。それらのクラスを使って処理を待つような仕組みを作りこんであげなくてはいけません。その例として、前のコメントではPauseTransitionを紹介しました。

もちろん、JavaFXでは非同期にタスクを処理するための機構としてTaskとServiceがありますが(Concurrency Utilitiesを直接扱うことは普通はやりません)、これらのクラスからGUIを直接制御するというのは基本的には行いません。もちろん、Platform.runLaterメソッドを使用してJATにアクセスすることはできますが、通常非同期処理からはGUIに表示するための状態の変化だけを行うようにし、その状態の変化に応じたGUIの描画処理などはJAT側の作りこみで行うようにします。

ゲームを作るのだとしたら、これからもアニメーションを多用することになると思うので、TransitionやTimelineで時間を制御する方法を取得された方がいいと思います。

[ReiLeiLei1025]

Skrbさん、コメントありがとうございます。

＞JavaFXなどGUIの処理では、イベントが頻繁に発生しているため、GUIを処理させるスレッド(JavaFXの場合、JavaFX Application Threadという名前です)はスリープさせたり、ブロックさせたりしないようにします。

JavaFXの作法、勉強になりました。

現在のコードの実装状態をお伝えさせていただくと、例えば、カードゲームのデモアプリがあるとして、ユーザーがボタンを1回押したら、後は延々とコンピュータープレーヤー同士がカードゲームをするような仕様だとすると、カードのアニメーションを置き去りにして、手番だけがどんどん進んでしまうといった感じでしょうか。
お話によると、スレッドの停止ではなく、TransitionやTimelineクラスとJATの作りこみによって何とかするものだということなので、ヒントも頂いていることですし、もう少し、自分で考えてみようと思います。(setOnFinishedメソッドがキーポイントだと目をつけています)

[ReiLeiLei1025]

結局、分かりませんでした。ただ、PauseTransitionを調べていたところ、PauseTransitionを使って、Widowを閉じるというコードを見つけたのでそれを改良してこのようなコードを組んでみました。

public class TransitionTestMainOnly extends Application {
int abs = 1;

@Override
public void start(Stage primaryStage) throws Exception {

Button start_button = new Button("Transition Start");
Label transition_label = new Label("Transition Label");

start_button.setLayoutX(250);
start_button.setLayoutY(50);

AnchorPane root = new AnchorPane();
root.getChildren().add(start_button);
root.getChildren().add(transition_label);

start_button.setOnAction(new EventHandler<ActionEvent>() {

@Override
public void handle(ActionEvent event) {

TranslateTransition transition = new TranslateTransition(
new Duration(500), transition_label);
transition.setToX(500 * abs);
transition.setToY(375 * abs);
PauseTransition pauseTransition=new PauseTransition(new Duration(500));
SequentialTransition seqentialTransition=new SequentialTransition(transition,pauseTransition);

Stage stage = new Stage();
Label label = new Label("Running");
AnchorPane root = new AnchorPane();
root.getChildren().add(label);
Scene scene = new Scene(root, 200, 60);
stage.setScene(scene);
stage.setMaxWidth(200);
stage.setMaxHeight(60);
stage.setTitle("メッセージ");
stage.centerOnScreen();
stage.initModality(Modality.WINDOW_MODAL);
final Window window = stage;
seqentialTransition.setOnFinished(new EventHandler<ActionEvent>() {

@Override
public void handle(ActionEvent event) {
window.hide();
}

});

seqentialTransition.play();
stage.showAndWait();

abs *= -1;
}
});

Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.centerOnScreen();
primaryStage.show();

}

public static void main(String[] args) {
launch(args);
}
}

一応、これで、自分のやりたい事は出来たのですが、絶対に、メッセージボックスが出てきてしまいます。メッセージを表示すれば雰囲気的に誤魔化せますが…。

[ReiLeiLei1025]

続けて、レスを失礼します。
stage.setY();で、画面外を設定すれば、表示もされなくなりますね。

Answer 2

すいません。追加します。
ダイアログボックスうんぬんの話は、showAndWait()メソッドのことです。