[CocosCreator] Localization, i18n(Internationalization)

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 Cocos Creator에서의 Localizing(Localization의 콩글리시) 방법에 대해 알아본다.

1. 로컬라이징(Localizing)

2. Cocos Creator의 i18n extension

3. 예제

---

로컬라이징(Localizing)

너프나우의 로컬라이징 

 로컬라이징란 문화(문학, 게임, 영화 등)를 현지의 특징에 맞추는 것을 의미함. 단순히 언어만 번역하는 것이 아닌 현지의 문화에 맞게 그림을 다시 그린다던가, 불필요한 표현을 제거하는 것 또한 로컬라이징에 포함된다. 이 포스트에서는 단순 언어 측면에서의 로컬라이징을 실현하는 Cocos Creator의 로컬라이징 기술에 초점을 맞출 것임.

---

Cocos Creator i18n extension

  Cocos Creator에서는 다행히도 언어 측면의 로컬라이징에 대해서 지원해주고 있다. 마치 Unity의 Asset Store 같은 Extension 스토어가 위와 같이 제공된다. (실상 Unity의 그것과는 비교불가) 

  Extension Store에서 좌측에 Creator Extension을 클릭하면 Internationalization Label and Sprite Creator Extension이 존재한다. 우리는 Localization하는 방법을 찾고 있는데 갑자기 왠 Internationalization? 둘은 동의어다. (i와 n 사이에 18개의 글자가 있다고하여 i18n으로 축약해서 부른다.) 자 이해가 되었으면 클릭해보자.

좀 잘리긴 했지만 살짝 나와있는 Download를 클릭해보자.

현 프로젝트에만 extension을 적용하기 위해 project로 선택후 install 완료되면 프로젝트를 재시작한다. (새로고침이 아니고 프로젝트를 아예 껐다가 다시 키자.)

완료하면 위와 같이 i18n 관련 플러그인이 장착 된 것을 볼 수 있다.

---

예제

demo-i18n.zip(설명에 사용될 예제 파일)

일단 예제를 다운받아서 켜보자. 그리고 Script의 i18nController.js를 켜고 onLoad 함수에 있는 i18n.init 함수에 'kr'(한국어), 'en'(영어), 'zh'(중국어)를 넣고 실행해보자. 

zh(중국어로 했을 때)

en(영어)로 했을 때

ko(한국어)로 했을 때

  이 예제는 왼쪽 기준 단어(미국인이 개발한 게임인가?)를 현지화 하는 예제이다. 가운데 label Comp에 있는 단어들과 오 른쪽localized Comp에 있는 단어들은 출력 결과는 같지만 구현 방법이 조금 다르기 때문에 알아보도록 하겠다.

i18nController.js

  가운데 local Comp는 node에 Label Component만 추가해준 뒤 i18nController.js에서 직접 cc.Label 객체들을 받아서 i18n 플러그인의 t(translate) 함수를 사용해서  문자열을 지정해준 예이다. t 함수에 label.start과 같은 값을 넘겨주고 있는데 이 값들은 resources - i18n에 정의해주면 된다. 이를 바탕으로 i18n이 런타임에 값을 대체해서 뿌려주는 것이다.

resources - i18n

en.js

zh.js

ko.js

  오른쪽 localizedLabel Comp는 가운데 예제와 같이 node에 Label 컴포넌트를 추가해준 뒤 LocalizedLabel 컴포넌트까지 추가한 예이다. 추가된 컴포넌트에 t 함수에 넣었던 값을 동일하게 넣어주면 스크립트로 설정해주지 않아도 런타임에 알아서 바꿔주므로 더 편리하다.

label 컴포넌트, i18n - LocalizedLabel 컴포넌트를 둘다 추가해준다.

Data ID에 i18nController.js에서 t에 넣어줬던 값을 넣어준다.

---