이벤트 페이지 관리자
Last updated
Last updated
이벤트 페이지란 아래와 같이 인게임 화면의 우측 상단에 있는 확성기 모양의 아이콘을 통해 접근할 수 있는 이벤트 목록에 게시될 각각의 이벤트를 의미합니다. 이벤트 페이지는 이미 출시된 게임에만 등록할 수 있습니다.
각각의 이벤트 페이지는 아래 스크린샷과 같은 형태로 보여지게 되고, 게임을 플레이하는 유저가 각 이벤트에서 제시하는 조건을 달성할 시 해당 유저에게 등록해 놓은 아이템을 지급하게 됩니다.
화면 좌측 이벤트 페이지 목록에서 각각의 이벤트 페이지에 수령 가능한 보상이 있을 시 아래 스크린샷처럼 좌측에 주황색 체크 표시가 출력됩니다.
유저가 이벤트 페이지에 설정한 조건을 만족시켰는지 여부에 따라 아이템 셀(아이템을 지급받을 수 있는 박스)는 아래의 4가지 상태로 출력됩니다.
조건 미충족 : 추가 표시 없음 / 클릭(터치) 시 아이템 정보 조회
조건 충족 불가 : 불투명한 아이템 셀, 하얀 X 마크 / 클릭(터치) 시 아이템 정보 조회
조건 충족 - 수령 가능 : 주황색 아웃라인, 주황색 체크 마크 / 클릭(터치) 시 아이템 수령
조건 충족 - 이미 수령 : 불투명한 아이템셀, 하얀 체크 마크 / 클릭(터치) 시 아이템 정보 조회
펑크랜드 스튜디오에서 이벤트 페이지를 추가/수정, 커스터마이징 할 수 있는 관리 도구입니다. 아래 스크린샷의 경로로 접근할 수 있습니다.
해당 경로로 이벤트 페이지 관리자를 열게 되면 아래와 같은 창이 열리게 됩니다.
UI 추가 버튼 목록
이벤트 페이지를 꾸미거나 기간을 늘려 아이템 셀을 추가해야 할 경우에 이용합니다.
페이지 목록 조회 및 추가/삭제
추가한 이벤트 페이지를 조회 및 선택할 수 있습니다.
페이지 삭제의 경우엔 기간이 종료된 이벤트에 한해 Delete 버튼을 눌러 삭제할 수 있습니다.
하단의 버튼을 눌러 원하는 템플릿을 선택하면 이벤트 페이지를 추가할 수 있습니다.
페이지 구성 미리보기 및 UI 선택,이동, 크기 조절
구성한 페이지를 미리 볼 수 있는 영역입니다.
각 구성요소를 클릭 시 해당 요소를 선택하여 이동 및 크기 조절을 할 수 있습니다.
여러 요소가 중첩되있는 경우에 클릭 시 최하단(자식이 없는) UI가 우선적으로 선택되고 추가 클릭을 하게 되면 상위 UI를 선택할 수 있습니다.
페이지 구성 요소(페이지 및 UI) 트리뷰
구성요소는 이벤트 페이지 자체(최상단) 및 페이지에 종속된 UI들로 이루어져 있습니다. 자세한 설명은 본 튜토리얼 하단 이벤트 페이지 구성요소 및 커스터마이징 파트에서 확인할 수 있습니다.
각 구성 요소의 부모/자식 관계를 파악할 수 있습니다. 5의 데이터 중 위치 및 크기와 관련된 데이터의 경우 %값을 쓰게 될 시 부모 UI의 위치 및 크기에 영향을 받습니다.
선택한 구성 요소의 속성값 조회 및 편집
이벤트 페이지의 경우 이벤트 명(title), 활성화여부(activated), 아이템 라벨에 표시될 수령 조건의 포맷(itemLabelFormat), 이벤트 시작일(startDate), 이벤트 지속 기간(durationDay)를 편집할 수 있습니다.
이벤트 페이지가 아닌 구성요소들은 각각 위치를 조정할 수 있는 값 등을 편집할 수 있습니다.
이벤트 페이지 관리자의 좌측 하단 새 이벤트 페이지 추가 버튼을 통해 신규 이벤트 페이지를 추가할 수 있습니다.
제작자 분들이 쉽게 이벤트 페이지를 추가하실 수 있도록 현재 아래 3가지의 템플릿을 제공하고 있습니다.
일일 보상 : 이벤트 시작일로부터 1일마다 보상을 수령 가능, 이미 지난 날짜의 보상 수령 불가
레벨 달성 보상 : 유저가 특정 레벨을 달성할 시 보상 수령 가능
누적 접속일 보상 : 이벤트 기간내에 유저가 누적해서 접속한 일수에 따라 보상 수령 가능
이벤트 페이지를 추가한 후 각각의 아이템 셀(붉은 선으로 표시된 영역)을 클릭하여 선택한 후 우측 주황색 선으로 표시된 영역에서 보상으로 아이템을 등록할 수 있습니다.
템플릿에 따라 필요한 아이템 셀에 아이템 등록을 완료하게 되면 이벤트 페이지 관리자 우측 하단의 업로드 버튼을 통해 추가한 페이지를 현재 서비스 중인 게임에 바로 적용시킬 수 있습니다.
각각의 템플릿을 통해 이벤트 페이지를 만드는 경우, 모든 아이템 셀에 각 아이템만 등록해주면 바로 업로드가 가능합니다. 하지만, 각각의 게임에 맞게 이벤트명, 이벤트 설명 등의 구성요소를 설정해준다면 다른 게임과의 차별성, 게임에 대한 몰입감과 같은 부분에서 도움이 될 수 있습니다.
각 구성요소는 3. 페이지 구성 미리보기 및 UI 선택,이동, 크기 조절 과 5. 선택한 구성 요소의 속성값 조회 및 편집 을 통해 커스터마이징이 가능합니다.
이벤트 페이지(Page)
이벤트 자체의 설정을 설정할 수 있습니다.
이벤트명(title) - 좌측에 표기되는 이벤트 목록 및 페이지 상단에 출력되는 이벤트 이름
활성화여부(activated) - 해당 이벤트 페이지의 활성화 여부입니다.
false일 시 유저에게 해당 페이지가 보여지지 않습니다. 웹콘솔(nekoland.net/me)의 공지사항/이벤트 & 푸시 메뉴에서도 해당 값을 실시간으로 수정 가능합니다.
아이템 라벨 포맷(itemLabelFormat) - 각 아이템 셀의 상단에 표기되는 아이템 수령을 위한 조건을 보여줄 방식입니다.
{0} 부분에 각 아이템 셀에서 설정한 조건(레벨) 또는 이벤트 시작일부터 지난 일수가 표기됩니다.
예시 : {0}레벨 → 1레벨 2레벨 3레벨 등등 / {0}번째 날 → 1번째 날 2번째 날 3번째 날 등등
이벤트 시작일(startDate) - 해당 이벤트가 실제 유저들에게 표시되기 시작하는 날짜입니다. 현재 시간보다 이전 날짜로는 설정할 수 없습니다.
이벤트 지속 기간(durationDay) - 해당 이벤트가 지속되는 기간(일수)입니다. 날짜 기반 템플릿(일일 보상, 접속일 보상)의 경우 아이템 셀의 갯수가 지속기간보다 많을 수 없습니다. 일일보상의 경우 아이템 셀의 갯수와 지속기간이 일치해야 합니다. 해당 기간이 만료되면 유저들에게 더이상 페이지가 보이지 않게 되고, 해당 페이지를 삭제 할 수 있습니다.
아이템 박스(ItemBox)
지급할 아이템을 선택하고, 해당 아이템의 이미지가 출력되는 공간입니다.
아이템(item) - 우측의 … 을 눌러 아이템 선택창을 통해 아이템을 선택하거나 아이템 번호를 직접 입력해 지급할 보상을 선택할 수 있습니다.
아이템 수량(itemCount) - 아이템을 선택한 경우에 편집할 수 있게되고, 조건 충족시 선택할 아이템을 몇개 지급할 지 설정할 수 있습니다.
아이템 라벨(ItemLabel)
아이템을 수령하기 위한 조건이 출력되는 공간입니다.
필요레벨(neededLevel) - 레벨 달성 보상 템플릿을 선택한 경우에만 편집할 수 있고, 아이템을 수령하기 위해 달성해야할 레벨을 설정할 수 있습니다.
아이템 셀(Item Cell)
보상으로 주어질 아이템에 관한 UI들이 담기는 단위 UI입니다.
인덱스(index) - 수정할 수 없는 값으로, 이벤트 보상이 순차적으로 지급되야 할 경우(일일 보상, 접속일 보상 등) 해당 인덱스 순서에 따라 아이템 수령 조건이 충족됩니다.
아이템 박스와 아이템 라벨에서 설정할 수 있는 값들은 아이템 셀에서도 설정할 수 있습니다.
레벨 라벨(LevelLabel) - 레벨 달성 보상 템플릿전용
유저의 현재 레벨을 출력해주는 공간입니다. 삭제할 수 있지만 따로 추가할 수는 없습니다.
이벤트 페이지의 아이템 라벨 포맷과 같은 방식으로 편집할 수 있습니다.
예시 : 현재 레벨 : {0} → 현재 레벨 : 22
기간 라벨(PeriodLabel)
이벤트 페이지의 기간을 출력해주는 공간입니다. 삭제할 수 있지만 따로 추가할 수는 없습니다.
{0} 부분에 이벤트 시작일 , {1} 부분에 이벤트 종료일이 표기됩니다.
시작일과 종료일은 yyyy.MM.dd 의 형식으로 출력됩니다. 예 : 2020.01.16
예시 : 시작일이 20년 1월 16일, 이벤트 기간이 7일인경우 {0} 00시 부터 {1} 23시 59분까지 → 2020.01.16 00시 부터 2020.01.22 23시 59분까지
텍스트박스(Text)
이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 텍스트박스입니다.
text - 실제 표기될 텍스트를 입력할 수 있습니다.
textAlign - 텍스트가 기준 위치를 지정할 수 있습니다.
글씨크기(textSize) - 표기할 텍스트의 크기입니다. 미리보기에 출력되는 텍스트 크기와 실제 앱과 출력되는 크기에 약간의 차이가 있을 수 있습니다.
글씨색상(color) - 우측의 … 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.
이미지박스
이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 이미지박스입니다.
이미지(image) - 우측의 … 버튼을 통해 프로젝트가 저장된 위치의 Pictures 폴더에 추가된 이미지 중 출력할 이미지를 선택할 수 있습니다.
스크롤 영역 - 스크롤 패널(ScrollPanel)
실제 보여지게 되는 영역을 나타냅니다.
가로스크롤 사용부(horizontal) - 가로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.
세로스크롤 사용여부(vertical) -세로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.
배경색상(color) - 우측의 … 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.
스크롤 미리보기(horizontalOffset / verticalOffeset) - 가로 또는 세로 스크롤링을 사용하도록 설정할 경우에 실제 스크롤 됐을 때의 상태를 미리 볼 수 있게 해주는 값입니다. 0%~100% 까지의 값을 입력할 수 있습니다.
스크롤 영역 - 컨텐츠 박스(Content)
아이템셀이 등록되고 추가되는 공간입니다. 이벤트 페이지에서 해당 영역에만 아이템 셀을 추가할 수 있습니다.
실제 스크롤 되는 영역을 나타냅니다.
정상적으로 스크롤이 되기 위해선 스크롤패널보다 크기를 크게 만들어 주고, 스크롤 패널의 horizontal 또는 vertical 값을 True로 설정해주어야 합니다.
크기 및 위치 조정을 위한 공통 사항
이벤트 페이지 관리자 각 구성요소의 좌표계는 좌측 상단이 기준점(0,0)이고, 좌표값은 우측, 하단 방향으로 증가하는 방식입니다. 예시 : (50, -30) → 기준점 기준 우측 50 위쪽 30
x, y - 각 구성요소의 위치를 결정하는 값입니다. 부모 구성요소의 크기에 따라 변동되도록 % 값을 사용할 수 있습니다.
width, height - 각 구성요소의 크기를 결정하는 값입니다. 부모 구성요소의 크기에 따라 변동되도록 % 값을 사용할 수 있습니다.
anchor - 구성요소의 위치 값이 적용될 부모의 기준점을 설정할 수 있습니다.
pivotX, pivotY - 각 구성요소의 위치 기준점을 결정하는 값입니다. 0~1 사이의 값을 가지고, 0이 좌측 끝, 상단 끝 1이 우측 끝, 하단 끝을 의미합니다. (0,0) 일경우 구성요소의 위치값이 구성요소의 좌측 상단이, (0.5,0.5)일 경우 구성요소의 정중앙이 기준이됩니다.
예시 : 구성요소를 부모의 정중앙에 위치시키고 싶을 경우 아래와 같은 방법들이 있습니다.
anchor : MiddleCenter / pivotX : 0.5 / pivotY : 0.5 / x : 0 / y : 0
anchor : MiddleLeft / pivotX : 0.5 / pivotY : 0.5 / x : 50% / y : 0
anchor : TopLeft / pivotX : 0.5 / pivotY : 0.5 / x : 50% / y : 50%
예시 : 구성요소를 부모의 좌측상단에 위치시키고 싶을 경우 아래와 같은 방법이 있습니다.
anchor : TopLeft / pivotX : 0 / pivotY : 0 / x : 0 / y : 0
예시 : 구성요소를 부모의 우측하단에 위치시키고 싶을 경우 아래와 같은 방법이 있습니다.
anchor : BottomRight / pivotX : 1 / pivotY : 1 / x : 0 / y : 0
