Creating hexagon buttons next to each other

[ezra golombek]

I am creating a version of Catan but not sure how to create hexagon shaped buttons next to each other how do you think I can do so ?

[SteveJG]

Hexagon Buttons?    Sorry you cannot create a Button.   

You can simulate a hexagon shaped button on a Canvas.

Either use hexagon images on sprites and use the sprite on a Canvas as described https://groups.google.com/forum/#!searchin/mitappinventortest/canvas$20buttons%7Csort:date/mitappinventortest/3o5DCOEBhco/eVFmqAirBAAJ  . This could work but what you probably want to do is 

use a background of hexagon images on a Canvas to create a game board where each hexagon is a different color 

Use code similar to the code here to select a hexagon based on its color https://groups.google.com/forum/#!searchin/mitappinventortest/canvas$20buttons$20color%7Csort:date/mitappinventortest/ttjjP_yH4xE/OhAccaIZBgAJ The Forum discussion shows how to get the hexagon /buttons/ to work.

Is this what you want to do Ezra?

Regards,

Steve

[ezra golombek]

I tried using a canvas but could't get the hexagons aliened. Any idea how I would align them? (for the top answer)

second one i don't think i understood.

 Thanks,

Ezra

[SteveJG]

Use a single image of hexagons already aligned as shown in the image Ezra.  Just copy the image of hexagons to your PC and load that image as the Canvas background.

[ezra golombek]

Steve do you think i can call you threw duo or something to explain what the problem is,If not I totally understand

thanks again

Ezra.

[SteveJG]

For the top answer...yes, it is impossible to 'align' the hexagon buttons that way.  Sprites are always rectangles, even if you set background transparency of the image you use with the sprite. You can make a series of hexagonal buttons using sprites but you can not place them next to each other as in the image I posted.

 

To simulate 'aligned' buttons you should attempt the 'bottom' answer.  Download the hexagon.png and load it to the Canvas background..

Then create the Blocks shown in the Forum 'bottom' example.

Does that help you?

[SteveJG]

This example aia might help   .  Up load the aia to your Designer.  The hexagons are created with a PC graphics program.  You will have to make a similar png image for your game.

the yellow, red and purple hexagons are active.   Touching them and holding the touch will display their 'color' in the app's Title bar.  Releasing will show the code # value for each 

color.

Try it.

--

In the Designer, it will look something like this.

[ezra golombek]

Its great but but there is a issue with it:

I need to be able to change the location of the colors every game.

Thanks so much,

Ezra

[SteveJG]

...different colors every game?  1) use  multiple hexagon maps (identical to the one posted but with different colors) and the same hexagons.   If you use the same color set for filling hexagons on each game map (but color different hexagons) using multiple 'maps'  might work.

or 

2) use the Canvas1.DrawShape block to draw a hexagon.  Draw more hexagons adjacent to one another Set the fill color for each x,y location to a different color.   Complex but possible. Maintain a List of coordinates you  post to the Canvas,  use the Any component Blocks to fill the individual hexagons.  This means drawing each hexagon and coloring them differently using the DrawShape   A LOT of work.

Good luck.

[ezra golombek]

I think this photo will help understand my problem:

This has 3 red,4 green,3 grey,4 yellow,1 bagge and every game the board has to change the layout

from this layout (for example)

to this layout

[ezra golombek]

