Roll20 19

지금까지 roll20에서 사용가능한 커스텀시트의 HTML, CSS, JavaScript 코드를 작성하는 법에 대해 살펴보았습니다. 이렇게 만든 시트를, 별다른 과정 없이 모두가 사용가능하도록 roll20에 올려 두고 싶다면 해야 할 일이 있습니다. 먼저 GitHub에 가입해서 계정을 만드는 일입니다. 그래야 우리가 만든 코드를 보기 쉽게 웹에 공개할 수 있어요. 이 Git이라는 것은 어떤 파일의 내용이 변경되었을 때, 그것을 여러 명의 사용자가 동시에 작업하거나 해서 충돌이 일어나는 것을 막을 수 있도록 바뀐 부분을 추적해서 보여주는 소프트웨어입니다. 조금 더 자세히 알고 싶다면 다른 글을 읽어보면 좋지만, 그냥 이 글을 그대로 따라하기만 해도 괜찮습니다. roll20은 이것을 이용하는 사이트, 깃허브의..

보호되어 있는 글입니다.

구글블로그로 이전하였습니다. https://trpg-roll20.blogspot.com/2022/10/00114.html 커스텀시트 만들기⑭:javascript의 이해 trpg-roll20.blogspot.com

보호되어 있는 글입니다.

구글 블로그로 이전하였습니다. https://trpg-roll20.blogspot.com/2022/10/00112.html 커스텀시트 만들기⑫:CSS에 폰트 임베드 trpg-roll20.blogspot.com

구글 블로그로 이전하였습니다. https://trpg-roll20.blogspot.com/2022/10/00111.html 커스텀시트 만들기⑪:무한히 만드는 fieldset trpg-roll20.blogspot.com

보호되어 있는 글입니다.

이번에 만들어 볼 것은 이런 것입니다. 수치가 그리 크지 않은(3~10 정도가 적당) 항목들을 게이지 바 형태로 체크해서, 시각적으로 한눈에 볼 수 있도록 강조할 때 사용하면 좋습니다. See the Pen 9-1 by insane (@ztkzfeix) on CodePen. 먼저 원리를 설명하자면 이렇습니다. 투명한 input의 체크박스나 라디오박스를 만들어두고, 그것을 체크하면 CSS의 서식이 변화하도록 합니다. input:checked라는 가상 선택자를 사용하면 쉽게 구현할 수 있습니다. See the Pen 9-2 by insane (@ztkzfeix) on CodePen. 앞에서 다른 코드를 짜면서 +형제 선택자와 ~인접 선택자를 사용했었는데, 기억하고 계신가요? 위와 같이 input과 span이..

이전 글에서, quartett이라는 룰의 시스템을 소개하며 캐릭터시트의 능력치 9가지에 대해 설명하고 html 코드를 작성해보았습니다. 이번에는 거기서 조금 더 복잡한 계산을 수행할 수 있도록, javascript를 써 봅시다. 구글 스프레드시트나 엑셀을 사용해 보셨다면, 함수가 어떤 방식으로 작동하는지 이해하실 거라고 생각합니다. js도 마찬가지인데, 컴퓨터의 연산능력은 매우 빠르기 때문에 모든 것을 동시에 처리하는 것처럼 보이지만 실제로는 무언가를 순서대로 수행하고 있습니다. 그래서 roll20의 캐릭터시트 내에 js를 사용하려면 html의 모든 코드를 작성한 뒤, 가장 끝부분에 로 쓰게 됩니다. 맨 위에 쓰거나 중간에 그것을 쓰면, js에서 처리해야 할 값이 이전까지의 html 중에 존재하지 않았기..

