• Change namespace (PathGenerator > CurvedPathGenerator)
• Edit asset hierarchy
• Minor bug fixes

🗺 유니티 곡선 경로 생성기 V 2.0

아래에 한국어 번역이 있습니다. (There is an Korean translation at the bottom.)

Imagine that you make car running along curved road in Unity Scene.

You can make this car with Animator, but there are some problems.

Assum the object will move from red squre to blue squre.

There are so many ways to move object.

But If you implement this with Unity Animator, the Animator will choose the shortest path (orange line).

Suppose there is a path moving from a red square to a blue square through a green square as shown in the picture above.

When the distances of each point are not equal, if the animation keyframes are distributed as follows 1:1

The speed at which the object moves in the two sections is different.

So, if you want to make constant speed animation when s1 and s2 are not equal,

you should control keyframes to become S1 : S2 = ( t1 - t0 ) : ( t2 - t1 )

Of course, It's possible if you spend a lot of time.

But if the path is curved, It will be very hard to calculate the ratio.

The common issue of problems 1-1 and 1-2 is'curve'.

I was looking for how to express curves in Unity, and I found something called Bezier curves.

First, think of a point that moves a straight line.

There is a straight line and the point M is moving at a constant speed above it.

The trajectory of this point M is drawn as a simple straight line.

At this time, t is a number indicating how far the line segment has been proportionally advanced.

Add another line here and place a point on it that moves like an M.

Then, the original point M is referred to as M0, and the new point is referred to as M1.

The rules for moving M0 and M1 are the same as before.

Here you can draw one more line connecting M0 and M1.

The line naturally moves together when M0 and M1 move.

You can put the point on that line, and let that point be B.

And if you look at the trajectory drawn by point B, you can see that it becomes a curve drawn at a constant speed.

The trajectory drawn by point B is called a quadratic Bezier curve.

Below is the Bezier curve equation for time t.

As you increase the control point, you can create a 3rd, 4th, 5th order .. Bezier curve.

As the control point increases, you can create sophisticated or complex curves,

For this project, I thought that the quadratic Bezier curve was sufficient.

Unity Version : 2019.4.1f ↑

There are 2 scripts I will introduce.

• PathGenerator : Script to make followable path the based on Bézier curve.
• PathFollower : Script to follow the path created by "Path Generator" class.

So let's get started.

3-1-1 . You can download the latest released unity package or download this repo.

3-1-2. Import Unity package.

However, the following must be observed.

• The files PathFollowerGUI.cs, PathGeneratorGUI.cs, and PathGeneratorGUILanguage.cs must be imported into the project, and they should be in Assets/Editor/PathGenerator.

• The files PathFollower icon.PNG, PathFollowerGUI icon.PNG, PathGenerator icon.PNG, PathGeneratorGUI icon.PNG, PathGeneratorGUILanguage icon. PNG, PG_Anchor.PNG, PG_End.PNG, PG_Handler.PNG, PG_Node.PNG, and PG_Start.PNG must be imported into the project, and they should be in Assets/Gizmos/PathGenerator.

• The files PathFollowerScriptImg.PNG and PathGeneratorScriptImg.PNG must be imported into the project, and they should be in Assets/Resources\PathGenerator\Logo

Create an empty game object in your scene. (And rename it to "Path".)

This object becomes a curved path that can be followed.

Add Path Generator component to this object.

Path Generator is largely divided into 6 parts.

The part that determines the nature of the Path.

``Path density```` determines how accurately the curve is drawn.

The higher the number, the closer the curve is to the ideal, but too high and the object may behave erratically.

Important point, Path density must always be greater than or equal to 2!

Recommended values are 30-50.

If the Update path in runtime item is True, the path is updated every frame.

Through this, even if the path changes in runtime, it is applied immediately.

However, the amount of computation may increase.

Determines whether to connect the last node and the last node.

Shows a list of nodes that determine the origin, waypoint, and destination

Adds a node to the end of the list.

Remove the selected node.

Edit the selected node.

Shows a list of angles that determine the shape of the curve.

Edit the selected angle.

All nodes and angles can be collectively controlled.

Set the X / Y / Z values of all angles and nodes in this path to 0.

Average the X / Y / Z values of all angles and nodes in this path.

Make the X / Y / Z values of all angles and nodes in this path a specific value.

You can visualize the created curve as shown in the figure below.

There is a bug where the rendering is not displayed normally when the curved path is sharply bent.

If Generate path mesh in runtime is set to True, create a mesh that can visualize the created curve.

Texture of the mesh of the lines to be displayed.

If the texture has a pattern like the picture below, it is good to express the flow.

