대사 불러오기

Construct 3는 AJAX를 지원한다. JSON 형태의 프로젝트 파일을 가져와 객체의 형태로 변환할 수 있고, URL을 통해 컨텐츠를 다운로드하거나 웹에 업로드할 수 있다.

AJAX - Construct 3 Documentation ★★★★★

Ajax란 Asynchronous JavaScript and XML의 약자입니다.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.
 
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.
 
이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.
 
 - JSON
 - XML
 - HTML
 - 텍스트 파일 등

코딩교육 티씨피스쿨

 

Illume을 개발할 때 대사 파일은 엑셀로 작성하고 상황별로 csv 포맷으로 저장한 후 유니티로 가져와 한 개씩 배열에 저장하며 읽었다. AJAX는 csv와 같은 포맷을 지원하지 않는다. csv 파일을 배열로 변환해주는 플러그인이 있지만, 난 공식 아니면 안 쓴다. NWjs.ReadFile("")으로 로컬 파일을 가져올 수 있지만, NW.Js 환경에서만 가능하다.

하지만 나는 여전히 대사 파일을 엑셀로 작성하고 싶다! 어렸을 땐 엑셀을 그렇게 싫어했는데, 지금은 행과 열로 이루어진 데이터 시트가 넘 맘에 든다. 다행히도, 구글 스프레드시트의 확장 앱 중에서는 JSON이나 XML 포맷으로 저장해주는 기능이 있다.

불과 방금 전, 공식 아니면 안 쓴다고 했지만 참 잘 만든 앱이기도 하고.. 구글 스프레드시트 확장 앱이니까.. 인정해주자 ㅎㅎㅎ

그렇다면 구글 스프레드 시트로 대사를 작성하고 - JSON으로 저장한 후 Construct 3로 가져와서 - AJAX를 이용해 배열에 저장해야 한다.

이런 식으로 작동한다. 그런데 이런 식으로만 코딩하면 나중에 파일이 아주 많아졌을 때 후회할 것이다. 그래서 반복문을 이용해야 한다. 무엇을 고려해야 하나?

---

미리 가져와 저장해야 하는 파일과 그렇지 않은 파일이 있다. 후자는 반복문에서 제외하고 함수로 원할 때만 가져오도록 만들어야 한다.

AJAX에 요청하고 가져올 데이터를 구별할 태그와 그에 해당하는(데이터를 저장할) 배열의 UID의 관계를 미리 작성해야 한다. 아마 사전을 이용하면 좋을 것이다.

함수로 원할 때만 가져올 파일은 대사 파일 말고 또 뭐가 있는진 아직 모르겠다. 적어도 대사의 경우 하나의 배열에 매번 불러오고 덮어써서 사용하는 방법이 가장 이상적이다. 그러므로 태그와 UID는 필요 없다. 파일만 가져오면 된다.

이 두 방식은 위의 이미지와 같은 액션으론 불가능하다. 왜냐하면 액션에서는 드롭 메뉴를 통해서만 파일을 선택할 수 있기 때문이다.

그래서 이렇게 URL으로 가져와야 한다. (작성일 기준 URL에 한글이 들어가면 요청에 실패한다)

폴더 경로를 무시한다는 점이 신기하다.

Construct 3의 프로젝트 바의 폴더는 조직 전용이다.
내보내면 프로젝트 표시줄의 폴더에 관계없이 모든 파일이 동일한 상대 폴더에 있게 된다.
사용자 지정 HTML 콘텐츠에서 상대 URL을 사용할 경우 이 점을 유의하십시오.

그러나 또 우려사항이 있다. 실행 가능한 파일로 추출했을 때에도 경로와 파일 이름이 같으냐.

 

(엄청 구글링하는 중)

 

...아 맞다 나 라이센스 있으니까 추출해볼 수 있구나!

그렇게 바로 시도해보니 잘 작동된다! 아니 검색해보니 추출 이후엔 경로가 바뀔 수 있다는 얘기가 얼마나 많았는데!

출처 : construct.net/en/forum/construct-3/how-do-i-8/project-files-construct-126752

Fetching project files - Construct 3 Documentation ★★★★★

