Waving/Rippling Flag

● ARCHIVED · READ-ONLY
Started by ShiniIllumi 12 posts View original ↗
  1. ShiniIllumi
    #1 Source
    I have the flag, and I've tried a few ways to make it animated, but nothing seems to look "quite" right. I've attached the flag in question. I'm just looking for suggestions on how to make it look like it's rippling lightly in the wind without making it look funky :)

    flag.png
  2. Julien Brightside
    #2 Source
    The thing is, whenever the wind goes into a flag, it will raise one part, lowering the others and thus producing a shadow that will go from one part to the other. Whereas the part that goes up will be lightened up due to the closeness to the sun.
  3. Levi
    #3 Source
    You could use a displacement map in gimp to create the curves and flow in the flag.
  4. ShiniIllumi
    #4 Source
    I have photoshop >_> Guess I'll re-download gimp again
  5. Levi
    #5 Source
    ShiniIllumi said:
    I have photoshop >_> Guess I'll re-download gimp again
    I'm sure Photoshop will have a bump/displacement map feature. But I'm not familiar with PS, so I couldn't say where :(
  6. ShiniIllumi
    #6 Source
    Ok, got Gimp installed, and I see Bump/Displace. If you don't mind me asking (since I don't use gimp), now what? XD
  7. Levi
    #7 Source
    What the effect does, is "distorts" a plane in accordance with an image below it. Detecting differences in dark and light, it will guess the 3d form of that image and "projects" your plane [the flags] onto that form.

    What I'd do, is use the "blend tool" to create a pattern of 'cylindrical' looking things. With thee blend tool, set the shape to bilateral. This will allow you to make nice "rounded" cylinders. Think of these cylinders as being the "wind" beneath the flag.

    I'd love to do a tutorial, but I've got to head to work in about 15 minutes. So this afternoon I'll see what I can do, and update this post.
  8. ShiniIllumi
    #8 Source
    Sorry x.x my main computers harddrive died, again. I'm on my backup computer while I remove my files using ubuntu and re-install my factory fresh settings on my computer.

    It'll probably be a day or 2 before I can get around to using a tutorial, since I'll need to get some things back :/
  9. ShiniIllumi
    #9 Source
    I'm sorry to bump this, but I just fixed my computer (needed a new HDD). I'm still down some programs atm (our power has been... shoddy at best >_> yay power outages) so I've been going sorta slow on installing things.

    Any chance you're still around and willing to post a gimp tutorial? :3
  10. Genii Benedict
    #10 Source
    As a fellow Canadian (Ontario, representin'!) I have no trouble offering up Levi's tutorial services on his behalf. Although I shall be using Ulead's PhotoImpact, and will have to adapt to it's functionality, I have every faith that Good Guy Levi will offer up a rousting tutorial, at his earliest convenience.

    ;)

    GB

    p.s. That's just how us Canadians roll.
  11. Levi
    #11 Source
    EDDDDIIIIIIIIIIIIIIIIIIIITTTTTTTTTTTTTTTTTTTT!!!!!!!!!!!!!!!!!!!

    I just read through my tutorial [see mangled wreck below], and it is brutal... I do not do well under time constraints. Haha.

    I just hopped in and did the flags myself real quick as an example. Tomorrow after work I have some free time before my flight, so I'll do a proper tutorial at the time.

    Here it is... real messy, but I was in a hurry. I'll post the results from the tutorial tomorrow for you to use:

    flag.png

    =========================

    Original Post

    =========================

    My goodness. Totally forgot about this! Sorry :wacko: I'll edit this post in a sec.

    Edit:

    Genii Benedict said:
    I have every faith that Good Guy Levi will offer up a rousting tutorial, at his earliest convenience.
    You're too kind!! B)

    =========================

    Original Post

    =========================

    Garbage Tutorial

    Spoiler
    I had to throw this together in about 5 minutes... so I can only hope that it is sufficient! The result isn't great, as I rushed... but it shows how easy it is to add form to a 2D plane. All that's left to do, is create the remainder of the frames... and shade appropriately. Tinkering with the displace settings will provide some automatic shading, based on form, but I recommend going in with the airbrush and/or blend tool for best results [not shown below].

    1. Start by loading your flag, and creating a new transparent layer.

    [snip]

    In my hastiness I messed up the order... so bear with me. Ignore the gradient.

    2. Once both layer are there, modify the Canvas size [see below] to be slightly larger than your flag. The exact size will depend on your flag. In my case, I increased the size by around 100px and 50px.

    [snip]

    3. Next you need to increase the layer size [for both layers] to the same size as the canvas [from step 2]

    [snip]

    4. Now, with the "Wind" layer selected choose the blend tool. Keep all the settings the same, except choose "FG to Transparent" [see below]

    [snip]

    5. Draw a gradient, like the pictures above.

    [snip]

    6. Now, with the "Wind" layer below the Flag, open the displace tool.

    [snip]

    7. Set up as seen below.

    [snip]

    8. Here's the result

    [snip]
  12. ShiniIllumi
    #12 Source
    Hehe thanks a bunch, and no worries :( I've been main computerless for about 1 1/2 weeks. On top of that, when the HDD crashed, something happened shortly before that that corrupted my game file badly. I can still go in and grab events and such from the first map, but everything else (tiles, characters, animations) are gone :(

    Oh wells~! Events are there and that's what matters (it was the opening cutscene... I don't wanna redo it again lol)