Hexagons and stuff

Creating Games? Developing something for fun?

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5043
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Hexagons and stuff

Post by jacque » Sun Jul 22, 2018 5:07 pm

richmond62 wrote:
Sun Jul 22, 2018 2:41 pm
Part of the problem is that one cannot do this:

(pseudocode)

export snapshot from stack "myStack" to file "snap.png" as PNG


as one can easily manipulate which parts of a map are visible using windowShape.
Try exporting the snapshot from "this card" instead.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Sun Jul 22, 2018 5:18 pm

OK:

Code: Select all

on mouseUp
    set the windowShape of stack "Tile Maker" to 1023
   set the layer of image "hexMask" to 1
  export snapshot from this card to file "Xexxy.png" as PNG
    set the windowShape of stack "Tile Maker" to empty
   set the layer of image "hexMask" to 12
end mouseUp
where image ID 1023 / "hexMask" is a black hexagon.

I end up with an image of the whole card.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5043
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Hexagons and stuff

Post by jacque » Sun Jul 22, 2018 5:56 pm

Yes, you would. I haven't been following this closely, are you saying each hexagon is a stack? If so, you'd need to specify the stack as well: this card of stack x.

Edit : never mind, I see the problem. Export a snapshot using a rect instead and export as png to preserve transparency. Just a guess.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Mon Jul 23, 2018 5:50 pm

hextiles.jpg
hextiles.jpg (16.91 KiB) Viewed 1462 times
-
What I am trying to do is work out a way to chop a map image up into
hexagonal tiles for use in games.

"Square tiles have typically been viewed as inferior because the distance from the center of one tile to the next is not constant (moving diagonally moves you further than moving side to side), while a move in any direction from a hexagonal tiles is equidistant."

