커스텀시트 만들기⑩:rolltemplate

이제 거의 다 왔습니다. html 코드에서 만들었던 button type="roll"로 연결되는 value로 채팅창에 출력해주는 것이 rolltemplate니까요. 먼저 시트에 어울리는 모양을 구상해봅시다.

css캡쳐

저는 이런 디자인을 만들어 보았습니다. 이 글에서 css스타일을 따라서 만들어 볼 수 있도록 링크를 남겨 둡니다만, 연습 이외의 목적(재배포 등)으로 사용하는 것은 금지합니다. 앞서 전체적인 캐릭터 시트를 만들 때도 그랬지만, 디자인은 그것을 만드는 사람의 몫이 됩니다. 시트 안의 항목들이 어떤 연관성이 있는지를 판단해서 배치하고 가독성을 생각해야만 하는데, 이 때 다른 사람의 디자인을 참고하면 큰 도움이 되지만 자칫하면 파쿠리가 되기 쉽습니다. 그런 걱정을 덜 수 있도록, 참고해도 괜찮은 디자인 예제를 소개합니다.

출처 : https://hanasaqutto.com/3471/game_ui_design/how-to-make-game-ui-material-2020-07-07/

이 16가지 패턴들은 심플하면서도 가독성이 좋고 멋진 디자인 예제입니다. 이것을 css로 구현하고자 할 때, 둥근 모서리는  border-radius로, 깎인 모서리는 background: linear-gradient()를 사용하면 됩니다. 보통 그라데이션 색을 칠할 때 쓰는 linear-gradient()를, 깎인 모서리로 사용할 수 있는 방법은 여기에서 자세히 설명하고 있으니 참고하세요.

 

[CSS] 모서리 자르기

