The Effect editor is a simple text editor with 2 edit boxes that allow you to modify the .XML and .FX files at the same time. The editor also contains an Apply button to apply your changes to the preview window, and an Ouput window that displays the result of the compilation of the FX file by Direct3D. It also shows you the current line number, below the preview. When you have modified your effect you can close and replace the current effect or create a new effect with the Save As button.

Note : if you use Windows Vista or Seven and want to edit, modify or create new effects with the Clickteam Fusion 2.5 effect editor, you should unprotect the Effects folder of Clickteam Fusion 2.5 to be able to save files inside. To do this, right click this folder in the Clickteam Fusion 2.5 folder, select Properties, select the Security tab, click Modify, select the Users entry in the first list, select Total control / Allow, and then click OK twice.

• A Direct3D .fx file is a source code file that usually contains :
  • the definition of input / output data structures
  • the global variables used by the shader
  • the shader function(s)
  If you have never made a pixel shader, we suggest that you look at the source code of the Horizontal Flip effect of Clickteam Fusion 2.5 (FlipX.fx/xml files in the Clickteam Fusion 2.5 Effects directory) while you are reading this documentation. It's a VERY simple shader that you should easily understand.
  
  Note: Clickteam Fusion 2.5 only supports pixel shaders, it doesn't support vertex shaders.

   

  Content of a .fx file

  • Input / output parameters
    • struct PS_INPUT
      {
          float4 Position : POSITION;
          float2 Texture : TEXCOORD0;
      };
      
      This structure defines the input parameters passed to the pixel shader function. The Texture variable contains the X and Y coordinates of the pixel in the texture being processed. Those coordinates are UV coordinates, between 0 (left/top) and 1 (right/bottom).
      
      struct PS_OUTPUT
      {
          float4 Color : COLOR0;
      };
      
      This structure defines the output value of the pixel shader function. It's a simple RGBA value.
      
      Note: if you prefer, you can also just use a float4 value instead of defining a PS_OUTPUT structure with a single float4 member inside.
    
    
    
     
  • Sampler variables
     
    • sampler2D img;
       
      • This is the minimum global variable to define in a shader, it contains a 2D sampler associated with the texture passed to the shader (the object's image).
      
      
       
      
      If your shader needs to access the background, add the following sampler2D for the background texture :
       
      • sampler2D bkd : register(s1);
        
        You will need to specify <BackgroundTexture>1</BackgroundTexture> in your XML file, see below.
      
      
       
      
      If your shader accesses other images, add one sampler2D per image :
       
      • sampler2D image1 : register(s1);
        sampler2D image2 : register(s2);
        etc.
        
        Start from register(s2) if you also use a background image sampler. And you will need to add these images as parameters in your XML file.
      
      
       
    
    
     
  • Other variables :
    • int var1;
      float var2;
      float4 var3;
      
      Optional, defines global variables that you can use in your shader function. You have to add a <parameter> section in the XML file for each variable you need to retrieve/change from the Clickteam Fusion 2.5 events and properties. 3 data types are supported in the Clickteam Fusion 2.5 events and properties :
      
      int = integer value
      float = floating point value
      float4 = set of 4 floating point values between 0 and 1 that correspond in Clickteam Fusion 2.5 to a RGBA color (each component between 0 and 255 in Clickteam Fusion 2.5 is converted to a floating point value between 0 and 1). In the XML file this type of variable must be used in conjunction with the int_float4 property type.
    
    
     
  • Predefined variables (optional)
    • float fPixelWidth;
      float fPixelHeight;
      
      Declare the fPixelWidth and fPixelHeight values if you need to know the width and height of a pixel (equal to 1/texture_width and 1/texture_height).
    
    
    
     
  • Shader function
    • The shader function is called for each pixel in your object's image. It gets as input parameter the coordinates of the pixel in the texture and must return the color of the pixel.
      
      Example of pixel shader function :
      
      PS_OUTPUT ps_main( in PS_INPUT In )
      {
          PS_OUTPUT Out;
      
          float2 coord;
          coord.x = 1.0-In.Texture.x;
          coord.y = In.Texture.y;
          Out.Color = tex2D(img, coord);
      
          return Out;
      }
      
      As explained above in the "input / ouput parameters" section, In.Texture contains the pixel coordinates (between 0 and 1), and the function returns the color of the pixel.
      
      tex2D(img, xy) is a HLSL function that returns the color of the pixel at the xy coordinates in the img sampler.
      
      The routine above just flips the image horizontally.
      
      technique tech_main
      {
          pass P0
          {
              // shaders
              VertexShader = NULL;
              PixelShader = compile ps_1_4 ps_main();
          }
      }
      
      This section allows to specify the shader function (ps_main) and the minimum shader version number it requires, here 1.4. You can also set render states.
    
    
     

• Each .fx file is associated in Clickteam Fusion 2.5 with a .xml file, with the same file title. The .xml file contains info about the shader and its parameters. Here is its format :
  • <effect>
    <name>Put here the effect name</name>
    <description>Put here a description of the effect, displayed in the Effects dialog box</description>
    <author>Your name here</author>
    <company>Your company here</company>
    <copyright>Copyright @ 2010 Your Company</copyright>
    <website>www.your_web_site.com</website>
    <email>someone@somewhere.com</email>
    <dx8>yes or no, depends if your shader works with DirectX 8 (usually no unless your shader is in asm)</dx8>
    <parameter>
        <name>Name of parameter 1, displayed in the properties</name>
        <variable>Variable name in the .FX file (and used in the event editor)</variable>
        <description>This variable does this...</description>
        <type>variable type : either INT, FLOAT, INT_FLOAT4, IMAGE</type>
        <property>Property type : EDIT, SPIN, SLIDER, CHECKBOX, COLOR, IMAGE</property>
        <value>initial value</value>
        <min>minimum value</min>
        <max>maximum value</max>
        <delta>step value, for FLOAT + SPIN only</delta>
        <preview_value>value used for the preview in the Effects dialog box</preview_value>
    </parameter>
    <parameter>
        <name>Name of parameter 2</name>
        etc...
    </parameter>
    etc...
    </effect>
  
  
   
  
  All the fields are optional, except for the name of the shader and the parameters if any.
  
  The content of the "value" line depends on the variable type :
  • INT : integer value.
  • FLOAT : floating point value.
  • INT_FLOAT4 : integer value that contains 4 values between 0 and 255, used for RGBA color values. These values are transformed to a float4 variable, that contains 4 floating point values between 0 and 1 (1 corresponds to 255). This parameter type is generally used with the COLOR property type.
  • IMAGE : the value is the name of a graphic file in the Effects directory. This file is loaded when the user sets up the shader in the properties, and then the image is stored in the MFA file, the user can modify it with the Clickteam Fusion 2.5 picture editor. The IMAGE property type can be used only with the IMAGE variable type (and reciprocally).