[Godot] 2D Fog Shader 안개 셰이더

Godot 2024. 3. 3. 11:39 |
반응형

2D 안개 효과를 만들어 보자.

 

ParallaxBackground를 추가하고 Layer를 높은 숫자로 바꾼다.

 

ParallaxLayer를 추가하고 Mirroring을 뷰포트와 동일하게 설정한다.

 

ColorRect를 추가하고 Size를 뷰포트와 동일하게 설정한다.

 

ColorRect에 ShaderMaterial을 추가하고 Shader를 생성한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
shader_type canvas_item;
//render_mode unshaded; // optional
 
// Noise texture
uniform sampler2D noise_texture: repeat_enable, filter_nearest;
// Fog density
uniform float density: hint_range(0.0, 1.0) = 0.25;
// Fog speed
uniform vec2 speed = vec2(0.02, 0.01);
 
// Called for every pixel the material is visible on
void fragment() {
    // Make the fog slowly move
    vec2 uv = UV + speed * TIME;
    // Sample the noise texture
    float noise = texture(noise_texture, uv).r;
    // Convert the noise from the (0.0, 1.0) range to the (-1.0, 1.0) range
    // and clamp it between 0.0 and 1.0 again
    float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);
    // Apply the fog effect
    COLOR.a *= fog * density;
}
  

 

셰이더는 위와 같이 작성한다.

 

Shader Parameters - Noise Texture에 Noise Texture 2D를 추가한다.

 

사이즈는 뷰포트와 동일하게, Seamless 옵션 체크, Noise - FastNoiseLite를 추가한다.

 

적당한 주인공 스프라이트를 추가한다.

 

여러가지 옵션을 변경하며 적당한 안개 효과를 찾는다.

 

float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);

필요하다면 셰이더 코드에서 2.0 이라는 수치를 적당히 변경해 보자.

 

※ 참고

2D fog overlay

 