이 글에서는 자동으로 계산해주는 input 입력칸을 사용하는 방법을 설명합니다. 예시를 들기 위해, 무료로 공개되어 있는 일본 인디 룰 Quartett!의 시스템을 설명하면서 진행하겠습니다. 먼저 콰르텟이라는 룰은, 현악 사중주를 하는 음악원 학생들이 84일 동안 일상을 보내며 음악적 소양을 연마하다가 콩쿨 대회에 참여하여 아름다운 하모니를 만들어내는 것을 목표로 합니다. 그것을 위해서 각 PC에게는 수학, 언어, 사회, 자연, 신체, 기계, 생활, 출생, 음악이라는 9개의 능력치가 있습니다. 캐릭터 초기 작성 시, 음악 이외의 능력치는 2d6-2로 결정되고 배분 가능한 포인트가 7점 주어집니다. 그 결과로 정해진 8개의 능력치를 전부 합한 값을 이용하여 음악의 능력치를 결정합니다. 수식으로 표현하자면 ..

구글 블로그로 이전하였습니다. https://trpg-roll20.blogspot.com/2022/10/00106.html 커스텀시트 만들기⑥:CSS와 구조 배치 trpg-roll20.blogspot.com

이 글과 다음 글에 나누어, HTML에 놓은 요소들을 어떤 스타일로 보여줄 것인지를 CSS의 코드로 지정하는 방법에 대해 설명합니다. 그래서 display와 flex, grid 등은 다음 글에 있고, 이 글에서는 간단한 디자인적인 속성만을 살펴봅니다. width와 height 요소의 가로 폭과 세로 길이를 지정합니다. px, pt, em, cm, % 등 여러가지 단위를 지원하고, calc(100% - 20px) 같은 식으로도 쓸 수 있습니다. 여기에 min-이나 max-를 앞에 붙여서 min-width: 400px; 처럼 최소/최대를 지정하는 것도 가능합니다. display가 block이라면, width의 기본값은 100%로 보입니다. margin, border, padding 먼저, border는 테두..

이전까지, html 코드를 작성하면서 사용한 태그로는 , , , , , 이 있었습니다. 기억하고 계신가요? 잘 떠오르지 않는다면 지난 내용을 다시 복습하고 시작해봅시다. 이번 글에서는 LCS(legacy sanitation이 체크된 상태)에서도 사용 가능한 태그 중 몇 가지를 소개하고, 자주 쓰이는 속성에 대해 설명합니다. div와 class 먼저 직전 글에서 설명한 태그입니다. 와 의 형태로 쓰고, 그 사이에 다른 내용을 집어넣을 수 있습니다. 영역을 구분하고 배치를 위해서 많이 사용합니다. css에서 .apple이라고 쓴다면 과 의 사이에 있는 전체를 가리킵니다. 의 안에 다른 요소들을 집어넣은, 폴더처럼 class이름을 붙여준다고 이해해도 좋습니다. br과 img 지금까지 사용했던 대부분의 태그는,..

이 글에서는 기초적인 CSS의 문법과 display 속성에 대해서 설명합니다. 먼저 roll20의 커스텀시트를 사용하는 방을 하나 만들어보겠습니다. 게임 설정으로 들어가면, 코드를 입력할 수 있는 검은 창이 있어요. 이 HTML 창에 간단한 코드를 입력해보겠습니다. 이번에 사용할 태그는 division을 의미하는 div입니다. 먼저 하나의 div를 만들고, 그 안에 다시 2개의 div를 만들고, 각각의 안에 lorem ipsum으로 무의미한 텍스트를 생성합니다. 그리고 이것을 2단으로 정렬해보도록 CSS를 작성하겠습니다. 바로 이런 모양으로 보이도록 말이죠. roll20에서는 이런 2단 배열, 3단 배열에 대해 기본적인 레이아웃을 제공하고 있습니다. 가장 상위에 있는, 부모 div의 class를 shee..

