모딩이나 매크로 작성에 관심은 있는데 어디서 시작해야 할지 잘 모르겠는 사람들을 위해 작성함.

관심 없는 사람들은 그냥 FVTT가 이런 식으로 돌아가는구나 정도로 봐도 좋을 듯.

상/하 두 편으로 작성할 예정.


일단 기본적인 얘기를 하고 넘어가자면 FVTT는 서버(백엔드)는 node.js(JS, 즉 자바스크립트를 구동할 수 있는 환경이라고 생각하면 됨) 기반으로 돌아가고,

웹 어플리케이션이다 보니 클라이언트(프론트엔드)는 정석적인 HTML5 + CSS + JS로 돌아감.

뭐 나도 FVTT 써보기 시작하면서 웹 개발 처음 해보는 거라 잘 아는 분야는 아니니까 관심 있던 사람들이 더 잘 알 듯.


FVTT 설치 파일 안에는 서버쪽 로직을 담은 코드랑 서버에서 서버에 접속한 각 유저들의 웹 브라우저로 전송돼서 그 위에서 돌아가는 클라이언트측 코드가 같이 들어있음.

근데 서버쪽 코드는 암호화가 걸려 있는 듯 해서 이걸 수정하기는 어렵고 모딩으로 건드릴 수 있는 부분은 클라이언트 쪽임.

클라이언트 쪽에서 HTML은 페이지 구성을 담고 있는 마크업 언어고 CSS는 웹페이지를 꾸며 주는 역할임.

실질적으로 유저의 웹 브라우저에서 돌아가는 로직은 JS 파일에 들어 있음.


FVTT 설치 경로에 가서 폴더를 뒤져보면 저렇게 easyrtc.js, foundry.js, webfont.js 세 개의 JS 파일이 있는데 easyrtc.js랑 webfont.js는 영상 통화나 웹폰트 사용을 위해 가져온 것들이고

실제 FVTT가 돌아가는 클라이언트 로직은 저 4만 5천줄 가량 되는 무식하게 큰 foundry.js 단일 파일 안에 들어있음.

아마 FVTT 개발자도 저 파일 하나짜리로 개발을 하진 않을 거고 타입스크립트 같은 걸로 작성하고 JS 파일 하나로 컴파일한 거겠지만 다행히 주석 같은 건 남겨놔서 코드를 읽는 데에 큰 무리는 없음.


그래도 저 4만 5천줄 짜리를 다 읽을 수도 없는 노릇이니 간단하게 기본적인 것만 짚고 넘어가면 가장 주목해야 할 클래스는 Entity임.

플레이어 캐릭터, NPC 등과 같은 액터를 비롯해서 채팅 메시지, 컴펜디움 같은 온갖 것들이 Entity를 상속하고 있음.



엔티티는 서버와 각 유저의 클라이언트에서 동기화되는 객체의 기본 단위라고 할 수 있는데,

위에 보는 것처럼 동기화 및 저장의 대상이 되는 data를 멤버로 가지고 있으며

이 외에도 식별을 위한 id 나 각 사용자의 해당 엔티티에 대한 열람 및 편집 권한 등이 들어있음.

게임 내에서 플레이어가 직접 조작하는 대부분의 것들이 엔티티라고 보면 됨.


그리고 생성을 위한 create, 생성 전에 데이터를 준비하기 위한 prepareData, 엔티티를 브라우저에 띄우기 위해 html 코드를 생성하는 render 등의 함수(메서드)를 가지고 있음.



그리고 각 메서드 내부에서 위와 같이 Hooks.callAll을 통해 render, create 뒤에 해당 타입 이름이 붙는 이벤트를 전파하게끔 돼 있는데(채팅 로그의 경우 renderChatLog, createChatLog 등이 호출되는 식) 모딩하는 과정에서 눈여겨봐야 할 것은 이 부분임.

예를 들어 채팅 메시지에 초상화를 띄우는 모듈 같은 경우는 채팅 메시지가 렌더링 될 때 호출되는 renderChatMessage 이벤트를 구독해서

해당 이벤트가 발생될 때 전달인자로 넘어오는 채팅 메시지의 data에서 누가 채팅 메시지를 입력했는지 확인하고 해당하는 초상화를 가져옴.

그리고 다시 그 초상화를 전달인자로 넘어온 html에 끼워 넣어서 실제로 화면에 표시되는 메시지를 수정하는 방식임.


하편에서는 간단한 모듈 하나를 잡고 어떤 식으로 작동하는지 분석할 예정.