롤 템플릿 만드는 방법

2024년 06월 05일 08:06

롤 템플릿은문자 시트시스템의 특별한 기능으로, 롤 결과 표시를 위한 추가 레이아웃 및 스타일링 옵션을 제공합니다.

내장된 롤 템플릿

다음 롤 템플릿은 Roll20에 내장되어 있으며 모든 게임에서 사용할 수 있습니다.

롤 템플릿 기본 예제2.JPG

기본값

기본 템플릿을 사용하려면 "&{template:default}"을 사용하세요.

속성	예상 값
특수 능력 이름	롤의 이름은 롤 목록의 헤더에 표시됩니다

기본 템플릿은 특수한이며, 테이블에 주어진 인수를 나열합니다. 예를 들어 다음과 같이 할 수 있습니다.

&{template:default} {{name=테스트 공격}} {{attack=[[1d20]]}}
{{note= 이것은 어떤 노트 내용입니다}} {{Saving Throw= vs Will}}

여기 기본 템플릿의 종속 CSS 클래스와 함께 꽤 정확한 예입니다.

롤 템플릿 만들기

만약 당신이시트 작성자이라면, 당신은 Character Sheet HTML 및 CSS에 원하는 만큼의 롤 템플릿을 포함시킬 수 있습니다. 아래에서 알려드리도록 하겠습니다.

만약 당신이Pro구독자라면, 게임에서 "Custom" 캐릭터 시트 옵션을 사용하고 있다면, 당신은 자신만의 롤 템플릿을 만들 수 있습니다. 아래의 지침을 따르세요.

롤 템플릿 레이아웃 정의

롤 템플릿을 만드는 첫 번째 단계는 레이아웃을 정의하는 것입니다. 이는 플레이어가 채워 넣을 수 있는 속성을 포함합니다. 롤 템플릿은 HTML로 이루어져 있으며, 캐릭터 시트의 다른 부분과 마찬가지로 모든 HTML에 액세스할 수 있습니다 (포함하여div및table). 다음은 롤 테이블의 레이아웃 예시입니다.

