Waving/Rippling Flag

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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
 
Joined
Jul 7, 2012
Messages
868
Reaction score
146
First Language
Norway
Primarily Uses
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.
 

Levi

Veteran
Veteran
Joined
Jun 7, 2012
Messages
798
Reaction score
143
First Language
English
Primarily Uses
You could use a displacement map in gimp to create the curves and flow in the flag.
 

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
I have photoshop >_> Guess I'll re-download gimp again
 

Levi

Veteran
Veteran
Joined
Jun 7, 2012
Messages
798
Reaction score
143
First Language
English
Primarily Uses
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 :(
 

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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
 

Levi

Veteran
Veteran
Joined
Jun 7, 2012
Messages
798
Reaction score
143
First Language
English
Primarily Uses
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.
 

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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 :/
 

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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
 

Genii Benedict

Supervillain, Extraordinaire
Veteran
Joined
Jun 13, 2012
Messages
333
Reaction score
115
First Language
English
Primarily Uses
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.
 

Levi

Veteran
Veteran
Joined
Jun 7, 2012
Messages
798
Reaction score
143
First Language
English
Primarily Uses
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:

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

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]
 
Last edited by a moderator:

ShiniIllumi

Villager
Member
Joined
Mar 21, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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)
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Couple hours of work. Might use in my game as a secret find or something. Not sure. Fancy though no? :D
Holy stink, where have I been? Well, I started my temporary job this week. So less time to spend on game design... :(
Cartoonier cloud cover that better fits the art style, as well as (slightly) improved blending/fading... fading clouds when there are larger patterns is still somewhat abrupt for some reason.
Do you Find Tilesetting or Looking for Tilesets/Plugins more fun? Personally I like making my tileset for my Game (Cretaceous Park TM) xD
How many parameters is 'too many'??

Forum statistics

Threads
105,867
Messages
1,017,061
Members
137,575
Latest member
akekaphol101
Top