Demo textures located at /Assets/PathGenerator/DemoScene/Textures/

If you want the texture to repeat, you must set the Wrap Mode to Repeat.

Also, if you want to see the Material repeated in the Scene,

You need to turn on Animated Materials.

The width of the line mesh to be displayed

Scroll speed of the line texture to render. Can be set from -100 to 100.

Transparency of the line texture to be displayed.

Decide how far to draw the line mesh to be expressed. Can be set from 0 to 1

Specifying the render queue order of materials

Editor settings for easy curve control

This mode changes the Transform information (Position, Rotation, Scale) of the current object.

This mode appears when an object is selected in Unity.

This mode allows you to edit the position of nodes and angles, not the current object.

Each node and angle can be edited one by one.

This mode allows you to edit the positions of nodes and angles as a whole, not the current object.

Selecting this mode allows you to control all nodes and angles at once.

This can be useful when resetting the pivot of the path.

If this option is True, the label is visible in the scene.

If this option is True, the icon is shown in the scene.

You can switch to Top view mode looking down the scene from above.

You can specify the color of the guidelines.

Use the above functions appropriately to create the path you want.

Add an empty object to move.

This object becomes the object following the path created in 3-2.

Add a "Path Follower" component to that object.

Path Generator is largely divided into two parts.

Define the characteristics of movement.

Specifies the path to move. Just select PathGenerator in Scene.

If Path is empty, Path Follower cannot be moved.

Specifies the movement speed.

The object moves along the given path at this speed.

If you enter a value that is too fast, it may malfunction.

When the distance between the moving object and the next node becomes less than this value,

It determines that the object has arrived at its destination and moves to the next node.

If this value is too small or too large, it may malfunction.

is the rotational speed of the object.

If this value is false, the object does not move.

If this value is true, the object will repeat its path infinitely.

It doesn't matter if the path is closed or open.

Defines a method to be executed when the route is completed.

If this value is true, the method is executed every time the route is completed.

At this time, if object's Is Loop is true, the method is not executed forever.

(Because I don't think I've completed the route.)

There may be many examples, but the best example is to create an object that runs along a given track.

I once made a car that runs on a circular track I got from the Asset Store.

With a little modification, you can implement a car that moves naturally even the wheels and steering wheel.

You can express movements between planets like the solar system.

This script also allows you to create circular paths and elliptical orbits like Comet Halley.

Thanks for read! check out my blog too !

• Create issue in this repo
• kau_esc@naver.com
• kimyc1223@gmail.com
• kim.youngchan@yonsei.ac.kr

• 네임스페이스 변경 ( PathGenerator > CurvedPathGenerator )
• 에셋 하이어라키 수정
• 자잘한 버그 수정

🗺 Unity Curved Path Generator V 2.0

There is an English translation at the top. (상단에 영어 번역이 있습니다.)

유니티에서 오브젝트를 곡선 및 직선 경로를 따라 움직이게 만드는 방법은 무엇일까?

아마 가장 쉽고 직관적인 방법은 애니메이션을 사용하는 것일것이다.

하지만 애니메이션을 통한 구현 방법은 아래와 같은 문제점이 있다.

빨간 네모에서 파란 네모로 움직이는 애니메이션,

즉 Position의 변화를 애니메이션으로 만든다고 하면

경로는 위 그림처럼 무수히 많이 존재 할 수 있는데,

애니메이션에서는 항상 가장 빨리 변할 수 있는 방향 (주황색 패스) 으로만 정해진다.

만약 위 그림처럼 빨간 네모에서 초록색 네모로, 그 후 파란색 네모로 움직이는 패쓰가 있다고 하자.

이 때 각 지점사이의 거리가 같지 않다고 할 때,

애니메이션 키프레임이 다음과 같이 분포한다면 (1:1 로)

두 부분에서 물체가 움직이는 속도는 다를것이다.

따라서 위 상황처럼 s1과 s2가 같지 않을 때 일정한 속도의 애니메이션을 만들고 싶다면,

S1 : S2 = ( t1 - t0 ) : ( t2 - t1 ) 이 되도록 키프레임을 제어해야 한다.

물론 시간을 많이 투자하면 가능하겠지만,

경로가 구부러지거나 그 수가 많아 비율을 계산하기 힘든 상황에선 불편 할 수 밖에 없다.

위에서 알 수 있는 문제점 중 공통된 사항은 ‘곡선’이다.

어떻게 하면 곡선을 나타 낼 수 있을까 찾아보다가, 베지어 곡선(Bézier curve)이라는 것을 찾아내었다.

일단 직선을 움직이는 점을 생각해본다.

하나의 직선이 있고 그 위를 점 M이 일정 속도로 이동하고 있다.

