Search code examples
javafxtransitionmovetranslatekeyevent

javafx using translatetransition and keyevent to move image around screen


I am trying to make a simple tile based movement system so that when a direction is pressed a translate transition is played to smoothly move the character one tile over. The problem I am running into is that when I play the animation the image does the transition fine but after the transition completes, the image jumps to a spot further than intended. If I take out the portion of code onFinished then the animation plays perfectly but pressing directions after that cause the image to move from the previous place not the current location.

Here is the code

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;


public class ControlTranslateImage extends Application
{   
    final int STEP_SIZE = 64;
    final Duration DURATION = Duration.millis(500);
    Group player;

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

    @Override
    public void start(Stage stage)
    {
        final ImageView image0 = new ImageView(new Image("http://opengameart.org/sites/default/files/styles/medium/public/slime_idle.gif"));


        player = new Group(image0);
        player.getChildren().setAll(image0);

        final Scene scene = new Scene(player, 900, 600, Color.WHITE);

        moveOnKeyPressed(scene, player);

        stage.setScene(scene);
        stage.show();
    }

    private void moveOnKeyPressed(Scene scene, Group player)
    {

        final TranslateTransition transition = new TranslateTransition(DURATION, player);

        scene.setOnKeyPressed(e -> {
            switch(e.getCode())
            {

                case UP:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX());
                    transition.setToY(player.getLayoutY() - STEP_SIZE);
                    transition.playFromStart();
                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX());
                        player.setLayoutY(player.getLayoutY() - STEP_SIZE);
                    });

                } break;
                case DOWN:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX());
                    transition.setToY(player.getLayoutY() + STEP_SIZE);
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX());
                        player.setLayoutY(player.getLayoutY() + STEP_SIZE);
                    });

                } break;
                case LEFT:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX() - STEP_SIZE);
                    transition.setToY(player.getLayoutY());
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX() - STEP_SIZE);
                        player.setLayoutY(player.getLayoutY());
                    });
                    player.setLayoutX(player.getLayoutX() - STEP_SIZE);
                    player.setLayoutY(player.getLayoutY());


                } break;
                case RIGHT:
                {

                    transition.setFromX(player.getLayoutX());
                    transition.setFromY(player.getLayoutY());
                    transition.setToX(player.getLayoutX() + STEP_SIZE);
                    transition.setToY(player.getLayoutY());
                    transition.playFromStart();

                    transition.setOnFinished(t -> {
                        player.setLayoutX(player.getLayoutX() + STEP_SIZE);
                        player.setLayoutY(player.getLayoutY());
                    });
                } break;

                default:break;

            }
        });
    }
}

Solution

  • Fixed code

    import javafx.animation.TranslateTransition;
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.util.Duration;
    
    
    public class ControlTranslateImage extends Application
    {   
        final int STEP_SIZE = 64;
        final Duration DURATION = Duration.millis(500);
        Group player;
    
        public static void main(String[] args)
        {
            launch(args);
        }
    
        @Override
        public void start(Stage stage)
        {
            final ImageView image0 = new ImageView(new Image("http://opengameart.org/sites/default/files/styles/medium/public/slime_idle.gif"));
    
            player = new Group(image0);
    
            final Scene scene = new Scene(player, 900, 600, Color.WHITE);
    
            moveOnKeyPressed(scene, player);
    
            stage.setScene(scene);
            stage.show();
        }
    
        private void moveOnKeyPressed(Scene scene, Group player)
        {
    
            final TranslateTransition transition = new TranslateTransition(DURATION, player);
            scene.setOnKeyPressed(e -> {
                switch(e.getCode())
                {
    
                    case UP:
                    {
    
                        transition.setFromX(player.getTranslateX());
                        transition.setFromY(player.getTranslateY());
                        transition.setToX(player.getTranslateX());
                        transition.setToY(player.getTranslateY() - STEP_SIZE);
                        transition.playFromStart();
    
                    } break;
                    case DOWN:
                    {
    
                        transition.setFromX(player.getTranslateX());
                        transition.setFromY(player.getTranslateY());
                        transition.setToX(player.getTranslateX());
                        transition.setToY(player.getTranslateY() + STEP_SIZE);
                        transition.playFromStart();
    
                    } break;
                    case LEFT:
                    {
    
                        transition.setFromX(player.getTranslateX());
                        transition.setFromY(player.getTranslateY());
                        transition.setToX(player.getTranslateX() - STEP_SIZE);
                        transition.setToY(player.getTranslateY());
                        transition.playFromStart();
    
                    } break;
                    case RIGHT:
                    {
    
                        transition.setFromX(player.getTranslateX());
                        transition.setFromY(player.getTranslateY());
                        transition.setToX(player.getTranslateX() + STEP_SIZE);
                        transition.setToY(player.getTranslateY());
                        transition.playFromStart();
    
                    } break;
    
                    default:break;
    
                }
            });
        }
    }