First steps - Hex Chess

Large hex chess

I thought for my first project, I would make a chess game with a difference - hex squares! While there are already variants of this, it seems the popular ones use a larger board , which will be a bit harder to implement on a small touch screen (see preview).

I choose chess for the following reasons:

• Well known, lots of source code/ideas
• Allows for AI programming in future
• Allows for multiplayer/server in future

My version will be a standard 8x8 board - but with hex.
The hex variation is a bit more complicated - no existing moves/openings/AI exist as far as I am aware, and the logic for piece selection is a little more complicated. It may also be not so much fun, as there are a couple of potential problems - which will be covered in another post.

First, how to setup and draw a chess board and pieces? My chosen method is to create drawables from resources (png) and draw them to the correct location, size, and order on the screen. Order is important to be able to use transparency.  To start with, I have modified the original snake game (Android samples) to use an 8x8 layout, and to setup three 'squares' to use as board tiles.

each square is currently 150x150, and contains a hex with dimensions W = 150, S = 112, H = 130 (there is approx 10 empty pixels above and below the hex centered in the square). I used this hex grid math, very helpfull!
Of course on my Android device, 150x150 is way too big, so it is automatically scaled to fit the 320x480. Each square becomes approx 48x48 pixels, and the hex inside is 48x42 for a 'flat' orientation, this works out to be a total area of around 8.5 squares x 42 in height, and 6 squares x 48 in width (360 x 288). Of course this leaves a little area on the side, and at top and bottom.

The pieces are open source from here.

each one is 100 pixels high, with up to 100 pixels width - some (e.g. pawn) are a bit smaller at about 80.

As the hex 'squares' are 48x48, the pieces are loaded in to fit in the 'center', which is approx 32x36. As can be seen from the current results, the hexs do not align perfectly, in some cases leaving a thin margin. This is either caused by a little rounding error in the height/position calculation, the hex image file, or the android downscaling engine.

For the pieces, it can be seen that the knights are not quite centered, and the pawns are 'fat'. Also the black king is showing a bit of aliasing, or similar artefacts. I plan to fix this over the next few days - all images will be placed into the same height/width, and the drawing locations double checked for any rounding errors. In addition, I may work out how to convert the images so they are more scalable for different screen resolutions.