예제) 개인적으로 유용할 예정인 예제 모음

이 글 작성일 기준 공식으로 제공하는 예제를 하나하나 살펴보고 내가 상상하는 나의 게임에 유용하겠다는 생각이 드는 예제 모음입니다.

---

1.  9-patch 이미지

 이미지의 길이나 크기를 변경해도 본래의 모습을 유지하는 기능. 주로 말풍선 효과에 쓰인다. 왼쪽 밑 객체의 속성에 주목.

 

2. 부모 오브젝트 설정

좌표, 크기, 각도, Z elevation, 부모 파괴 시 파괴 여부를 선택할 수 있다.

객체 그룹화(같은 객체로 취급) 기능인 '컨테이너'와의 공통점은 '부모 파괴 시 파괴 여부' 뿐이다.

Containers - Construct 3 Documentation ★★★★★

 

3. 가족 설정 (feat. 'Every X Seconds' 이벤트)

객체를 분류하는 기능. 마치 유니티 엔진의 태그 개념과 비슷하다.

이 와중에 'Every X Seconds' 이벤트에 대해 살펴보았다. 0.1초를 1초로 바꾸어 시도해보았더니, 스페이스를 꾹 누르지 않고 연타해도 1초마다 액션이 실행된다! 그 말은 즉, 같은 이벤트는 이전 이벤트가 종료되어야 실행할 수 있다. 와우 편리하군.

 

4. 게임패드 조작

키보드와 달리 아날로그 값을 사용하는 게임패드를 다루는 방법. 나는 학교에서 가상 현실 기기를 다루는 방법을 배웠기 때문에 익숙하다.

 

5. 통째로 세이브

모든 객체, 인스턴스 변수, 글로벌 및 로컬 변수, 동작 속성, 효과, 입자, 현재 재생 중인 오디오 등 프로젝트의 모든 상태를 로컬 저장소에 저장한다. (예외는 아래 링크에서 확인) 심지어 슬롯도 지원한다. 이래도 되나 싶을 정도로 단순하고 강력한 상태 저장 기능이다.

저장하고 싶지 않은 객체는 'No Save' behavior을 추가하기만 하면 끝. 물론 저장은 덜 할수록 성능에 좋다.

It is good practice to add the No Save behavior to any static objects, such as scenery and backgrounds. It can also be used on automatically-updated objects like the HUD and text objects which are updated every tick.

JSON으로도 저장할 수 있다. 그런 액션이 있지는 않고, Save 또는 Load 액션의 슬롯 이름을 SaveStateJSON(소문자도 가능)으로 정하면 가능한다보다. 이런 표현식은 자동 완성 목록에도 나타나지 않는데, 여기서 모두 볼 수 있다. (이 문서의 같은 카테고리에 있는 다른 표현식도 꼭 참고하는 것을 추천한다! 나한테.)

How to make savegames ★★★★★

 

6. 블렌드 모드

모든 이미지 블렌드 모드. 각 모드 예시는 같은 레이어에 존재한다.

특히 'destination out' 모드를 이용하면 이렇게 부분 조명 효과를 만들 수 있다. 이 때 조명 이미지가 있는 레이어는 불투명의 검은 색이어야 하고, 'Force own texture'을 활성화해야 한다.

(21.02.02)(예제) Mask effect puzzle : '마스크'로만 볼 수 있는 숨겨진 객체의 레이어만 'Force own texture'이 활성화되어 있다.

 

7. 타임라인

타임라인 재생이 끝난 후 다시 재생하면 처음 위치가 아닌 현재 위치로부터 재생이 된다는 점이 의외여서 살펴보았다.

Timelines - Construct 3 Documentation ★★★★★

먼저 그 이유는 Property track의 'Result mode'가 'Relative'로 되어있기 때문이다. 'Absolute'라면 초기부터 재생한다.

타임라인은 타임라인 폴더, 트랙 폴더, 트랙 속성 폴더가 있다. 이 중 타임라인 폴더만 어떻게 쓰는 건지 모르겠다!!

These are used to organise nested in a parent timeline and don't have any impact in the playback.
파파고 번역 : 이 설정은 상위 시간 표시 막대에 중첩된 항목을 구성하는 데 사용되며 재생에는 아무런 영향을 미치지 않습니다.