By the way thanks allot for helping me (you have thought me stuff i would have never known

[SteveJG]

so, you might replicate the png map with different colors using Paint or other drawing program.  Save the revised imaget as map2  .   Make a dozen or so different, maps and save them in Media.  When you start the game, load one of the boards randomly. into the background so each game start there will be a different map.

You create the other maps something like

using the paint bucket to fill the colors in the hexagons.   You can 'hide' the hexagons you don't need/want by erasing them.   Start experimenting.  

Maybe someone else will have some other ideas.

Oh, you can draw a single hexagon like this 

If you use the original back ground, it will draw a hexagon (red) over the existing red hexagon.

Good night.

[TimAI2]

Not sure if this will work in production, but worth a try, and will take some complex coding to get it to work ?

Make a blank map

Make transparent background images of each hexagon type required (with/without number ?)

Make transparent background images of each number

Upload all of these as assets

Set a canvas to a fixed size and set the blank map as background image

Drag out an image sprite for each hexagon location, and give them ascending Z orders (or different Z orders if they are adjacent)

Drag out another set of image sprites to the centre of each hexagon for the numbers, give all these sprites a much higher Z value - these will be the ones to respond to touch events

Use lists to generate the positioning of hexagon images and numbers

This way you should be able to program/code/block your hexagon map...

Sample/starter aia attached (after edit)

[TimAI2]

Having never heard of Catan

http://www.profeasy.com/Settlers_Boardgame/index.html?mode=3

[TimAI2]

Done a bit more work on this. the blocks below will set the hexagonal tiles randomly for the beginning of the game

The same can be done for the numbers (but I believe you leave out the centre hexagon)

If you want to randomly set the outer ring and the sea (as in the board game) you can do much the same with sprites (suggest this is done first with lower Z values)

[ABG]

There's also the trigonometric approach ...

https://stackoverflow.com/questions/7142931/how-to-draw-manage-a-hexagon-grid

For the touch tests, consider keeping a table

of cell center coordinates ((x1,y1),(x2,y2),...)

and write a lookup function that will return the

index of the cell center that most closely matches

a given (x,y) touch coordinate.

ABG

[ABG]

If you don't mind a bit of ugly

but would like a chance to use the Any blocks,

you can build on this design, attached.

The trick is to center everything, and use a constant

16 percent width.

ABG

[TimAI2]

Slightly less ugly ;)

[Juan Antonio]

Beautiful, with DrawShape.

[Chris Ward]

Hi Juan

Indeed perfect shapes that are perfectly arranged, but with reference to Ezra's example layouts, we can't rely on Pixel Colour to know which hexagon is tapped by the User because each contains a complex image. So I think the easy solution is to use transparent buttons, as per the suggestions from Tim and ABG, or to use your solution with the ordinates of a (not drawn) circle inscribing the sides of each hexagon to facilitate picking.

[ABG]

I'm liking Juan's solution, for its beauty and for

allowing us to generate a table of (x,y) centers for 

touch proximity calculation, regardless of color.

ABG

[Chris Ward]

Yes, if we have the centres, then a tap on a hexagon can be tested via canvas touch-down point.

Traditional Test using a List of Shape centres: If the distance between touch down point and hex centre is the hex inside circle radius or less, then the given hex has been touched, else check the next hex. 

[Chris Ward]

..in fact, even simpler, just compare distance from tap point to each hexagon centre point, shortest distance yields the tapped hexagon.

[TimAI2]

Chaps

Clever as we all are ;)

We have to make this:

The blue section is in 6 pieces, and they are not all the same, but they all fit together whichever way, they will have to be images

The hexagons need to be images as you see them

The numbers need to be images as you see them

All of these three sets of elements need to be applied randomly at the beginning of the game (except that no number goes in the desert hexagon - see middle left !)

[Chris Ward]

... Is it entirely necessary to 'build' in that way?

It would be much easier if each set or page was simply a single image set as the canvas background. All the App needs to know is where the hexagon centres are and which number is associated with which hexagon centre.

[Chris Ward]

...If a single image, you can define a much nicer game style appearance, as per the examples. It would also be possible to have a single semi-transparent sprite that is made fleetingly visible over the selected hexagon to give the impression of a button tap.

[Chris Ward]

Roughly like this:

The attached Project File "Hexagons.aia" shows how to use the "map" method. Load the Project into App Inventor and then run the App in the Emulator, Companion or as an APK. 

I have set it so that the Hexagon tapped is momentarily highlighted and the number on the hexagon is reported in a Label component. The Emulator does not show the highlighting, the Companion/APK on the phone does.

