Intro to the X-ray Effect

This is a basic introduction to the x-ray effect that has been added to Wallpaper Engine. This uses an image editor(GIMP in my case), Wallpaper Engine, and a text editor(Notepad) to create a simple x-ray effect in around 5 minutes.

Video Example

I have a 5 minute video of me quckly going through the steps to make a x-ray wallpaper and a few options you have with the effect. I recommend reading before the video as I do attempt to move quickly and there is no audio or instructions in the video itself.

Finding a source image

For best results you want to find two high quality images that are very similar except for the portion that you wish to have the x-ray effect. In this guide I will be using AromaSensei's Brigitte and the bikini variant that is available on Tumblr.

Image source (Artist's Tumblr does contain NSFW content)[aromasensei.tumblr.com]

Creating the X-ray Layer

This step is technically optional, but I highly recommend it for quality results and an easier time with applying effects. Due to how Wallpaper Engine renders the x-ray it must be the effect on top and any animation will not function when the mouse is over the area. For all of my image editing I use GIMP[www.gimp.org]. It can be difficult to learn, but it is a very powerful free tool.

After loading the two images into your favorite image editor do your best to cut out the area which you want the effect to apply and create a transparent layer with that section. There are multiple methods to getting this layer including masks and automated filters. The more accurate the borders the better the result is with animation. I highly recommend feathering the edges as Wallpaper Engine can render black lines if the transition is not smooth.

Export that layer to your filetype(that supports transparency) of choice, png in my case.

Applying the X-ray in Wallpaper Engine

I will attempt to cover both having the x-ray layer or just two images at this point. Create your new Scene Project, add your base layer, add the x-ray effect, import/drag and drop the layer or alternate image into "Blend Texture." At this point you should have a working x-ray effect. To properly apply other effects x-ray MUST be at the bottom of the effect list at all times. And any effects applied to this model/material will not function when the mouse is present.

When adding other effects you may notice the x-ray breaking them when in the area. To improve on this you can either clean up edges with the opacity mask(completely remove non x-ray portions) or continue to trim the layer created in section 3. If you are just using the alternate image without edits you can use the opacity mask to remove sections of the image not used in the x-ray to help with animation issues. I find this this extremely inaccurate and frustrating when compared to an image editor.

Not shown in this guide, but the Sprite will be the object that reveals the blend texture and follows the mouse. It can be changed from the default for different shapes and sizes.

My example shows using the opacity mask to stop the x-ray from revealing the bikini bottom as an example of using the Opacity Mask feature.

Advanced: Changing the size and shape of the x-ray

Your x-ray effect is complete and most of the time it should be looking great and there are no issues. Very often though with >1920x1080px wallpapers the effect around the mouse will be too small for an effective x-ray. This is a slightly more advanced step allowing you to fix that issue.

When in Wallpaper Engine go to Edit > Open in Explorer. Windows Explorer should open to your project. Navigate to shaders > effects > xray.frag and open with your text editor of choice(Notepad works). Find the section that mentions scaling the sprite and look for vec2. Lowering the first value will increase the width of the x-ray area and adding a value to the second will increase the height. Play around with a few values while saving this file to figure out what works best for your project.

Final

Congrats! At this point you should have a solid grasp on using the x-ray effect. Any other wallpaper changes are outside the scope of this guide and I recommend looking to other guides for help.

The wallpaper that I created while making this guide can be found here:

https://steamcommunity.com/sharedfiles/filedetails/?id=1434847123

If you have any questions or constructive feedback about this guide let me know in the comments!

[WesleyPlaysGames]

I am thinking of doing my own drawing of Sky sometime.

[Mutr0c]

is there a way to reverse it? so i have have both image separated?

[PeixeDePeruca]

Thx for the help
Nice guide!!!