뉴진스 파워퍼프걸 팬게임 제작 (5)_ Stage1_캐릭터 이동 구현 (New jeans Powerpuff girls fangame)

뉴진스 파워퍼프걸 팬게임 제작 (5)_ Stage1_캐릭터 이동 구현

이번에는 저번에 만들어 놓은 배경 위를 날아다니는 캐릭터를 만들어볼 차례이다.

 

 

이번 글의 목표

캐릭터 상하 좌우로 움직이기

캐릭터 카메라 밖으로 빠져나가지 못하게 하기

캐릭터 이동할때 뒤에 이동 이펙트 파티클 만들기

 

 

 

 

1. 씬에 캐릭터 이미지 추가하기

저번에 만들어 놓은 배경위에 캐릭터 이미지를 옮겨보았다.

배경에 캐릭터까지 있으니 뭔가 그럴싸 해보이지만

이대로는 아무것도 할 수 없다.

이동 스크립트를 추가해서 생명을 불어넣어 보자.

 

 

2. 카메라 테두리 벽 만들기

이동 스크립트를 만들기에 앞서 먼저 

캐릭터가 카메라 화면 밖으로 빠져나가지 못하게

상하좌우 테두리에 벽을 만들어 주었다.

Create Empty로 아무것도 없는 빈 오브젝트를 만들어준다음

Tag를 각각 위치에 맞는 벽이름으로 만들어 설정해주었다.

그리고 캐릭터의 충돌을 감지해주어야 하기 때문에

Box Collider 2D와 Rigidbody 2D 컴포턴트를 추가해주었다.

한쪽 벽을 커버할 수 있게 Size를 적절하게 설정해주고

이후 Is Trigger 박스를 체크해 물리 충돌은 무시하게 만들었다.

마지막으로 Gravity Scale값을 0으로 설정해 오브젝트들이 밑으로 떨어지지 않게 설정했다.

 

 

3.캐릭터에 물리 충돌 컴포넌트 추가하기

충돌을 감지하려면 양쪽 오브젝트에 전부 콜라이더가 있어야 하기때문에

캐릭터 오브젝트에도 똑같이 Box Collider 2D와 Rigidbody 2D 컴포턴트를 추가해주었다.

단 벽 오브젝트와 달리 캐릭터는 다른 일부 오브젝트와 물리충돌을 할 계획이여서

Is Trigger 박스를 체크하지 않았다.

 

 

 

4. 이동 스크립트 작성

4.1 변수 선언 & 초기화

먼저 각각의 bool 변수를 선언해주었다.

저 변수들은 캐릭터가 화면 밖으로 빠져나가지 못하게 만들때 사용될 예정이다.

 

4.2 벽과의 충돌 감지

OnTriggerEnter2D를 사용해

캐릭터의 콜라이더 박스가 벽의 콜라이더 박스와 닿는 순간

해당 벽의 변수가 false로 바뀌게 된다.

 

그리고 OnTriggerExit2D를 사용해

 두 콜라이더 박스가 멀어지는 순간 다시 해당 변수는 true로 바뀌게 된다.

 

 

 

4.3 이동키 입력 감지

Input.GetKey(KeyCode.입력키)를 활용해 무슨 키보드를 입력했는지 감지하고

그 상태에서 해당 키로 인해 이동하려는 방향 변수가 true이면

해당 방향으로 speed변수 속도로 이동할 수 있게 작성했다.

 

만약 오른쪽 벽에 캐릭터가 닿아서 rigtmove가 false인 상태가 되어버렸으면

아무리 오른쪽 화살표키를 눌러도 rigtmove가 ture가 아니기 때문에 오른쪽으로 이동할 수 없다.

결과적으로 캐릭터는 카메라 화면밖을 벗어날 수 없게 되었다.

 

참고로 저기 있는 reversmove 변수는 예전 다른게임 만들때

왼쪽으로 움직이면 캐릭터 이미지도 왼쪽으로 반전되게 하기 위해 만들어 놓은건데

이번 게임 제작에서는 쓸모없는 변수이다.

 

4.4 업데이트 함수에 이동 함수 추가

필요한 함수를 다만들었으니 이제 업데이트 함수에 이동함수를 추가해주자.

이제 모든 이동 스크립트 작성이 끝났다.

5. 이동 스크립트 추가

이제 캐릭터에 이동 스크립트를 추가해주자.

아까 말했듯이 reversmove 변수는 안 쓸거라 체크하지 않았다.

 

 

6. 결과물