반응형
저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Old CRT Monitor Shader 오래된 CRT 모니터 셰이더  (0) 2024.03.03
[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율  (0) 2024.02.29
[Godot] Shader God Rays 셰이더  (1) 2024.02.24
[Godot] Path2D PathFollow2D  (0) 2024.02.22
[Godot] 3D Object Sprite in 2D Scene  (0) 2024.02.22
Posted by J-sean
:

[Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 3. 응용

Godot 2024. 2. 11. 11:48 |
반응형

 

2023.10.18 - [Godot] - [Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 2. 구현

 

위 링크를 참고해 만들어진 물에 돌을 떨어뜨려 보자.

 

Stone씬을 만든다.

Stone(RigidBody2D) - Script(stone.cs)를 추가한다.

Sprite2D - Texture를 추가한다.

CollisionShape2D - Shape을 추가한다.

 

1
2
3
4
5
6
7
8
9
10
using Godot;
 
public partial class stone : RigidBody2D
{
    public override async void _Process(double delta)
    {
        await ToSignal(GetTree().CreateTimer(2.0), SceneTreeTimer.SignalName.Timeout);
        QueueFree();
    }
}
  

 

생성되고 2초 후 삭제되는 스크립트(stone.cs)를 작성한다.

 

Main씬에 스크립트(Main.cs)를 추가한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
using Godot;
 
public partial class Main : Node2D
{
    public PackedScene Scene;
 
    public override void _Ready()
    {
        Scene = ResourceLoader.Load<PackedScene>("res://stone.tscn");
    }
 
    public override void _Input(InputEvent @event)
    {
        if (@event is InputEventMouseButton button)
            if (button.Pressed && button.ButtonIndex == MouseButton.Left)
            {
                RigidBody2D stone = Scene.Instantiate<RigidBody2D>();
                stone.Position = GetViewport().GetMousePosition();
                AddChild(stone);
            }
    }
}
  

 

왼쪽 마우스 버튼을 클릭하면 돌을 생성하는 스크립트(Main.cs)를 작성한다.

 

 

마우스를 클릭하면 돌이 생성되고 아래로 떨어진다.

 

spring씬에 Area2D와 CollisionShape2D를 추가한다.

CollisionShape2D - RectangleShape2D를 추가한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
 
    public CollisionShape2D collision;
 
    public void Initialize(int x_position)
    {
        Position = new Vector2(x_position, 100);
        height = Position.Y;
        target_height = Position.Y;
        velocity = 0;
 
        collision = GetNode<CollisionShape2D>("Area2D/CollisionShape2D");
    }
 
    public void water_update(float spring_constant, float dampening)
    {
        height = Position.Y;
        float x = height - target_height;
        float resist = -dampening * velocity;
        force = -spring_constant * x + resist;
 
        velocity += force;
        Position += new Vector2(0, velocity);
    }
 
    public void set_collision_width(int distance)
    {
        ((RectangleShape2D)collision.Shape).Size = new Vector2(distance,
            collision.Shape.GetRect().Size.Y);
    }
}
  

 

spring.cs를 위와 같이 수정한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public override void _Ready()
{
    k = 0.015f;
    d = 0.05f;
    spread = 0.0002f;
    passes = 8;
    depth = 1000;
    bottom = (int)GlobalPosition.Y + depth;
    water_polygon = GetNode<Polygon2D>("Polygon2D");
 
    springs = new List<spring>();
    spring_number = 10;
    distance_between_springs = 100;
    scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
    for (int i = 0; i < spring_number; i++)
    {
        Node2D s = scene.Instantiate<Node2D>();
        AddChild(s);
        springs.Add(s as spring);
 
        int x_position = distance_between_springs * i + 100;
        (s as spring).Initialize(x_position);
        (s as spring).set_collision_width(distance_between_springs);
    }
 
    wave_position = new Curve2D();
}
  

 

WaterBody.cs는 set_collision_width() 호출 코드만 추가하면 된다.

 

 

실행 시 Collision Shape이 보이도록 설정한다.

 

Collision Shape이 생성되고 표시된다.

 

Spring - Area2D - body_entered 시그널을 Spring 스크립트와 연결한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
 
    public CollisionShape2D collision;
 
    public int index;
    public float stone_velocity_factor;
    [Signal]
    public delegate void SplashEventHandler(int index, float velocity);
    // index, stone_velocity_factor, Splash 시그널 추가
 
    public void Initialize(int x_position, int id)
    {
        Position = new Vector2(x_position, 100);
        height = Position.Y;
        target_height = Position.Y;
        velocity = 0;
 
        index = id;
        stone_velocity_factor = 0.02f;
        // index, stone_velocity_factor 초기화
 
        collision = GetNode<CollisionShape2D>("Area2D/CollisionShape2D");
    }
 
    public void water_update(float spring_constant, float dampening)
    {
        height = Position.Y;
        float x = height - target_height;
        float resist = -dampening * velocity;
        force = -spring_constant * x + resist;
 
        velocity += force;
        Position += new Vector2(0, velocity);
    }
 
    public void set_collision_width(int distance)
    {
        ((RectangleShape2D)collision.Shape).Size = new Vector2(distance,
            collision.Shape.GetRect().Size.Y);
    }
 
    public void OnArea2dBodyEntered(Node2D body)
    {
        float speed = (body as RigidBody2D).LinearVelocity.Y * stone_velocity_factor;
        // We need to disable the spring's collision so that we don't trigger the body enter
        // signal more than once.
        // Must be deferred as we can't change physics properties on a physics callback.        
        body.SetDeferred(CollisionShape2D.PropertyName.Disabled, true);
        // Signal
        EmitSignal(SignalName.Splash, index, speed);
    }
}
  

 

spring.cs 를 위와 같이 수정한다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    public int passes;
    public List<spring> springs;
    public int spring_number;
    public int distance_between_springs;
    public int depth;
    public int target_height;
    public int bottom;
    public PackedScene scene;
    public Polygon2D water_polygon;
    public Curve2D wave_position;
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        depth = 1000;
        bottom = (int)GlobalPosition.Y + depth;
        water_polygon = GetNode<Polygon2D>("Polygon2D");
 
        springs = new List<spring>();
        spring_number = 10;
        distance_between_springs = 100;
        scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
        for (int i = 0; i < spring_number; i++)
        {
            Node2D s = scene.Instantiate<Node2D>();
            AddChild(s);
            springs.Add(s as spring);
 
            int x_position = distance_between_springs * i + 100;
            (s as spring).Initialize(x_position, i);
            // Index 추가
            (s as spring).set_collision_width(distance_between_springs);
            (s as spring).Splash += splash;
            // Signal 추가
        }
 
        wave_position = new Curve2D();
    }
 
    public override void _PhysicsProcess(double delta)
    {
        //if (Input.IsActionJustPressed("ui_accept"))
        //    splash(5, 20);
        // 테스트용 splash() 호출 삭제
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        List<float> right_deltas = new List<float>();
 
        for (int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i - 1].height);
                    springs[i - 1].velocity += left_deltas[i];
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i + 1].height);
                    springs[i + 1].velocity += right_deltas[i];
                }
            }
        }
 
        draw_wave();
        draw_waterbody();
    }
 
    public void splash(int index, float speed)
    {
        if (index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
    }
 
    public void draw_waterbody()
    {
        List<Vector2> surface_points = new List<Vector2>();
        Vector2[] baked_points = wave_position.GetBakedPoints();
        for (int i = 0; i < baked_points.Length; i++)
        {
            surface_points.Add(baked_points[i]);
        }
 
        int first_index = 0;
        int last_index = surface_points.Count - 1;
 
        surface_points.Add(new Vector2(surface_points[last_index].X, bottom));
        surface_points.Add(new Vector2(surface_points[first_index].X, bottom));
 
        water_polygon.Polygon = surface_points.ToArray();
    }
 
    public override void _Draw()
    {
        DrawPolyline(wave_position.Tessellate(), Colors.Blue, 5);
    }
 
    public void draw_wave()
    {
        wave_position.ClearPoints();
 
        Vector2 control0 = new Vector2(-50, 0);
        Vector2 control1 = new Vector2(50, 0);
 
        foreach (spring item in springs)
        {
            wave_position.AddPoint(item.Position, control0, control1);
        }
 
        QueueRedraw();
    }
}
  

 

