Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
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? – Richard Marskell - Drackir Mar 30 '12 at 18:04
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 – dbomb101 Mar 30 '12 at 18:32

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).

share|improve this answer

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:

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.