이전 글을 따라 취향에 맞는 에디터를 설치했다면, 본격적으로 코드를 작성해 봅시다. 무작정 치기 전에, 먼저 HTML과 CSS가 하는 역할에 대해 이해할 필요가 있습니다. 둘은 각각 뼈대와 살점같은 역할을 합니다. 표나 체크박스, 입력 칸이나 버튼 같은 것을 만드는 것은 HTML에서 하고, 이것들을 어떤 색으로 지정하거나 2단으로 배열하거나 테두리를 둥글게 해 주는 등은 CSS에서 합니다. 물론 스타일 서식을 HTML의 각 태그에서 지정할 수도 있긴 하지만 CSS에서 처리하는 쪽이 더 깔끔합니다. 오늘은 CSS를 쓰지 않고, HTML로만 설명해 보겠습니다. 먼저 아주 간단한... 표 만들기를 해 보려고 합니다. 2번째 줄과 4번째 줄의 칸에는, 입력상자를 만들어서 roll20의 시트에 그 값을 저장하게 ..

결국... 이 글을 쓰게 됬습니다. 설명이 더 자세한 다른 분들의 글을 링크로 첨부한 부분이 많지만, 차근차근 읽고 따라와주세요. Roll20에서 프로 구독자라면, 게임 설정 화면에서 캐릭터 시트를 custom(사용자 정의)에 선택했을 때 다음과 같은 검은 편집기가 있는 것을 확인할 수 있습니다. 여기에는 HTML과 CSS, 그리고 번역을 위한 json의 입력란이 있고 가장 오른쪽에는 그 결과를 미리보기 할 수 있는 탭이 있습니다. 코드 양이 조금만 많아지거나 CSS가 복잡해져도 미리보기가 제대로 지원되지 않지만요. 그리고 이 편집기에는 치명적인 단점이 있습니다. 한글을 쓰면 글자가 중복되어 입력된다는 문제가 있어요. 영어로 입력하거나, 다른 곳에서 입력한 한글을 복사해서 붙여넣으면 괜찮지만 그래도 꽤 ..

이 글에서는, 여러 매크로를 중첩시켜 응용하거나 2가지 선택지 중에서 주사위 결과에 따라 하나만을 출력하는 등 복잡한 명령어를 설명합니다. 먼저, 특정인에게 귓속말을 보내는 법은 다들 알고 계시겠지요. /w 이름 보내고 싶은 말 이름의 양 옆에 띄어쓰기로 구분됩니다. 그런데 그 캐릭터 또는 PL이 여러 단어의 조합인 경우에는, 해당 인물의 이름의 첫번째 단어(띄어쓰기가 나오기 직전까지)만을 이름으로 적습니다. 그 뒤에 오는 단어는 전부 귓속말의 내용으로서 전송됩니다. 그리고 보통은 gm에게 귓속말을 많이 전하게 되기 때문에, /w gm ?{하고싶은 말} 이러한 매크로를 통째로 저장해서 사용합니다. ?{하고싶은 말}이라고 적었던 것이, 이와 같은 메세지 창으로 뜨게 되어서 편리하지요. 직접 입력한 뒤 su..

...라는 제목입니다만, 안타깝게도 roll20에서는 프로 구독 계정이 아니면 캐릭터시트를 custom으로 설정할 수가 없습니다. 그럼 저 제목은 어그로인거냐! 라고 하셔도... 어느 정도 부정할 수 없습니다. 하지만 이 글에서는, 모든 캐릭터 시트의 각각에 제공되는 Bio & Info 란에 시트를 작성하고 해당 항목을 클릭해서 굴림을 수행하는, 커스텀 시트로서의 기능을 다할 수 있는 방법을 설명합니다. 준비물은 roll20에 가입한 계정과 당신의 시간. 우리는 지루한 반복작업을 하게 될 겁니다. 예를 들어, 끔찍한 거위들 기반 TRPG의 시트를 작성해 봅시다. 그 룰에는 은밀함, 재빠름, 집요함이라는 스탯이 있고, 기본 1을 가진 상태에서 플레이어가 3점의 프리포인트를 배분할 수 있습니다. 그러면 At..

보호되어 있는 글입니다.