WaterBody.cs를 위와 같이 수정한다.

 

마우스를 클릭하면 돌이 떨어지고 물결이 자연스럽게 파동친다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public Node2D collided_with = null;
 
public void OnArea2dBodyEntered(Node2D body)
{
    float speed = (body as RigidBody2D).LinearVelocity.Y * stone_velocity_factor;
 
    // We need to disable the spring's collision so that we don't trigger the body enter
    // signal more than once.
    // Must be deferred as we can't change physics properties on a physics callback.
    //body.SetDeferred(CollisionShape2D.PropertyName.Disabled, true);
    if (body == collided_with)
        return;
    else
        collided_with = body;
 
    // Signal
    EmitSignal(SignalName.Splash, index, speed);
}
  

 

spring.cs의 OnArea2dBodyEntered()를 위와 같이 바꾸면 SetDeferred()를 사용할 때 보다 훨씬 반응이 빠르고 자연스러운 파동이 만들어진다.

 

 

물의 높이는 spring.cs - Initialize() - Position 변수에서 간단히 변경할 수 있다.

 

Water.zip
10.27MB

전체 프로젝트 파일

 

※ 참고

Make a Splash With Dynamic 2D Water Effects

 

반응형
저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] AnimationPlayer 애니메이션 플레이어  (0) 2024.02.16
[Godot] CharacterBody2D Inertial Motion 캐릭터 관성 운동  (0) 2024.02.15
[Godot] Show Collision Shapes at Debug Runtime  (0) 2024.02.10
[Godot] Crashes/Freezes When Opening Project Settings  (1) 2023.12.03
[Godot] Bezier Spline Curve 베지어 스플라인 곡선  (0) 2023.10.21
Posted by J-sean
:

[Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 2. 구현

Godot 2023. 10. 18. 22:01 |
반응형

 

2023.10.14 - [Godot] - [Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 1. 준비

 

위 링크를 참고해 준비가 끝난 씬에 Polygon2D를 이용해 물 모양을 추가해 보자.

 

WaterBody에 Polygon2D를 추가한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    public int passes;
    public List<spring> springs;
    public int spring_number;
    public int distance_between_springs;
    public int depth;
    public int target_height;
    public int bottom;
    public PackedScene scene;
    public Polygon2D water_polygon;
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        depth = 1000;
        // 물의 깊이
        bottom = (int)GlobalPosition.Y + depth;
        // 물의 바닥 위치
        water_polygon = GetNode<Polygon2D>("Polygon2D");
        // Polygon2D 노드를 가져온다.
 
        springs = new List<spring>();
        spring_number = 10;
        distance_between_springs = 100;
        scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
        for (int i = 0; i < spring_number; i++)
        {            
            Node2D s = scene.Instantiate<Node2D>();            
            AddChild(s);            
            springs.Add(s as spring);
 
            int x_position = distance_between_springs * i + 100;
            (s as spring).Initialize(x_position);
        }
    }
 
    public override void _PhysicsProcess(double delta)
    {
        if (Input.IsActionJustPressed("ui_accept"))
            splash(5, 20);
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        List<float> right_deltas = new List<float>();
 
        for(int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i-1].height);
                    springs[i-1].velocity += left_deltas[i];
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i+1].height);
                    springs[i+1].velocity += right_deltas[i];
                }
            }
        }
 
        draw_waterbody();
        // 물 그리는 함수 호출.
    }
 
    public void splash(int index, float speed)
    {
        if(index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
    }
 
    public void draw_waterbody()
    {
        List<Vector2> surface_points = new List<Vector2>();
        foreach (spring item in springs)
        {
            surface_points.Add(item.Position);
        }
        // 모든 스프링의 위치를 리스트에 추가한다.
 
        int first_index = 0;
        int last_index = surface_points.Count - 1;
 
        surface_points.Add(new Vector2(surface_points[last_index].X, bottom));
        surface_points.Add(new Vector2(surface_points[first_index].X, bottom));
        // 폴리곤을 사각형으로 만들기 위해 리스트 마지막에 사각형 밑변을 구성할 포인트를
        // 두 개 추가한다.
 
        water_polygon.Polygon = surface_points.ToArray();
        // 폴리곤을 구성하는 포인트 배열을 지정한다.
    }
}
  

 

 

WaterBody.cs 파일은 위와 같이 수정한다.

 

게임을 실행하고 엔터키를 누르면 폴리곤이 그려지고 스프링과 함께 물결처럼 운동한다.

 

좀 더 부드러운 물결을 만들어 보자.

 

WaterBody 씬에서 Polygon2D - Inspector - Visibility - Show Behind Parent 옵션을 체크한다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    public int passes;
    public List<spring> springs;
    public int spring_number;
    public int distance_between_springs;
    public int depth;
    public int target_height;
    public int bottom;
    public PackedScene scene;
    public Polygon2D water_polygon;
    public Curve2D wave_position;
    // 부드러운 물결 곡선의 포인트를 저장할 Curve2D 변수
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        depth = 1000;
        bottom = (int)GlobalPosition.Y + depth;
        water_polygon = GetNode<Polygon2D>("Polygon2D");
 
        springs= new List<spring>();
        spring_number = 10;
        distance_between_springs = 100;
        scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
        for (int i = 0; i < spring_number; i++)
        {            
            Node2D s = scene.Instantiate<Node2D>();            
            AddChild(s);            
            springs.Add(s as spring);
 
            int x_position = distance_between_springs * i + 100;
            (s as spring).Initialize(x_position);
        }
 
        wave_position = new Curve2D();
        // 물결 곡선 Curve2D 초기화
    }
 
    public override void _PhysicsProcess(double delta)
    {
        if (Input.IsActionJustPressed("ui_accept"))
            splash(5, 20);
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        List<float> right_deltas = new List<float>();
 
        for(int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i-1].height);
                    springs[i-1].velocity += left_deltas[i];
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i+1].height);
                    springs[i+1].velocity += right_deltas[i];
                }
            }
        }
 
        draw_waterbody();
        draw_wave();
        // 부드러운 물결 그리기 함수 호출.
    }
 
    public void splash(int index, float speed)
    {
        if(index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
    }
 
    public void draw_waterbody()
    {
        List<Vector2> surface_points = new List<Vector2>();
        foreach (spring item in springs)
        {
            surface_points.Add(item.Position);
        }
 
        int first_index = 0;
        int last_index = surface_points.Count - 1;
 
        surface_points.Add(new Vector2(surface_points[last_index].X, bottom));
        surface_points.Add(new Vector2(surface_points[first_index].X, bottom));
        
        water_polygon.Polygon = surface_points.ToArray();
    }
 
    public override void _Draw()
    {
        DrawPolyline(wave_position.Tessellate(), Colors.Blue, 5);
        // 물결 곡선을 그린다.
    }
 
    public void draw_wave()
    {
        wave_position.ClearPoints();
        // 매번 곡선의 포인트를 초기화 한다.
 
        Vector2 control0 = new Vector2(-50, 0);
        Vector2 control1 = new Vector2(50, 0);
        // 수평 컨트롤
 
        foreach (spring item in springs)
        {
            wave_position.AddPoint(item.Position, control0, control1);
            // 스프링 위치와 컨트롤을 곡선 포인트로 추가한다.
        }
 
        QueueRedraw();
        // _Draw() 호출
    }
}
  

 

 

