0
\$\begingroup\$

I'm creating an HTML canvas map and I'm trying to have the edges of the tiles not appear square, as in the tiles merge in to each other. I've scoured the internet for hours but can't seem to find anything. How would I go about doing this?

Dropbox link to project

I've included the used images so when the project is downloaded and run on the browser, the map should look like the following picture. This is not how I want it to look but how it currently looks.

enter image description here

I know it's probably not possible to get this exact effect using a tile based map, and it's not a perfect representation, but here's a general idea of what I want to accomplish. Notice how the corners are no longer squared but have a more rounded look and appear to be blending in with the next color tile. That's my goal. enter image description here Thanks in advance.

\$\endgroup\$
2
  • 3
    \$\begingroup\$ Can you include an example of what kind of effect you want to create instead? The specifics matter for identifying the types of solutions to apply. \$\endgroup\$
    – DMGregory
    Sep 21, 2016 at 4:12
  • \$\begingroup\$ @DMGregory, sure, I can do a simple sketch to kinda show what I'm aiming for \$\endgroup\$
    – Robert
    Sep 21, 2016 at 8:17

1 Answer 1

3
\$\begingroup\$

You need to create some transitional tiles like these:

water transition tiles

Image source: http://opengameart.org/content/lpc-more-water-transitions (licensed under CC-BY-SA 3.0)

As you can see there are tiles in this set which are half deep-water and half shallow-water. This allows you to design the transition from one texture to another in your image editor.

The same technique should be used whenever you transition from one ground type to another. Here is another example for a tileset which has transitions from sand to grass:

various transitions

Source: http://opengameart.org/content/32x32-water-and-land-map-tilesets licensed under CC-0

You will notice that this tileset also includes transitions from textures to transparency. This allows you to place a half-transparent tile on an upper layer and full tile with a different texture on another layer behind it to blend them into each other automatically. How well that looks depends on the textures.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .