Catan is a role playing strategy game I had not heard of before. A forum user asked how to recreate the game using AppInventor. The Power Users all got quite excited about creating groups of hexagons (?) on a canvas, but for me the solution was about a fairly long slog at creating all the assets, adding over 40 image sprites, and then randomising the positioning of the assets on the sprites. I did this for fun, and to experiment with the canvas and image sprites. The images should not really be used in production in case of copyright concerns.

What was needed:

• I used the classic theme, a fixed screen and a canvas height of 300 pixels, with width of 494 pixels

• The demo I have created may work better on a tablet, or newer high resolution phone

• I used Inkscape to "cut out" the board surrounding pieces (the sea and ports), and the resource hexagons

• I also used Inkscape to make the counter buttons (I could have made them at a higher resolution!)

• The canvas needed to be much wider than the screen, in order to allow for the image sprites to be "rotated" into position

• Each Image Sprite has a different Z order, e.g 1,2,3... This allows the rectangular shapes of the image assets to overlay each other for alignment. The Z orders are set in the Designer

• It was then simply a matter for each set of elements (Outer Board / Hexagons / Counters) in generating component and image lists, randomising the selection of images to assign to the sprites, and getting the positioning correct for each sprite.

• I needed to keep track of which sprite had the "Desert" image assigned to it, because this did not get a counter (having followed the game setup instructions on the Catan website)

• The mathematics were not completely precise for the positioning, hence I used the long hand version of setting the X and Y for each sprite.

What still needs doing:

• In essence, programming the rest of the game !

Anyway, here is the app in action:

VIDEO

AIA - Catanboard