Relatively minor art question [above cloud backgrounds]

[JohnnyC]

How do you actually draw clouds as if you're above them. I can't really wrap my head around drawing clouds. You see it tons of shmups:
https://youtu.be/utgHIk9Q7Xo?t=16m11s - 16m11s - Crimzon Clover
https://youtu.be/xEMG0TUIzg0?t=19s - 19s - Giga Wing 2
https://youtu.be/Oc5mla0Qb-o - Radiant Silvergun
etc...

It seems like such a simple thing to draw but actually sitting down and trying is a different story. I understand it is actually multiple layer of clouds of various opacity/alpha but the actual drawing of the clouds is harder. It seems more than just, "some white with some grey".

[ciox]

Post some attempts maybe? We could brainstorm some cloud concepts based on them mayhaps. In the meantime you can always just use some Perlin noise like in Battle Bakraid as a quick filler...
https://www.google.ro/search?q=perlin+n ... 80&bih=852
https://i.ytimg.com/vi/BPTjGW-AvrE/hqdefault.jpg

[S20-TBL]

This is a rather complex question and we could go at length on this.

Perlin noise is alright for some quick clouds, and the one in the RSG video seems to use a variation of it, but if done improperly it could end up looking very obviously tiled. There are techniques to smooth out the noise clouds, though, and you can always use a large asset in order to offset the tiled look.

First off, you might want to take a look at actual cloud photos. Notice how the structure of certain cloud types--e.g. the cumulus cloud families--interacts with light sources. The Crimzon Clover stage 4 example uses cumulonimbus clouds with the light source coming from the bottom of the screen. This requires a knowledge of hand-rendering values, however; this time lapse video on painting clouds should help a bit.

If you need more wispy, cirrus-type clouds, you can use Perlin noise by adjusting the Levels slider in an image editing program before removing the darker color as an alpha channel (easiest to do in Gimp with the "Color to Alpha" function), leaving behind the lighter colored smoke wisps.

I'll probably post an example later using pixel art.

[JohnnyC]

Post some attempts maybe? We could brainstorm some cloud concepts based on them mayhaps. In the meantime you can always just use some Perlin noise like in Battle Bakraid as a quick filler...
https://www.google.ro/search?q=perlin+n ... 80&bih=852
https://i.ytimg.com/vi/BPTjGW-AvrE/hqdefault.jpg

Actually didn't have any decent attempt. Which is why I didn't post any, I'm actually bad at art and just want some half passable placeholder. The perlin noise suggestion helps a lot, I didn't even think about that.

This is a rather complex question and we could go at length on this.

Perlin noise is alright for some quick clouds, and the one in the RSG video seems to use a variation of it, but if done improperly it could end up looking very obviously tiled. There are techniques to smooth out the noise clouds, though, and you can always use a large asset in order to offset the tiled look.

First off, you might want to take a look at actual cloud photos. Notice how the structure of certain cloud types--e.g. the cumulus cloud families--interacts with light sources. The Crimzon Clover stage 4 example uses cumulonimbus clouds with the light source coming from the bottom of the screen. This requires a knowledge of hand-rendering values, however; this time lapse video on painting clouds should help a bit.

I'll probably post an example later using pixel art.

Thanks for the helpful advice. I made some nice generated noise as posted above:
https://i.imgur.com/SFeKiDo.png
It's pretty good looking but as you say it is really obvious when tiled (I have 4 which is just orig, flipH, flipV, flipHV). However it is fine for now and I plan to keep working on making my own clouds over the time of the project til I eventually get good at making clouds (or hire an artist).

https://i.imgur.com/ycrwi4w.png
what it looks likes tiled.

[Darckonte]

what engine are you using? I'd compose a tileable texture and use a quad with texture offset, after a whyle when you want to switch to the actual background just drop down the alpha so it fades out... that's what dodonpachi does, in order to generate the cloouds, you can also use a particle system (I use it in unity).

There is a lot of approaches depending of what you want.

Edit: I've seen your second screenshot, the tiling is noticed, make sure either to make bigger image or to create a tileable one, if not it loses the feeling of clouds, and the noise uniformity.

[JohnnyC]

what engine are you using? I'd compose a tileable texture and use a quad with texture offset, after a whyle when you want to switch to the actual background just drop down the alpha so it fades out... that's what dodonpachi does, in order to generate the cloouds

That sounds like a good idea too. I'm using love2d and textures/quads are already built in. Just need to rewrite the tilemap module.

Edit: I've seen your second screenshot, the tiling is noticed, make sure either to make bigger image or to create a tileable one, if not it loses the feeling of clouds, and the noise uniformity.

The second image is very noticeable cause it is just the original image flipped. It is just a placeholder for now. I saw:
http://gamedev.stackexchange.com/questi ... rlin-noise

and am trying to do something similar. Not in run time but just a standalone program to make the tileable noise and then make a spritesheet out of it and import it into tiled. When it's finished I'll post the result here which should look a lot better than my original screenshot.

[Rozyrg]

I'm a firm believer in doing things in a simple as possible way, especially if you need to. Clouds don't need to be any more complex than varying sets of overlapping ellipses with only necessary edges showing.


The only other way I know is just to go outside and draw them - repeating till you get a more natural grasp of their shapes.

[Ixmucane2]

Rozyrg's pretty clouds, being just a bunch of shaded balls of random sizes, could be varied procedurally to avoid repetition.
Given a quasi-horizontal line that represents the middle of the cloud the game engine could draw several rows of balls with a random center and radius: ball centers can be horizontally distributed uniformly along the line and vertically randomly displaced with different average distances for each row.

[S20-TBL]

Sorry for the delay, images are in spoiler tags.

SUBSTANCE20 PRESENTS: HOW TO DRAW CLOUDS

Spoiler

Haha just kidding

No, not that cloud. This one, animated step by step. Notice how I take the light source into account and clump the colors together based on value (light and shadow). For an easier time, it's recommended this be checked every once in a while by desaturating the image; my example has rather cringeworthy colors:

Spoiler

I LIKE SUNSET COLORS K

The next step is to offset the image horizontally and vertically by 50% to check if the edges are tileable (Filters > Distorts > Shift in GIMP, Offset in Photoshop):

Spoiler

OH NOES IT R UNTILEABULL

So what do we do then? Paint over the edges to make it seamless. You need to be really careful at this stage or you'll miss an edge like I did:

Spoiler

PAINT OVER THOSE HAPPY LITTLE CLOUDS LIKE BOB ROSS WOULD

Now to check the finished product for seamlessness by offsetting it once more:

Spoiler

PROFIT

I hope this helps.

[nem]

Beautiful clouds, substance20!