#include "commonsetup.template"
techniqueSet( "2d" ); // set the techset to use >> root\raw\techsets

textureTable
{
    #if "$colorMap$" == ""
        #error "colorMap may not be blank in 2d materials"
    #endif
    // This references our image as "material.colorMap" in the technique we are going to create later on >> root\raw\techniques
    "colorMap" = map( "@tileColor@", "@filterColor@", "$colorMap$", @nopicmipColor@ ) "@formatColor@" : "2d";
}
refImage( "$colorMap$" );

#include "commonsetup.template"
techniqueSet( "z_scrolling_hud" );
/* ... */

   + materialType : "custom"
   + blendFunc    : "Blend"
   + Template     : "z_scrolling_hud" ( the name of the template file we created in step 1 )
   + Color map    : "Input your Image" : "tile both*"

"unlit":                // The lightstate / render technique ( 2d only uses unlit )
   vertcol_simple2d;    // This sets our technique >> root\raw\techniques

"unlit":
   z_scrolling_hud;   // same name as the techset/material template (could be anything but we wont re-use any of the assets for other shaders)

{
   stateMap "default2d";                       // Defines the statemap to use >> root\raw\statemaps
   vertexShader 1.1 "vertcol_simple.hlsl"      // Defines our vertex shader   >> root\raw\shader_bin\shader_src
   {
   }
	
   pixelShader 2.0 "vertcol_simple.hlsl"       // Defines our pixel shader    >> root\raw\shader_bin\shader_src
   {
      colorMapSampler = material.colorMap;     // Defines the Texture from our Material Template   >> root\deffiles\materials
   }
   vertex.position = code.position;            // Vertex Shader Input: Vertex Positions in local-space/model-space
   vertex.color[0] = code.color;               // Vertex Shader Input: Vertex Colors
   vertex.texcoord[0] = code.texcoord[0];      // Vertex Shader Input: Texcoords ( UV's in range 0.0f - 1.0f )
}

{
   stateMap "default2d";
   vertexShader 3.0 "z_scrolling_hud"        // Defines our vertex shader   >> root\raw\shader_bin\shader_src
   {
   }
	
   pixelShader 3.0 "z_scrolling_hud"         // Defines our pixel shader    >> root\raw\shader_bin\shader_src
   {
      colorMapSampler = material.colorMap;
   }

   vertex.position = code.position;
   //vertex.color[0] = code.color;           // not needed
   vertex.texcoord[0] = code.texcoord[0];
}

#define PC                       // Needed for linker
#define IS_VERTEX_SHADER 1       // Needed for the shader compiler
#define IS_PIXEL_SHADER 0        // Needed for the shader compiler
#include <shader_vars.h>         // includes our global constants needed in every shader ( included within the download below )

struct VertexShaderInput         // This struct contains our vertex data input defined in our technique >> root\raw\techniques
{                                // This uses something called SEMANTICS (like a pipeline into the shader)
                                 // >> https://docs.microsoft.com/en-us/windows/desktop/direct3dhlsl/dx-graphics-hlsl-semantics

   float4 position : POSITION;   // float4 defines the size, in this case x,y,z,w; we define the semanctic POSITION as position
   float2 texCoord : TEXCOORD0;  // float2 because we only need x y on a 2d element; this is our UV in range 0.0 - 1.0
};

struct PixelShaderInput          // This struct will contain the vertex shader's output that the pixel shader will be using
{
   float4 position : POSITION;
   float2 texCoord : TEXCOORD0;
};


PixelShaderInput vs_main(VertexShaderInput input)  // Writing into the struct PixelShaderInput, using struct VertexShaderInput as input
{                                                  // Note that the function has to be called "vs_main"
   PixelShaderInput output;

   output.position = mul(float4( input.position.xyz, 1.0f), worldViewProjectionMatrix);
   // - This transforms our vertex positions from local-space to projection-/camera-space by multipling our vertices with a transformation Matrix
   // - Because we defined position as a float4, we also have to return a float4
   // - The "w" component is more or less the depth (distance from the camera), we don't use that on a 2d element -> so we use a scale of 1.0f

   output.texCoord = input.texCoord;
   // - We don't need to transform our UV's, so output = input

   return output;
   // - Return the fully initialized PixelShaderInput struct ("output")
}

#define PC
#define IS_VERTEX_SHADER 0
#define IS_PIXEL_SHADER 1
#include <shader_vars.h>

struct PixelShaderInput             // This is the output struct from our vertex shader 
{
   float4 position : POSITION;      // The SEMANTIC -> POSITION is not used within the pixel shader! But we still want to keep it here
   float2 texCoord : TEXCOORD0;
};

float4 ps_main(PixelShaderInput input) : COLOR     // As the pixelshader is only outputting a color, we link it to the SEMANTIC COLOR
{
   float4 output;                                  // Defining the variables we're going to be using 
   float  newX;                                    // These can be defined within the code itself, I just like to define them at the top 
	
   // horizontal scroll                      // Creating the scroll effect:
   newX = input.texCoord.x + gameTime.w;     // Add gameTime.w to our x-texcoord
                                             // gameTime.w increases linearly forever, and appears to be measured in seconds
                                             // ( now we get horizontal texcoords(x) above the 0-1 range                         )
                                             // ( if you would have set "tile both*" to "tile none" for your image in AssMan     )
                                             // ( the image would only draw as long as the texcoords are in range 0-1            )
                                             // ( anything above that would just be clipped of, thats how tiling textures work   )


   // tex2D() samples our texture with the given texture coordinates (UV's) and returns a colored pixel -> float4 color ( x,y,z,w or r,g,b,a )
   // function float4 tex2D() : tex2D(sampler, float2 texcoords)

   // Instead of input.texCoord (xy), we use our manipulated x-texcoord with the original y-texcoord: 
   output = tex2D(colorMapSampler, float2(newX, input.texCoord.y));
	
   // If you want a fixed alpha channel (in-case your texture doesn't have one) with half the transparency we could do:
      // output = float4( tex2D(colorMapSampler, float2(newX , input.texCoord.y)).rgb, 0.5 );

   // We could also manipulate the alpha afterwards by doing:
      // output = tex2D(colorMapSampler, float2(newX , input.texCoord.y));
      // output.w = 0.5;

   // return float4 "output" As COLOR
   return output;
}

material,z_scrolling_hud

precacheShader( "z_scrolling_hud" );   // Precache our material
/* ... */ 

self thread addHud( );
/* ... */ 

addHud( )
{
   self.shaderTest = newClientHudElem( self );
   
   self.shaderTest.x = 0;
   self.shaderTest.y = 0;
   self.shaderTest.alignX = "left";
   self.shaderTest.alignY = "middle";
   self.shaderTest.horzAlign = "center";
   self.shaderTest.vertAlign = "middle";

   self.shaderTest.sort = 1;
   self.shaderTest.alpha = 1.0;
   self.shaderTest.hideWhenInMenu = false;
   
   self.shaderTest setShader( "z_scrolling_hud", 64, 64 );
}