Best way for creating a 2D top down grid map

Hey all,

My goal is to create a game where the player view is always from the same angle: Top down, totally 2D, graphics based game.

345368-example-1.png

Then when I move 1 grid north and 1 northeast it just shifts into this:

345369-example2.png

It’s a 7x7 grid that changes without animation as your character moves. I need to be able to single click, double click, and right click each individual hex.

My goal is to pull data from a file that holds the floor type, wall type, and any other tile based graphics from a file, find my character’s location, and generate a 7x7 grid off of that so I can keep the data non-client side, and I can keep rendering/graphics to a minimum. But I need to do it in a way where my images are “layered” so I can have more than one texture per tile. And eventually AI spawns appear on each of those hexes.

My question is with all those parameters what’s the best solution? Can I spawn and transform actors for each segment of the grid in relation to my character location? Is it optimal to just make a UI Image transform as part of the UI (since no real graphics are needed)? I don’t want to have to make an entire tilemap but I could if needed, but I’d need to make every individual hex have right, left and double click functions.

For example I’m at location 120, 57. For hexes 117-123,54-60 I want it to pull data from a json or xml file that has data similar to:

  <tile x="13" y="1">
    <component type="FloorComponent">
      <ground>91</ground>
    </component>
    <component type="WallComponent">
      <wall>446</wall>
      <destroyed>0</destroyed>
      <ruins>44</ruins>
      <indestructible>true</indestructible>
    </component>
  </tile>

Then pull the corresponding graphic for floor type 91, and layer the 446 type wall on top of it.

And when I walk again I want it to update character position and the next 49 actor grid and replace those graphics onto my UI.

I appreciate any thoughts on this.