[💬] (씹덕주의) 로코와 함께하는 핑퐁 트레일러 구현

[로코복실한(dovecreative)]

 주의사항 1. 여기 나오는 유니티 코드에는 내가 쓰려고 만든 클래스들이 포함되어 있습니다.

최대한 내가 만든 클래스들은 쓰지 않으려고 했고, 불가피하게 사용했을 경우 설명을 통해 내용을 이해하는 데 어려움이 없도록 했습니다.

주의사항 2. 씹덕물이니 알아서 주의해서 보세요

 

굿이브닝이에요 프로듀사! 오늘은 뭘 크리에이트 할까요?

오늘은 핑퐁 게임에 나오는 공의 트레일 렌더러를 구현해볼 거다와

https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=84829&page=1

위 그림처럼 길이가 정해져 있고, 앞으로 이동하다가 벽에 닿으면 튕기는 레이저 선을 만들면 된다와

어떻게 할 건지 감이 잡혔을까시라

로코한테는 이런 컴플렉스한 스트럭쳐의 디자인은 쏘 디피컬트하다구요

사실 그럴 줄 알았다와. 천리길도 한 걸음부터라고, 그럼 보다 단순한 것부터 시작해보는 게 좋을 것 같다와

벽에 닿으면 튕긴하는 속성은 빼고, 직진만 하는 선은 만들 수 있을까시라?

그정도쯤은 노 프라블럼이라구요! 그러면 보자...

에또...

프로듀사!! 헬프미에요!! 앞으로 원 스텝인데 방법이 생각나지 않는 거예요

하아... 그러면 더 단순한 것부터 시작하자와. 

일정한 방향으로 전진하는 점은 만들 수 있을까시라

그거야말로 노 프라블럼이라구요! 프로듀사상은 로코를 뭘로 보시는 건가요?

먼저 점이 되는 클래스를 크리에이트하는 거예요!

이렇게 하면 position에 원하는 값을 인풋하면 원하는 위치에 점을 생성할 수 있는 거에요

여기에다 다이렉션을 추가하면...

컴플리트인 거에요 프로듀샤!

(Loco.R egister 메소드는 내가 만든, 선택한 함수를 매 프레임마다 호출해주는 함수임. 여기서는 Update를 MonoBehavior.FixedUpdate로 사용하기 위해 씀)

잘했다와. 그럼 어디 한번 시연해볼 수 있을까시라.

생성 지점은 (0, 0), 방향은  (1, 1)로 나아가는 점을 만들어보라와

이렇게 시작지점 Vector2(0, 0)과 방향 Vector2(1, 1)를 사용해서 클래스를 만들면...

(UStart, UUpdate는 각각 MonoBehavior의 Start, Update임)

제대로 오퍼레이트 하는 거에요!!

잘했다와. 이제 두 번째 단계로 넘어가도 될 것 같다와. 

저기에 레이저 선을 달고 싶은데, 어떻게 하면 될까시라

프로듀사... 그건 아직 로코도 돈 노우 한거에요

하아... 한트를 좀 줘볼까시라.

문제에도 나와 있듯이, 선은 길이가 일정한 선분이다와

조금만 더 하면 알것 같은데~~ 우으으...

자 그럼 마지막 힌트다와. 선분은 두 점으로 결정된다와.

그 두 점 중 하나는 방금 로코상이 만들었고, 나머지 하나는 어떻게 만들면 될까시라

아까 프로듀사상이 선분은 길이가 일정하다고 했으니깐... 다이렉션만 알면 될 것 같은데...

맞다, 다이렉션은 아까 로코가 크리에이트한 클래스에 나와 있으니, 시작점으로부터 '진행 방향의 반대 방향'으로, '선분의 길이'만큼 떨어진 곳에 나머지 한 점이 이그지스팅한 거네요!

그럼 이제 만들어볼까시라.

참 만들기 전에 주의할 게 있는데, 선 클래스는 아까 만든 클래스에 코드를 추가하는 게 아니라 새로운 클래스를 만들어서 구현하라와

한 클래스에 모든 기능을 넣는 게 만들기 편한데, 왜 그렇게 디피컬트하게 코드를 만드나요?