영상에서 보이는 것처럼 캐릭터가 카메라밖을 빠져나가지 못한다.

 

인게임화면

 

 

7.이동 이펙트 프리팹 제작

캐릭터를 조작할 수 있어 생동감이 생기긴 했는데 아직 뮤직비디오 속 캐릭터와 비교하면 뭔가 부족하다.

바로 이동할때 뒤에서 나오는 이펙트 파티클이 없기 때문이다.

뮤직비디오처럼 예쁘게 만들수는 없지만 그래도 비슷하게 흉내는 내볼 수 있다.

위 사진의 초록색 막대기 이미지를 빠르게 여러개 생산해서 비슷한 효과를 만들어볼 생각이다.

 

 

7.1 이펙트 이동 스크립트 

이펙트 이미지가 계속 왼쪽으로 가야하기 때문에

저번에 배경 스크롤 이동만들 때 썼던 스크립트를 다시 사용했다.

 

7.2 파괴_쿨타임 스크립트 

이펙트 이미지를 계속해서 생성해낼건데 오브젝트들이 사라지지 않으면 

무한히 많은 오브젝트들이 생성되 렉이 걸릴 확률이 높다.

그래서 일정시간이 지나면 오브젝트가 파괴되는 스크립트를 추가해주었다.

Destroy(this.gameObject); 를 가지고 있는 함수를 만들고

Invoke를 사용해서 일정 시간이 지나면 해당 함수를 발동하게 만들었다.

 

 

7.3 스크립트 적용

이펙트 파티클 이미지에 스크립트들을 추가해주고 몇가지 설정을 바꿔주었다.

일단 캐릭터를 가리면 안되니까 Order in Layer를 -1로 설정해주고

왼쪽으로 움직여야 하니까 Speed를 -3으로 설정,

파괴 타이머인 Time값을 1.4로 설정해 주었다.

이것으로 왼쪽으로 3의 속도로 이동하며 1.4초뒤에 스스로 사라지는 오브젝트를 만들었다.

7.4 프리팹으로 만들기

다 만들었으면 Hierachy탭에 있는 오브젝트를 project로 마우스 클릭 드래그해서 옮겨주자

이러면 언제 어디서든 생성할 수 있는 프리팹으로 변환된다.

Hierachy탭에 있는 오브젝트는 이제 삭제해도 된다.

 

프리팹까지 만들었지만여기서 끝이 아니라

 이제 이걸 계속해서 생성하는 스크립트를 만들어야 한다.

 

 

8. 이펙트 생성 스크립트 작성

코루틴 함수는 함수내에 적혀져있는 걸 끊임없이 반복하게 하는 함수이다.

 

IEnumerator의 코루틴 함수 내에서

Instantiate로 특정 위치에 특정 오브젝트를 생성하고

yield return new WaitForSeconds(cooltime);을 써서 일정 시간동안 기다리게 하였다.

 

업데이트 함수에서 StartCoroutine으로 그 함수를 불러와서

 일정 시간마다 끊임없이 이펙트를 생성하게 만들었다.

선언을 보면 effectsprite 변수가 있다.

여기엔 아까 만든 프리팹을 넣을 계획이다.

 

 

 

9. effectPos 생성

그리고 아까 선언에 있던effectPos는 effectsprite가 생성될 위치인데

캐릭터 위치를 그대로 가져다 써도 되지만 좀더 자세하기 위치를 설정하기 위해 

캐릭터 오브젝터 하위에 Create Empty로 빈 오브젝트인 effectPos를 생성해주었다.

(하얀 마름모가 effectPos이다.)

 

9. 이펙트 생성 스크립트 추가

이제 마지막으로 캐릭터에 스크립트를 추가해 주고

Effectsprite칸에는 프리팹을 끌어다 넣고,

EffectPos칸에는 effecPos오브젝트를 끌어다 넣었다.

Cooltime은 0.01로 설정해서 0.01초마다 이미지가 생성되게 만들었다.

 

 

10. 결과물

 

인게임화면

완전히 똑같지는 않지만 대충 비슷한 이동 효과가 만들어졌다.

 

이제 이동까지 구현했으니 다음글에서는 오브젝트들을 배치하고

상호작용 효과를 구현해볼 계획이다.

 

 

뉴진스 파워퍼프걸 팬게임 제작 (4)_ Stage1_배경 스크롤 제작 (New jeans Powerpuff girls fangame)

 

뉴진스 파워퍼프걸 팬게임 제작 (6)_ Stage1_오브젝트 구현 (New jeans Powerpuff girls fangame)