# Best Way to Draw a Chessboard?

• (2 Pages)
• 1
• 2

## 17 Replies - 32195 Views - Last Post: 07 December 2011 - 03:51 PMRate Topic: //<![CDATA[ rating = new ipb.rating( 'topic_rate_', { url: 'https://www.dreamincode.net/forums/index.php?app=forums&module=ajax&section=topics&do=rateTopic&t=258626&amp;s=4314ae061c26f1500d1f4e0d2447b185&md5check=' + ipb.vars['secure_hash'], cur_rating: 0, rated: 0, allow_rate: 0, multi_rate: 1, show_rate_text: true } ); //]]>

### #1 Aramyth

Reputation: 5
• Posts: 51
• Joined: 14-January 10

# Best Way to Draw a Chessboard?

Posted 05 December 2011 - 07:21 PM

I'm just looking for some ideas/insight to a problem I'm working on.

What's the best way to draw a chess board in C#? If I use an image how will I be able to tell the pieces where they should be placed on the image?
Is This A Good Question/Topic? 0

## Replies To: Best Way to Draw a Chessboard?

### #2 Atli

Reputation: 4241
• Posts: 7,216
• Joined: 08-June 10

## Re: Best Way to Draw a Chessboard?

Posted 05 December 2011 - 07:58 PM

That would depend on how your pieces are represented.

In the very simplest way, you could just use a multidimensional array to represent the board, where each value would hold a reference to whatever piece should be there (if any). Then you would use a nested loop to go through each field, using the "row" and "column" indexes (if we are to think of a 2D array as a data table) to determine the position where each field should be drawn.
```for (int xi = 0; xi < 8; ++xi)
{
int posx = xi * field_width;
for (int yi = 0; yi < 8; ++yi)
{
int posy = yi * field_height;
in piece = pieces[xi, yi];

// The proceed to draw the image for "piece"
// at the [posx, posy] coordinates.
}
}

```

### #3 Aramyth

Reputation: 5
• Posts: 51
• Joined: 14-January 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 07:21 AM

I'm still confused though. Can I put an image on, say a picture box and then place some other images/buttons for the pieces over it using those loops?

I'm pretty new to making GUI/UI.

Thanks

### #4 tlhIn`toq

• Xamarin Cert. Dev.

Reputation: 6536
• Posts: 14,450
• Joined: 02-June 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 07:57 AM

Sure. Give it a try. Experimenting won't harm your computer and we learn so much by DOING.

There are plenty of advantages to to doing it that way. For example you can wire up the .Click event of the picturebox.

### #5 UziTech

Reputation: 7
• Posts: 64
• Joined: 26-October 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 08:12 AM

I would use System.Drawing
```using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace Chess
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
int _boardX = 10, _boardY = 10;
int _boardWidth = 240, _boardHeight = 240;//must be multiple of 8
Brush _borderColor = Brushes.Black;
Brush[] _boardColor = {Brushes.Gold, Brushes.Red};
void DrawChessBoard(Graphics g)
{
//draw squares
int spacingX = _boardWidth / 8;
int spacingY = _boardHeight / 8;
for(int col = 0; col < 8; col++)
{
for(int row = 0; row < 8; row++)
{
g.FillRectangle(_boardColor[(col + row) % 2], _boardX + col * spacingX, _boardY + row * spacingY, spacingX, spacingY);
}
}
for (int i = 0; i < 8; i++)
{
//draw lines
g.DrawLine(new Pen(_borderColor), _boardX, _boardY + i * spacingY, _boardX + _boardWidth, _boardY + i * spacingY);
g.DrawLine(new Pen(_borderColor), _boardX + i * spacingX, _boardY, _boardX + i * spacingX, _boardY + _boardHeight);
}
//draw border
g.DrawRectangle(new Pen(_borderColor, 1), new Rectangle(_boardX, _boardY, _boardWidth, _boardHeight));
//next you would draw pieces with an array of where they are
//assuming you have a ChessPiece class you could do something like this
/*
foreach(ChessPiece piece in pieces)
{
g.DrawImage(piece.img, piece.x, piece.y)
}
*/
}

//Form1 Paint method calls DrawChessBoard
private void Form1_Paint(object sender, PaintEventArgs e)
{
DrawChessBoard(e.Graphics);
}
}
}

```

### #6 tlhIn`toq

• Xamarin Cert. Dev.

Reputation: 6536
• Posts: 14,450
• Joined: 02-June 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 08:22 AM

I agree with Uzi that I would probably do something similar.
But I wouldn't have done that as an early "learning GUI" method.
For one thing, it will complicate actual play.

Sure it draws the board. But each square won't react to a .Click when the piece is moved. Click on a piece, click on the square you want it to move to - type behavior.

Actually drawing each piece is probably beyond someone who says

Quote

I'm pretty new to making GUI/UI.

I'm just trying something new: Encouraging a path that at least leads to doing something achievable at the OP's level, rather than suggesting more time on the books and tutorials.

### #7 UziTech

Reputation: 7
• Posts: 64
• Joined: 26-October 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 09:16 AM

That is true for a Beginner in GUI programming I would start out with picture boxes. However using picture boxes will make a very klunky program and it is usually good to start out with good habits.

If you are trying to learn the right way to draw a chess board drawing it would be the right way and using form click coordinates to tell which square was clicked.

### #8 Curtis Rutland

• （╯°□°）╯︵ (~ .o.)~

