Build a Catan Game Board
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: