Board Drawer Placement

To draw the board I said we need to know where to start and we need to know how big the squares and the board should be. To do this in JAVA, I use a formula that calculates where the drawing should start and how big the board should be based on the amount of space allocated to the board by its container, which in this case is the Applet. This formula is simple and coincides with my strategy for laying out the compnents in my applet in an organized way. To understand it, just recognize that the rectBounds var is given by my component, it is a function of its own class which is native to JAVA. When added to the applet, it determines what its size should be by using another one of its functions. I will not be to specific since this is not a tutorial about the JAVA API, which deserves its own tutorials and has many sites for that. But you should know that components work together in JAVA and other languages, and to layout your interface you can use these funtions.

//the rectangular size of my component when it is added to its container
Rectangle rectBounds = this.getBounds();
//the size of my squares
int cellSize = 35;
//the width of the board
BoardWidth = cellSize*8;
//using this I calculate where the drawing should begin
startx = (int)rectBounds.width()/2 - (BoardWidth);
starty = (int)rectBounds.height/2 - BoardWidth/2;
//calculate the offset from the startX for drawing the images
imageOffset = (cellSize - imageWidth);

Now that the coordinates are know, drawing the board is just a loop that takes in all the information of the board and sends out all of its related images.

    for(int i=0; i<8; i++){
        for(int j=0; j<8; j++){
            //get the square color
            Color color = getSquareColor(i, j);
            //draw the square
            /setColor(color);
            fillRect(startx+cellSize*i, starty+cellSize*j, cellSize, cellSize);
            //draw the piece
            if(!board[i][j].getColor = Board.COLORLESS)
                drawImage(imageArray[board[i][j].getColor()][board[i][j].getKind()], imageOffset+startx+cellSize*i, imageOffset+starty+cellSize*j, this);
        }
    }

In my program, I have several functions that retrieve the x and y coordinate for drawing the different parts of my board, this includes the piece selection menu and the capturing piece blocks. Play around with your start coordinates and board sizes and see how they affect the way that your board is drawn. This is the best way to learn how the coordinates work and to lay out the board the way that you want it.

Placement and Drawing of the Board