When you stop moving on a hex, an event happens. We are stuck because we do not know how to make each individual hex have its own characteristics/properties. The only thing we can think of is to make each hex an object, but we don't know how to do anything that advanced (is it even possible to make different sections of an .jpg image an individual object?).
Draw out your hex grid on a JPanel.
Create a class that represents a cell object to hold the data you will need for each cell.
As you lay out your grid on the panel you can assign each cell. A cell can know how to draw itself with the data provided when you layout the grid. Cell selection with a mouse can take place with a mouse listener added to the panel that draws them. In the mouse listener you can message the selected cell object to elicit the behavior you want.
I am sure you can do this with Java Swing, but let me answer how I would approach this with JavaFX.
First I would create a CustomNode for the hex position, maybe call it HEXButton. This node would have a clipping region
using a Hex shape. Next the background would be from the main map1 image with an ImageView
that is translated to the correct position on the map.
The clip would only show the part within the clip shape. Next, I would add mouseEvent functions to handle
the mouse clicks, etc.
The whole board would be a collection of so many HEX "Buttons" arranged in their proper position.
If you want to stay in the Java space, my I recommend the book "Filthy Rich Clients". It has many examples
of this sort of thing and actually was the design inspiration behind the JavaFX UI model.
posted 11 years ago
Craig Wood wrote:As you lay out your grid on the panel you can assign each cell. A cell can know how to draw itself with the data provided when you layout the grid.
Thank you for responding
So each Hex will have to be a separate image file?
posted 11 years ago
You could do it either way.
1 — draw the image in the background of the panel and then draw the hex objects next (to appear between the background image and the viewer).
2 — clip the image for each hex object and let each cell draw its portion of the background image before it draws itself (between the image and viewer).
One consideration in your choice might be the possibility of fluid resizing of the component that does the drawing and/or the parent frame. Or maybe you would have a fixed size for your graphic component and keep it in a JScrollPane.
Whichever way makes more sense to you would be a good starting point. You can always change things around while you are putting this together.
So each Hex will have to be a separate image file? No, I wouldn't make a separate file for each one. You can clip the image and make a new BufferedImage of the clipped portion and store it in each hex object. You would do this at startup in your app. So if you have 200 hex cells you might have an array of hex objects, each one having an image as one of its member variables. Of course this is a lot more work than option 1.