So I am reading an image from a png file into a 2D sprite. This sprite serves as a "province" in my game. Currently, I am getting this:

enter image description here

If you look closely, you will notice that you are seeing the square corners of each pixel, because I am mapping the image on a 1:1 ratio of pixels:world coordinates.

What I want is a slightly rounded corner in these places. Look at the 2-dimensional provinces in this example:

enter image description here

I have been googling around for algorithms, but most answers simply say "use a shader" and don't describe the techniques used to do this (until now I have not done much with shaders). If you would like to see my working code for the province system, it is posted on my answer to my own question here.

  • 1
    \$\begingroup\$ I might be misinterpreting or missing something obvious - but isn't that just a higher resolution picture with more detail? \$\endgroup\$ – Charanor Feb 10 '17 at 0:08
  • \$\begingroup\$ @Charanor The map image I am loading is already 8000x4000 (or around that size, anyway). To achieve the resolution I would need to load insanely large textures into memory (and since I am targeting some of the higher end Android tablets, there is a limit to what I am able to do). For a comparison, Paradox loads their maps from much smaller textures, and use custom shaders (in their own shader language with built-in functions) to make most of their cool effects happen. \$\endgroup\$ – JDSweetBeat Feb 10 '17 at 14:08
  • \$\begingroup\$ But just because it's larger doesn't mean that it automatically has more detail. If you want jagged / smooth non-square edges surely you just make it in your image editing software? Why make a shader that's probably slow and has to do extra work? You will always have to have large textures for a large scale 2D map, unless your map is constructed using vector graphics or a 3D mesh (Like Total War, for example). \$\endgroup\$ – Charanor Feb 10 '17 at 14:29
  • \$\begingroup\$ @Charanor Each province is about 100-300 pixels in total. I map each pixel to 1 world coordinate. I am unsure about how to make a more detailed textures without more pixels as the lowest "unit" of editing in gimp is a pixel... \$\endgroup\$ – JDSweetBeat Feb 10 '17 at 15:08
  • \$\begingroup\$ Now that's a whole other question. You should (almost) never use 1:1 relationship between pixels and world units. You should look into viewports and how to change the size of the unity viewport. \$\endgroup\$ – Charanor Feb 10 '17 at 15:20

One economical way is to perform tile-based rendering, but have lots of variations in tiles depending on the edge type (straight edge, inner corner, outer corner etc.) Here's an example:

Land Tileset

Note that despite the appearance of a very complex coastline, you can pick out variations of coast types, where each variation within a type are interchangeable. For example, here are all the variants where the coast goes from the top-left corner to the bottom-left corner, with the land on the upper diagonal:


  • \$\begingroup\$ man I wish I'd seen this tileset image a month ago, that would've been so useful for a project I'm working on! \$\endgroup\$ – jhocking Apr 28 '17 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.