이벤트 페이지 관리자 가이드라인

이벤트 페이지 :

이벤트 페이지란 아래와 같이 인게임 화면의 우측 상단에 있는 확성기 모양의 아이콘을 통해 접근할 수 있는 이벤트 목록에 게시될 각각의 이벤트를 의미합니다. 이벤트 페이지는 이미 출시된 게임에만 등록할 수 있습니다.

각각의 이벤트 페이지는 아래 스크린샷과 같은 형태로 보여지게 되고, 게임을 플레이하는 유저가 각 이벤트에서 제시하는 조건을 달성할 시 해당 유저에게 등록해 놓은 아이템을 지급하게 됩니다.

화면 좌측 이벤트 페이지 목록에서 각각의 이벤트 페이지에 수령 가능한 보상이 있을 시 아래 스크린샷처럼 좌측에 주황색 체크 표시가 출력됩니다.

유저가 이벤트 페이지에 설정한 조건을 만족시켰는지 여부에 따라 아이템 셀(아이템을 지급받을 수 있는 박스)는 아래의 4가지 상태로 출력됩니다.

  • 조건 미충족 : 추가 표시 없음 / 클릭(터치) 시 아이템 정보 조회

  • 조건 충족 불가 : 불투명한 아이템 셀, 하얀 X 마크 / 클릭(터치) 시 아이템 정보 조회

  • 조건 충족 - 수령 가능 : 주황색 아웃라인, 주황색 체크 마크 / 클릭(터치) 시 아이템 수령

  • 조건 충족 - 이미 수령 : 불투명한 아이템셀, 하얀 체크 마크 / 클릭(터치) 시 아이템 정보 조회

 

이벤트 페이지 관리자 :

네코랜드 스튜디오에서 이벤트 페이지를 추가/수정, 커스터마이징 할 수 있는 관리 도구입니다. 아래 스크린샷의 경로로 접근할 수 있습니다.

 

해당 경로로 이벤트 페이지 관리자를 열게 되면 아래와 같은 창이 열리게 됩니다.

  1. UI 추가 버튼 목록

    • 이벤트 페이지를 꾸미거나 기간을 늘려 아이템 셀을 추가해야 할 경우에 이용합니다.

     

  2. 페이지 목록 조회 및 추가/삭제

    • 추가한 이벤트 페이지를 조회 및 선택할 수 있습니다.

    • 페이지 삭제의 경우엔 기간이 종료된 이벤트에 한해 Delete 버튼을 눌러 삭제할 수 있습니다.

    • 하단의 버튼을 눌러 원하는 템플릿을 선택하면 이벤트 페이지를 추가할 수 있습니다.

     

  3. 페이지 구성 미리보기 및 UI 선택,이동, 크기 조절

    • 구성한 페이지를 미리 볼 수 있는 영역입니다.

    • 각 구성요소를 클릭 시 해당 요소를 선택하여 이동 및 크기 조절을 할 수 있습니다.

    • 여러 요소가 중첩되있는 경우에 클릭 시 최하단(자식이 없는) UI가 우선적으로 선택되고 추가 클릭을 하게 되면 상위 UI를 선택할 수 있습니다.

     

  4. 페이지 구성 요소(페이지 및 UI) 트리뷰

    • 구성요소는 이벤트 페이지 자체(최상단) 및 페이지에 종속된 UI들로 이루어져 있습니다. 자세한 설명은 본 튜토리얼 하단 이벤트 페이지 구성요소 및 커스터마이징 파트에서 확인할 수 있습니다.

    • 각 구성 요소의 부모/자식 관계를 파악할 수 있습니다. 5의 데이터 중 위치 및 크기와 관련된 데이터의 경우 %값을 쓰게 될 시 부모 UI의 위치 및 크기에 영향을 받습니다.

     

  5. 선택한 구성 요소의 속성값 조회 및 편집

    • 이벤트 페이지의 경우 이벤트 명(title), 활성화여부(activated), 아이템 라벨에 표시될 수령 조건의 포맷(itemLabelFormat), 이벤트 시작일(startDate), 이벤트 지속 기간(durationDay)를 편집할 수 있습니다.

    • 이벤트 페이지가 아닌 구성요소들은 각각 위치를 조정할 수 있는 값 등을 편집할 수 있습니다.

 

이벤트 페이지 추가방법 :

이벤트 페이지 관리자의 좌측 하단 새 이벤트 페이지 추가 버튼을 통해 신규 이벤트 페이지를 추가할 수 있습니다.

제작자 분들이 쉽게 이벤트 페이지를 추가하실 수 있도록 현재 아래 3가지의 템플릿을 제공하고 있습니다.

  • 일일 보상 : 이벤트 시작일로부터 1일마다 보상을 수령 가능, 이미 지난 날짜의 보상 수령 불가

  • 레벨 달성 보상 : 유저가 특정 레벨을 달성할 시 보상 수령 가능

  • 누적 접속일 보상 : 이벤트 기간내에 유저가 누적해서 접속한 일수에 따라 보상 수령 가능

 

이벤트 페이지를 추가한 후 각각의 아이템 셀(붉은 선으로 표시된 영역)을 클릭하여 선택한 후 우측 주황색 선으로 표시된 영역에서 보상으로 아이템을 등록할 수 있습니다.

템플릿에 따라 필요한 아이템 셀에 아이템 등록을 완료하게 되면 이벤트 페이지 관리자 우측 하단의 업로드 버튼을 통해 추가한 페이지를 현재 서비스 중인 게임에 바로 적용시킬 수 있습니다.

 

이벤트 페이지 구성요소 및 커스터마이징:

각각의 템플릿을 통해 이벤트 페이지를 만드는 경우, 모든 아이템 셀에 각 아이템만 등록해주면 바로 업로드가 가능합니다. 하지만, 각각의 게임에 맞게 이벤트명, 이벤트 설명 등의 구성요소를 설정해준다면 다른 게임과의 차별성, 게임에 대한 몰입감과 같은 부분에서 도움이 될 수 있습니다.

 

각 구성요소는 3. 페이지 구성 미리보기 및 UI 선택,이동, 크기 조절5. 선택한 구성 요소의 속성값 조회 및 편집 을 통해 커스터마이징이 가능합니다.

 

  1. 이벤트 페이지(Page)

    • 이벤트 자체의 설정을 설정할 수 있습니다.

    • 이벤트명(title) - 좌측에 표기되는 이벤트 목록 및 페이지 상단에 출력되는 이벤트 이름

    • 활성화여부(activated) - 해당 이벤트 페이지의 활성화 여부입니다.
      false일 시 유저에게 해당 페이지가 보여지지 않습니다. 웹콘솔(nekoland.net/me)의 공지사항/이벤트 & 푸시 메뉴에서도 해당 값을 실시간으로 수정 가능합니다.

    • 아이템 라벨 포맷(itemLabelFormat) - 각 아이템 셀의 상단에 표기되는 아이템 수령을 위한 조건을 보여줄 방식입니다.
      {0} 부분에 각 아이템 셀에서 설정한 조건(레벨) 또는 이벤트 시작일부터 지난 일수가 표기됩니다.
      예시 : {0}레벨 → 1레벨 2레벨 3레벨 등등 / {0}번째 날 → 1번째 날 2번째 날 3번째 날 등등

    • 이벤트 시작일(startDate) - 해당 이벤트가 실제 유저들에게 표시되기 시작하는 날짜입니다. 현재 시간보다 이전 날짜로는 설정할 수 없습니다.

    • 이벤트 지속 기간(durationDay) - 해당 이벤트가 지속되는 기간(일수)입니다.
      날짜 기반 템플릿(일일 보상, 접속일 보상)의 경우 아이템 셀의 갯수가 지속기간보다 많을 수 없습니다. 일일보상의 경우 아이템 셀의 갯수와 지속기간이 일치해야 합니다.
      해당 기간이 만료되면 유저들에게 더이상 페이지가 보이지 않게 되고, 해당 페이지를 삭제 할 수 있습니다.

     

  2. 아이템 박스(ItemBox)

    • 지급할 아이템을 선택하고, 해당 아이템의 이미지가 출력되는 공간입니다.

    • 아이템(item) - 우측의 을 눌러 아이템 선택창을 통해 아이템을 선택하거나 아이템 번호를 직접 입력해 지급할 보상을 선택할 수 있습니다.

    • 아이템 수량(itemCount) - 아이템을 선택한 경우에 편집할 수 있게되고, 조건 충족시 선택할 아이템을 몇개 지급할 지 설정할 수 있습니다.

     

  3. 아이템 라벨(ItemLabel)

    • 아이템을 수령하기 위한 조건이 출력되는 공간입니다.

    • 필요레벨(neededLevel) - 레벨 달성 보상 템플릿을 선택한 경우에만 편집할 수 있고, 아이템을 수령하기 위해 달성해야할 레벨을 설정할 수 있습니다.

     

  4. 아이템 셀(Item Cell)

    • 보상으로 주어질 아이템에 관한 UI들이 담기는 단위 UI입니다.

    • 인덱스(index) - 수정할 수 없는 값으로, 이벤트 보상이 순차적으로 지급되야 할 경우(일일 보상, 접속일 보상 등) 해당 인덱스 순서에 따라 아이템 수령 조건이 충족됩니다.

    • 아이템 박스와 아이템 라벨에서 설정할 수 있는 값들은 아이템 셀에서도 설정할 수 있습니다.

     

  5. 레벨 라벨(LevelLabel) - 레벨 달성 보상 템플릿전용

    • 유저의 현재 레벨을 출력해주는 공간입니다. 삭제할 수 있지만 따로 추가할 수는 없습니다.

    • 이벤트 페이지의 아이템 라벨 포맷과 같은 방식으로 편집할 수 있습니다.

    • 예시 : 현재 레벨 : {0} → 현재 레벨 : 22

     

  6. 기간 라벨(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분까지

     

  7. 텍스트박스(Text)

    • 이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 텍스트박스입니다.

    • text - 실제 표기될 텍스트를 입력할 수 있습니다.

    • textAlign - 텍스트가 기준 위치를 지정할 수 있습니다.

    • 글씨크기(textSize) - 표기할 텍스트의 크기입니다. 미리보기에 출력되는 텍스트 크기와 실제 앱과 출력되는 크기에 약간의 차이가 있을 수 있습니다.

    • 글씨색상(color) - 우측의 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.

     

  8. 이미지박스

    • 이벤트 페이지 관리자의 좌측 상단에서 자유롭게 추가/삭제 가능한 이미지박스입니다.

    • 이미지(image) - 우측의 버튼을 통해 프로젝트가 저장된 위치의 Pictures 폴더에 추가된 이미지 중 출력할 이미지를 선택할 수 있습니다.

     

  9. 스크롤 영역 - 스크롤 패널(ScrollPanel)

    • 실제 보여지게 되는 영역을 나타냅니다.

    • 가로스크롤 사용부(horizontal) - 가로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.

    • 세로스크롤 사용여부(vertical) -세로 스크롤링을 사용할지 여부입니다. 기본 값은 False입니다.

    • 배경색상(color) - 우측의 버튼을 통해 색상을 선택하거나 (A)R,G,B 의 형태로 직접 입력해 설정 할 수 있습니다. 직접 입력을 통해서만 투명도(A)값을 수정할 수 있습니다.

    • 스크롤 미리보기(horizontalOffset / verticalOffeset) - 가로 또는 세로 스크롤링을 사용하도록 설정할 경우에 실제 스크롤 됐을 때의 상태를 미리 볼 수 있게 해주는 값입니다. 0%~100% 까지의 값을 입력할 수 있습니다.


  10. 스크롤 영역 - 컨텐츠 박스(Content)

    • 아이템셀이 등록되고 추가되는 공간입니다. 이벤트 페이지에서 해당 영역에만 아이템 셀을 추가할 수 있습니다.

    • 실제 스크롤 되는 영역을 나타냅니다.

    • 정상적으로 스크롤이 되기 위해선 스크롤패널보다 크기를 크게 만들어 주고, 스크롤 패널의 horizontal 또는 vertical 값을 True로 설정해주어야 합니다.


  11. 크기 및 위치 조정을 위한 공통 사항

    • 이벤트 페이지 관리자 각 구성요소의 좌표계는 좌측 상단이 기준점(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

SUPERCAT Inc. All Rights Reserved.