기본값(Default)이 있는 속성은 상위 트랙의 상속을 받는다. 근데 최상위 트랙도 기본값이 있다! 그럼 어떻게 되는 걸까?

위의 출처.

이렇게 된다.

타임라인 트랙에 이용할 객체를 액션으로 바꾸어 사용할 수 있다. 타임라인 하나로 모든 객체가 돌려쓰기 가능.

또 궁금한 점이 생겼다. 한 객체에 두 타임라인을 동시에 재생시킬 수 있을까?

(직접 시험해보고 싶지만 무료 버전에서는 타임라인을 최대 한 개만 생성할 수 있다. 나중에 알아내면 이 부분에 추가해야지)

추가 : 타임라인의 재생 속도를 조절할 수 있다. 음수도 가능하다. 오예.

 

---

8. 음향 효과

몇 개 생략됐지만 지원하는 대부분의 오디오 효과. 파라미터를 보면 의외로 고급 제어가 가능하다.

 

9. 총알 충돌 테스트

'Bullet' Behavior의 속성 중 '단계(Stepping)'를 활성화하면 객체가 충돌체를 통과하지 않는다.

위 이미지처럼 이 기능을 사용하기 위해서는 충돌 여부가 아닌, 'Bullet' 행동의 Step에서 충돌체와 겹쳤는지 확인해야 한다. (이 때 이벤트는 상위 조건에 상속받기 때문에 충돌 여부는 조건에 없다. 어차피 Stepping이 충돌 검사 역할임.)

 

10. 레이저 (feat. 삼각함수)

Ray의 충돌 검사(Ray intersected)를 이용한 레이저 빔 효과. 단순히 이미지 너비를 조절해서 표현했다.

이 때 Ray가 향하는 방향은 각도가 아니라 위치에 따른다. 레이저가 향하는 그 위치를 삼각함수로 계산한 것을 알 수 있다. 배우면 좋을 듯.

 

11. 로컬 저장

로컬 저장소에 데이터를 저장하고 읽고 쓸 수 있는 객체. 문자열 키로 구분한다. 비동기식.

원하지 않는 오브젝트를 제외하고 통째로 저장하는 기능(5번)과 달리 원하는 데이터만 저장할 때 쓸 수 있겠다. 병행해도 좋을 듯.

브라우저 설정 메뉴를 보면 '오프라인 웹 사이트 데이터 제거' 기능이 있는데, 그 데이터의 경로에 저장된다.

동기식으로 사용하려면 비동기식으로 가져온 데이터를 Dictionary 객체에 저장해놓고 활용하면 된다. 

Local Storage - Construct 3 Documentation ★★★★★

 

12. 레이아웃 저장

사실 레이아웃이 아니라 오브젝트의 상태를 저장한다. 레아이웃이 바뀌어도 현재 상태를 유지하는 기능이다. 물론 재시작하면 원래대로.

 

13. 텍스트 BBCode

텍스트 속성에서 BBCode를 활성화하면 사용할 수 있는 모든 태그.

(예제) SpriteFont formatting : BBCode를 활성화해서 사용할 수 있다. 일반 텍스트와 다른 점을 유의.

(스프라이트 폰트는 아직 사용법을 모르고, 일반 텍스트의 해상도를 인위적으로 줄일 방법이 있는지 찾아본 후에 알아볼 예정)

 

---

14. 스프라이트 폰트 효과

언더테일이 연상되는 이 효과. 다만 Wavy와 Rainbow 효과에 BBCode를 적용하면 아예 짤려서 출력되므로 대책을 찾아야 함.

(예제) Animated text effects : 레인보우 기능이 빠져 있어서 굳이 캡쳐 안 함. Wavy 효과에 BBCode를 적용하면 마치 BBCode를 비활성화한 것처럼 출력됨. 결과가 서로 다르네?

 

15. 오디오 비주얼라이제이션 (feat. FFT)

FFT를 대강 이해했다. 이것으로 주파수 응답 그래프를 그릴 수 있고, 역시 오디오 스펙트럼(비주얼라이제이션)을 구현할 수 있다. 위 이미지의 해당 코드는 내가 최대한 보기 좋게 기존 코드에서 값을 조절한 결과이다.

