Go to Top

How To Remove White Pixels That Appear Around The Visible Blocks Of Your Texture


(c) copyright Zehne Ziba Co., Ltd. For more information, please refer to copyright notice.

Introduction

If you have ever used textures with alpha channels in your preferred game engine, you may have noticed white pixels around the visible pixels of your textures, specially at far distances. Game engines use several methods such as mipmapping or blilinear filtering to display textures at different sizes on screen. These methods mix transparent pixels with the adjacent visible pixels causing the colors leak through. By default, Photoshop uses white color for transparent pixels, so game engine averages edge pixels with white color of transparent pixels resulting in visibly whiter pixels around the edges. To cope with this problem, we should make sure that completely transparent parts of our texture masked by alpha channel have a color which matches their neighboring pixels. In this tutorial, I use Flaming Pear Free Plugins pack to change the color of masked pixels and fix the white color issue.

Flaming Pear Free Plugins For Adobe Photoshop

Download Flaming Pear Free Plugins pack (bottom of the list) and unzip freebies.zip file. Go to Fribies folder, copy all 8bf files, and paste them to plugins directory of Photoshop ([Photoshop Directory]\Plug-ins\Filters). Now run Adobe Photopshop, choose Filter menu and make sure that Flaming Pear is on Filter list (Filter | Flaming Pear).

Leaf Image

I have already uploaded a leaf image for this tutorial. Download and open the png file in Photoshop.

Loading And Saving The Selection

From the main menu of Photoshop, go to Select | Load Selection. In new dialog that appears, press OK to confirm. This will select the leaf pixels.

Photoshop-Select-Load-Selection

To create the alpha channel based on your selection, go to Select | Save Selection. Give your alpha channel a name and press OK.

Photoshop-SelectSave-Selection-Alpha-Channel

Now press Ctrl + D to deselect all (or press Cmd + D if you’re using Mac).

Solidify B Filter

In order to match the color of transparent pixels with their neighboring visible pixel, go to Filter | Flaming Pear | Solidify B (You can also try Solidify A or Solidify C and see which one works best for you).

Game-Development-Tips-Flaming-Pear-FreeLeft: Original image, Right: Same image after applying Solidify B filter

References

arrow-leftPrevious Tutorial

Next Tutorialarrow-right

Let’s stay in touch!

Never miss a single tutorial, sign up for our monthly newsletter. You can unsubscribe at any time if you wish to stop receiving email newsletters from vandaengine.org

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Simple Share Buttons