이 점 M의 궤적은 당연하지만 단순한 직선으로 그려진다.

이때 t는 선분 위를 비율적으로 얼마나 나아갔는지를 나타내는 수치다.

여기에 선을 하나 더 추가하고 그 위에 M처럼 이동하는 점을 놓아본다.

그리고 원래의 점 M을 M0로, 새로운 점을 M1으로 한다.

M0와 M1이 움직이는 규칙은 이전과 같다.

M1이라는 점이 하나 더 늘었다 하더라도 특별히 복잡해질 것은 없다.

여기에서 M0와 M1을 잇는 선을 하나 더 그을 수 있다.

그 선은 M0와 M1이 이동하면 자연스럽게 함께 움직이게 된다.

그 선 위에 M0나 M1처럼 일정 속도로 이동하는 점을 놓을 수 있다. 그 점을 B라고 하자.

그리고 점 B가 그리는 궤적을 살펴보면, 곡선이 되는 모습을 볼 수 있다.

점 B가 그리는 궤적을 2차 베지어 곡선(Quadratic Bezier Curve)이라고 한다.

아래는 시간 t에 대한 베지어 곡선 식이다.

조절점을 늘릴수록 3차, 4차, 5차 .. 베지어 곡선을 만들 수 있다.

차수가 늘어날 수록 정교하거나 복잡한 곡선을 만들 수 있지만,

이번 프로젝트에서는 2차 베지어 곡선만으로도 충분하다고 생각했다.

아래는 3차 베지어 곡선이다.

Unity 버전 : 2019.4.1f 이상

소개할 스크립트는 다음 2가지다.

• PathGenerator : 베지어 곡선을 기반으로 따라갈 수 있는 경로를 만드는 스크립트.
• PathFollower : "PathGenerator" 클래스에 의해 생성된 경로를 따르기 위한 스크립트

3-1-1 . 최신의 release된 unity package를 다운로드 하거나, 이 repo를 다운받으면 된다.

3-1-2. 유니티 패키지를 임포트한다.

단,다음과 같은 사항을 반드시 지켜야한다.

• PathFollowerGUI.cs, PathGeneratorGUI.cs, PathGeneratorGUILanguage.cs라는 파일은 필수적으로 프로젝트에 임포트 되어야 하며, Assets/Editor/PathGenerator 라는 폴더에 있어야 한다.

• PathFollower icon.PNG, PathFollowerGUI icon.PNG, PathGenerator icon.PNG, PathGeneratorGUI icon.PNG, PathGeneratorGUILanguage icon.PNG, PG_Anchor.PNG, PG_End.PNG, PG_Handler.PNG, PG_Node.PNG, PG_Start.PNG라는 파일은 필수적으로 프로젝트에 임포트 되어야 하며, Assets/Gizmos/PathGenerator 라는 폴더에 있어야 한다.

• PathFollowerScriptImg.PNG, PathGeneratorScriptImg.PNG 라는 파일은 필수적으로 프로젝트에 임포트 되어야 하며, Assets/Resources\PathGenerator\Logo 라는 폴더에 있어야 한다.

Scene에 빈 게임 개체를 만든다. (그리고 "Path"로 이름을 바꾼다.)

이 개체는 따라갈 수 있는 곡선 경로가 된다.

이 개체에 Path Generator 컴포넌트 추가한다.

Path Generator는 크게 6가지 부분으로 나뉜다.

Path의​ 성질을 결정하는 부분.

Path density는 곡선을 얼마나 정확하게 그릴지 결정한다.

숫자가 높을수록 이상적인 곡선에 가깝지만 너무 높으면 개체가 비정상적으로 작동할 수 있다.

중요한 점은, Path density는 항상 2 이상이어야 한다!

권장 값은 30~50.

Update path in runtime항목이 True이면, 경로가 매 frame마다 갱신된다.

이를 통해 런타임에서 경로가 바뀌어도, 즉시 반영된다.

하지만 연산량이 증가 할 수 있다.

가장 마지막 Node와 끝 Node를 연결할지 결정한다.

출발지, 경유지, 도착지를 결정하는 노드 리스트를 보여준다

리스트의 끝에 노드를 추가한다.

선택한 노드를 제거한다.

선택한 노드의 값을 변경한다.

곡선의 모양을 결정하는 앵글 리스트를 보여준다.

선택한 앵글의 값을 변경한다.

모든 노드와 앵글을 일괄적으로 제어 할 수 있다.

이 경로의 모든 앵글과 노드의 X/Y/Z값을 0으로 만든다.

이 경로의 모든 앵글과 노드의 X/Y/Z값을 평균값으로 만든다.

