View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Animating Particles UV

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

11 replies to this topic

### #1Medo3337  Members

Posted 09 May 2013 - 10:44 PM

Here is how I create each particle for rendering:
                    // -------> Position, color, U, V
vertices[i*4+0] = CUSTOM_VERTEX(p1, color, 0.0f, 0.0f);
vertices[i*4+1] = CUSTOM_VERTEX(p2, color, 0.0f, 1.0f);
vertices[i*4+2] = CUSTOM_VERTEX(p3, color, 1.0f, 1.0f);
vertices[i*4+3] = CUSTOM_VERTEX(p4, color, 1.0f, 0.0f);


How do I animate (change) the texture UV to make the texture move up/down? I tried playing around with the UV values, but I couldn't get the texture to move up/down.

### #2C0lumbo  Members

Posted 09 May 2013 - 11:36 PM

Here is how I create each particle for rendering:

                    // -------> Position, color, U, V
float fVerticalOffset = up_value_from_your_code;
vertices[i*4+0] = CUSTOM_VERTEX(p1, color, 0.0f, 0.0f + fVerticalOffset );
vertices[i*4+1] = CUSTOM_VERTEX(p2, color, 0.0f, 1.0f + fVerticalOffset );
vertices[i*4+2] = CUSTOM_VERTEX(p3, color, 1.0f, 1.0f + fVerticalOffset );
vertices[i*4+3] = CUSTOM_VERTEX(p4, color, 1.0f, 0.0f + fVerticalOffset );


How do I animate (change) the texture UV to make the texture move up/down? I tried playing around with the UV values, but I couldn't get the texture to move up/down.

Modified your code snippet to show you.

### #3Medo3337  Members

Posted 10 May 2013 - 03:55 AM

Okay, basically I'm trying to animate fire flames so I can have realistic fire effect, when I animate the UV to make the texture move to the top, I'm not getting a good result:

How should I animate the UV for fire effect?

### #4Juliean  Members

Posted 10 May 2013 - 12:16 PM

