[📚정보] [고도4] Part.1 - 13 카메라와 스테이지 간 이동

[김메가(scw973108)]

지금까지 우리가 만든 게임은 화면이 고정되어 답답한 느낌을 주고 넓은 맵을 구성하기도 여의치 않다. 화면이 주인공을 따라가도록 개선해보자. 또한 여러 스테이지 간의 이동도 구현해보자.

방법은 아주 간단하다. player씬을 열고 Camera2D노드를 추가한다. 이게 끝이다.

게임을 실행하고 여기저기 움직여보자. 주인공 캐릭터에 붙어있는 카메라 노드가 비추는 대로 화면이 움직이는 모습을 볼 수 있다. 훨씬 커다란 스테이지를 구성해도 주인공 캐릭터가 시야 밖으로 나가지 않으니 문제없을 것이다.

이번에는 여러 스테이지 간의 이동을 구현해볼 것인데, 스테이지가 하나밖에 없으니 또 다른 스테이지를 더 만들어주자.

파일 시스템 독에서 stage_1씬을 우클릭하고 Duplicate메뉴를 선택한다. (또는 단축키 Ctrl+D)

새로운 스테이지 씬의 이름을 입력하자. stage_2로 하겠다.

그럼 스크린샷과 같이 stage_1씬을 복제한 stage_2씬이 생성된다. 더블 클릭해서 열어보자.

이렇게 stage_1과 완전히 같은 노드 구성을 갖는 stage_2씬이 만들어졌다.

노드들을 적당히 옮기고 배치해서 stage_1과 구분되는 구조를 만들어주고 Ctrl+S로 stage_2씬을 저장해주자. 원한다면 새로운 땅과 더 많은 적 캐릭터를 추가해도 좋다.

스테이지 구성을 마쳤다면 F6키를 눌러 stage_2씬을 실행하여 새로운 스테이지가 잘 작동하는지 간단히 확인해보자.

이제 스테이지 간의 이동을 구현할 차례다. 우리는 깃발에 닿으면 다음 스테이지로 넘어가는 동작을 구현할 것이다. 그럼 일단 깃발부터 만들어야 하니 아래 링크로 접속하여 flag.png 이미지 파일을 다운받자.

https://i-mega.itch.io/sideview-dummy-graphics

graphic폴더 하위에 interaction이라는 이름의 폴더를 생성하고 다운받은 flag.png파일을 넣어준다.

그리고 또 interaction이라는 이름의 폴더를 만드는데, 스크린샷과 같이 프로젝트 폴더 바로 하위에 생성한다.

interaction폴더를 우클릭하고 [Create New]-[Scene]을 메뉴를 선택하여 새로운 씬을 생성한다.

새로운 씬의 Root Type은 Area2D로 지정하고 씬의 이름은 flag로 설정한 뒤 OK버튼을 클릭하여 씬 파일 생성을 마친다.

flag씬에 Sprite2D를 생성하고 texture속성에 flag.png이미지 파일을 할당해준다.

그리고 CollisionShape2D노드도 생성해준다. shape속성을 RectangleShape2D로 설정한 뒤 크기와 위치를 조절하여 Area2D인 최상위 노드의 충돌 범위를 설정해준다.

그리고 최상위 노드를 선택하고 인스펙터에서 layer와 mask속성을 스크린샷과 같이 설정해준다.

깃발 씬의 노드 구성은 다 끝났다. 이제 깃발을 실제 동작하게 할 스크립트를 작성하자. script폴더를 우클릭하고 [Create New]-[Script]를 선택하여 새 스크립트 파일을 생성하자.

이 스크립트는 깃발 씬의 최상위 노드(Area2D)에 붙일 것이니 상속할 스크립트를 Area2D로 지정해주자. 그리고 스크립트의 이름은 goal이라고 짓자.

스크립트의 생성을 마쳤다면 goal.gd스크립트를 드래그해서 깃발 씬의 최상위 노드에 붙여주자.

그 다음 goal.gd스크립트를 열고 스크린샷과 같이 코딩해주면 된다.

stage_1씬을 열고 flag씬을 2D스크린으로 드래그하여 적당한 위치에 배치하자.

다음 스테이지 씬파일의 경로가 필요한데, 일일이 직접 입력해도 괜찮지만 오타를 방지하고 싶다면 stage_2씬파일을 우클릭하고 Copy Path를 선택하자. 그럼 해당 파일의 경로가 복사된다.

이제 stage_1씬에 배치한 Flag씬을 선택하고 인스펙터에서 next_scene_path 속성에 방금 복사한 stage_2씬의 경로를 붙여넣기하자. (알거라고 생각하지만… 붙여넣기는 Ctrl+V를 누르면 된다) 이로서 스테이지 간의 이동을 구현 완료하였다.

이제 stage_1씬에 배치한 Flag씬을 선택하고 인스펙터에서 next_scene_path 속성에 방금 복사한 stage_2씬의 경로를 붙여넣기하자. (알거라고 생각하지만… 붙여넣기는 Ctrl+V를 누르면 된다) 이로서 스테이지 간의 이동을 구현 완료하였다.

깃발에 부딪힌 순간 stage_1이 사라지고 stage_2가 실행되어야 한다.