Welcome to the CSC Q&A, on our server named in honor of Ada Lovelace. Write great code! Get help and give help!
It is our choices... that show what we truly are, far more than our abilities.


+19 votes

My group was wondering if anyone had started the map editor part itself, and if so, how they had completed that task. We were trying to brainstorm how to display the map 'tiles' in our program. Also, if anyone has found any helpful videos / links, please include those as well. Thanks!

asked in CSC305 Fall 2022 by (1 point)

3 Answers

+10 votes

This is a great question! Since different teams are taking different approaches/designs to the editor, there isn't just one correct way to do this.

However, I think there are essentially only two broad options for the editable 2-D view of the game board / terrain map:

1) Use a Canvas (or custom JavaFX component) to draw it using GraphicsContext commands, similar to the textbook's SimplePaint program you edited in a lab, or like this more complex ToolPaint demo from Chapter 13 of the textbook. (I should be assigning the class to read Chapter 13.) I think this is probably the most straightforward approach, since all of the event handling and visual displaying can be handled within the same Canvas component. Also, whenever the terrain map gets edited, you can probably just redraw the entire map onto the canvas. One downside is that to make your app look really cool, it might take more work using the elementary graphics commands/options.

2) Use individual JavaFX objects (e.g. Rectangle shapes) to represent each Tile, and some kind of container (maybe an AnchorPane within a ScrollPane?) to hold them all. I think this will be more complex to implement, because you'll be attaching event handlers to each of the individual tile objects. Also, as the properties of the terrain map change, you'll probably need to modify properties of existing objects, rather than just redrawing everything. However, I think there also could be some benefits, because by having tiles represented as JavaFX Nodes, some features would be easier (adding a fancy border around the selected tile using CSS -fx-style properties).

If we only wanted to support square tiles, then using a GridPane comes naturally to mind, BUT if we want to make our software extensible enough to later support hexagonal tiles, then the GridPane would be too constrictive, and we'd have to throw it out, since there is no "HexGridPane" to swap in for it, and writing your own HexGridPane layout for JavaFX would probably be too hard.

I am not sure it's possible to fully think through all of the pros/cons of these two different approaches without starting to implement them. My initial hunch is that option 1 will be easier, at least for teams to get something basic off the ground.

In either case, I don't think it would be very hard to mock up something that "looks" like a terrain grid (either drawn in the Canvas, or using colored Rectangle nodes placed in a grid) for the Sprint 1 demos on Tuesday! (Getting those visuals to be editable with mouse or keyboard events, on the other hand, is a harder task.)

(For Sprint 1 mockup purposes, you could also insert an Image as a placeholder using an ImageView )

answered by (508 points)
+6 votes

I also found this super awesome canvas video on youtube that's really helpful:
It shows grid lines and and filled cells in canvas similar to how we want our map to look. It's a good starting place.

answered by (1 point)
+3 votes

Here is a nice article comparing Canvas to Pane, both of which are great options to for the visual map in our program: https://edencoding.com/javafx-canvas-vs-pane/

answered by (1 point)