A more significant problem is that several types of exports don't actually run on a web server. In particular Android apps internally run on a [file:] scheme, which has strict security restrictions which prevent your app being able to fetch local files normally.
(근데 이건 자바스크립트 메뉴얼이다. 이벤트 시트는 이 문제에서 자유로울 수 있음)

How do I link to a project file? ★★★★★

 

그래서 안드로이드에서도 실행해보기로 했다.

APK로 추출한 후 안드로이드 폰으로 옮겨 실행해보니.. 잘 된다. 그럼 저 사람들 설명은 뭐야? 맥OS와 안드로이드에서 문제가 없다면 iOS에는 있나? iOS에서 테스트용 빌드를 실행하는 방법은 아직 모르지만, 적어도 모바일 운영체제인 안드로이드에서 문제가 없었다면 괜찮지 않을까.

내 생각엔 자바스크립트의 fetch 함수에만 해당하는 이야기 같다. 그렇다는 건 이벤트 시트에서는 이 문제 해결을 이미 지원하고 있다는 얘기이고.. 이렇게 또 한 번 블록 코딩의 위대함을 예찬하게 되었다. ㅎㅎㅎ

---

새로운 문제에 직면했다.

 

UID로는 인스턴스만 찾을 수 있다.

UID만으론 객체를 선택할 수 없다. 내가 착각한 것은 UID가 객체의 ID가 아니라는 것.

UID는 모든 각 인스턴스의 고유 ID인데, 레이아웃에 드래그할 수 없고 따로 생성하지도 않았는데도 배열을 사용할 수 있어서, '같은 객체의 인스턴스'에서 UID로 선택할 수 있는 것처럼 '같은 데이터 형식의 객체'를 찾을 수 있을 줄 알았다! 처음 시작할 때 자동으로 인스턴스를 하나 생성하나보다.

배열과 같은 데이터 형식의 객체는 레이아웃에 드래그할 수 없을 뿐이지, 인스턴스를 생성할 수 없는 게 아니다. 그러니까 반복문에서 UID를 이용해 찾으려면 하나의 배열(객체)로 여러 배열(인스턴스)을 만들어서 사용해야 한다. 어차피 태그로 쉽게 구분할 수 있으니 문제는 없다. 게다가 파일 개수만큼 객체를 생성하고 UID를 입력하는 수고를 할 필요도 없다..

AJAX의 'On Completed' 이벤트는 반복문에 들어갈 수 없다.

즉 AJAX.LastData 표현식을 사용할 수 없다는 말인데, 이 표현식은 내가 아는 한 두 가지 상황에서만 쓰인다.

1. On Completed 이벤트에서 태그에 해당하는 JSON을 가져오므로 아주 명확하다.
2. 말 그대로 마지막으로 가져온 JSON. 보통 'Wait for previous action' 액션과 함께 쓰인다.

엥? 그럼 2번을 쓰면 되잖아? 어차피 처음부터 불러오려면 반복문을 쓰는데, 그 안에 코드를 넣으면 되잖아. (이걸 깨닫기까지 1시간 반이 걸렸습니다) 아무래도 머릿속으로 대안을 도출하는 절차를 재고할 필요가 있겠습니다.

그렇게 완성한 코드입니다.

생각해보면, 이렇게 미리 가져올 파일이 그렇게 많을 것 같지 않다. 그래서 그냥 단순무식하게 일일이 선택하는 방법으로 했다면 오히려 시간을 많이 절약했을 듯. 그래도 이러면서 배우는 게 있겠지... ㅎㅎㅎ

함수로 원할 때만 파일을 가져오는 코드는 훨씬 간단하다. 일단 가져온 후에 처리하는 코드는 나중에 따로 만들면 되겠다.

 

버그 수정

저렇게 완성한 코드에서 문제가 발생했습니다. 여러 테스트 결과, 이유는 모르겠지만 사전에서 문자열 키의 바이트가 클수록 찾는 속도가 느려서 발생하는 문제였습니다. 순서를 건너뛰거나, 잠시 멈춥니다.

해결할 방법은 이 글이 너무 길어졌으니 다음 글에서!

대사 불러오기 기능 수정