WaterBody.cs 는 위와같이 변경한다.

 

spring 씬에서 Sprite2D - Inspector - Visibility - Visible 옵션을 해제한다.

 

Main 씬에서 실행한다.

 

폴리곤 위에 파란 물결이 부드러운 곡선으로 표시된다.

 

 

하지만 자세히 보면 폴리곤은 여전히 거칠다.

 

폴리곤을 부드럽게 바꿔보자.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    public int passes;
    public List<spring> springs;
    public int spring_number;
    public int distance_between_springs;
    public int depth;
    public int target_height;
    public int bottom;
    public PackedScene scene;
    public Polygon2D water_polygon;
    public Curve2D wave_position;
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        depth = 1000;
        bottom = (int)GlobalPosition.Y + depth;
        water_polygon = GetNode<Polygon2D>("Polygon2D");
 
        springs= new List<spring>();
        spring_number = 10;
        distance_between_springs = 100;
        scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
        for (int i = 0; i < spring_number; i++)
        {            
            Node2D s = scene.Instantiate<Node2D>();            
            AddChild(s);            
            springs.Add(s as spring);
 
            int x_position = distance_between_springs * i + 100;
            (s as spring).Initialize(x_position);
        }
 
        wave_position = new Curve2D();
    }
 
    public override void _PhysicsProcess(double delta)
    {
        if (Input.IsActionJustPressed("ui_accept"))
            splash(5, 20);
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        List<float> right_deltas = new List<float>();
 
        for(int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i-1].height);
                    springs[i-1].velocity += left_deltas[i];
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i+1].height);
                    springs[i+1].velocity += right_deltas[i];
                }
            }
        }
 
        draw_wave();
        draw_waterbody();
        // draw_wave()가 먼저 호출되어야 한다.
    }
 
    public void splash(int index, float speed)
    {
        if(index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
    }
 
    public void draw_waterbody()
    {
        List<Vector2> surface_points = new List<Vector2>();
        //foreach (spring item in springs)
        //{
        //    surface_points.Add(item.Position);
        //}
        Vector2[] baked_points = wave_position.GetBakedPoints();
        for (int i = 0; i < baked_points.Length; i++)
        {
            surface_points.Add(baked_points[i]);
        }
        // wave_position으로 만든 곡선의 포인트를 폴리곤 포인트로 사용하기 위해
        // 위와 같이 수정한다.
 
        int first_index = 0;
        int last_index = surface_points.Count - 1;
 
        surface_points.Add(new Vector2(surface_points[last_index].X, bottom));
        surface_points.Add(new Vector2(surface_points[first_index].X, bottom));
        
        water_polygon.Polygon = surface_points.ToArray();
    }
 
    public override void _Draw()
    {
        DrawPolyline(wave_position.Tessellate(), Colors.Blue, 5);
    }
 
    public void draw_wave()
    {
        wave_position.ClearPoints();
 
        Vector2 control0 = new Vector2(-50, 0);
        Vector2 control1 = new Vector2(50, 0);
 
        foreach (spring item in springs)
        {
            wave_position.AddPoint(item.Position, control0, control1);
        }
 
        QueueRedraw();
    }
}
  

 

 