It seems you didn not accoutn for pixel to texel mapping (though I'm not sure if this is the problem). What does the actual texture look like?

### #5belfegor  Members

Posted 10 May 2013 - 12:55 PM

The image you showed doesn't tell much. Grab a better screenshot.

Also i don't know how you wish to animate texture? What you have in mind?

For example, if you have one texture with couple of frames of fire in it:

|----------|----------|----------|----------|----------|
|    1    |    2    |    3     |     4   |    5    |
|----------|----------|----------|----------|----------|


You could offset x axis of UV coordinate (on top of my head, might made mistake somewhere):

const int framesCnt = 5;
const float uvOffset = 1.0f / (float)framesCnt;
D3DXVECTOR2 billUV[4];
billUV[0].x = 0; // top left
billUV[1].x = 0; // bottom left
billUV[2].x = uvOffset; // top right
billUV[3].x = uvOffset; // bottom right

billUV[0].y = 0; // top left
billUV[1].y = 1; // bottom left
billUV[2].y = 0; // top right
billUV[3].y = 1; // bottom right
...
static float time = 0.0f;
const float animSpeed = 1.0f / 30.0f; // 30 frames per second
time += deltaTime;
if( time > animSpeed)
{
time = 0.0f;
billUV[0].x += uvOffset;
billUV[1].x += uvOffset;
billUV[2].x += uvOffset;
billUV[3].x += uvOffset;

if( billUV[3].x > 1.0f )  // reset to beginning
{
billUV[0].x = 0; // top left
billUV[1].x = 0; // bottom left
billUV[2].x = uvOffset; // top right
billUV[3].x = uvOffset; // bottom right
}
}


### #6Medo3337  Members

Posted 10 May 2013 - 01:46 PM

I'm trying to animate UV for fire particles, how should I animate it? should I move the UV up/down?

### #7belfegor  Members

Posted 10 May 2013 - 02:03 PM

I think you don't know what i meant by "textures with frames", here is example:

With my code example above, i was considering all frames in one row.

You could combine 3 particle emitters to make such effect: actual fire, sparkles and smoke. Normally for each one you use different texture and you animate uv coords for fire.

### #8Medo3337  Members

Posted 10 May 2013 - 03:19 PM

billUV[0].x means U

billUV[0].y means V

Is that right?

                                           // U             V
vertices[j*4+0] = CUSTOM_VERTEX(pos, color, billUV[0].x, billUV[0].y);
vertices[j*4+1] = CUSTOM_VERTEX(pos, color, billUV[1].x, billUV[1].y);
vertices[j*4+2] = CUSTOM_VERTEX(pos, color, billUV[2].x, billUV[2].y);
vertices[j*4+3] = CUSTOM_VERTEX(pos, color, billUV[3].x, billUV[3].y);


### #9phil_t  Members

Posted 10 May 2013 - 05:27 PM

What does your original fire texture look like? Are you trying to animate individual frames of fire, or are you trying to move a single texture up to simulate flames rising?

### #10Medo3337  Members

Posted 11 May 2013 - 01:23 AM

@phil_t: Yes, I'm trying to simulate flames rising to make realistic fire effect.

### #11Medo3337  Members

Posted 11 May 2013 - 11:34 AM

I'm still unsure.

- If I want to simulate fire flames rising should I animate the UV?

- If yes, how? I tried to use the code provided by "belfegor" but can't get it to work.

BTW, the way I set the UV to make the entire texture appear is as the following:

vertices[j*4+0] = CUSTOM_VERTEX(pos, color, 0.0f, 0.0f);
vertices[j*4+1] = CUSTOM_VERTEX(pos, color, 0.0f, 1.0f);
vertices[j*4+2] = CUSTOM_VERTEX(pos, color, 1.0f, 1.0f);
vertices[j*4+3] = CUSTOM_VERTEX(pos, color, 1.0f, 0.0f);


### #12belfegor  Members

Posted 11 May 2013 - 11:53 AM

If I want to simulate fire flames rising should I animate the UV?

There is no one and only way to simulate something. It depends how YOU want to do it.

I tried to use the code provided by "belfegor" but can't get it to work.

What have you tried and failed? Show some code, don't just say "i can't get it to work". How do you expect someone to help you with no relative information?

Put this somewhere at "init time"

const int framesCnt = 16;

const float uvOffset = 1.0f / (float)framesCnt;

D3DXVECTOR2 billUV[4];

billUV[0].x = 0; // top left

billUV[1].x = 0; // bottom left

billUV[2].x = uvOffset; // top right

billUV[3].x = uvOffset; // bottom right

billUV[0].y = 0; // top left

billUV[1].y = 1; // bottom left

billUV[2].y = 1; // bottom right

billUV[3].y = 0; // top right


Do this every frame, might be where you update your vertices

static float time = 0.0f;

const float animSpeed = 1.0f / 30.0f; // 30 frames per second

time += deltaTime;

if( time > animSpeed)

{

time = 0.0f;

billUV[0].x += uvOffset;

billUV[1].x += uvOffset;

billUV[2].x += uvOffset;

billUV[3].x += uvOffset;

if( billUV[3].x > 1.0f )  // reset to beginning

{

billUV[0].x = 0; // top left

billUV[1].x = 0; // bottom left

billUV[2].x = uvOffset; // top right

billUV[3].x = uvOffset; // bottom right

}

}


vertices[j*4+0] = CUSTOM_VERTEX(pos, color, billUV[0].x, billUV[0].y);

vertices[j*4+1] = CUSTOM_VERTEX(pos, color, billUV[1].x, billUV[1].y);

vertices[j*4+2] = CUSTOM_VERTEX(pos, color, billUV[2].x, billUV[2].y);

vertices[j*4+3] = CUSTOM_VERTEX(pos, color, billUV[3].x, billUV[3].y);


Look for example texture in attachment.