출처 : Korea IT Times(http://www.koreaittimes.com)

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Tue Jul 24, 2018 8:31 am

It is dead easy to make a regular hexagonal graphic and set its backPattern to an image:

Code: Select all

on mouseUp
     set the backPattern of grc "hex" to the ID of img "carpet"
end mouseUp
Of course, if the image be bigger than the graphic only part of that image is displayed inwith the graphic . . .

I wonder if there is a way to determine which part of the backPattern is displayed in the graphic object?

THAT would enable one to chop an image up into hexagonal tile images "just like that".

bwmilby
Posts: 264
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Hexagons and stuff

Post by bwmilby » Tue Jul 24, 2018 1:41 pm

Would a rect with a width of 2x and height of sqrt(3)x be fully displayed (I.e. just cut off at the edges from left/right point to flat edge end points top/bottom)?
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Tue Jul 24, 2018 6:55 pm

I am afraid I don't understand what you mean.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5043
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Hexagons and stuff

Post by jacque » Tue Jul 24, 2018 9:18 pm

Okay, try this.

1. Import an image of the entire tiled map and place it on the card.
2. Create a hexagonal graphic, opaque, backcolor white. Set the blendlevel temporarily to 50.
3. Size the graphic to exactly fit over one tile in the map.
4. Option-drag it to duplicate as many as you need to cover the all the map tiles.
5. Select all the graphics and change the blendlevel to 99.

Put this handler into the card for testing:

Code: Select all

on mouseUp
  put the number of the target
end mouseUp
As you click on tiles you should see the number change. I do see slight micalculations of the target if the click is at the very edges, along the borders mostly, but in general LC will only recognize the filled part of the graphic provided it is opaque and has a fill color, which this does. The trick is to set the blendlevel to 99 which is not visible to the human eye, but does make LC think it is opaque and filled.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 264
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Hexagons and stuff

Post by bwmilby » Tue Jul 24, 2018 10:31 pm

So, here is what I was thinking. The below image show the rectangles that need to be captured and then clipped for each hex tile.
hex2.png
hex2.png (106.29 KiB) Viewed 1393 times
Based on then math, if each side of the hexagon is 1 unit, then the height is sqrt(3) units and the width is 2 units (assuming flat top/bottom). So if you chose a 30 pixel side, then the width would be 60 and the height 52 (51.9615).

I'm thinking that if you captured overlapping 60w x 52h rectangles and clipped them using a hexagon you would end up with the desired tiles. The question remain as to if there is any margin to the clipping that is done when made a backpattern.

Running left to right, top to bottom, you would skip the first red rectangle. Then skip the half width space.
The first actual tile would be 90,0,150,52. Then the rest of the row would be skipped.
Next, you would do the first yellow row. The first 3/4 space is skipped. First tile is 45,26,105,78. Skip the half space and capture 135,26,195,78.
Then do the next red row, etc.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Wed Jul 25, 2018 7:05 am

Okay, try this.
Thanks, Jacque, that will work as far as it goes:

i.e. for a static map.

HOWEVER:what I am looking for is a way to take hexagonal snapshots and end up with a complete
set of hexagonal "cards" of my map picture so that they can be moved around with GRAB and so on.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Wed Jul 25, 2018 10:06 am

To reiterate:
It is dead easy to make a regular hexagonal graphic and set its backPattern to an image:


on mouseUp
set the backPattern of grc "hex" to the ID of img "carpet"
end mouseUp

Of course, if the image be bigger than the graphic only part of that image is displayed inwith the graphic . . .

I wonder if there is a way to determine which part of the backPattern is displayed in the graphic object?

THAT would enable one to chop an image up into hexagonal tile images "just like that".
To illustrate:
-
xx.png
xx.png (125.78 KiB) Viewed 1358 times
A small picture that I want to chop up into hexagonal tiles.
-
zz.png
zz.png (25.48 KiB) Viewed 1358 times
A snapshot of a graphic object with the picture as a backPattern.

Obviously, were there a way to manipulate where the backPattern were in relation to the 'frame' of the graphic object one could prepare hexagonal tiles (with transparent sections outwith the hexagonal border of the graphic object) of the whole picture.

Richmond fantasy time:

(pseudocode)

on mouseUp
set the backPattern of grc "myFrame" to the ID of img "myPicture"

set the left of img "myPicture" to the left of grc "myFrame"
set the top of img "myPicture" to the top of grc "myFrame"

export snapshot from grc "myFrame"
end mouseUp


Now, currently, the purple lines of code will
only move the backPattern image, and NOT move it inwith the graphic object.

As a result one cannot produce tiles featuring other parts of a 'map':
-
ramka.png
ramka.png (28.4 KiB) Viewed 1358 times

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5043
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Hexagons and stuff

Post by jacque » Wed Jul 25, 2018 5:53 pm

Right, a back pattern is always drawn from the top left and there is no way to reposition it. Looks like you'll have to use bwmilby's suggestion and cut out individual patterns for each piece.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3359
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Hexagons and stuff

Post by richmond62 » Wed Jul 25, 2018 9:18 pm

cut out individual patterns for each piece
Well, that can be done with GIMP or another graphics program; although it is slow and tedious.

I had hoped to come across a way to automate that inwith LiveCode.

SparkOut
Posts: 1984
Joined: Sun Sep 23, 2007 4:58 pm

Re: Hexagons and stuff

Post by SparkOut » Wed Jul 25, 2018 9:51 pm

I felt sure one of Hermann's fantastic stacks could be used. Perhaps this one can be adapted?
http://forums.livecode.com/viewtopic.ph ... 31#p149831

bwmilby
Posts: 264
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Hexagons and stuff

Post by bwmilby » Thu Jul 26, 2018 6:40 am

How is this for a start? I created the img objects by hand, but for more than a demo would do it automatically. I also didn't figure out the transparency piece.

Code: Select all

on mouseUp pMouseButton
   local tLeft, tTop
   
   put 0 into tLeft
   repeat with tCol = 1 to 5 step 2
      put 0 into tTop
      repeat with tRow = 1 to 3
         export snapshot from rect tLeft,tTop,tLeft+60,tTop+60 of this card to img "box"
         set the backPattern of grc "hex" to the ID of img "box"
         export snapshot from grc "hex" to img ("r"&tRow&"c"&(tCol))
         
         export snapshot from rect tLeft+45,tTop+26,tLeft+105,tTop+86 of this card to img "box"
         set the backPattern of grc "hex" to the ID of img "box"
         export snapshot from grc "hex" to img ("r"&tRow&"c"&(tCol+1))
         
         add 52 to tTop
      end repeat
      add 90 to tLeft
   end repeat
end mouseUp
hexsplit.png
Last edited by bwmilby on Fri Jul 27, 2018 4:03 am, edited 1 time in total.
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

Post Reply

Return to “Creating Games”