WaterBody.cs를 위와같이 변경한다.

 

폴리곤도 부드럽게 바뀌었다.

 

2024.02.11 - [Godot] - [Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 3. 응용

 

※ 참고

Beziers, curves, and paths

Make a Splash With Dynamic 2D Water Effects

 

반응형
저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Crashes/Freezes When Opening Project Settings  (1) 2023.12.03
[Godot] Bezier Spline Curve 베지어 스플라인 곡선  (0) 2023.10.21
[Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 1. 준비  (0) 2023.10.14
[Godot] Background Scroll 배경 스크롤  (0) 2023.10.09
[Godot] Snow, Rain with 2D Particle System 눈, 비 파티클  (0) 2023.10.06
Posted by J-sean
:

[Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 1. 준비

Godot 2023. 10. 14. 12:22 |
반응형

자연스러운 2D 물결 파동을 만들어 보자.

 

우선 저항이 없는 완전 탄성 스프링 운동을 시뮬레이션 해 보자.

 

Node2D, Sprite2D를 이용해 스프링으로 사용할 씬을 구성하고 스크립트를 추가한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
    public float k;
    
    public override void _Ready()
    {
        target_height = Position.Y + 200;
        // 목표 위치
        k = 0.0015f;
        // 스프링 탄성 계수. 탄성 계수가 클수록 빠르게
        // 움직인다. 운동 거리와는 상관 없다.
    }
 
    public override void _PhysicsProcess(double delta)
    {
        water_update(k);        
    }
 
    public void water_update(float spring_constant)
    {
        height = Position.Y;
        float x = height - target_height;
        // 변위. 스프링 운동시 실제 이동 거리는 -x ~ +x 다.
 
        force = -spring_constant * x;
        // 훅의 법칙(Hooke's Law) F = -kx
        // 스프링의 복원력과 변형량 사이에는 비례관계가 성립한다.
        // F = ma, a = -kx/m
        // -k/m = c(상수), 가속도 a는 x에 비례한다.
 
        velocity += force;
        // 속도에 힘을 누적시킨다.
        // 이동거리(s) = 속도(v) X 시간(t)
        // 매 순간의 속도를 모두 더하면 총 이동거리를 알 수 있다.
        // 이 예에서는 아래 Position 값이 매 순간의 총 이동거리다.
 
        Position += new Vector2(0, velocity);
        // 스프링은 목표 높이(Position.Y + 200)를 중심으로 변위 x만큼
        // (-x ~ +x) 왕복 운동한다. 목표 높이가 스프링을 늘리거나
        // 압축하지 않은 평상시 위치다.
        // 예) 초기 위치(Position)의 Y값이 100 이면, 300(100+200)이
        // 평상시 위치고 100(300-200)에서 500(300+200)사이의 왕복
        // 운동을 한다.
    }
}
  

 

 

추가한 스크립트에 스프링 운동을 표현할 코드를 작성한다.

 

스프링을 사용할 씬을 구성한다. Node2D에 위에서 만든 스프링 씬을 추가한다.

 

프로그램을 실행하면 스프링 운동을 한다.

 

 

비탄성 스프링 운동을 시뮬레이션 해 보자.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
    public float k;
    public float d;
 
    public override void _Ready()
    {
        target_height = Position.Y + 200;
        // 목표 위치
        k = 0.0015f;
        // 스프링 탄성 계수. 탄성 계수가 클수록 빠르게
        // 움직인다. 운동 거리와는 상관 없다.
        d = 0.005f;
        // 저항 계수
    }
 
    public override void _PhysicsProcess(double delta)
    {
        water_update(k, d);        
    }
 
    public void water_update(float spring_constant, float dampening)
    {
        height = Position.Y;
        float x = height - target_height;
        // 변위. 스프링 운동시 실제 이동 거리는 -x ~ +x 다.
 
        float resist = -dampening * velocity;
        // 속도에 비례하는 저항값을 계산한다.
 
        force = -spring_constant * x + resist;
        // 훅의 법칙(Hooke's Law) F = -kx
        // 스프링의 복원력과 변형량 사이에는 비례관계가 성립한다.
        // F = ma, a = -kx/m
        // -k/m = c(상수), 가속도 a는 x에 비례한다.
        // 그리고 저항을 더해주면 힘이 점점 감소한다.
 
        velocity += force;
        // 속도에 힘을 누적시킨다.
        // 이동거리(s) = 속도(v) X 시간(t)
        // 매 순간의 속도를 모두 더하면 총 이동거리를 알 수 있다.
        // 이 예에서는 아래 Position 값이 매 순간의 총 이동거리다.
 
        Position += new Vector2(0, velocity);
        // 스프링은 목표 높이(Position.Y + 200)를 중심으로 변위 x만큼
        // (-x ~ +x) 왕복 운동한다. 목표 높이가 스프링을 늘리거나
        // 압축하지 않은 평상시 위치다.
        // 예) 초기 위치(Position)의 Y값이 100 이면, 300(100+200)이
        // 평상시 위치고 100(300-200)에서 500(300+200)사이의 왕복
        // 운동을 한다.
    }
}
  

 

 

저항이 추가된 코드를 작성한다.

 

저항이 적용돼 움직임이 점점 감소한다.

 

스프링을 여러개 만들고 서로 영향을 주고 받게 해 보자.

 

스프링 스프라이트를 적당한 크기로 조절하고 스크립트(spring.cs)는 아래와 같이 수정한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
 
    public void Initialize()
    {
        height = Position.Y;
        target_height = Position.Y;
        velocity = 0;
    }
 
    public void water_update(float spring_constant, float dampening)
    {
        height = Position.Y;
        // 매번 높이값을 업데이트 한다.
 
        float x = height - target_height;
        float resist = -dampening * velocity;
        force = -spring_constant * x + resist;
        
        velocity += force;
        Position += new Vector2(0, velocity);
    }
}
  

 

 

 