Peak와 RMS 레벨(볼륨?)도 가져올 수 있는데, 음악의 다이나믹에 따른 역동적인 효과에 활용할 수 있겠다.

 

16. 엄청나게 짧은 시간 간격으로 소리 재생하기

일반적으로 1초 당 프레임은 60. 즉 매 초마다 반복하는 코드는 최소 1/60초 간격으로 실행된다.

직접 텍스트와 변수를 생성하고 시험해본 결과, 간격이 아무리 짧아도 최대 119번만 실행됐다. (내 모니터 주사율이 120hz라서 그런 듯) 그러나 재생 시간을 일정한 간격으로 더하며 재생하면 이 한계를 넘을 수 있다.

 

17. JSON 파일 읽기

AJAX 객체로 json 데이터를 가져와 JSON 객체로 변환해 사용하는 방식.

불러온 JSON 객체는 액션으로 수정 가능.

 

18. XML 파일 읽기

AJAX 객체로 xml 데이터를 가져와 XML 객체로 변환해 사용하는 방식.

불러온 XML 객체는 액션으로 수정 불가능.

 

19. 나머지 별의 별거

(예제) Pick nearest : 특정 위치와 가장 가까운 오브젝트를 가져올 수 있다.

(예제) Turret predictive aim : 터렛 Behavior 속성에서 대상 오브젝트의 속도에 대한 위치를 예측할 수 있다.

(예제) Audio player : 컴프레서, 플랜져 등 다채로운 음향 효과가 있다.

(예제) 오디오 위치하기 : 스테레오 상에서 소리 재생 위치를 정할 수 있는데, 공간에 의한 음색도 변화한다. 레이어 크기에 따르는지는 확인 안 해봄.

(예제) 멀티 게임: 채팅방, 퐁 예제를 통해 서버를 이용하는 방법을 배울 수 있을 것 같다. (실시간 게임 예제도 있지만 나는 관심X) 다만 로컬 서버만 가능한지 알아봐야 할 것.

 

(여기서부터는 2021.2.2 업데이트 기준)

20. 레이캐스트

LineOfSight behavior으로 트리거 시스템을 만들 수 있다.

 

21. 카메라 움직임

플레이어가 다른 카메라 존으로 이동하면 카메라도 해당 카메라 존으로 들어간다. 카메라 존과 뷰포트 크기가 같으면 카메라는 멈춘다.

 

22. HUD 좌표

World 좌표에서 HUD 위치에 해당하는 좌표를 가져오는 방법. CanvasToLayer와 LayerToCanvas를 이용하는 것을 볼 수 있다.

 

23. 나머지 별의 별거

(예제) Tilemap Switching Template : Depth Of Field Mask 오브젝트의 효과로, Z elevation에 따라 블러 효과를 줄 수 있나보다.

 

(여기서부터는 2021.6.15 업데이트)

24. 카메라 흔들기

Scroll To Behaviour의 기능이다.

이렇게 트윈을 이용해 레이아웃 각도를 흔들 수도 있다.

다른 예제인 'Canon launch'에서는 이와 같은 방식으로 레이아웃 크기를 흔든다.

 

25. 연쇄 폭발

나는 당연히 배열이나 IID 순서를 이용했을 줄 알았는데, 폭발체의 위치에 충돌체를 생성해 이것과 닿은 주위의 충돌체로 다음 순서를 찾는다. 참신하다!

 

26. 번개

이번에도 삼각함수로 거리를 계산한다. 그 거리마다 각도도 조금씩 바꾸며 번개를 표현하는 선을 생성해서 이어준다.

 

27. 스프라이트 조각냈다가 다시 붙이기

겁나 화려하다. 하지만 너무 어려워보인다. 나중에 필요하면 다시 보자.

 

28.  나머지 별의 별거

(예제) Manual elevator : 엘레베이터의 움직임을 물리가 아닌 트위너로 구현했다. 아마 더 성능에 좋을 듯.

(예제) Top-down jumping : 점프도 트위너로 구현하는데, 역시 하나의 트위너론 구현할 수 없다보다. 상승 트위너가 끝나면 하강 트위너를 재생한다.