<rolltemplate class="sheet-rolltemplate-test">
    <div class="sheet-template-container">
	<div class="sheet-template-header">{{rollname}}</div>
	{{#attack}}<div class="sheet-template-row">공격: {{attack}} {{attackadvantage}} vs 방어력</div>{{/attack}}
        {{#damage}}
	<div class="sheet-template-row"><span>피해: </span>{{damage}} 
        <span>치명타: </span>{{dmgcrit}}</div>
	<div class="sheet-template-row"><span>유형: </span>{{dmgtype}}</div>
       {{/damage}}
       {{#atteffect}}
	 <div class="sheet-template-row">
	 <span class="sheet-template-desc">효과: </span>{{atteffect}}
         </div>
       {{/atteffect}}
</rolltemplate>

템플릿에는 "시트-롤템플릿-<template_name>" 템플릿_이름" 클래스의롤템플릿태그가 있어야 하며, 이는 &{템플릿:<template_name>} 부분에 사용될 이름과 같아야 하며 공백을 포함하지 않아야 합니다. 캐릭터 시트의 HTML 어디에든 롤 템플릿을 넣을 수 있지만, 권장 사항은 맨 끝에 두는 것입니다. 캐릭터 보기에서 시트의 일부로 표시되지 않도록 템플릿에서 자동으로 '제거'됩니다. 참고로 롤템플릿 안에 다른 롤템플릿을 중첩할 수 없습니다.

그 후에는 어떻게 롤을 구성할지 결정하는 것은 당신에게 달려 있습니다. 테이블 레이아웃을 권장하지만, 결정은 당신에게 달려 있습니다.

템플릿 안에서 다음에 액세스할 수 있는 항목은 다음과 같습니다.

속성

중괄호를 두 번 사용하여 원하는 속성을 포함할 수 있습니다. 따라서{{myproperty}}는 (인라인 롤, 텍스트 등)을 출력합니다. 템플릿에는 {{myproperty=<value>}} 를 통해 데이터(예: 등)가 제공됩니다. 새로운 속성을 만들려면 템플릿에 추가하고 고유한 이름을 부여하면 됩니다. 또한, 모든 도우미 함수와의 최대 호환성을 위해 공백 사용을 피하십시오.

논리

만약 {{#<property>}} 다음에 {{/<property>}}이라면, 이 두 태그 사이의 부분은 속성에 값이 있는 경우에만 표시됩니다. 이는 템플릿에 몇 가지 다른 부분을 제공하는 데 유용할 수 있습니다. 예를 들어, 주사위 굴림의 "효과" 부분은 주문에만 적용될 수 있으므로, 굴림이 효과를 제공하지 않으면 해당 섹션이 표시되지 않습니다.

또한, {{^<property>}} 다음에 {{/<property>}}를 사용하여 반대의 의미를 나타낼 수도 있습니다. 즉, 지정된 속성이 존재하지 않는 경우에만 해당 섹션을 표시합니다.

도우미 함수

여러 개의 롤에 대해 처리하는 도우미 함수가 제공됩니다. 이 함수들은 일반적인 논리 패턴과 마찬가지로 사용하지만, 함수를 호출하고 속성을 제공합니다. 태그 사이에 포함된 섹션은 함수가 true로 평가될 때만 표시됩니다.

도우미 함수	섹션 표시 조건
`{{#rollWasCrit() <rollname>}}`	제공된 롤에 크리티컬이 포함되어 있으면 섹션이 표시됩니다. 예를 들어, `{{#rollWasCrit() attack}}` 는 적어도 한 번의 크리티컬 롤이 있는 인라인 롤의 "공격" 속성을 확인합니다.
`{{#rollWasFumble() <rollname>}}`	#rollWasCrit()와 동일하지만 1(주사위 굴림 중 1의 값)인 펌블을 확인합니다.
`{{#rollTotal() <rollname>}}`	Checks the total of an inline roll for the value. If they match, the section is shown. For example,`{{#rollTotal() attack 10}}`would check the "attack" property for an inline roll that totaled 10.
`{{#rollGreater() <rollname>}}`	Checks the total of an inline roll for the value. If the roll result is greater, the section is shown. For example,`{{#rollGreater() AC 16}}`would check the "AC" property for an inline roll that resulted in 17 or higher.
`{{#rollLess() <rollname>}}`	Checks the total of an inline roll for the value. If the roll result is less, the section is shown. For example, `{{#rollLess() deathsave 10}}` would check the "deathsave" property for an inline roll that resulted in 9 or less.
`{{#rollBetween() <rollname>}}`	Checks the total of an inline roll for the value. The rollBetween() function accepts two numbers. If the roll result is equal to or between, the section is shown. 예를 들어,`{{#rollBetween() strength 7 9}}`는 7, 8 또는 9가 나온 인라인 롤에 대해 "strength" 속성을 확인합니다.

참고: 모든 도우미 함수는 속성에서 찾은 첫 번째 인라인 롤만 확인합니다.

중요:도우미 함수의 섹션을 "닫을" 때는 모든 인수를 포함한 전체 함수 호출을 넣어야 합니다. 예를 들어,{{#rollWasCrit() attack}}는{{/rollWasCrit() attack}}로 닫힙니다.

다음은 공격 롤이 크리티컬인 경우에만 Critical Damage 섹션을 보여주는 예제 롤 템플릿입니다.

<div class="sheet-template-container">
		<div class="sheet-template-header">{{rollname}}</div>
		{{#attack}}<div class="sheet-template-row"><span>공격: </span>{{attack}}</div>{{/attack}}
		<div class="sheet-template-row">
			<span>피해: </span>{{damage}} 
			{{#rollWasCrit() attack}}
				<span>치명타: </span>{{dmgcrit}}
			{{/rollWasCrit() attack}}
		</div>
		<div class="sheet-template-row"><span>유형: </span>{{dmgtype}}</div>
   </div>

논리 반전

또한 어떤 로직과 일치하지 않을 때를 테스트하는 것도 유용합니다. 만약에 롤이 총합보다 크거나 같은 경우를 알고 싶다면, 직접 그렇게 할 수는 없습니다. 하지만 롤이 총합보다 작지 않은지 테스트할 수는 있습니다. 이는 같은 의미입니다.

다음과 같이 테스트할 수 있습니다: 시작은#^이고 끝은/^입니다. 이 테스트는 다음과 같이 보일 것입니다:

{{#rollLess() attackroll }}
     <span>롤이 공격롤보다 작습니다! </span>
{{/rollLess() attackroll }}
{{#^rollLess() attackroll }}
     <span>롤이 공격롤보다 작지 않습니다!</span>
     <span>다른 말로, 롤은 공격롤보다 크거나 같습니다.</span>
{{/^rollLess() attackroll }}

도움말 함수 변수

rollTotal()이나 rollBetween()과 같은 숫자를 받는 도움말 함수들은, 숫자 자리에 같은 롤 템플릿에서 다른 인라인 롤의 결과를 사용할 수 있습니다. 예를 들어{{#rollGreater() save poison}}은 저장 인라인 롤과 독 인라인 롤의 결과를 비교하고 저장 결과가 더 큰 경우 섹션을 표시합니다.

특수 도우미 기능: allProps()

allProps()라는 특수 도우미 함수를 사용하여 롤에 전달된 모든 속성을 동적으로 나열할 수도 있습니다. 무시할 속성을 지정할 수도 있습니다. 예를 들어, 다음은 "attack" 속성을 제외한 롤에 포함된 각 속성에 대해 테이블의 테이블 행을 표시합니다.

<div>
    <caption>{{name}}</caption>
    {{#allprops() attack}}
       <div>{{key}}</div><div>{{value}}</div>
    {{/allprops() attack}}
</div>

롤 템플릿 스타일링

롤 템플릿을 스타일링하려면 캐릭터 시트의 CSS에 포함하면 됩니다. 다음은 이를 수행하는 좋은 예제입니다 (이 예제에서 롤 템플릿의 이름은 "test"입니다):

.sheet-rolltemplate-test div.sheet-template-container {
	border: 2px solid #000 !important;
	border-radius: 3px 3px 3px 3px;
}

.sheet-rolltemplate-test .sheet-template-header {
	background-color: rgba(112, 32, 130,1);
	color: #000;
	padding: 2px;
	border-bottom: 1px solid black;
	line-height: 1.6em;
	font-size: 1.2em;
}

.sheet-rolltemplate-test div {
	padding: 5px;
	border-bottom: 1px solid black;
}

.sheet-rolltemplate-test div:nth-child(odd) {
	background-color: rgba(217, 217, 214,1);
}

.sheet-rolltemplate-test div:nth-child(even) {
	background-color: rgba(233, 233, 233,1);
}

.sheet-rolltemplate-test .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 2px solid rgba(167, 168, 170,1);
}

.sheet-rolltemplate-test .inlinerollresult.fullcrit {
	border: 2px solid #3FB315;
}

.sheet-rolltemplate-test .inlinerollresult.fullfail {
	border: 2px solid #B31515;
}

.sheet-rolltemplate-test .inlinerollresult.importantroll {
	border: 2px solid #4A57ED;
}

모든 스타일이 ".sheet-rolltemplate-<templatename>"로 시작하는 것을 주목하세요. 그런 다음 사용한 테이블, div 및 클래스와 같은 사용자 정의 HTML을 스타일링할 수 있습니다. 주의: 롤 템플릿 레이아웃에 포함된 클래스(예: 위의 예제에서 "tcat")는 보안상의 이유로 앞에 ".userscript-"가 추가됩니다. 가장 쉬운 방법은 레이아웃을 만든 다음 게임 내에서 롤을 수행하고 생성된 HTML을 검사하여 보안 필터링을 고려하는지 확인하는 것입니다.

롤 템플릿 예제

아래에는 롤 템플릿 기능의 몇 가지 시스템별 예제가 나와 있습니다.

던전즈 앤 드래곤 5판

Rolltemplate 5e.png

매크로:

&{template:5eAttack} {{name=@{meleeweaponname1}}} {서브태그=주먹, 기교, @{meleedmgtype1}}}
{{attack=[[1d20+@{meleetohit1}]]}} {{attackadv=[[1d20+@{meleetohit1}]]}}
{{damage=[[@{meleedmg1}+@{meleedmgbonus1}]]}} {{dmgcrit=[[@{meleedmg1}]]}}

HTML:

<rolltemplate class="sheet-rolltemplate-5eAttack">
    <div class="container">
        <div><h1>{{name}}</h1></div>
        <div><span class="subheader">{{subtags}}</span></div>
        <div class="arrow-container"><div class="arrow-right"></div></div>
        <div class="rowcolor"><span class="tcat">공격 </span>{{attack}} | {{attackadv}} 대 AC</div>
        {{#damage}}
            <div>
                 <span class="tcat">피해 </span>{{damage}} 
                 <span class="tcat">치명타 </span>{{dmgcrit}}
            </div>
        {{/damage}}
        {{#snkattk}}
            <div>
                 <span class="tcat">몰래 공격: </span>{{snkattk}} 
                 <span class="tcat">치명타: </span>{{snkcrit}}
            </div>
        {{/snkattk}}
    </div>
</rolltemplate>

CSS:

.sheet-rolltemplate-5eAttack .sheet-container {
    background-color: #ffffff;
    테두리: 1px 솔리드;
    padding: 2px;
    너비: 189px;
}

.sheet-rolltemplate-5eAttack .sheet-container h1 {
    color: rgb(126, 45, 64);
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-5eAttack div {
    padding: 2px;
};
 
.sheet-rolltemplate-5eAttack span {
    color: rgb(126, 45, 64);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}
 
.sheet-rolltemplate-5eAttack .sheet-subheader {
    color: #000;
    font-size: 1em;
    font-style: 이탤릭체;
}
 
.sheet-rolltemplate-5eAttack .sheet-arrow-right {
    테두리-하단: 2px 솔리드 투명;
    테두리-왼쪽: 180px 솔리드 rgb(126, 45, 64);
    테두리-상단: 2px 솔리드 투명;
}
 
.sheet-rolltemplate-5eAttack .sheet-tcat {
    font-style: 이탤릭체;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult {
    background-color: #ffffff;
    테두리: 없음;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.fullcrit {
    color: #3FB315;
    테두리: 없음;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.fullfail {
    color: #B31515;
    테두리: 없음;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.importandivoll {
    color: #4A57ED;
    테두리: 없음;
}

던전 앤 드래곤 3.5 / 패스파인더

롤템플릿 pf.png

매크로:

&{template:pf_spell} {{name=@{repeating_lvl-0-spells_0_name}}}{{school=@{repeating_lvl-0-spells_0_school}}} 
{{레벨=소서러/마법사 0}} {{casting_time=@{repeating_lvl-0-spells_0_cast-time}}} 
{{components=@{repeating_lvl-0-spells_0_components}}} {{range=@{repeating_lvl-0-spells_0_range}}} 
{{target=@{repeating_lvl-0-spells_0_targets}}} {{duration=@{repeating_lvl-0-spells_0_duration}}} 
{{saving_throw=@{repeating_lvl-0-spells_0_save}}} {{sr=@{repeating_lvl-0-spells_0_sr}}} 
{{rng_attack=[[1d20 + @{attk-ranged}]]}} {{damage=1d3([[1d3]])}} 
{{spell_description=@{repeating_lvl-0-spells_0_description}}}

HTML:

<rolltemplate class="sheet-rolltemplate-pf_spell">
    <table>
        <tr><th>{{name}}</th></tr>
        <tr>
            <td>
				<span class="tcat">학교 </span>{{school}}; 
				<span class="tcat">레벨 </span>{{level}}
			</td>        
        </tr>
        <tr>
            <td><span class="tcat">시전 시간 </span>{{casting_time}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">구성 요소 </span>{{components}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">범위 </span>{{range}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">효과/대상 </span>{{target}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">지속 시간 </span>{{duration}}</td>        
        </tr>
        <tr>
            <td>
				<span class="tcat">시전 저장 </span>{{saving_throw}}; 
				<span class="tcat">주문 저항 </span>{{sr}}
			</td>         
        </tr>
        {{#rng_attack}}
            <tr><td><span class="tcat">원거리 공격력 </span>{{rng_attack}}</td></tr>
        {{/rng_attack}}
        {{#mel_attack}}
            <tr><td><span class="tcat">근접 공격력 </span>{{mel_attack}}</td></tr>
        {{/mel_attack}}
		{{#damage}}
			<tr><td><span class="tcat">피해: </span>{{damage}}</td></tr>
		{{/damage}}
        <tr>
            <td>{{spell_description}}</td>        
        </tr>
    </table>
</rolltemplate>

CSS:

.sheet-rolltemplate-pf_spell table {
    width: 100%;
    padding: 2px;
    background:url(http://i.imgur.com/BLb0XMU.jpg) 왼쪽 상단 반복;
}
 
.sheet-rolltemplate-pf_spell th {
	color: rgb(233, 223, 151);
    background-color: rgb(63, 32, 33);
    padding-left: 5px;
	line-height: 1.1em;
	font-size: 1em;
    text-align: left;
	font-family: "Arial", Helvetica, sans-serif;
    text-transform: 대문자;
}
 
.sheet-rolltemplate-pf_spell .sheet-arrow-right {
    테두리-top: 3px 단색 투명;
    테두리-bottom: 3px 단색 투명;
	테두리-왼쪽: 180px 단색 rgb(126, 45, 64);
}
 
.sheet-rolltemplate-pf_spell .sheet-tcat {
    font-weight: 굵게;
}
 
.sheet-rolltemplate-pf_spell td {
    padding-left: 5px;
    font-size: 0.9em;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult {
    배경색: 투명;
    테두리: 없음;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.fullcrit {
	color: #3FB315;
    테두리: 없음;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.fullfail {
	color: #B31515;
    테두리: 없음;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.importantroll {
	color: #4A57ED;
    테두리: 없음;
}

월드 오브 다크니스

롤템플릿 wod.png

매크로:

&{template:wod} {{name=@{character_name}}} {롤_이름=명령}} 
{{attr=지능}} {{attr_num=@{intelligence}}} {{스킬=위협}} 
{{skill_num=@{intimidation}}} {{pwr=도미네이트}} {{pwr_num=@{dominate}}} {{mod_num=?{Modifiers|0}}} 
{{result=[[{(@{intelligence}+@{intimidation}+@{dominate}+?{Modifiers|0})d10!}>8]]}}

HTML:

<rolltemplate class="sheet-rolltemplate-wod">
    <table>
        <tr><th>{{name}} 롤스{{#roll_name}} {{roll_name}}{{/roll_name}}</th></tr>
        <tr><td class="attr">
            {{#attr}}
                {{attr}}({{attr_num}})
            {{/attr}}
            {{#skill}}
                 + {{skill}}({{skill_num}})
            {{/skill}}
		    {{#pwr}}
		    	 + {{pwr}}({{pwr_num}})
		    {{/pwr}}
            {{#mod_num}}
                 + 수정자({{mod_num}})
            {{/mod_num}}
        </td></tr>
        <tr>
            <td class="result">{{result}} 성공</td>        
        </tr>
    </table>
</rolltemplate>

CSS:

.sheet-rolltemplate-wod table {
    width: 189px;
    height: 189px;
    padding: 2px;
    background: url(http://i.imgur.com/xBk4U1p.jpg) top left;
    background-size: 189px 189px;
    background-repeat: no-repeat;
    font-family: "Courier New", Courier, monospace;
    font-weight: 굵게;
    border-spacing: 0;
}
 
.sheet-rolltemplate-wod th {
	color: rgb(112, 0, 0);
    padding: 15px 2px 2px 20px;
	line-height: 1.2em;
	font-size: 1.2em;
    text-align: left;
}
 
 
.sheet-rolltemplate-wod td {
    padding-left: 20px;
    font-size: 1.0em;
    vertical-align: top;
}
 
.sheet-rolltemplate-wod .sheet-result {
    font-size: 1.2em;
    text-align: 가운데;
    color: rgb(112, 0, 0);
    padding-bottom: 20px;
}
 
.sheet-rolltemplate-wod .inlinerollresult {
    background-color: transparent;
    color: #000000;
    테두리: 없음;
}
 
.sheet-rolltemplate-wod .inlinerollresult.fullcrit {
   color: #3FB315;
    테두리: 없음;
}
 
.sheet-rolltemplate-wod .inlinerollresult.fullfail {
    color: #000000;
    테두리: 없음;
}
 
.sheet-rolltemplate-wod .inlinerollresult.importantroll {
	color: #3FB315;
    테두리: 없음;
}