Search Unity

Making a pixel-art hex grid?

Discussion in 'Shaders' started by robochase, Jan 22, 2018.

  1. robochase

    robochase

    Joined:
    Mar 1, 2014
    Posts:
    213
    There's plenty of questions/answers/articles about making hex grids, but that's not the problem.

    My problem is rendering a hex grid for a pixel-art game. It's fairly easy to do a pixel art game with standard square/rectangular tiles, but in a hex-based game, you end up with tons of overlapping tiles. I'm not sure of best way to go about rendering this. My naive thought would be to have each hex be a sprite renderer and give each tile's png transparency. but I'd like to have a pretty big map, so tons of transparency sounds kinda gross (maybe it isn't?)

    I'd also like to add "transition"/edge pieces to the tiles to give them a more organic look. For example, imagine rendering a forest tile completely surrounded by grass tiles in two passes:
    1. put down the forest tile and surround it with grass tiles
    2. now add edge pieces along the edges of the forest tile to make it look bushier & not so hex-like

    Back in the day when I did flash stuff, you'd accomplish this by blitting textures to a block of bitmap data. I've read unity can do this too, but performance is supposedly iffy. I think for the game I'm imagining, I could probably get away with drawing the world once and caching it, instead of attempting to re-render it 60 times per second, as it likely wouldn't change much if at all. So maybe blitting could work...

    Any pointers are appreciated! Thanks :D
     
  2. McDev02

    McDev02

    Joined:
    Nov 22, 2010
    Posts:
    632
    Tiling hexagons seamlessly is an issue and the less resolution you have per tile the more difficult it becomes. For example you probably can't draw a hexagon with 4x3 pixels, at least none that also tiles seamlessly. Also perspective is another issue, you will only have a limited set of view angles combined with resolution that lets you tile perfectly.
    At least this is true for 3D pre-rendered tiles, doing it by hand maybe makes this redundant.

    If your map doesn't change at all, or at least your background then pre-rendering it into one or many textures sounds good. Otherwise you might want to place planes and merge them together with an atlas texture, this would work fine for realtime rendering. Usually for pixel art you use no transparency, but it might be interesting for things like grass and leaves of a tree to have semi transparency, but then bot solutions are at low cost.

    EDIT: Well it seems it is still possible with a 4x3 Tile. You just nee a bit of imagination. :)
    hexagon.jpg
     
    Last edited: Jan 22, 2018
  3. robochase

    robochase

    Joined:
    Mar 1, 2014
    Posts:
    213
    Hey thanks for the reply!

    I managed to get this working via good old SetPixels. It's fast enough for my purposes-I'm able to Render a 100x100 map in like 0.7 seconds.

    The trick is to completely edit the map in a Color32[] before passing it to SetPixels. Opposed to frequently calling SetPixels each time you stamp a new tile for example

    There might be a faster way to do it but my plan is to split this into chunks so that I don't need to force a whole map redraw when 1 tile changes.