[Chris Ward]

Hi again Ezra

Updated file attached "Hexagons2.aia"

I have added a 2nd page to my example using your second image (whose numbers are difficult to see on a phone). So, just hit the 'Next' button to change pages. Lists are very useful things in App Inventor :)

[Juan Antonio]

Another idea, set a circular sprite over each hexagon (square sprite with circular transparent background.)

In this example I use a DrawShape, the programmer must place each hexagon manually. 

The hexagons have a plain color, not a background image. 

In this example I think we can see a bug in the canvas, when the user presses the hexagons they move. When  Button1 is pressed again, they are redrawn and no longer move.

[Juan Antonio]

With hexagonal sprite (square sprite with transparent background)

[ezra golombek]

Do you think its possible to:

1:Add Lines around each hexagon that can be changed colors without resetting board

2:have numbers that can change on the board without resetting board

3:have the colors be from a set 19 different colors

4:make a grid like the one here:

Thanks for all the help,

Ezra

[TimAI2]

Yes, see my first post in this thread....

[ezra golombek]

Also do you think its possible to store what the board looked like and save each tile where it was?

Thanks again!

Ezra

[ezra golombek]

but how would i align the photos?

Thanks,

ezra

[ABG]

Juan Antonio's example using the draw shape block

has the math in it to draw the hexagons, based

on lists of 6 corner locations each.

The center of a hexagon is the average of the first and fourth

corner locations of that hexagon.

ABG

[ABG]

To see how to load and save sprite locations,

read this doc ...

https://docs.google.com/document/d/1AuhZjdMP55Cl9uOrrPG6x_FpZHlPInTaUfEhiwzDUh8/edit?usp=sharing

ABG

[TimAI2]

@ ezra

I have worked up a full solution for creating a Catan game board, using the canvas and image sprites

https://sites.google.com/view/metricrat-ai2/guides/build-a-catan-game-board

This could serve as a starting point for you....

[Ezra Golombek]

Thank you so much!

You have made it possible for me to continue creating the game!

Thank you,

Ezra

[Ezra Golombek]

Just wondering-

1)why are the hexagons not fully aligned

2)how would i be able to add "roads" to the game (colored lines around each hex that can be changed) also little dots on every intersection of 3 hexes a spirite that can be changed

Thank you

-Ezra

[TimAI2]

1)why are the hexagons not fully aligned

Because I drew everything by eye using a poor resolution base image form the Catan website

This was intended as an example, generated out of the goodness of my heart :)

2)how would i be able to add "roads" to the game (colored lines around each hex that can be changed) 

If the coloured lines (roads) can always be "on top", then use the drawLine block for the canvas, you will need to work out the x1y1x2y2 co-ordinates for each of the 6*19 positions

also little dots on every intersection of 3 hexes  ??

Possibly the same as above?

note: any line or text drawn will be on top of any image sprites, there is no Z index for lines, text, arcs etc.

a spirite that can be changed ??  

All sprites can be changed....but you need to give more detail about what you mean...

[Italo]

With a little simple math, you can come up with a calculation to align the hexagons right.

An hexagon width just happens to be divisible by 4, the first and the last fourths parts of it are exactly the diagonals:

That makes everything very easy to calculate a little aligning algorithm.

The next hexagon X position can be calculated this way:

NextHexagon.X = CurrentHexagonX + (HexagonSprite.Width - (HexagonSprite.Width / 4 ))

and the next hexagon Y is 

NextHexagon.Y = CurrentHexagonY - (HexagonSprite.Height / 2 )

because the next hexagon Y or "line" is exactly in the middle of the previous hexagon.

If you implement this in a loop, then you can automate the aligned "tiling" of your hexagons.

Does this makes sense?

[TimAI2]

That is fine, but a better effort of creating the hexagon images for the sprites in the first place is needed :)

(as I said, my effort was just an example)

[TimAI2]

Also, from the image I used, the hexagons are not regular, slightly taller than wide.....