Reputation: 5106
• Posts: 9,283
• Joined: 08-June 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 12:35 PM

Frankly, I'd worry more about building a fully decoupled chess program, then worry about how to display it. The functionality is more important than the form, so if you have a set of classes and methods that know how chess works, and can validate moves and play a game, then building a display on top of it is pretty easy.

It's never too early to start learning to decouple your UI from your logic.

### #9 baavgai

• Dreaming Coder

Reputation: 7505
• Posts: 15,553
• Joined: 16-October 07

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 01:04 PM

UziTech, on 06 December 2011 - 12:16 PM, said:

However using picture boxes will make a very klunky program and it is usually good to start out with good habits.

Seriously? Picture boxes are form controls that have a lot of functionality built in. How much extra effort will it take to figure out where the user clicked? When the user resizes the form? Updating each of those boxes when the contents change? There's a lot of overhead in reinventing the wheel and writing all the code for it.

For a picture box, you could do something like:
```using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace Chess {
public partial class Form1 : Form {
private TableLayoutPanel cells;
class Cell : PictureBox {
public static readonly System.Drawing.Size CellSize = new System.Drawing.Size(50, 50);
public Cell(int row, int col) : base() {
this.row = row; this.col = col;
this.Size = CellSize;
this.BackColor = (col % 2 == row % 2) ? Color.Black : Color.White;
}
public override string ToString() { return "Cell(" + row + "," + col + ")"; }
}

public Form1() {
InitializeComponent();
cells = GetBoard();
}

private TableLayoutPanel GetBoard() {
TableLayoutPanel b = new TableLayoutPanel();
b.ColumnCount = 8;
b.RowCount = 8;
for (int i = 0; i < b.ColumnCount; i++) { b.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, Cell.CellSize.Width)); }
for (int i = 0; i < b.RowCount; i++) { b.RowStyles.Add(new RowStyle(SizeType.Absolute, Cell.CellSize.Height)); }
for (int row = 0; row < b.RowCount; row++) {
for (int col = 0; col < b.ColumnCount; col++) {
Cell cell = new Cell(row, col);
cell.Click += new EventHandler(cell_Click);
}
}
b.Size = new System.Drawing.Size(b.ColumnCount * Cell.CellSize.Width, b.RowCount * Cell.CellSize.Height);
return b;
}

private void cell_Click(object sender, EventArgs e) {
Cell cell = (Cell)sender;
System.Diagnostics.Debug.WriteLine("Click: " + cell);
}

}
}

```

### #10 UziTech

Reputation: 7
• Posts: 64
• Joined: 26-October 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 03:23 PM

baavgai, on 06 December 2011 - 02:04 PM, said:

Seriously? Picture boxes are form controls that have a lot of functionality built in. How much extra effort will it take to figure out where the user clicked? When the user resizes the form? Updating each of those boxes when the contents change? There's a lot of overhead in reinventing the wheel and writing all the code for it.

With a small program using picture boxes will be fine but they will be taking up more memory than drawing them. I agree with Curtis, the functionality will be more important than displaying the pieces.

With this small program it doesn't really matter. You won't see much of a difference either way, but like I said it's best to learn good habits at the beginning than try to break bad habits later.

### #11 baavgai

• Dreaming Coder

Reputation: 7505
• Posts: 15,553
• Joined: 16-October 07

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 05:19 PM

UziTech, on 06 December 2011 - 06:23 PM, said:

it's best to learn good habits at the beginning than try to break bad habits later.

Agreed. However, in a WinForm its rare that overriding paint would be considered a good habit. Particularly the whole form. Better to use a user control. Or a custom control...

Of course, what constitutes a bad habit is eminently debatable. I'm afraid I just don't see your chosen windmill as even on the list.

### #12 Aramyth

Reputation: 5
• Posts: 51
• Joined: 14-January 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 09:19 PM

I didn't mean to create a debate. XD

Thanks for all the input, I'll be taking a stab at this over the next couple of hours. I'll try both methods out and see which one seems easier to work with from the ground up.

I'll post back soon.

### #13 Aramyth

Reputation: 5
• Posts: 51
• Joined: 14-January 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 10:28 PM

If I were to draw the board using Drawing, would I be able to still use a picture box for the pieces? or would that become to complicated?

I'm not sure I want to draw the pieces out individually.

### #14 UziTech

Reputation: 7
• Posts: 64
• Joined: 26-October 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 10:44 PM

Aramyth, on 06 December 2011 - 11:28 PM, said:

If I were to draw the board using Drawing, would I be able to still use a picture box for the pieces? or would that become to complicated?

I'm not sure I want to draw the pieces out individually.

You could do it that way but they will still have to click on the board to tell the piece they selected where to move.

### #15 UziTech

Reputation: 7
• Posts: 64
• Joined: 26-October 10

## Re: Best Way to Draw a Chessboard?

Posted 06 December 2011 - 11:00 PM

baavgai, on 06 December 2011 - 06:19 PM, said:

Agreed. However, in a WinForm its rare that overriding paint would be considered a good habit. Particularly the whole form. Better to use a user control. Or a custom control...

Of course, what constitutes a bad habit is eminently debatable. I'm afraid I just don't see your chosen windmill as even on the list.

I don't see how overriding paint can be a bad decision. It would be much easier to debug when you have your drawing algorithm in one section clicking in another and calculation in another. Doing it with picture boxes just gets messy.

Maybe it is just my style but I find overriding paint and calculating the point of a click a lot less cumbersome than using picture boxes.