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

For the iPad app I am writing using OpenGL ES 2 I have a single quad - shaded using GLSL - that is dragged around the screen. Very basic. This works fine. But is rather boring.

I want to increase the coolness a bit in the following way: when the user drags the quad it leaves a streak behind that fades over time. Continuous dragging would be a bit like a streaking comet across the night sky.

What is the simplest way to implement this?


share|improve this question
up vote 1 down vote accepted

If you want the quad itself to be "streaked" across the background, the simplest way is to just store N (say, 10) previous positions for the quad. Each frame, pop the first item from the front of the list. Each frame that the user is dragging the image, push a new position onto the end of the list. During rendering, simply render the quad a number of times for each item in the list. Start with a low opacity (say, 10%) and increase it by +10% for each step in the list. Render the real quad at full opacity. This is the effect you see in games like the 2D Castlevania titles.

If you want the quad to blur the background that it's being dragged over, you should look into motion blur. Render the whole scene to a texture with an FBO. Store a vector representing movement, and scale it down each frame. Use the vector and the quad's current position to calculate a blur shape (take the four corner of the quad, add the vector, find the convex hull of the original 4 vertices and the resulting 4 vertices; you can also use some smarts with the vector's direction to simplify finding the convex hull considerably). Use the vector in a loop in your post-processing fragment shader to calculate the texels to sample from the source scene texture from the FBO when rendering the blur shape. Note that this approach won't look super great when the user makes sharp changes in the direction he's dragging in, unless you store multiple vectors and use a somewhat more complex series of blur shape calculations (you'd want to avoid overlapping regions).

share|improve this answer
thanks! Super helpful. Cheers. – dugla Nov 14 '12 at 19:52

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.