전체 글 41
-
-
지금까지 roll20에서 사용가능한 커스텀시트의 HTML, CSS, JavaScript 코드를 작성하는 법에 대해 살펴보았습니다. 이렇게 만든 시트를, 별다른 과정 없이 모두가 사용가능하도록 roll20에 올려 두고 싶다면 해야 할 일이 있습니다. 먼저 GitHub에 가입해서 계정을 만드는 일입니다. 그래야 우리가 만든 코드를 보기 쉽게 웹에 공개할 수 있어요. 이 Git이라는 것은 어떤 파일의 내용이 변경되었을 때, 그것을 여러 명의 사용자가 동시에 작업하거나 해서 충돌이 일어나는 것을 막을 수 있도록 바뀐 부분을 추적해서 보여주는 소프트웨어입니다. 조금 더 자세히 알고 싶다면 다른 글을 읽어보면 좋지만, 그냥 이 글을 그대로 따라하기만 해도 괜찮습니다. roll20은 이것을 이용하는 사이트, 깃허브의..
-
-
-
-
-
-
-
-
이번에 만들어 볼 것은 이런 것입니다. 수치가 그리 크지 않은(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개의 능력치를 전부 합한 값을 이용하여 음악의 능력치를 결정합니다. 수식으로 표현하자면 ..
-
-
이 글과 다음 글에 나누어, 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가 복잡해져도 미리보기가 제대로 지원되지 않지만요. 그리고 이 편집기에는 치명적인 단점이 있습니다. 한글을 쓰면 글자가 중복되어 입력된다는 문제가 있어요. 영어로 입력하거나, 다른 곳에서 입력한 한글을 복사해서 붙여넣으면 괜찮지만 그래도 꽤 ..
-
안녕하세요, Sanity Caring Plantation의 직원 여러분들. 우리 재단에서는 Gardening Manager의 리포트 시트를 관리하기 위한 획기적인 방법을 소개합니다! 직원이 ■닌 분■은 이 정보■ 열람할 수 없■■■. ■■■■■ ■■■ ■■■■ ■■ ■■■■■■ ■■■■! ■■■ ■■■■■. 재단 직원 ID 로그인 중... 인가 등급을 확인. 보안 열람이 승인되었습니다. 이하의 설명은, 이해를 돕기 위해 예시에 공식시나리오 「신흥 종교 단체의 습격」에 대한 스포일러를 포함하고 있습니다. 플레이 예정이 있으신 분은 창을 닫아 주세요. 이하의 내용은, 모험기획국의 TRPG 인세인과 그 서플리먼트가 되는 SCP를 구매하여 정독하였음을 기준으로 서술하고 있습니다. 규칙에 대해 상세히 설명하고 있..
-
이 글에서는, 여러 매크로를 중첩시켜 응용하거나 2가지 선택지 중에서 주사위 결과에 따라 하나만을 출력하는 등 복잡한 명령어를 설명합니다. 먼저, 특정인에게 귓속말을 보내는 법은 다들 알고 계시겠지요. /w 이름 보내고 싶은 말 이름의 양 옆에 띄어쓰기로 구분됩니다. 그런데 그 캐릭터 또는 PL이 여러 단어의 조합인 경우에는, 해당 인물의 이름의 첫번째 단어(띄어쓰기가 나오기 직전까지)만을 이름으로 적습니다. 그 뒤에 오는 단어는 전부 귓속말의 내용으로서 전송됩니다. 그리고 보통은 gm에게 귓속말을 많이 전하게 되기 때문에, /w gm ?{하고싶은 말} 이러한 매크로를 통째로 저장해서 사용합니다. ?{하고싶은 말}이라고 적었던 것이, 이와 같은 메세지 창으로 뜨게 되어서 편리하지요. 직접 입력한 뒤 su..
-
...라는 제목입니다만, 안타깝게도 roll20에서는 프로 구독 계정이 아니면 캐릭터시트를 custom으로 설정할 수가 없습니다. 그럼 저 제목은 어그로인거냐! 라고 하셔도... 어느 정도 부정할 수 없습니다. 하지만 이 글에서는, 모든 캐릭터 시트의 각각에 제공되는 Bio & Info 란에 시트를 작성하고 해당 항목을 클릭해서 굴림을 수행하는, 커스텀 시트로서의 기능을 다할 수 있는 방법을 설명합니다. 준비물은 roll20에 가입한 계정과 당신의 시간. 우리는 지루한 반복작업을 하게 될 겁니다. 예를 들어, 끔찍한 거위들 기반 TRPG의 시트를 작성해 봅시다. 그 룰에는 은밀함, 재빠름, 집요함이라는 스탯이 있고, 기본 1을 가진 상태에서 플레이어가 3점의 프리포인트를 배분할 수 있습니다. 그러면 At..
-
정오표(에러타) 『언성 듀엣』에, 잘못 기술된 부분이 존재했던 것이 발각되었습니다. 이하에 해당 장소와 그 올바른 기술을 정리해 두었습니다. 불편을 끼쳐드려 죄송합니다만, 확인 후 플레이 해주시기 바랍니다. 기재되어 있는 것 이외의 문의사항이 있다면, 문의 양식으로 연락해 주십시오. 개별적으로 답변은 어려우나, 향후 정오표나 Q&A 작성에 참고하겠습니다. 갱신 이력 20/12/24 갱신 20/11/04 정오표 공개 ● 11p 15번째 줄 객관적으로 자신의 캐릭터의 취할 구조를 선언한다 客観的に自分のキャラのとる構造を宣言する ↓ 객관적으로 자신의 캐릭터의 취할 행동을 선언한다 客観的に自分のキャラのとる行動を宣言する ● 45p 변이에 대한 저항 変異への抵抗 2번째 줄 어느 정도는 원래대로 ある程度は元とおりに ↓..
-
-
캐릭터 시트 일본 시트 사이트 character-sheets.appspot.com/bloodpath/edit.html ブラッドパス キャラクターシート character-sheets.appspot.com 구글 스프레드시트 twitter.com/zughwa_TRPG/status/1341665339994607617 😷주콰 is typing...💬 on Twitter “블러드패스 캐릭터시트 3가지버전으로 만들엇구... 데이터 자동입력도 연동햇는데... 레이아웃 사용하실 분은 디엠주시기” twitter.com 맵세팅 twitter.com/8760GB/status/1258801027186212865 💊건펫 on Twitter “개인 필요로 의해 블러드패스 roll20 용 맵 시트를 제작했습니다~ 그 외 필요하신 것들..
-
마법학 특강 『마도서대전 RPG 마기카로기아』를 플레이하면서 이해하기 어려운 점을 설명하겠습니다. 규칙에 대한 의문 먼저, 『마기카로기아』의 규칙에 대한 질문에 답변을 드리겠습니다. ● 차례에 대해 Q : 마법전에 대한 질문입니다. 마법전 때 자신의 차례라고 되어 있는데, 이것은 언제까지일까요? 예를 들어 공격 스텝에 공격 처리가 끝난 후, 자신의 차례에 사용 가능한 주문을 사용할 수 있습니까? A : 마법전에서 자신의 차례란, 자신의 소환 스텝이나 자신의 공격 스텝을 말합니다. 소환 및 공격 처리가 완료되고, 그 외 아무것도 할 일이 없어지면 그 스텝은 종료됩니다. 질문 내용에 있듯이, 공격을 실시한 후 주문을 사용할 수 있습니다. ● 〈단장〉에 대해서 Q : 〈단장〉은 기본적으로 인간에게 빙의한다고 ..
-
● 시나리오에 대하여 기본룰북(대형판)에 따라 작성된 시나리오입니다. GM은 필요에 따라 시나리오를 개변해도 괜찮습니다. HO에 장서의 기본 룰북(대형판) 게재 페이지를 기재하고 있는데, 판본에 따라 페이지가 다소 바뀔 가능성이 있습니다. ● 시나리오 데이터나 포함된 그림의 저작권 및 사용에 관해 제작자에게 저작권이 있습니다. (※컷만화 등의 일러스트는 프리 소재가 아닙니다.) 시나리오를 가지고 플레이하는 것 이외의 목적으로 데이터를 사용할 수 없습니다. 양해바랍니다. 에너미 컷만화그림 곤충은 실루엣 소재(http://kage-design.com/)를 가공하였습니다. ● 온라인 대응 및 시나리오집의 에라타에 관해 시나리오 에라타, 온세용 일러스트, 오프세 인쇄용 PDF, 에라타 게재. 오프세를 하는 경우..
-
규칙 전반에 대한 질문 ● 캐릭터의 이행 Q : 『기본 룰북』이 되면서, 몇 가지 규칙이 변경되었습니다. 지금까지 신서판에서 플레이하던 캐릭터가 새로운 규칙에 어긋난 경우 어떻게 하면 좋을까요? A : 신서판 캐릭터를 마이그레이션하는 경우, 아래의 순서로 데이터를 재구축할 것을 권장합니다. 먼저 해당 캐릭터의 모든 마법을 없는 상태로 하여 능력치를 산출합니다.그리고 능력치에 따른 계제의 PC로 기본 룰북의 규칙에 따라 새로운 캐릭터를 만듭니다. 앵커나 각 앵커의 [운명]점, 상흔, 수집 마법, 의무는 기존 캐릭터를 그대로 계승합니다. 원형을 성장시켰던 경우, 신서판의 룰에 따라서 그 성장에 사용했던 공적점을 산출합니다. 그리고 그 공적점과 동일한 마화를 획득하게 됩니다. 이 마화를 사용하여 다시 원형의 ..
-
-
아직 아무것도 준비되지 않았다면, 우선 세팅에 필요한 파일을 마련하셔야 합니다. https://insane-scenario.tistory.com/13 Roll20에서 마기카로기아 방 세팅하기 (1) 안녕하세요. 마기카로기아를 플레이하는 마법사, 그리고 세계가 될 마스터님들! 이 글은 https://roll20.net/ 에서 마기로기 세팅을 한다는 전제로 작성되었습니다. 조금 손보면 맵세팅 정도는 같은 � insane-scenario.tistory.com Roll20에서 마기카로기아 방 세팅하기 (1)의 준비를 마쳤다면, 게임 시작을 눌러서 방에 입장해주세요. 방의 오른쪽 위에서, 페이지를 열어봅시다. 페이지 설정을 눌러주세요. 자신이 쓰는 맵시트의 크기에 맞게 가로 세로를 입력하고, 불투명도를 최저로 낮..
-
안녕하세요. 마기카로기아를 플레이하는 마법사, 그리고 세계가 될 마스터님들! 이 글은 https://roll20.net/ 에서 마기로기 세팅을 한다는 전제로 작성되었습니다. 조금 손보면 맵세팅 정도는 같은 격자 칸으로 구성된 코코포리아, 유드나리움, 도돈토후에서 적용할 수 있는 부분도 있다고 생각합니다. 모든 세팅은 필수가 아니며, 온라인 세션을 하시는 분들의 편의를 조금 도울 수 있을 뿐입니다. 먼저 마기로기 세팅을 위해서 받아야 할 이미지 자료들이 있습니다. ① 맵시트 1장 더보기 기본적인 맵시트에는 장서 배치가 고려된 경우도 있고, 그냥 스펠바운드 배치만 있는 경우도 있습니다. 장서를 토큰으로 배치해서, 시트와 연동하면 마스터나 플레이어들이 그 충전을 확인하기 용이하다는 장점이 있지만 세션 전에 미..