한 클래스에는 하나의 기능만 있는 게 이해하기도 관리하기도 쉽기 때문이라와.

한 클래스에 기능을 다 때려박아 버리면, 나중에 뭐가 어떻게 연결되어 있는지 이해하기 어려워져서 유지보수가 매우 어려워지게 된다와

자세한 건 구글에 '단일 책임 원칙'을 검색해보라와

오케이에요 프로듀사! 그러면 바로 코드를 크리에이트 해볼께요!

먼저 선을 구현하는 클래스를 만들고

기본 클래스에 방금 만든 선 클래스를 추가하면

컴플리트인 거예요 프로듀사!!

아주 잘했다와. 하지만 진짜 문제는 지금부터인 걸까시라.

우린 지금부터 저 선을 벽에 부딪치면 반사되게 해야 한다와.

뭐 좋은 아이디어 있을까시라

로코는...로코는 잘 모르겠어요!

그런데 아까 했던 것처럼, 반사될 때 선의 무브먼트를 구현하기 전에 점의 무브먼트 구현하는 건 어떨까요?

그거 좋은 생각이다와.

그럼 한번 벽에 반사될 때 점의 움직임을 구현해보라와.

으으음... 점이 벽에 콘택트할 때 반사되는 각도를 구하면...

입사 벡터와 반사 벡터가 평면에 대해 대칭이니깐...

법선 벡터를 입사 벡터의 시작점만큼 늘리고...

입사 벡터를 반사 벡터의 시작점과 같게 두면 반사 벡터를 구할 수 있겠네요!

이제 공에 붙일 코드를 크리에이트할께요!

이 스트립트는 충돌이 발생했을 때 OnCollide에 등록된 함수에 충돌 위치와 법선벡터를 알려 주는 역할을 해요.

그리고 원본 스크립트에 충돌이 일어났을 때 방향을 트는 메소드를 추가하면!

아주 잘했다와. 이제 마지막 단계만 하면 된다와.

벽에 닿아 꺾어질 때, 선도 같이 꺾어지게 할 수 있을까시라

지금까지 쌓은 내공으로는 쏘 이지한 테스크에요!

그러니깐...음...

어라? 분명 쉬울 것 같았는데?

갑자기 헤드에이크가 온 것 같아요!

이게 마지막 단계인데 좀만 더 힘내 보라와

공이 부딪치는 순간 레이저가 꺾인다는 사실을 이용하면 어떨까시라

흐음... 레이저가 꺾인다는 건 일단 두 개로 디바이드 된다는 거겠죠?

레이저의 길이는 같으니깐 나누어진 두 개의 레이저 빔의 길이가 일정하다는 건 알겠는데...

사실 구현에 정답이 있는건 아니다와. 하지만 꺾어지는 순간 레이저를 두 개로 나눈다는 발상은 참신하다와.

그러면 입사 부분의 레이저와 반사 부분의 레이저를 나눠서 구현하는 건 어떨까시라

그레이트한 방법인 것 같아요 프로듀사!

그러면 일단 더 나아가기 전에, 레이저가 한 개가 되었다가 두 개가 되었다가 하니깐 레이저를 관리하는 클래스를 하나 만들면 어떨까요?

간만에 좋은 소리를 한 걸까시라

앞서 말한 "단일 책임 원칙"을 따르기 위해서라도 슬슬 기능의 세분화를 해야 할 때가 왔다와

그럼 지금까지의 클래스들을 정리해서 표현해볼까시라

이정도는 누워서 라이스 케이크 먹는 레벨이지요!

좋다와. 지금까지는 저 PingPong Trail Line 하나만으로 모든 선을 표현할 수 있었다와.

하지만 지금부터는 Line이 여러 개가 될 수도 있으니, 이 Line들을 관리하는 객체가 중간에 하나 필요하게 된다와.

한번 직접 그려볼 수 있을까시라

이렇게 하는 건 어떨까요?

이전의 PingPongTrailLine의 기능은 PingPongTrailLineHub 클래스로 위임해서 이전과 같이 레이저를 만드는 역할을 지속하게 하고,

실제로 선을 만드는 건 PingPongTrailLine 객체를 단순화해서 방향과 길이 명령을 받아 선을 생성하게 하는 거에요

