게임의 스킨 맞춤화하기

게임은 기본 외형으로 출시됩니다. 게임 편집기의 스킨 탭에서 당신은 그 색상을 재정의하고, 시각 자산(이미지, 그리고 게임이 그것들을 쓰는 곳에서는 오디오와 비디오)을 바꾸고, 작성자가 노출한 비색상 손잡이(토글, 숫자, 선택)를 설정해 챌린지가 당신의 브랜드에 맞게 할 수 있으며, 그 변경이 렌더링된 게임에 적용됩니다.

스킨 맞춤화는 Alpha 요금제 이상(Alpha, Troop, Apex)에서 쓸 수 있습니다.

색상, 자산, 그 밖의 손잡이 설정하기

사이트 키(또는 팀)의 게임 페이지에서 게임을 열고, 그다음 스킨 탭을 여세요. 탭은 게임 작성자가 노출한 슬롯을 보여 줍니다. 대부분은 색상과 자산이지만, 작성자는 토글(켜짐/꺼짐), 숫자(흔히 최솟값과 최댓값과 함께), 또는 고정 목록에서의 선택도 노출할 수 있습니다. 색상은 hex나 rgb() 값으로 설정하고; 자산은 파일을 업로드하거나 URL을 붙여넣어 설정하고(아래 참고); 그 밖의 슬롯은 보이는 컨트롤로 설정하세요. 슬롯을 손대지 않은 채 두면 게임의 번들 값을 유지합니다.

런타임에 스킨이 고르는 방식

각 프리셋은 자기가 동작하는 모드를 선언합니다: 라이트, 다크, 또는 any(둘 다의 배경에서 잘 읽힙니다). 모드당 하나의 기본값이 있으니, 방문자의 기기가 어느 모드를 선호하든 게임이 올바르게 보입니다. any로 표시된 프리셋은 라이트, 다크, 또는 둘 다의 기본값이 될 자격이 있습니다. 하나를 고르는 일은 두 단계로 일어납니다.

먼저 위젯이 어떤 스킨을 요청할지 정합니다:

페이지가 설정했다면, 위젯의 skin 속성: 정확한 프리셋 이름(예를 들어 midnight), 또는 단축 light / dark.
아니면, 방문자의 시스템 선호(prefers-color-scheme), 그것은 light나 dark로 해소됩니다.

그다음 서버가 당신의 재정의를 병합한 뒤(사이트 키가 팀 위, 팀이 게임의 번들 묶음 위) 그것을 프리셋에 맞춥니다. 속성의 정확한 프리셋 이름이 단번에 이깁니다. 아니면, 고른 모드에 대해 서버는 선언 순서로, 그 모드에 자격이 있고 기본값으로 표시된 첫 프리셋을 취합니다(프리셋은 그 모드가 해당 모드이거나 any일 때 자격이 있습니다); 아무것도 기본값으로 표시되지 않으면 자격 있는 첫 프리셋을 취합니다.

any 프리셋은 두 모드 모두에 자격이 있으니, 한 스킨을 어디서나 기본값으로 만들거나, 한 모드에 전용 스킨을 주고 any 스킨이 다른 모드를 덮게 할 수 있습니다. 스킨 탭에서 any 스킨은 라이트와 다크 그룹 둘 다 아래에 나타나며, 당신은 그것을 둘 중 하나나 둘 다의 기본값으로 설정합니다.

<caputchin-game> 요소에서는 인라인 skin 객체도 넘길 수 있습니다: 속성 값으로 쓰인 JSON 객체, 예를 들어 skin='{"primary":"#7c3aed"}'. 위젯은 그것을 그 마운트의 스킨 신호로 서버에 보내고, 서버는 그것을 파싱해 해소된 프리셋 위에 층으로 얹으니, 당신의 인라인 색상과 자산이 위 모든 것(당신의 팀과 사이트 키 재정의 포함)을 이깁니다. 그것은 당신 자신의 마크업의 속성이라, 어떤 요금제에서든 동작합니다. 체크박스 <caputchin-widget>은 인라인 스킨을 받지 않습니다; 그 skin 속성은 light / dark나 프리셋 이름만 받습니다. 이 임베드별 작성이 왜 무료인지는 우리의 철학을 보세요.

자산: 업로드 또는 링크

자산 슬롯(이미지, 오디오, 또는 비디오)은 업로드된 파일이나 당신이 붙여넣는 URL을 받습니다:

업로드: Caputchin이 파일의 스냅샷을 저장합니다. 그것은 고정되어 있으니, 당신이 다시 업로드하지 않는 한 바뀌지 않습니다.
링크: 당신이 호스팅하는 파일에 https URL을 붙여넣습니다. 그것은 라이브이니, 그 URL의 파일을 교체하면 다음 로드 때 게임이 갱신됩니다.

게임은 샌드박스된 프레임에서 도니, 링크된 자산은 그 오리진이 허용될 때만 로드됩니다. Caputchin이 그것을 당신을 위해 처리합니다: 당신의 스킨 프리셋이 가리키는 오리진만 정확히 허용하고, 그 밖에는 아무것도 허용하지 않습니다. 당신은 어떤 정책도 직접 바꾸지 않습니다.

각 자산 타입은 고정된 포맷 묶음을 받습니다(예를 들어 이미지에는 PNG, JPEG, WebP, SVG, GIF). 정확한 포맷과 색상 규칙은 스키마 레퍼런스에 있습니다.

무엇이 적용되고, 어디서

스킨 재정의는 서버에서 가장 구체적인 것이 이깁니다로 해소됩니다: 사이트 키 프리셋이 팀 프리셋을 이기고, 팀 프리셋이 게임의 번들 스킨을 이깁니다. 번들 프리셋을 확장해 원하는 슬롯만 재정의하고 나머지는 물려받을 수 있습니다.

스킨 값이 게임에 닿는 방식

서버는 당신의 스킨(번들 묶음 위에 병합된 당신의 재정의)을 해소해 그 결과를 게임 자체의 코드에 건네고, 그것이 그것으로 자기를 그립니다. 색상과 자산 URL은 텍스트로 도착하고; 토글은 진짜 true / false로, 숫자는 진짜 숫자로, 선택은 고른 문자열로 도착합니다. 각 값이 어떻게 쓰이는지는 게임 작성자가 정하니, 슬롯이 실제로 무엇을 바꾸는지는 게임에 달렸습니다. 당신은 게임을 위한 어떤 CSS도 쓰지 않습니다: 그것은 당신의 페이지에서 스타일을 줄 수 없는 샌드박스된 프레임에서 돕니다.

위젯 셸(게임을 둘러싼 Caputchin 크롬, 그리고 독립 체크박스)은 다릅니다: 그 해소된 스킨은 --cpt-skin-<token>이라는 CSS 커스텀 속성으로 당신의 페이지에도 노출되며, 당신은 자신의 스타일시트에서 그것을 읽거나 재정의할 수 있습니다. 그 표면, 그리고 셸을 화이트라벨링하는 법은 CSS로 위젯 스타일링하기에서 다룹니다. 그 변수들은 셸의 것뿐입니다; 그것들은 게임의 스킨을 지니지 않습니다.

함께 보기

게임 맞춤화 개요: 게임을 등록하고 관리하기.
구성과 언어: 다른 두 축.
스키마 레퍼런스: 색상 규칙, 자산 포맷, 그리고 프리셋 모델.
CSS로 위젯 스타일링하기: 셸의 --cpt-skin-* 변수와 섀도 파트.