새로운 씬을 만들고 스프링을 추가한다. 스크립트(WaterBody.cs)를 추가하고 아래와 같이 작성한다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    // 파동이 옆으로 퍼지는 정도
    public int passes;
    // 파동의 영향력
    public List<spring> springs;
    // 파동을 시뮬레이션 할 스프링 리스트
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        springs= new List<spring>();
 
        foreach(spring item in GetChildren())
        {
            springs.Add(item);
            item.Initialize();
        }
        
        //splash(2, 10);
    }
 
    public override void _PhysicsProcess(double delta)
    {
        if (Input.IsActionJustPressed("ui_accept"))
            splash(2, 10);
        // 엔터키를 누르면 물결 효과가 진행된다.
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        // 각 스프링의 왼쪽 스프링과의 높이 차이 리스트
        List<float> right_deltas = new List<float>();
        // 각 스프링의 오른쪽 스프링과의 높이 차이 리스트
 
        for(int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
            // 모든 차이를 0으로 초기화.
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i-1].height);
                    springs[i-1].velocity += left_deltas[i];
                    // 높이 차이와 파동 전달 정도(spread)를 곱하여 왼쪽 스프링 속도에 누적시킨다.
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i+1].height);
                    springs[i+1].velocity += right_deltas[i];
                    // 높이 차이와 파동 전달 정도(spread)를 곱하여 오른쪽 스프링 속도에 누적시킨다.
                }
            }
        }        
    }
 
    public void splash(int index, float speed)
    {
        if(index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
        // index번 스프링에 속도를 지정하여 물에 돌을 던진 것 같은 효과를 준다.
    }
}
  

 

 

메인 씬에 WaterBody씬을 추가한다.

 

실행하고 엔터키를 누르면 가운데 스프링의 움직임이 다른 스프링에 전달된다.

 

 

