1 Reply Latest reply: Dec 13, 2012 5:00 PM by swpalmer RSS

    How best to implement a panning/zooming viewport onto a JFX sub-scene?

      I'm working on the code for Richard's JavaFX Tower Defender game: https://bitbucket.org/rbair/fx-games/

      My working fork, which is slightly further along and just playable but ugly and boring is at: https://bitbucket.org/zonski/fx-games

      Currently it's a 2D, top-down view of the game map, which is made up of static backgrounds and Sprites running around on top of this. The Sprites are JFX Nodes and can contain more complex sub-tree of nodes.

      I'd like to eventually have a view of the game that allows scrolling (aka panning) and zooming. I've come up with cludge ways of achieving this in the past but I'm wondering if anyone has any elegant solutions.

      Currently I have my view extending Group and I add my background (a big rectangle at the moment) to this, then my Sprites. Its all fixed size, no panning, no zooming.

      The first thing I'm looking at is how to best put a viewport over this. I'd like the size of the viewport to be dynamic so that it grows and shrinks with the window it is in. The map inside would be fixed size but clipped to the viewport. If the viewport is bigger than the map then map should be centered with a gray area around it. When the viewport is smaller than the map the user should be able to drag the mouse to pan up/down/left/right.

      After that I'd be looking to add zooming in/out and in all cases I need to be able to easily translate mouse/screen coordinates to the map.

      In essence this is similar to building a diagramming tool (eg UML), and not specific to a game. I know several people have worked on such diagramming tools and I'd be interested to hear any patterns, tricks, architectures that you found useful and are willing to share. Things like whether you used Groups, StackPanes, ScrollPanes, custom binding, how you scaled (especially things like fonts), etc, etc.

      Cheers for your help!
        • 1. Re: How best to implement a panning/zooming viewport onto a JFX sub-scene?
          I avoided Group and went with AnchorPane as Group seemed to result in more performance issues. I suspect it is related to computing the bounds for the Group. We had a lot of issues with ScrollPane, flickering and performance and so we implemented our own scroll pane from scratch using clipping rectangles and AnchorPanes. Path objects in a transformed Group in a ScrollPane just totally killed the performance. I filed an issue in the javafx Jira with a test case.