HTML 모서리 한개 BUTTON BUTTON BUTTON BUTTON 모서리 두개 BUTTON BUTTON 모서리 여러개 BUTTON CSS body { background: #ddd; } .button { width: 150px; line-height: 40px; text-align: center; margin-bott..

studyhardgogo.tistory.com

이렇게 디자인 구상을 할 때의 또 한가지 주의점은, 채팅창에 올라오는 롤 템플릿의 가로 폭은 228px정도이지만 채팅 로그의 내역을 확인했을 때에는 그렇지 않게 된다는 것입니다. 이 게임의 모든 채팅 내용 보기 » 또는 내용 > 채팅 기록을 눌러서 들어간 화면은 모니터 크기에 따라 가득 채우는 길이가 됩니다. 또 이것을 다시 백업하거나 출력한다면 다른 길이가 되겠지요. 그래서, roll template을 디자인 할 때는 기본적인 모습 외에 가로 길이가 변할 경우도 고려할 필요가 있습니다. 저의 디자인은,  굴림의 숫자 부분만이 고정된 크기이고 나머지는 화면에 따라 길게 늘어나게 하고 싶다고 생각합니다. 그에 따라 세부 항목들도 일렬로 배열이 됩니다. 맨 끝부분의 장식은 좌우로 반복시키기로 합시다.

css캡쳐

그리고 이 템플릿을 출력할 상황을 상정합니다. 어떤 경우에는 딱 판정만을 할 수도 있겠고, 또는 판정 없이 내용만을 출력하고 싶은 경우도 있고, 숫자와 표 결과로 보여주고 싶은 경우도 있을 수 있습니다. 이런 경우, 그 부분이 빈칸으로 나오는 게 아니라 아예 없으면 깔끔하고 좋겠다고 생각합니다. 이 때 쓰는 것이 {{#}}와 {{/}}입니다. 이것은 roll20에서 자체적으로 rolltemplate의 결과를 처리하기 위해 제공하는 기능입니다. 사용하는 방법은 다음과 같습니다.

<button type="roll" name="roll_myskill" value="&{template:mytemplate} {{name=@{skill01}}} {{roll=[[1d100]]}} {{effect=@{effect01}}}">1번 스킬</button>

<rolltemplate class="sheet-rolltemplate-mytemplate">
    <div class="sheet-template-container">
          <div class="sheet-name">
            {{name}}
          </div>
        {{#roll}}
          <div class="sheet-roll">
          	{{roll}}
          </div>
        {{/roll}}
        {{#effect}}
          <div class="sheet-effect">
          	{{effect}}
          </div>
        {{/effect}}
    </div>
</rolltemplate>

mytemplate이 우리가 만들 롤템플릿의 이름입니다. 임의로 붙이고, 굴림 버튼의 value에서 &{template:mytemplate}으로 호출합니다. 그럴려면 롤템플릿이 있어야겠죠? 시트의 맨 끝에, rolltemplate이라는 태그를 씁니다. 이것도 roll20에서만 처리할 수 있는 태그입니다. 이 rolltemplate이라는 태그의 class는 반드시 sheet-rolltemplate-mytemplate과 같은 형태여야 합니다. 그렇게 해야 버튼에서 지정한 템플릿과, 우리가 롤템플릿 태그로 만들어준 템플릿이 같은 이름으로 인식됩니다. 나머지는 캐릭터 시트를 짜듯이 div 태그와 span 태그를 써서 작성하고, css에서 그것에 대한 스타일을 지정합니다. 위의 코드는 이해하기 쉽도록 name과 roll, effect의 3가지 영역으로만 구분되어 있습니다. 버튼에서 roll을 1d100으로 굴리라고 했는데, 이 값이 {{roll}}의 자리에 출력됩니다. 만약 버튼에서 {{roll=????}}가 존재하지 않는다면, {{#roll}}부터 {{/roll}}의 사이에 있는 구간은 출력되지 않고 나머지 부분만 순서대로 출력됩니다. 그 원리를 이용해서, 2d6을 굴린 결과의 roll의 값이 2이라면 펌블, 12이라면 크리티컬이라고 출력하는 코드를 만들어 봅시다.

{{#roll}}
  <div class="sheet-roll">
    {{roll}}<br>
    {{#rollTotal roll 2}}펌블{{/rollTotal roll 2}}
    {{#rollTotal roll 12}}크리티컬{{/rollTotal roll 12}}
  </div>
{{/roll}}

먼저 roll을 보낸 경우에만 이 구간이 보여지도록 했고, 그리고 {{roll}}의 숫자값을 보여준 뒤, <br>로 줄바꿈을 했습니다.

rollTotal roll 2라는 함수는 roll이라는 굴림의 총합이 2인지를 확인합니다. 만약 목표치보다 더 큰 지 작은 지를 비교하고 싶다면 rollLess나 rollGreater를 쓰면 됩니다. 이러한 함수들은 roll20 위키를 참고하면 더 다양한 종류가 있습니다.

 

Building Character Sheets/Roll Templates - Roll20 Wiki

Main Page: Building Character Sheets This is a guide on how to create & edit Roll Templates for your Character Sheets. See Roll Templates for how they work in general, and how to use the Default rolltemplate. If you are a Sheet Author, you can include as m

wiki.roll20.net

2d6인 myroll을 굴려서 5 이상인 경우 성공, 5 미만인 경우 실패라고 출력하고 싶다면 {{#rollLess myroll 5}}실패{{/rollLess myroll 5}}라고 적고, {{#^rollLess myroll 5}}성공{{/^rollLess myroll 5}}이라고 적습니다. #으로 시작해서 /로 끝나는 이 쌍이 제대로 맞지 않게 되면, 채팅창에는 아무것도 보이지 않으므로 주의해야 합니다. ^는, 그 조건의 반대인 경우입니다. 참/거짓 명제의 논리를 생각하면 쉽게 이해할 수 있습니다. 5보다 작지 않은 경우, 즉 5와 같거나 크다는 경우를 모두 성공이라고 출력해야 하기 때문에 이렇게 코드를 짰습니다. 코딩에 정답은 없어도 오답은 있으니까, 다른 아이디어가 떠올랐다면 적극적으로 시도해보세요.

여기까지만 이해해도 대부분의 원하는 롤템플릿 출력을 할 수 있을 거라고 생각하지만, 멋진 디자인까지 계속 진행해보겠습니다. 먼저 저는 아까의 디자인을 바탕으로 4개의 div를 만듭니다. 세로로 쭉 늘어선 각 div 중에서, 2번째에 있는 div는 다시 그 안에 굴림값과 목표치, 판정결과도 적어야 하니까 3개의 div를 넣기로 합니다. 그리고 검은색 부분에는 4개의 div를 만들어서 flex-wrap하고, 그 안에 다시 흰색 글씨(파란 배경)의 span과 파란 글씨의 span을 나란히 두고 싶다고 생각합니다. grid를 쓰면 편하겠지만, 채팅창 가로 길이가 확장되었을 때를 생각해서 flex-wrap이나 inline-block을 쓰는 것이 좋기 때문이에요.