CODEWITHSUNDEEP
scalalistviewjavafx
user2723261
user2723261

Reputation: 559

using JavaFX, how can I place one shape on top of the other?

I am trying to make a checkers game. I will have 64 rectangles, and some of the rectangles will have circles on top of them (representing a checkers piece). How can I do this (i.e. place one shape on top of the other)?

If it matters I'm using Scala, not Java (though the syntax is similar, at least for this part of the project...)

Upvotes: 0

Views: 3806

Answers (2)

James_D
James_D

Reputation: 209358

CAG Gonzo's answer will work, but also be aware that if you place multiple nodes in the same cell in a grid pane, they will be placed on top of each other. This might work pretty well for you application:

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class CheckerBoard extends Application {

    private static final int BOARD_SIZE = 8 ;
    private static final int SQUARE_SIZE= 40 ;
    private static final int NUM_PIECES = 12 ;

    @Override
    public void start(Stage primaryStage) {
        GridPane checkerBoard = new GridPane();

        configureBoardLayout(checkerBoard);

        addSquaresToBoard(checkerBoard);

        Circle[] whitePieces = new Circle[NUM_PIECES];
        Circle[] blackPieces = new Circle[NUM_PIECES];

        addPiecesToBoard(checkerBoard, whitePieces, blackPieces);

        BorderPane root = new BorderPane(checkerBoard);
        primaryStage.setScene(new Scene(root, 400, 400));
        primaryStage.show();
    }

    private void addPiecesToBoard(GridPane checkerBoard, Circle[] whitePieces,
            Circle[] blackPieces) {
        for (int i=0; i<NUM_PIECES; i++) {
            whitePieces[i] = new Circle(SQUARE_SIZE/2-4, Color.WHITE);
            whitePieces[i].setStroke(Color.BLACK);
            checkerBoard.add(whitePieces[i], i%(BOARD_SIZE/2) * 2 + (2*i/BOARD_SIZE)%2, BOARD_SIZE - 1 - (i*2)/BOARD_SIZE);

            blackPieces[i] = new Circle(SQUARE_SIZE/2 -4, Color.BLACK);
            blackPieces[i].setStroke(Color.WHITE);
            checkerBoard.add(blackPieces[i], i%(BOARD_SIZE/2) * 2 + (1 + 2*i/BOARD_SIZE)%2, (i*2)/BOARD_SIZE);
        }
    }

    private void addSquaresToBoard(GridPane board) {
        Color[] squareColors = new Color[] {Color.WHITE, Color.BLACK};
        for (int row = 0; row < BOARD_SIZE; row++) {
            for (int col = 0; col < BOARD_SIZE; col++) {
                board.add(new Rectangle(SQUARE_SIZE, SQUARE_SIZE, squareColors[(row+col)%2]), col, row);
            }
        }
    }

    private void configureBoardLayout(GridPane board) {
        for (int i=0; i<BOARD_SIZE; i++) {
            RowConstraints rowConstraints = new RowConstraints();
            rowConstraints.setMinHeight(SQUARE_SIZE);
            rowConstraints.setPrefHeight(SQUARE_SIZE);
            rowConstraints.setMaxHeight(SQUARE_SIZE);
            rowConstraints.setValignment(VPos.CENTER);
            board.getRowConstraints().add(rowConstraints);

            ColumnConstraints colConstraints = new ColumnConstraints();
            colConstraints.setMinWidth(SQUARE_SIZE);
            colConstraints.setMaxWidth(SQUARE_SIZE);
            colConstraints.setPrefWidth(SQUARE_SIZE);
            colConstraints.setHalignment(HPos.CENTER);
            board.getColumnConstraints().add(colConstraints);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Upvotes: 1

CAG Gonzo
CAG Gonzo

Reputation: 589

Wrap your shapes in another node; StackPane seems ideal for this. Set its alignment to Pos. CENTER to achieve the effect you want.

Bear in mind, this is not an entirely efficient solution as you will be creating 64 StackPanes. If you want to avoid that, then you would need to do some math to manually position your pieces above the desired game board location. This, however, should not be entirely difficult as you know the dimensions of your board squares, pieces, and how they are laid out.

Upvotes: 1

Related Questions