Xrays in GUIs

Xrays in GUIs

Xray materials can be part of GUI overlays. This page will describe how the "xray glasses" mentioned in the main Xrays article were created.

Creating the GUI

The image

GUI overlays should be 1024x1024 square images with an alpha channel, saved as either:

• .tga without RLE compression or
• .dds with DXT5 compression and generating mipmaps.

The GUI will be designed to apply the xray effect only to white parts of the overlay image. If you have artistic details like dirt smudges, it may be useful to also create a clean version of the image for purposes of cleanly restricting the xray effect, like below:

The materials

The next step is to make a material that uses these images. This is what "xray_glasses_overlay_mixed_warped" from the core assets looks like:

xray_glasses_overlay_mixed_warped
{
	description	"Xray GUI overlay for glasses that shows both the normal and xray models transparently. No xray vision through opaque obstacles. Has blurred effect."

	noshadows
	nonsolid

	{
		blend GL_SRC_ALPHA, GL_ZERO
		map makealpha(guis/assets/hud/glasses_overlay)
		maskcolor
		alpha 0.7
	}

	{
		blend GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA
		xrayRenderMap inclusive        
		program		heatHazeWithMask.vfp
		vertexParm	0	time * 0.008 , time * 0.005		// texture scrolling
		vertexParm	1	0.02							// magnitude of the distortion
		fragmentMap	0	_xray
		fragmentMap	1	textures/sfx/vp1				// the normal map for distortion
		fragmentMap	2	guis/assets/hud/glasses_overlay	// the distortion blend map
	}
}

This material has the following features:

• The first block creates an alpha mask from the white parts of the glasses overlay image. This allows to restrict the xray vision effect to only the central parts of the overlay image, while the black parts of the overlay image will still show normal vision.
• The line "alpha 0.7" determines how opaque the xray vision should be. If a value less than 1, xray models would appear transparent. At values greater than 1, they would appear unnaturally bright.
• The first 2 lines of the second block apply the xray effect to the areas defined by the abovementioned alpha mask.
• All later lines in the second block are optional, applying a heat haze warp to the xray image. The speed of the warp effect can be modified with the "vertexParm0" line, while the strength of the distortion effect can be adjusted with the "vertexParm1" line.

The GUI

Lastly, create a GUI folder in your FM, add a text file with the intended name of your GUI and change its extension to .gui (in this case: xray_glasses.gui). Then add the following contents to it:

windowDef Desktop
{
   rect      0, 0, 640, 480
	nocursor 1
	background "gui_backdrop_semiopaque"
	
	windowDef SquareFit
	{
		forceScreenAspect
		hcenter
    	rect      0, 0, 480, 480
		background "xray_glasses_overlay_mixed_warped"
	}
}

This GUI has the following features:

• it uses a background material called "gui_backdrop_semiopaque" from the core assets, which is simply a pure black image at half transparency. This fills out any space on the screen that's not covered by the overlay image itself.
• next comes a square window which will contain the overlay material, "xray_glasses_overlay_mixed_warped", which should consist of a square 1024x1024 image with an alpha channel. The keywords "forceScreenAspect" and "hcenter" will stretch the image to match the player's resolution settings.
• the 2nd "rect" line allows to adjust the overlay image. The first 2 numbers control its horizontal/vertical position on the screen, while the 2nd numbers control its horizontal/vertical scale.

The GUI is now ready to use. The most suitable way would be to create and destroy it from within the scriptobject of a "glasses" inventory item.

The inventory item

To make an "xray glasses" inventory item, an entity definition and a scriptobject are needed. The aim is to be able to press the "use" key (default: enter) while it's selected in the inventory to create or destroy the GUI overlay.

The def

The def should inherit from the "atdm:playertool" and point to a custom scriptobject to be made later on. Apart from that it needs a suitable model and inventory icon.

entityDef atdm:xray_glasses
{
	"inherit"				"atdm:playertool"

	"editor_usage"			"X-Ray glasses"
	"editor_displayFolder"  "playertools"

	"model"					"models/darkmod/wearables/headgear/spectacles.ase"
	"scriptobject"			"playertools_xray_glasses"

	"gui"					"guis/playertools/xray_glasses.gui"

	"inv_name"				"X-Ray Glasses"

	"inv_icon"				"guis/assets/hud/inventory_icons/spectacles"
	"inv_droppable"			"1"
	"snd_bounce"			"tdm_impact_knife_large"
	"snd_bounce_wood"		"tdm_impact_knife_large"
}

The scriptobject

#ifndef __XRAY_GLASSES__
#define __XRAY_GLASSES__

float wearing_xray_glasses;	//this is global for the benefit of the spyglass_overridable scriptobject

object playertools_xray_glasses : player_tools
{
	void init();
	void inventoryUse(entity userEntity, entity frobbedEntity, float buttonState);

	float overlayHandle;
};

void playertools_xray_glasses::init()
{
}

void playertools_xray_glasses::inventoryUse(entity userEntity, entity frobbedEntity, float buttonState)
{
	if ( !wearing_xray_glasses )
	{
		wearing_xray_glasses = true;
		overlayHandle = $player1.createOverlay(getKey("gui"), ZOOM_GUI_LAYER);
		sys.fadeIn('0 0 0', 1);
	}

	else
	{
		wearing_xray_glasses = false;
		$player1.destroyOverlay(overlayHandle);
		sys.fadeIn('0 0 0', 1);
	}
}

#endif //__XRAY_GLASSES__