Reputation: 714
I need to make a boardgame where the user can select an image and use it as a board. The image part is easy, though I need help with how to make equal sized grids based upon user input. For example there could be a 10x10 grid or a 50x50.
My current approach is by having a StackPane that has a GridPane over a ImageView. All of this is inside a ScollPane so that the image can be as big as possible.
Are there any other better ways of doing this? Thanks.
Upvotes: 1
Views: 4718
Reputation: 159291
Yes, use a GridPane for your board.
I used the same method for my Tic-Tac-Toe game - it worked fine.
class BoardSkin extends GridPane {
BoardSkin(Board board) {
getStyleClass().add("board");
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
add(board.getSquare(i, j).getSkin(), i, j);
}
}
}
}
You can use a StackPane with an ImageView layered behind your board grid squares as you mention in your question, but it's not strictly necessary.
Instead, I'd use some updated css from the tic-tac-toe game linked earlier. To get the board image layered behind the grid squares, set the board image as a background image for the grid.
.board {
-fx-hgap: 10px;
-fx-vgap: 10px;
-fx-background-image: url('http://www.woodge.com/books/maps/map_Narnia.jpg');
-fx-background-size: cover;
-fx-background-position: center;
}
.square {
-fx-padding: 10px;
-fx-background-color: rgba(100, 100, 100, 0.4);
}
Upvotes: 1