잘 만들었다와. 실제로 레이저를 어떻게 만드는지까진 Head에서 알 필요가 없으니까, Head는 자신의 위치와 방향 정보만 넘겨주면 되고,

나머지는 Hub에서 알아서 해 주니깐 좋은 분업화가 될 것 같다와.

자 그럼 마지막으로 코드를 만들어볼까시라

먼저 PingPongTrailLine 코드를 Start, Direction, Length 3요소로 선을 표현하는 객체로 바꾸고

허브 객체를 만든 후

Head 객체를 수정하면!

잠깐, 지금 상태로는 2개였던 클래스가 3개로 늘어났을 뿐이지 달라진 게 없는 게 아닐까시라

후후후, 오브콜스에요! 아직 클래스를 하나 더 크리에이트 했을 뿐이지, 기능은 이전이랑 똑같아요.

이제부터 레이저를 휘게 하는 코드를 만들 테니 어텐션 하라구요!

허브 클래스에 두 가지 상태를 만들었어요!

기존에는 Update 문에 있는 함수가 전부 돌아갔지만, 이제는 레이저가 직진할 때, 휘어질 때 각각 Normal, OnReflect로 다른 함수가 호출된다구요!

Head의 진행 방향이 바뀌면 Normal 상태에서 OnReflect 상태로 바뀌고, 두 번째 Line의 길이가 0이 되면 OnReflect 상태에서 Normal 상태로 바뀌게 돼요

대리자를 이용해서 유한 상태 기계를 구현하다니, 대단하다와

이제 휘어질 때 상태만 구현하면 완성일까시라

후후후, 로코의 인스피레이션으로 퍼펙트하게 컴플리트 했어요!

수고했다와. 그럼 테스트를 해볼까시라.

일단 첫 번째 테스트는 통과다와.

아주 잘했을까시라

다중 충돌 테스트도 통과다와

이로써 사양을 모두 구현한 프로그램 완성했다와

언빌리버블이에요 프로듀사! 이제 로코도 어엿한 프로그래머라고 불러주시는 거예요! 데헤헤

잘했다와

다만 아직 한 단계가 더 남아있긴 한데, 뭔지 알겠을까시라

또 할게 있나요? 우으으, 로코 잘했다고 생각했는데

처음부터 '2번 굴절'을 상정하고 만들었기에, 2번 이상 굴절되는 경우에는 제대로 된 레이저를 표현하지 못하게 된다와.

이것도 지금까지 한 것을 응용하면 쉽게 수정할 수 있다와

다만 오늘은 너무 피곤하다와. 주말에 너무 일하는 건 좋지 않으니 과제로 해올 수 있을까시라.

과제인가요..? 로코도 레스팅이 필요하다고요!!

--------------------------------------------------------------------

한 2시간이면 만들 수 있을 줄 알았는데 작업량 드럽게 많네

질문이나 지적 환영 

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[로코복실한(dovecreative)]

[김메가(scw973108)]

ㄴㄷㅆ

[로코복실한(dovecreative)]

[거붓(ggp02217)]

[로코복실한(dovecreative)]

[거붓(ggp02217)]

뜬끔없다만 정적인 컴포넌트 추가에는 RequiredComponent(typeof(Rigidbody2D 등등)) 넣어도 상관읎어여

[로코복실한(dovecreative)]

아하 유용하게 쓰겠읍니다

[익명(180.182)]

개쩐다

[로코복실한(dovecreative)]

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[로코복실한(dovecreative)]

[Lux.Parse();(nekoo)]

[로코복실한(dovecreative)]

[익명(115.22)]

개 ㅈ같은 말투랑 이모티콘 뺴면 정말 유용하네요

[로코복실한(dovecreative)]

담엔 좀더 정상적으로 만들게요...

[익명(8.38)]

고수네

[로코복실한(dovecreative)]

[스시스왑(pengsuo)]

거마워여 프로듀샤!

[로코복실한(dovecreative)]

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[로코복실한(dovecreative)]

[물가에커다란옥돌(hanamc99)]

이런씹덕물 너무 좋아요 계속 밀고나가시면 ㄳ

[익명(112.133)]

씹덕 완전체인듯.

[익명(125.132)]

씹덕이라 판드랄추