이 경로의 모든 앵글과 노드의 X/Y/Z값을 특정값으로 만든다.

아래 그림처럼 만든 곡선을 가시화 할 수 있다.

곡선 경로가 급격히 꺾일 경우, 렌더링이 정상적으로 표현되지 않는 버그가 있다.

Generate path mesh in runtime이 True일 경우, 만든 곡선을 가시화 할 수 있는 mesh를 만든다.

표현할 라인의 mesh의 Texture.

Texture가 아래 그림처럼 패턴을 가지고 있을 경우, 흐름을 표현하기 좋다.

/Assets/PathGenerator/DemoScene/Textures/에 위치한 데모용 텍스처

텍스처가 반복되길 원한다면, 반드시 Wrap Mode를 Repeat로 설정해야한다.

또한, Scene에서도 해당 Material이 반복되는것을 보고싶다면

Animated Materials를 켜주어야 한다.

표현할 라인 mesh의 너비

표현할 라인 texture의 스크롤 속도. -100 ~ 100까지 설정 가능.

표현할 라인 texture의 투명도.

표현할 라인 mesh를 어디까지 그릴지 결정. 0 ~ 1까지 설정 가능

Material의 render queue 순서 지정

곡선을 쉽게 제어 할 수 있는 에디터 설정

현재 오브젝트의 Transform 정보(Position, Rotation, Scale)를 변경 하는 모드이다.

기존 Unity에서 오브젝트를 선택했을 때 나타나는 모드이다.

현재 오브젝트가 아닌, 노드와 앵글들의 위치를 편집 할 수 있는 모드이다.

각 노드와 앵글을 하나씩 편집 할 수 있다.

현재 오브젝트가 아닌, 노드와 앵글들의 위치를 전체적으로 편집 할 수 있는 모드이다.

이 모드를 선택하면 전체 노드와 앵글을 한 번에 제어 할 수 있다.

path의 pivot을 재설정 할 때 유용하게 사용 할 수 있다.

이 옵션이 True이면, Scene에서 Label이 보여진다.

이 옵션이 True이면, Scene에서 icon이 보여진다.

Scene을 위에서 내려다보는 Top view 모드로 전환 할 수 있다.

가이드라인의 색상을 지정 할 수 있다.

위 기능들을 적절히 사용하여 원하는 path를 만들면 된다.

움직일 빈 오브젝트를 추가한다.

이 객체는 3-2에서 만든 경로를 따라가는 오브젝트가 된다.

그 객체에 "Path Follower" 컴포넌트를 추가한다.

Path Generator는 크게 2가지 부분으로 나뉜다.

움직임의 특성을 정의한다.

움직일 path를 지정한다. Scene에 있는 PathGenerator를 선택하면 된다.

Path가 비어있을 경우, Path Follower는 움직일 수 없다.

움직일 속도를 지정한다.

물체는 이 속도로 주어진 path를 따라 움직인다.

너무 빠른 값을 입력하면, 오작동할 수 있다.

움직이는 물체와 다음 노드 사이의 거리가 이 값 이하로 될 경우,

물체가 목적지에 도착했다고 판단하여 다음 노드로 움직인다.

이 값이 너무 작거나 클 경우, 오작동 할 수 있다.

물체의 회전 속도이다.

이 값이 false이면, 물체가 움직이지 않는다.

이 값이 true이면, 물체가 경로를 무한히 반복해서 움직입니다.

경로가 닫힌경로인지, 열린경로인지와는 상관없습니다.

경로를 완주했을 때, 실행시킬 메소드를 정의한다.

이 값이 true이면, 경로를 완주했을 때 마다 메소드를 실행시킨다.

이때, 물체의 Is Loop가 true일 경우, 해당 메소드가 영원히 실행되지 않는다.

(경로를 완주했다고 생각하지 않기 때문이다.)

많은 예가 있을 수 있지만 가장 좋은 예는 주어진 트랙을 따라 달리는 객체를 만드는 것이다.

에셋스토어에서 받은 원형 트랙을 달리는 자동차를 만든 적이 있다.

본 스크립트를 약간 수정하고 응용하여 바퀴와 핸들까지 자연스럽게 움직이는 자동차를 구현할 수 있다.

태양계와 같은 행성 간의 움직임을 표현할 수 있다.

이 스크립트를 사용하면 핼리 혜성과 같은 타원 궤도를 생성할 수 도 있다.

읽어주셔서 감사합니다. 제 블로그도 확인해보세요!

• 이 repo 이슈 페이지에 이슈를 등록하시면 됩니다
• kau_esc@naver.com
• kimyc1223@gmail.com
• kim.youngchan@yonsei.ac.kr