21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Chuchycek
Profil
Ahoj,
chtěl bych udělat generování hexagonalní mapy, ale vůbec nevím jak začít, mohl by mě někdo kdo s tím má zkušenosti nebo někdo kdo ví nějak nasměrovat? Chci něco obdobného

Moderátor Alphard: Příklad mapy v klikatelném odkazu www.youreuropemap.com/europe_map_8.html

Díky
lachim15
Profil
www.dreamincode.net/forums/topic/258614-simple-rpg-map-generator/
http://stackoverflow.com/questions/9564525/random-map-generator-creating-areas-on-a-grid

Proletěl jsem to očima, nevím zda to bude fungovat, ale napadá mě, že by to mohlo jít upravit a změnit grafiku na to, co potřebuješ. Snad ti to pomůže.
Alphard
Profil
Chuchycek [#1]:
Předpokládám, že logiku pro rozložení máte a jde jen o grafiku. Generování mapy bych rozdělil na 3 kroky: 1. vykreslení hexagonu, 2. vykreslení rastru hexagonů a 3. vhodné obarvení.

1. Vykreslení hexagonu
Pomocí goniometrických funkcí se vypočítají jednotlivé vrcholy a ty se spojí čarou. Některé jazyky přímo podporují vykreslení polygonu a vyplnění zadanou barvou, ostatní mají na zalití uzavřené oblasti barvou samostatnou funkci.

Tady je příklad v Pythonu, podobně by to šlo udělat v jiných programovacích jazycích, nebo použít hotové obrázky v html (oblasti mimo šestiúhelník by musely být průhledné).
def hexagonVertices(edge, center):
    x, y = center
    for angle in range(0, 360, 60):
        x += edge*math.cos(math.radians(angle))
        y += edge*math.sin(math.radians(angle))
        yield x, y
    
def drawHexagon(draw, vertices, label):
    if not label:
        label = (150, 150, 150)
    draw.polygon(list(vertices), outline='black', fill=label)

2. Rastr hexagonů
Když už máme funkci pro vykreslení jednoho hexagonu na zadané pozici, je jednoduché vykreslit celý rastr. V závislosti na jejich orientaci (já je mám orientované ve shodě se vzorovým obrázkem) se v ose x posouvají o déku 3*a a v ose y o délku sqrt(3)/2*a, kde a je délka hrany. V závislosti na tom, jestli je řádek (nebo sloupec) lichý nebo sudý, se musí ještě posunout, v tomto případě o 1.5*a.

Tady je příklad v Pythonu, ale jde jen o 2 cykly a trochu matematiky, úplně stejně by šlo pomocí javascriptu a css absolutně pozicovat obrázky přímo v html (pak by šlo snadno pracovat i s hover efektem).
for row in range(rows):
    for col in range(cols):
        oddOffset = 0 if row%2==1 else 1.5*edge
        x = 3*edge*col + oddOffset + offsetX
        y = 3**0.5*0.5*edge*row + offsetY
        drawHexagon(draw, hexagonVertices(edge, (x, y)), labels[row][col])

3. Obarvení
Tohle je otázka aplikační logiky, která řekne, jakou barvu mají mít konkrétní buňky. Vykreslení rastru probíhá přes 2 cykly, takže stačí nadefinovat dvourozměrné pole a každé buňce přiřadit hodnotu, jak se má obarvit.

Tady je obrázek z mého příkladu a kompletní kód je kdyžtak na pastebin.com/PJEZc2fa.
Chuchycek
Profil
Chápu, takže vlastně nic složitého, oběma děkuji :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0