[테오타운 플러그인 제작] [기초 #2] JSON 파일 작성하는 방법

이전 글을 읽지 않으셨다면 먼저 읽고 와주세요.

[테오타운 플러그인 제작] [기초 #1] 플러그인 구조의 이해와 건물 이미지 파일 만들기

이전 글에서 잠깐 언급했듯이 json파일은 이미지 파일이 어떤 유형(건물, 도로, 자동차, 야경)인지 알려주고 이름, 설명, 기능과 성능을 담고 있습니다.

 

테오타운 플러그인 만들 때 컴퓨터로 json파일을 편집하는 대부분의 분들이 메모장을 사용하는 걸로 알고 있습니다.

(간단한 코드는 theotown plugin creator 사이트도 나쁘지 않죠)

 

메모장은 설치도 필요 없고 사용법도 간단하지만 불편한 부분도 있는 게 사실입니다

한 가지 예를 들어 이렇게 줄 바꿈을 하고 싶어서 엔터를 누르면

 

다음 줄이 홀랑 맨 앞으로 가버립니다. 어쩔 수 없이 스페이스바를 몇 번 눌러줘야겠죠.

짧은 코드는 크게 거슬리지는 않은데 애니메이션 등 긴 코드가 필요한 경우에는 이게 굉장히 귀찮습니다.

 

또한 문법적으로 코드가 틀린 부분을 알아차리기 쉽지 않아서 테오타운에 적용 시도하고 나서야 알아차리기 십상입니다.

완성하고 난 뒤 확장자를 txt에서 json으로 바꿔줘야 하기도 하죠.

 

이런 단점 때문에 저는 비주얼 스튜디오 코드라는 프로그램을 사용합니다.

 

1. 비주얼 스튜디오 코드 설치방법

설치를 꺼려하시는 분이 가끔 있습니다.

저장공간도 별로 많이 차지하는 편도 아니며 렉도 안 걸리고 가벼운 프로그램입니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

여기로 들어가 주세요.

 

다운로드를 눌러줍시다.

 

그럼 어느 페이지로 이동되고 다운하겠냐는 창이 뜨거나 자동으로 다운로드될 겁니다.

다운로드를 마치셨다면 더블클릭해서 실행해 주세요.

 

동의하고 다음

 

바탕화면에 바로가기 만들면 찾기 쉽겠죠.

그 외에 설정은 안 만지는 걸 권장..

 

설치

 

2. 비주얼 스튜디오 코드 세팅

이제부터 테오타운 json 파일을 편집할 수 있도록 세팅해 보도록 하겠습니다.

 

설치가 끝났다면 비주얼 스튜디오 코드를 살펴보기 전에 찾기 쉬운 곳에 폴더 하나 만들어 줍시다.

(여기서부터 비주얼 스튜디오 코드를 vscode라고 부를 겁니다. 혼동하지 마세요)

여기다가 json을 모아두면 편집하기도 쉽습니다. 다시 vscode로 돌아와서 왼쪽에 확장을 눌러줍시다.

 

왼쪽에 검색창에 korean이라고 검색하면 첫 번째로 나오는 걸 설치해 줍시다.

그리고 vscode를 껐다 켜면 한국어로 사용할 수 있습니다.

 

이번에는 theotown를 검색해 해당 플러그인을 설치해 줍시다. 제가 직접 만든 플러그인으로 json 작성을 도와줄 겁니다.

 

모든 플러그인을 설치했다면 파일 -> 폴더 열기를 눌러 아까 만든 폴더를 선택해 줍니다.

 

신뢰합니다.

 

3. 사용 방법

자 이제 어려운 고비는 넘겼습니다!

이제 사용 방법을 알아봅시다

저 동그라미를 누르면 파일을 생성할 수 있습니다!

파일이름 뒤에. json을 치고 엔터!

 

멋지네요! 이제 여기서 코드를 작성하면 됩니다.

 

 

여기서 생성된 파일은 아까 만든 폴더에 들어가 보면 확인할 수 있습니다!

굳이 따로 저장 버튼을 누르지 않아도 자동으로 저장됩니다

 

 

 

메모장보다 한결 간편하게 코딩할 수 있는 비주얼 스튜디오 코드를 소개해드렸습니다.

 

사실 프로그램 선택은 본인 자유이니 메모장이 더 편하다 혹은 다른 게 더 편하다 하시면 원하시는 거 쓰시면 됩니다.

다만 저의 강좌는 이 방식대로 진행됩니다.

 

4. json 파일의 구조 이해하기

우선 [ ] (대괄호) 안에 { } (중괄호)를 입력해 줍니다. 테오타운 플러그인에서는 기본적으로 [ ] 안에 하나, 혹은 여러 개의 { }들이 들어있는 구조로 되어있습니다. 하나의 { }당 하나의 건물이 들어있습니다.

 

[]

플러그인 작성의 기본 틀

 

[
    {
        건물
    },
    {
        건물
    }
]

예시

 

위에서 보셨다시피 json 파일은 여러 태그들로 이루어져 있습니다. 각각의 태그들에 건물의 속성을 부여해주어야 합니다. 이러한 태그들은 “태그의 이름”: 값 형태로 되어 있으며 아까 말했던 { } 안에 적성해주셔야 합니다.

 

“무엇을”:어떻게 설정

 

우선 건물에 필수적으로 필요한 태그들을 살펴보도록 하겠습니다. !?입력후 필수 건물코드 샘플을 도움말과 함께 불러옵시다.

 

 

어려워 보이지만 그렇지 않습니다. 코딩 같은 거 안 해보셨어도 충분히 하실 수 있습니다.

간단하게 문법을 알아봅시다.

 

• 위에서도 말했지만 파란 부분은 태그의 이름, 주황색이나 파란 부분은 값입니다. 태그의 이름과 값 사이에는 :를 적으셔야 합니다.

• 태그에 문자열이 들어가야 한다면 큰따옴표 안에 값을 입력하셔야하고 숫자나 참/거짓이 들어가야 한다면 큰따옴표 없이 값을 설정해 주면 됩니다. 

• 태그를 더 추가하고 싶다면 끝에 쉼표를 붙이고 추가하셔야 합니다. 마지막 태그에는 쉼표를 붙이시면 안 됩니다.

 

• 태그의 이름은 따옴표 안에 적으셔야 합니다만 자동완성 기능을 사용하실 거라면 따옴표 없이 입력하셔야 밑에 태그가 자동으로 추천됩니다. 목록에서 원하는 태그를 선택해 클릭하거나 엔터를 누르시면 자동으로 태그가 완성됩니다.?를 붙이고 태그를 작성하면 도움말도 함께 제공됩니다.

 

• 태그 철자가 기억이 안 나신다면 /(빗금)을 붙이면 나오는 목록에 다양한 태그를 골라쓰시면 됩니다. 이어서 태그의 용도를 입력하다 보면 범위가 점점 좁혀져 태그를 찾기 더 쉬워집니다.
• 추가로 테오타운 json파일은 모두 영어로 작성해주셔야 합니다.

위에서 보셨다시피 json 파일은 여러 태그들로 이루어져 있습니다. 각각의 태그들에 건물의 속성을 부여해주어야 합니다.

우선 건물에 필수적으로 필요한 태그들을 살펴보도록 하겠습니다.

 

 

"id":""

 

테오타운 건물에게는 저마다 고유 아이디를 하나씩 가지고 있습니다. 기존의 존재하는 다른 건물들과 아이디가 겹쳐서는 안 됩니다. 겹치지 않는 선에서 자유롭게 정해주세요. 보통 제작자의 이름이나 닉네임을 앞이나 뒤에 붙여서 아이디가 중복이 되는 걸 피합니다.

 

 

"type":""

 

말 그대로 건물의 유형을 설정합니다. 주석에 사용 가능한 값이라며 주어진 값들만 사용가능하며, 문자열이기 때문에 따옴표 안에 값을 입력해주어야 합니다. 

 

(! 주상공 건물로 설정할시 level 태그를 필수로 추가해주셔야합니다!)

 

 

"width":,
"height":

 

여러분이 만든 건물이 차지하는 땅의 가로칸 갯수와 세로칸 갯수를 적어줘야 합니다. 어차피 가로세로가 같은 값이어야 하는데 왜 두번 적게 해놨는지 모르겠네요.

 

 

 

"frames":[{"bmp":"사진파일이름.png"}]

여러분이 힘들게 만든 이미지 파일의 이름을 입력해주시면 됩니다.

 

저는 이렇게 코드를 완성했습니다.

[
    {
        "id":"green_jeongfol",
        "type":"residential",
        "width":1,
        "height":1,
        "frames":[{"bmp":"green_jf.png"}],
        "level":1
    }
]

5. 마무리

이렇게 필수코드를 모두 입력하셨다면 이제 기본적인 플러그인의 형태를 모두 갖추었습니다. 또 다른 속성을 부여하고 싶다면 위에서 말한 방법대로 태그를 추가해주시면 됩니다.

 

애니메이션을 주거나 야경을 만들고 싶으시다면 앞으로 작성될 심화편을 참고 하시기 바랍니다.

심화 글이 작성되면 여기에 표시됩니다.

 

다음 글에서는 완성한 플러그인이 잘 작동하는지 테스트하는 방법에 대해서 알아보도록 하겠습니다.

[테오타운 플러그인 제작] [기초 #3] 상점 등록 전 플러그인 테스트 하는 방법