I want to create the effect in the image in HLSL specifically get a block of pixels to move from a specified start point to an end point, so that it can go across the entire screen, but I don't have a clue where to start. Could someone please point me in the general direction ?

This is the effect I want to replicate

repeating animated image of yellow blobs going left to right

This is the image I will be working with

enter image description here

  • 1
    \$\begingroup\$ A good place to start would be getting the initial image rendering with a basic custom shader. Is there a problem with actually animating the object moving across the screen? \$\endgroup\$ Mar 30, 2012 at 18:04
  • \$\begingroup\$ It's a tile based engine and the levels are quite large, so I thought it would be easier to use hlsl than mess with animation timings for all of the tiles \$\endgroup\$
    – dbomb101
    Mar 30, 2012 at 18:32

2 Answers 2


You can create that effect by changing the texture coords you use to draw a special image. No need for special shaders (but you can use them too if you want) or even render targets. You will need to change that image though because it's not good for the effect you want to achieve.

Example (bad ASCII art):

Full image: |-----***$***----|
Initial drawing of texture with coords (0;0) to (0.5;1): |-----***|
Add 1/16 to texcoord X values: |----***$|
Add 1/16 again: |--***$*|

Remember that you must use the "wrap" texture repeat mode for this to work (the other option is to stitch sprites together and move them, but that's a lot harder to do).


First off, I think a pixel shader is overkill for what you have described. Using an animated sprite and drawing that on top of your scene is probably the way to go.

However, if you need to apply a full-screen pixel shader effect to your scene, this is the basic series of steps that you can research and perform:

  1. Create a RenderTarget2D.

  2. Set the GraphicsDevice to your new render target.

  3. Render your existing scene as normal, which will put it on the render target instead of the back buffer.

  4. Set the GraphicsDevice render target to the back buffer by setting it to null.
  5. Create a custom pixel shader.
  6. Using the RenderTarget2D as your source texture, and the pixel shader as your effect and SpriteBatch.Draw the render target to your back buffer.

Now, as for the pixel shader itself, you will need to pass in a parameter that is controlled by your update method. This will control where you are highlighting the texture. You could also pass in another texture to multiply your scene by, etc.

Example code:



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .