mirror of
https://github.com/badvision/lawless-legends.git
synced 2024-10-12 09:23:38 +00:00
Added fade animations and other UX cleanup so the menu and controls have a more natural feel
This commit is contained in:
parent
5dd1512b99
commit
4575e85efa
@ -30,13 +30,14 @@ import java.util.concurrent.ScheduledFuture;
|
|||||||
import java.util.concurrent.TimeUnit;
|
import java.util.concurrent.TimeUnit;
|
||||||
import java.util.logging.Level;
|
import java.util.logging.Level;
|
||||||
import java.util.logging.Logger;
|
import java.util.logging.Logger;
|
||||||
|
import javafx.animation.FadeTransition;
|
||||||
|
import javafx.animation.KeyFrame;
|
||||||
|
import javafx.animation.Timeline;
|
||||||
import javafx.application.Platform;
|
import javafx.application.Platform;
|
||||||
import javafx.beans.binding.NumberBinding;
|
import javafx.beans.binding.NumberBinding;
|
||||||
import javafx.beans.binding.When;
|
import javafx.beans.binding.When;
|
||||||
import javafx.beans.property.BooleanProperty;
|
import javafx.beans.property.BooleanProperty;
|
||||||
import javafx.beans.property.SimpleBooleanProperty;
|
import javafx.beans.property.SimpleBooleanProperty;
|
||||||
import javafx.beans.value.ChangeListener;
|
|
||||||
import javafx.beans.value.ObservableValue;
|
|
||||||
import javafx.event.EventHandler;
|
import javafx.event.EventHandler;
|
||||||
import javafx.fxml.FXML;
|
import javafx.fxml.FXML;
|
||||||
import javafx.geometry.Insets;
|
import javafx.geometry.Insets;
|
||||||
@ -60,6 +61,7 @@ import javafx.scene.layout.HBox;
|
|||||||
import javafx.scene.layout.StackPane;
|
import javafx.scene.layout.StackPane;
|
||||||
import javafx.scene.paint.Color;
|
import javafx.scene.paint.Color;
|
||||||
import javafx.stage.Stage;
|
import javafx.stage.Stage;
|
||||||
|
import javafx.util.Duration;
|
||||||
import javafx.util.StringConverter;
|
import javafx.util.StringConverter;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -89,6 +91,12 @@ public class JaceUIController {
|
|||||||
@FXML
|
@FXML
|
||||||
private Slider speedSlider;
|
private Slider speedSlider;
|
||||||
|
|
||||||
|
@FXML
|
||||||
|
private AnchorPane menuButtonPane;
|
||||||
|
|
||||||
|
@FXML
|
||||||
|
private Button menuButton;
|
||||||
|
|
||||||
Computer computer;
|
Computer computer;
|
||||||
|
|
||||||
private final BooleanProperty aspectRatioCorrectionEnabled = new SimpleBooleanProperty(false);
|
private final BooleanProperty aspectRatioCorrectionEnabled = new SimpleBooleanProperty(false);
|
||||||
@ -100,6 +108,7 @@ public class JaceUIController {
|
|||||||
assert notificationBox != null : "fx:id=\"notificationBox\" was not injected: check your FXML file 'JaceUI.fxml'.";
|
assert notificationBox != null : "fx:id=\"notificationBox\" was not injected: check your FXML file 'JaceUI.fxml'.";
|
||||||
assert appleScreen != null : "fx:id=\"appleScreen\" was not injected: check your FXML file 'JaceUI.fxml'.";
|
assert appleScreen != null : "fx:id=\"appleScreen\" was not injected: check your FXML file 'JaceUI.fxml'.";
|
||||||
controlOverlay.setVisible(false);
|
controlOverlay.setVisible(false);
|
||||||
|
menuButtonPane.setVisible(false);
|
||||||
NumberBinding aspectCorrectedWidth = rootPane.heightProperty().multiply(3.0).divide(2.0);
|
NumberBinding aspectCorrectedWidth = rootPane.heightProperty().multiply(3.0).divide(2.0);
|
||||||
NumberBinding width = new When(
|
NumberBinding width = new When(
|
||||||
aspectRatioCorrectionEnabled.and(aspectCorrectedWidth.lessThan(rootPane.widthProperty()))
|
aspectRatioCorrectionEnabled.and(aspectCorrectedWidth.lessThan(rootPane.widthProperty()))
|
||||||
@ -110,18 +119,60 @@ public class JaceUIController {
|
|||||||
rootPane.setOnDragEntered(this::processDragEnteredEvent);
|
rootPane.setOnDragEntered(this::processDragEnteredEvent);
|
||||||
rootPane.setOnDragExited(this::processDragExitedEvent);
|
rootPane.setOnDragExited(this::processDragExitedEvent);
|
||||||
rootPane.setBackground(new Background(new BackgroundFill(Color.BLACK, null, null)));
|
rootPane.setBackground(new Background(new BackgroundFill(Color.BLACK, null, null)));
|
||||||
rootPane.setOnMouseEntered(this::showControlOverlay);
|
rootPane.setOnMouseMoved(this::showMenuButton);
|
||||||
rootPane.setOnMouseExited(this::hideControlOverlay);
|
rootPane.setOnMouseExited(this::hideControlOverlay);
|
||||||
|
menuButton.setOnMouseClicked(this::showControlOverlay);
|
||||||
|
controlOverlay.setOnMouseClicked(this::hideControlOverlay);
|
||||||
|
delayTimer.getKeyFrames().add(new KeyFrame(Duration.millis(3000), evt -> {
|
||||||
|
hideControlOverlay(null);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
private void showMenuButton(MouseEvent evt) {
|
||||||
|
if (!evt.isPrimaryButtonDown() && !evt.isSecondaryButtonDown() && !controlOverlay.isVisible()) {
|
||||||
|
resetMenuButtonTimer();
|
||||||
|
if (!menuButtonPane.isVisible()) {
|
||||||
|
menuButtonPane.setVisible(true);
|
||||||
|
FadeTransition ft = new FadeTransition(Duration.millis(500), menuButtonPane);
|
||||||
|
ft.setFromValue(0.0);
|
||||||
|
ft.setToValue(1.0);
|
||||||
|
ft.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Timeline delayTimer = new Timeline();
|
||||||
|
private void resetMenuButtonTimer() {
|
||||||
|
delayTimer.playFromStart();
|
||||||
}
|
}
|
||||||
|
|
||||||
private void showControlOverlay(MouseEvent evt) {
|
private void showControlOverlay(MouseEvent evt) {
|
||||||
if (!evt.isPrimaryButtonDown() && !evt.isSecondaryButtonDown()) {
|
if (!evt.isPrimaryButtonDown() && !evt.isSecondaryButtonDown()) {
|
||||||
|
delayTimer.stop();
|
||||||
|
menuButtonPane.setVisible(false);
|
||||||
controlOverlay.setVisible(true);
|
controlOverlay.setVisible(true);
|
||||||
|
FadeTransition ft = new FadeTransition(Duration.millis(500), controlOverlay);
|
||||||
|
ft.setFromValue(0.0);
|
||||||
|
ft.setToValue(1.0);
|
||||||
|
ft.play();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private void hideControlOverlay(MouseEvent evt) {
|
private void hideControlOverlay(MouseEvent evt) {
|
||||||
controlOverlay.setVisible(false);
|
if (menuButtonPane.isVisible()) {
|
||||||
|
FadeTransition ft1 = new FadeTransition(Duration.millis(500), menuButtonPane);
|
||||||
|
ft1.setFromValue(1.0);
|
||||||
|
ft1.setToValue(0.0);
|
||||||
|
ft1.setOnFinished(evt1 -> menuButtonPane.setVisible(false));
|
||||||
|
ft1.play();
|
||||||
|
}
|
||||||
|
if (controlOverlay.isVisible()) {
|
||||||
|
FadeTransition ft2 = new FadeTransition(Duration.millis(500), controlOverlay);
|
||||||
|
ft2.setFromValue(1.0);
|
||||||
|
ft2.setToValue(0.0);
|
||||||
|
ft2.setOnFinished(evt1 -> controlOverlay.setVisible(false));
|
||||||
|
ft2.play();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private double convertSpeedToRatio(Double setting) {
|
private double convertSpeedToRatio(Double setting) {
|
||||||
|
@ -18,7 +18,12 @@
|
|||||||
<children>
|
<children>
|
||||||
<ImageView fx:id="appleScreen" fitHeight="384.0" fitWidth="560.0" pickOnBounds="true" style="-fx-background-color: BLACK;" />
|
<ImageView fx:id="appleScreen" fitHeight="384.0" fitWidth="560.0" pickOnBounds="true" style="-fx-background-color: BLACK;" />
|
||||||
<HBox fx:id="notificationBox" alignment="BOTTOM_RIGHT" blendMode="SCREEN" fillHeight="false" maxHeight="45.0" mouseTransparent="true" prefHeight="45.0" prefWidth="560.0" StackPane.alignment="BOTTOM_CENTER" />
|
<HBox fx:id="notificationBox" alignment="BOTTOM_RIGHT" blendMode="SCREEN" fillHeight="false" maxHeight="45.0" mouseTransparent="true" prefHeight="45.0" prefWidth="560.0" StackPane.alignment="BOTTOM_CENTER" />
|
||||||
<BorderPane fx:id="controlOverlay">
|
<AnchorPane fx:id="menuButtonPane" prefHeight="200.0" prefWidth="200.0">
|
||||||
|
<children>
|
||||||
|
<Button fx:id="menuButton" layoutX="494.0" layoutY="14.0" mnemonicParsing="false" styleClass="menuButton" text="☰" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="14.0" />
|
||||||
|
</children>
|
||||||
|
</AnchorPane>
|
||||||
|
<BorderPane fx:id="controlOverlay" visible="false">
|
||||||
<center>
|
<center>
|
||||||
<HBox maxHeight="64.0" prefHeight="64.0" styleClass="uiSpeedSlider" BorderPane.alignment="CENTER">
|
<HBox maxHeight="64.0" prefHeight="64.0" styleClass="uiSpeedSlider" BorderPane.alignment="CENTER">
|
||||||
<children>
|
<children>
|
||||||
|
@ -20,7 +20,13 @@
|
|||||||
-fx-font-family: "Courier New";
|
-fx-font-family: "Courier New";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uiActionButton, .uiSpeedSlider ImageView, .uiSpeedSlider Slider, .uiSpeedSlider AnchorPane {
|
.menuButton {
|
||||||
|
-fx-font-size:16pt;
|
||||||
|
-fx-border-radius: 10px;
|
||||||
|
-fx-background-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuButton, .uiActionButton, .uiSpeedSlider ImageView, .uiSpeedSlider Slider, .uiSpeedSlider AnchorPane {
|
||||||
-fx-background-color: rgba(0, 0, 0, 0.75);
|
-fx-background-color: rgba(0, 0, 0, 0.75);
|
||||||
-fx-text-fill: #a0FFa0
|
-fx-text-fill: #a0FFa0
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user