PathTransition is not working as I thought it should (confusion on using CubicCurveTo/ArcTo and coordinates in general)

huangapple 未分类评论59阅读模式
英文:

PathTransition is not working as I thought it should (confusion on using CubicCurveTo/ArcTo and coordinates in general)

问题

/*
The root is a Pane with prefWidth = 960, prefHeight = 540
*/
public void initialize() {
    /*
    char1 is the ImageView of the sprite. layoutX = 270, layoutY = 290
    */
    char1.setScaleX(-1);

    final Path path = new Path();
    path.getElements().add(new MoveTo(0, 0));
    // 这些是粗略的数字,基于ImageView的layoutX和layoutY使用的坐标系
    // path.getElements().add(new CubicCurveTo(300, 200, 400, 200, 500, 290));
    path.getElements().add(new ArcTo(100, 60, 40, 500, 290, true, true));

    final PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(Duration.millis(2000));
    pathTransition.setNode(char1);
    pathTransition.setPath(path);
    pathTransition.setCycleCount(1);
    pathTransition.setAutoReverse(true);

    jumpButton.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent actionEvent) {
            pathTransition.play();
        }
    });
}
英文:

I'm making the prototype of a game I'm trying to make with JavaFX. It requires a character/sprite to move in a curved path forward (basically jump to a specific position forward). I tried using MoveTo (using the layoutX and layoutY values of the ImageView of the sprite, hard-coded) with CubicCurveTo and ArcTo to specify this path, but then, the sprite jumps and starts the animation from way past below the window and just performs the animation starting from that point, even though my sprite is around the middle of the window.

I tried setting the MoveTo to 0, but then the sprite jumps to a slightly different position near its current position (upper left side of the sprite), and then performs the animation still up to past below the window. As of what I can understand, the CubicCurveTo and ArcTo final coordinates were still the same no matter where the MoveTo is located.

My general question is, how does the coordinate systems of these path elements work? Specifically, how do I make my sprite move in a curved position forward without it jumping past below the window?

Here's my code (This is inside the initialize() method of the controller class of my FXML):

/*
The root is a Pane with prefWidth = 960, prefHeight = 540
*/
public void initialize() {
    /*
    char1 is the ImageView of the sprite. layoutX = 270, layoutY = 290
    */
    char1.setScaleX(-1);

    final Path path = new Path();
    path.getElements().add(new MoveTo(0, 0));
    // these are rough numbers, based on the coordinate system that the layoutX and layoutY of the ImageView uses
    // path.getElements().add(new CubicCurveTo(300, 200, 400, 200, 500, 290));
    path.getElements().add(new ArcTo(100, 60, 40, 500, 290, true, true));

    final PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(Duration.millis(2000));
    pathTransition.setNode(char1);
    pathTransition.setPath(path);
    pathTransition.setCycleCount(1);
    pathTransition.setAutoReverse(true);

    jumpButton.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent actionEvent) {
            pathTransition.play();
        }
    });
}

答案1

得分: 0

所以呃,我解决了自己的问题(?)。我发现这些 PathElements 使用的坐标是相对于节点当前位置的 相对 坐标,并且变换是基于节点的 中心 进行的。所以为了让我的精灵向前跳跃,我的 CubicCurveTo 在两个控制点上的 y 坐标需要是负值。至于精灵因为在指定点上居中而导致跳跃的部分(因为 ImageView 坐标值是相对于其原点的,即边界框的左上角,如果我没记错的话),我暂时得想办法解决。至少我解决了最大的问题。

不过我在想,是否有任何文档说明使用 PathElements 来使用节点的相对位置来移动它。

英文:

So uhm, I solved my own problem (?). I found out that these PathElements use coordinates that are relative to the current position of the Node, and that the transforms are based off on the center of the Node. So for my sprite to jump forward, my CubicCurveTo needed to have negative y-coordinates on the two control points. As for the part where my sprite jumps because of it centered on the specified point (because ImageView coordinate values refer to their origin, i.e. the upper left corner of the bounding box, if I'm not wrong), I'll have to work around that for now. At least I got the biggest problem out.

I'm wondering, though, if there is any documentation saying that PathElements using the relative position of the Node to move it around.

huangapple
  • 本文由 发表于 2020年3月15日 21:29:29
  • 转载请务必保留本文链接:https://java.coder-hub.com/60693433.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定