이제 스프링을 스크립트에서 인스턴스화 하고 초기화 되도록 해 보자.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
using Godot;
 
public partial class spring : Node2D
{
    public float velocity;
    public float force;
    public float height;
    public float target_height;
 
    public void Initialize(int x_position)
    {
        Position = new Vector2(x_position, 100);
        // 인수로 받은 x 좌표와 y=100으로 위치를 정한다.
        height = Position.Y;
        target_height = Position.Y;
        velocity = 0;        
    }
 
    public void water_update(float spring_constant, float dampening)
    {
        height = Position.Y;
        float x = height - target_height;
        float resist = -dampening * velocity;
        force = -spring_constant * x + resist;
        
        velocity += force;
        Position += new Vector2(0, velocity);
    }
}
  

 

 

spring.cs 는 위와 같이 변경한다.

 

WaterBody 씬은 스프링 노드를 모두 삭제한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
using Godot;
using System.Collections.Generic;
 
public partial class WaterBody : Node2D
{
    public float k;
    public float d;
    public float spread;
    public int passes;
    public List<spring> springs;
    public int spring_number;
    public int distance_between_springs;
    public PackedScene scene;
 
    public override void _Ready()
    {
        k = 0.015f;
        d = 0.05f;
        spread = 0.0002f;
        passes = 8;
        springs= new List<spring>();
        spring_number = 10;
        // 스프링 갯수
        distance_between_springs = 100;
        // 스프링 사이 간격
        scene = ResourceLoader.Load<PackedScene>("res://spring.tscn");
        // 스프링 씬을 로드한다.
        for (int i = 0; i < spring_number; i++)
        {            
            Node2D s = scene.Instantiate<Node2D>();            
            AddChild(s);            
            springs.Add(s as spring);
            // 로드한 스프링 씬을 인스턴스화 하고 자식노드 및 리스트에 추가한다.
 
            int x_position = distance_between_springs * i + 100;
            (s as spring).Initialize(x_position);
            // 인스턴스된 스프링에 적당한 위치를 인수로 주고 초기화한다.
        }
    }
 
    public override void _PhysicsProcess(double delta)
    {
        if (Input.IsActionJustPressed("ui_accept"))
            splash(5, 20);
 
        foreach (spring item in springs)
        {
            item.water_update(k, d);
        }
 
        List<float> left_deltas = new List<float>();
        List<float> right_deltas = new List<float>();
 
        for(int i = 0; i < springs.Count; i++)
        {
            left_deltas.Add(0.0f);
            right_deltas.Add(0.0f);
        }
 
        for (int p = 0; p < passes; p++)
        {
            for (int i = 0; i < springs.Count; i++)
            {
                if (i > 0)
                {
                    left_deltas[i] = spread * (springs[i].height - springs[i-1].height);
                    springs[i-1].velocity += left_deltas[i];
                }
                if (i < springs.Count - 1)
                {
                    right_deltas[i] = spread * (springs[i].height - springs[i+1].height);
                    springs[i+1].velocity += right_deltas[i];
                }
            }
        }        
    }
 
    public void splash(int index, float speed)
    {
        if(index >= 0 && index < springs.Count)
        {
            springs[index].velocity += speed;
        }
    }
}
  

 

 

WaterBody.cs 는 위와 같이 변경한다.

 

Main에서 플레이 버튼을 클릭한다.

 

 

엔터키를 누르면 6번째 스프링의 움직임이 양 옆으로 전달된다.

 

2023.10.18 - [Godot] - [Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 2. 구현

 

※ 참고

Make a Splash With Dynamic 2D Water Effects

 

 

반응형
저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Bezier Spline Curve 베지어 스플라인 곡선  (0) 2023.10.21
[Godot] 2D Splash Dynamic Wave 자연스러운 물결 파동 2. 구현  (0) 2023.10.18
[Godot] Background Scroll 배경 스크롤  (0) 2023.10.09
[Godot] Snow, Rain with 2D Particle System 눈, 비 파티클  (0) 2023.10.06
[Godot] 2D Navigation Basic Setup  (0) 2023.10.06
Posted by J-sean
:

티스토리툴바