Hi there!

I'm making hexagon tiles for a game but am a bit stuck at the moment. Looking for general advice.

So I have all the geometry data I need to create a tile set. A Tile holds a collection of land section (polygons) to be considered Land. The remaining area should be considered to be Water.

My question is what are my options when it comes to rendering. Please see my first attempt below which uses Konva.js to simply put a background fill image in the land and water areas. However, the repeating gives ugly lines in the image. Trees are cut by the shoreline. And the shoreline is just a black line - ideally there should be some sand/wave colors here. And so on…

How can I take the rendering to the next level and fix those issues?

What are some keywords/concepts I should learn about?

Currently Im in a JavaScript context but other environments might be interesting for pre rendering images/textures?

Im a total beginner with graphics so any advice is appreciated ?

Some of my unfinished code can be found here: https://github.com/ajthinking/hex-tile-factory/tree/master/resources/js

I see three possible approaches to approach this:

1. You hand-draw every individual tile. If you have less than 100 unique tiles, this is probably the easiest approach.

2. You generate a height field for each tile. Take your base geometry, blur it, overlay a noise function. Assign colors based on slope, altitude, and more noise. Randomly place individual tree and rock objects. You'll end up with a fairly complex 3D object for each tile, ready to be imported into a 3D engine for realtime rendering. Or you can feed it to an offline 3D renderer if you want 2D tile images.

3. Or, if you're happy with something faster but less fancy, try vector graphics:

• Create a bezier path from each coastline to smooth it out.
• Make the path itself yellow. Make the land (everything on the inside of the path) green and the water (everything outside the path) blue.
• Randomly place trees as 2D icons on the land.

Thanks@a light breeze , great advice here! I think I'll start with with approach #2