Jump to content

what is the best way to blend edge color of 2 neighbour polygon?


Recommended Posts

In my top-down view game, the terrain is formated with many polygon regions. each region has a different biome type. such as the below screenshot, one is a forest, another one has snow.  
It does not look good with a clear edge between the 2 regions. I want to make the edge colour blended, so the colour is smoothly transferred. 
appreciate any help, cheers. :)


2021-08-31 154843.jpg

Link to comment
Share on other sites

make one biome edge to go on top of another biome edge and add gradient. oh right, pixijs doesnt have gradients, you have to use your own shader for that, or wait when i add it to something like graphics-smooth

or maybe gradient texture on a rope can do it

Edited by ivan.popelyshev
Link to comment
Share on other sites

thanks @ivan.popelyshev, I spend this morning looking for how to implement gradient shader on polygon edge, did not work out yet, will keep trying.   Using rope for each region will make the logic more complex and I prefer the gradient option, by looking for the solution, I can improve my shader skill as well. :)


I need to mention one thing as well about the map,   other than polygon data for each region, I also have a mesh for all regions, I guess it will be easier to make the gradiant between regions on this map data, right?

Link to comment
Share on other sites

  • 2 weeks later...

I just worked out a way to make the blur looks good enough as I need.   how do you think @ivan.popelyshev

what I did:

1. background regions map blur - I simply made a BaseRenderTexture on the background graphic and made a sprite from it, the texture is generated with Linear ScaleMode, and make it low resolution to make basic color gradient

drawRegionShape(containerTemp, cachedMap, new MapColorDiscrete(), true, true);
const bgSprite = new PixiSprite(pixiTool.generateTexture(containerTemp, 1, 2));

2. apply a BlurFilter to the same sprite - this made a smooth gradient over the ScaleMode used in step 1, because step 1 still can see big rectangel pixel block when zoom in a lot. Using a BlurFitler further smoothed and make the issue to be less noticed

private _blurFilter: BlurFilter = new BlurFilter(128, 4);
bgSprite.filters = [this._blurFilter];
containerTemp.destroy({children: true});

3. since my game support very large scale of zoom, the fixed blur value on BlurFilter will cause noticeable difference when zoom out to map level and zoom in to very close region view. So I added a listener to dynamically change BlurFilter.blur value based on zoom level.

protected _watchCamScopeLevel(level, prevLevel) {
    this._blurFilter && (this._blurFilter.blur = 128 / level);


This solution also provide to me a way to customise the display of water region, here I attached a lake region screenshot.

What I did:

on the background render texture drawing logic of step 1, I used darker green as under water / wet soil color, on top of that I made a graphics with light blue, which I am going to replace with dynamic scrolling water surface texture by calling fillTexture.




The Region edge color gradient result





Here I attached some sample result images to show the color gradient (or say actually it is blur) on different scale level


Link to comment
Share on other sites

I noticed the BlurFilter takes 0.7ms per frame, which is not good. So I made little further improvement.

Firstly, make a container to draw all the regions on graphics same as above, then instead of generateTexture directly from container, I applied BlurFilter to the continer first, so when generateTexture, it uses BlurFilter effect on graphics output, then the generateTexture Linear scale will be smoothed beause of the blur effect, which with make a even better result than above step1 result.   ALSO more improtantly, it does not require render BlurFilter every frame;






Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...