0 votes

Hi, I want to add a subtle snow storm effect for my 2d mobile game.
I looks fine for me when using fog shaders and adjusting them a little bit, e.g. this one:

shader_type canvas_item;



float rand(vec2 n) {

 return fract(cos(dot(n, vec2(1.9898, 2.1414))) * 458.5453);

}



float noise(vec2 n) {

 vec2 d = vec2(0.0, 1.0);

 vec2 b = floor(n);

 vec2 f = smoothstep(vec2(0.0), vec2(1.0), fract(n));

 return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);

}



float fbm(vec2 n) {

 return noise(n) * 0.5 + noise(n * 0.5) * 0.25 + noise(n * 8.0) * 0.125 + noise(n * 8.0) * 0.065;

}



void fragment(){

    vec2 p = vec2(UV.x * 2.5, -UV.y * 1.0);

    float r = fbm(p - vec2(0.0, fbm(p) + TIME *0.5));
    if (r < 0.3)
    {
        r = 0.0;
    }
    else
    {
        r = 1.42857142857* r - 0.42857142857
    }
    COLOR = vec4(1.0,1.0,1.0,r);

}

Or the one shown in this tutorial:
https://www.youtube.com/watch?v=QEaTsz_0o44

Problem is that I need them applied over the whole screen all the time, which causes the performance on my mobile would drop from over 60 to below 30.
I'm not yet into shaders, but I would be willing to learn them for this, but I'm not sure if it's worthwhile.

Is it possible to achieve something like this on mobile without a huge performance drop?
Maybe by using an integrated noise texture instead of generating the noise inside the shader? Or maybe not using shaders at all, but pre-rendered animations?

Godot version 3.2.3
in Engine by (181 points)

1 Answer

0 votes

You could use an animated sprite with pre-rendered frames of fog in png format. To make the fog appear in front and behind objects just place different animated sprites of the fog in front and behind the object. This is mostly effective for 2d games so try it out and see if it's what you are aiming at.

by (1,051 points)

Hey, thank you very much!
I only have experiences creating graphics with Adobe Illustrator, that's probably not the best choice for doing that.
Do you have a tip what tools / how to create those animated fog textures?

You can search for free fog footage and edit them using compositing software like Natron(free) of After Effects. Just remove the black part of the footage and replace it with total transparency using a keyer and render the individual frames. You can get some here or try here for already rendered ones.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.