# Hello ZEP Script > **ZEP Script 란?** > > ZEP Script는 ZEP에서 동작하는 스크립트 언어(Scripting Language)입니다. > > 아바타 및 오브젝트 조작, 결제, 채팅, 실시간 멀티플레이 등 다양한 기반 시스템을 제공하여, > > 코딩이 처음이라도 쉽게 시작할 수 있습니다. > > 독창적인 게임부터, 캘린더와 방명록 등의 생산성 앱까지! > > 나만의 메타버스 앱을 만들어 메타버스를 운영하고 ZEP을 더 풍부하게 즐겨보세요!
## ZEP Script 활용 사례 ZEP Script는 사용하기 편리합니다. 그리고 누구나 사용할 수 있습니다.

ZEP Script를 활용하여 만든 맵

### 🕹️게임 **ZEP Script**를 활용해 다양하고 재미있는 게임을 만들 수 있습니다. ### 토끼산 오르기 🐰 [토끼산 오르기 맵 구경하기](https://zep.us/play/8jqEO4) 떨어지는 장애물(눈덩이)을 피해 산 정상으로 올라가는 게임입니다. \ **미니게임 \[똥피하기]**를 활용하여 떨어지는 눈덩이를 구현할 수 있습니다.
### 봉봉학교 탐정단 🕵️ [봉봉학교 탐정단 맵 구경가기](https://zep.us/play/2QzYAY) 제한 시간 내에 탐정이 되어 맵 곳곳을 탐험할 수 있는 방탈출 맵입니다.\ 비네팅 효과로 인해 스릴 넘치는 공간을 체험헤보세요!
### 결투 게임 🥊 [결투장 맵 구경가기](https://zep.us/play/yOw9Av) **미니게임 \[결투]**를 기반으로 만들어진 게임입니다. \ \[z]키를 눌러 상대를 공격하고 HP가 깎이지 않게 다른 사람들을 피해 끝까지 살아남으세요. \ 가장 끝까지 살아남은 우승자는 왕으로 변할 수 있습니다.
### ### 🎉행사 **ZEP Script**를 활용하여 인터랙티브한 행사를 기획할 수 있습니다. ### 클레이튼 뮤지엄 ✈️ [클레이튼 뮤지엄 구경가기](https://zep.us/play/DwPndd) 클레이튼의 기술적 강점 등을 **ZEP Script**를 활용해 효과적으로 보여준 사례입니다
### 유니세프 후원자 참여행사 메타버스 유니세프가 하는 일을 ZEP Script로 구현하여 ,\ 이용자들이 맵을 체험하며 자연스럽게 학습을 할 수 있도록 제작했습니다
### 더블제트 제트랜드 ✈️ [더블제트 제트랜드 구경가기](https://zep.us/play/D63k6z) 삼성 청소기 제트 브랜드를 체험할 수 있는 테마파크로 ZEP Script를 통해 게임 공간을 구현해두었습니다.\ 행사 시에 이용자들에게 재미요소를 줄 수 있습니다.
# ZEP Script 개발 가이드 ## 시작하기 ### 소개 > 메타버스 플랫폼 ZEP에서 동작하는 앱을 누구나 제작할 수 있습니다. > > 캐릭터 및 오브젝트 조작 기능, 커스텀 UI 기능 등 다양한 기능을 지원합니다. > > 독창적인 게임부터 캘린더, 방명록 등의 생산성 앱까지, 누구나 자신만의 메타버스 앱을 만들 수 있습니다. :fire: [**ZEP 스크립트 활용 사례**](/creator/reference/zep) ### 개발 환경 * Javascript (ES6) * Typescript * Canvas * Web (Desktop/Mobile) #### ### ZEP-Script SDK를 이용한 개발 및 배포 ZEP-Script SDK를 사용하면 APP 개발 및 배포를 쉽게 할 수 있습니다. :bulb: [**Javascript 개발 가이드**](/creator/dev-guide/javascript) :computer: [**Typescript 개발 가이드**](/creator/dev-guide/typescript) ### 유형 {% hint style="info" %} ZEP Script를 통해 개발된 앱은 아래 세가지 형태 중 하나를 선택하여 맵에 적용할 수 있습니다. 앱과 맵을 연결하기 위해서, [**배포 가이드**](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} **1) 미니게임 ( Mini game )** 미니게임은 어느 맵에서나 사용할 수 있는 설치형 앱입니다. 임베드 권한이 있는 스페이스에서 **\[사이드바] > \[미니게임 아이콘]**을 클릭해 설치할 수 있습니다. **설치한 순간부터 작동**하며, 실행한 사용자가 [점프(space bar)를 통해 박스를 밟을 경우 앱이 종료](/zep-script-api/zepscriptapi/scriptapp/lifecycle)됩니다.
#### **2) 노말 앱 ( Normal app )** 노말 앱은 특정 맵에서만 작동할 수 있는 앱입니다. 노말 앱을 개발하여 업로드하면, **관리자**이상의 권한을 가진 유저가 맵의 **\[설정] > \[맵 설정] > \[노말 앱 추가]**에서 적용할 수 있습니다. 별도의 앱 설치 과정 없이 내가 제작한 맵에만 Script를 적용할 수 있습니다.
#### **3) 사이드바 앱 ( Sidebar app )** 사이드바 앱은 PC 좌측 사이드바에 아이콘으로 표시되는 형태의 앱 입니다. 사이드바 앱을 개발하여 업로드하면, 관리자권한을 가진 맵의 플레이 화면에서 **\[사이드바] > \[앱 추가] > \[앱 관리]** 리스트에서 설치하여 추가할 수 있습니다. 사이드바 앱이 추가된 스페이스에서는 입장한 **모든 사람에게 사이드바 앱이 노출**됩니다. {% hint style="info" %} [사이드바 앱 예제](/creator/tutor/sample/sidebarapp) 페이지를 참고해 사이드바 앱을 개발해보세요. {% endhint %} ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FvHXxo5H3Md1so2Lpf0fa%2FGroup%201305.png?alt=media\&token=0fdf76b6-7754-41b6-a4c3-9d8fcb4a6f6b) *** # 쉬운 개발 가이드 이 가이드에서는 ZEP Script 개발을 시도해 보고자 하는 분들을 위한 간단한 개발 환경 및 방법에 대해 설명합니다. ## **프로그램 설치** ZEP Script를 이용해 앱을 개발하기 위해서는 코드를 작성할 수 있는 IDE(편집기)가 필요합니다. 이 가이드에서는 Visual studio code 소프트웨어를 설치해 보도록 하겠습니다. 1. Visual studio code 홈페이지([링크](https://code.visualstudio.com/))에 방문합니다. 2. PC에 설치된 OS에 맞는 소프트웨어를 다운로드하고 설치합니다.
## **프로그램 실행 및 코드 작성 준비** 1. 설치한 소프트웨어를 실행합니다. 2. 좌측 상단에 \[파일] → \[새 파일]을 선택합니다.\ ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F06d8gGgMX1VPiJEMGzYF%2Fimage.png?alt=media\&token=334f19d2-30ab-4097-b92b-8287f8d18526) 3. 중앙 상단에 표시되는 파일 형식 입력에 main.js라고 입력합니다. (ZEP Script로 제작한 앱에는 반드시 main.js 파일이 있어야 합니다)
4. 파일을 저장할 폴더를 선택하신 후 파일 생성을 클릭합니다.
### ## 샘플 코드 작성하기 미니 게임을 실행하면 간단한 인사 메시지가 나오는 앱을 제작해 보도록 합니다. 사용할 API는 아래 3가지입니다. * [App.onStart](https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptapp/lifecycle#onstart) - 앱이 실행될 때 이 API함수 내에 있는 명령들이 1회 실행됩니다. * [App.sayToAll](https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptapp/methods#saytoall) - 채팅 창에 메시지를 표시하는 기능입니다. * [App.showCenterLabel](https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptapp/methods#showcenterlabel) - 화면에 메시지를 표시하는 기능입니다. 더 많은 기능에 대해 알아보려면 ZEP-Script 가이드([링크](https://docs-kr.zep.us/zep-script-api/zepscriptapi))를 참고해 주세요. 아래와 같이 테스트 코드를 작성한 후 저장합니다. ```jsx App.onStart.Add(function(){ App.sayToAll("Hello, Zep!"); App.centerLabel("Hello, Zep!") }) ``` 저장이 완료되었으면, 앱을 업로드하기 위해 main.js파일이 있는 폴더로 이동해 해당 파일을 \*.zip파일로 압축합니다.
## ## 앱 업로드 및 실행하기 ### 앱 업로드 하기 1. 홈페이지 로그인한 후 우측 상단에 내 닉네임을 클릭해서 \[나의 앱]을 클릭합니다.![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FUEu0MikfviRFcbylMDKR%2Fimage.png?alt=media\&token=e0ba10ca-ad85-45eb-b4d3-2a492705b8ee) 2. \[나의 앱]에서 앱을 등록하거나 수정할 수 있습니다. 새로운 앱을 업로드하기 위해 우측 상단에 \[앱 업로드] 버튼을 클릭합니다.
3. 앱 업로드에 필요한 정보를 작성합니다.
* 이름, 설명 등을 작성합니다. * 앱 타입은 \[미니 게임]으로 합니다. * \[ZIP 파일 업로드] 버튼을 눌러, 작성한 코드가 포함된 압축 파일을 등록합니다. * 다 완료되었으면 \[업로드] 버튼을 눌러 완료합니다. 앱 종류 및 업로드에 대한 자세한 사항은 [\[배포 가이드\]](https://docs-kr.zep.us/creator/dev-guide/zep-script)를 참고해 주세요. ### 앱 테스트 하기 테스트를 위해 홈페이지에 로그인 후 스페이스를 만들어 주세요. 1. 좌측의 사이드바에서 \[미니 게임]을 클릭합니다. 2. 실행 가능한 미니 게임 목록 중에 내가 업로드한 앱을 클릭합니다. \[Hello, ZEP]
3. 앱이 실행됨과 동시에 화면 상단과 채팅 창에 코드로 작성했던 Hello, ZEP! 이라는 메시지가 나타나는 것을 볼 수 있습니다.
## ZEP Script 따라하기 기본적인 앱 제작, 업로드 방식에 대해 알아봤는데요, ZEP Script에 대해 조금 더 학습하면, 자신이 원하는 앱을 만들 수 있습니다. \[[기초 예제 코드](https://docs-kr.zep.us/creator/tutor)]를 따라서 만들어 보는 것부터 시작해 보세요! # Javascript 개발 가이드 **zep-script-SDK** 라이브러리를 사용해 폴더 구조를 깔끔하게 유지하고, 프로젝트 압축 및 배포를 명령어만으로 간단하게 진행 할 수 있습니다. **zep-script-SDK** 사용 방법을 알아보겠습니다.
### 1. **node.js 설치** {% hint style="info" %} 링크로 이동해 node.js를 설치합니다. 안정적인 버전인 LTS 버전으로 설치하는 것을 추천 드립니다. {% endhint %}
### 2. **프로젝트 폴더 구성하기** 라이브러리 사용을 위해 프로젝트 폴더는 다음과 같이 구성합니다. res 폴더는 앱에서 쓰일 이미지, 사운드, html 파일 등을 넣는 폴더입니다. → 폴더 이름을 **res**로 지정해야합니다.
### 3. CLI를 사용해 프로젝트를 .zip 파일로 만들기 CLI를 사용해 명령어로 프로젝트를 **.zip** 파일로 만들 수 있습니다. CLI는 MacOS의 경우 터미널, Windows의 경우 Windows PowerShell 또는 Windows 11부터 제공되는 터미널 환경에서 실행하실 수 있습니다. > **Windows에서 PowerShell 실행하기** > > main.js가 있는 폴더 빈 공간에 **Shift + 오른쪽클릭**을 해서 > > **`여기에 PowerShell 창 열기`** 또는 **`여기서 명령창 열기`** 메뉴를 누르면 > > ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FhUNtzM9jyhMcSvPAk5r7%2FUntitled%204.png?alt=media\&token=b0291ba8-6092-4476-9157-0aaeba1aa741) > > 다음과 같이 **Windows PowerShell** 또는 **명령 프롬프트** 창이 실행됩니다. > > ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FigNx7hFgThBPdPhrK03M%2FUntitled%205.png?alt=media\&token=e8211f46-bcf0-4d9a-b9fb-7da934018362) **main.js** 파일이 있는 폴더에서 명령 창을 열어서 다음과 같이 압축 파일을 만들기 위한 명령어를 입력합니다. 
npx zep-script archive
압축 과정이 성공했다면 다음과 같이 폴더에 압축 파일이 생긴 것을 확인 할 수 있습니다.
압축 파일을 만드는 것을 마지막으로, 앱을 배포할 준비가 끝났습니다. ### 4. 프로젝트 배포하기 **1.홈페이지에서 배포하기** 위에서 만든 압축(ZIP) 파일을 업로드 하는 방식으로 앱을 배포할 수 있습니다. [**ZEP Script 배포 가이드**](/creator/dev-guide/zep-script) 페이지를 참고해서 앱을 배포해보세요! **2. 명령어(CLI)로 배포하기** CLI를 사용해 위에서 만든 압축(ZIP) 파일을 배포할 수 있습니다. 다음과 같이 `zep-script.json` 파일을 생성해 업로드 될 앱을 설정합니다. (이름이 동일해야 합니다.)
```json { "appId": "Zjkgoj", // app ID "name": "Template", // app 이름 "description": "Template application" , // app 설명 "type": "normal" // app 타입 ( "normal" or "minigame" or "sidebar" ) } ``` ⭐ appID: 업로드할 앱의 ID를 입력합니다 * 기존 앱을 변경하시려면 에 접속해서 업로드할 앱을 선택 후 주소창에 apps/뒤에 붙는 값을 입력하시면 됩니다.(아래 예시 이미지에서 **Zjkoj입**니다)
**main.js** 파일이 있는 폴더에서 명령 창을 열어서 다음과 같이 압축 파일을 만들기 위한 명령어를 입력합니다. ```powershell npx zep-script publish ``` 앱 업로드 과정에서 계정 인증이 필요합니다. 다음과 같이 email을 입력하는 부분이 나오면 배포 할 앱을 소유하고 있는 계정의 email을 입력합니다.
**Sending login code to your email**이라는 메시지가 나오면 위에서 입력한 이메일의 메일 함에서 인증 코드를 확인한 뒤 입력해주면 배포가 시작됩니다.

인증 메일 예시

다음 그림과 같이 **Publishing…** 텍스트 좌측에 초록색 체크 표시가 생기면 배포가 완료된 것 입니다.
위에서 **zep-script.json 파일**에 작성한 내용대로 [**나의 앱**](https://zep.us/me/apps) 페이지에 앱이 배포된 것을 확인 할 수 있습니다.
{% hint style="warning" %} **배포에 실패하는 경우 아래의 단계를 따라 재시도 해보세요.** **npx 명령어를 사용하는 경우** 1. 터미널에서 "`npm i zep-script -g"` 명령 실행하여 SDK 패키지를 최신화 2. root 폴더에서 "`.zscsession"` 파일 삭제 3. "npx zep-script publish" 명령어로 배포 시도 **npm 명령어를 사용하는 경우** 1. package.json 파일의 "zep-script" 버전이 최신이 아니라면 최신 버전으로 업데이트 2. root 폴더에서 "`.zscsession"` 파일 삭제 3. "npm run deploy" 명령어로 배포 시도 {% endhint %} 라이브러리 관련하여 보다 자세한 내용은 아래 github 레포지토리 내용을 참고해주세요. :clap:[zep-script-sdk/packages/zep-script-cli at main · zep-us/zep-script-sdk](https://github.com/zep-us/zep-script-sdk/tree/main/packages/zep-script-cli) *** # Typescript 개발 가이드 ### ⭐ 타입스크립트 개발 시 주의할 점 타입스크립트로 개발 시 **App, Map, Player, Widget** 키워드 앞에 **Script** 키워드를 붙여야 합니다. ```jsx // 자바스크립트 개발 시 App.sayToAll("Hello World!"); // 타입스크립트 개발 시 ScriptApp.sayToAll("Hello World!"); ``` ### 1. **node.js 설치** {% hint style="info" %} 링크로 이동해 node.js를 설치합니다. 안정적인 버전인 LTS 버전으로 설치하는 것을 추천드립니다. {% endhint %}
### 2. **프로젝트 폴더 만들기** CLI를 통해 ZEP Script 프로젝트를 개발하기 위한 샘플 프로젝트를 다운로드 받을 수 있습니다. CLI는 MacOS의 경우 터미널, Windows의 경우 Windows PowerShell 또는 Windows 11부터 제공되는 터미널 환경에서 실행하실 수 있습니다. > **Windows에서 PowerShell 실행하기** > > 폴더를 생성하고 싶은 곳 빈 공간에 **Shift + 오른쪽클릭**을 해서 > > **`여기에 PowerShell 창 열기`** 또는 **`여기서 명령창 열기`** 메뉴를 누르면 > > ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F1lORqNuyAVTfF89JN4Kp%2FUntitled%201.png?alt=media\&token=caab8a00-7e48-4457-afb4-e47a85f10c52) > > 다음과 같이 **Windows PowerShell** 또는 **명령 프롬프트** 창이 실행됩니다. > > 다음과 같이 프로젝트 폴더를 생성하기 위한 명령어를 입력합니다. **`npx zep-script init {폴더 이름} --npm`** 
npx zep-script@latest init MyZepApp --npm
위와 같이 `Project {폴더 이름} initialized successfully` 메시지가 출력 되었다면, 이제 타입스크립트로 **ZEP Script**를 개발할 수 있는 환경이 준비 된 것 입니다. ### 3. 폴더 구조 살펴보기 생성된 프로젝트 폴더로 이동하면 다음과 같이 파일들이 있는 것을 볼 수 있습니다. 여러 기능을 모듈로 나누고 싶다면, `src` 폴더내부에 파일을 추가해 확장할 수 있습니다.\ 예: `playerUtils.ts`, `eventHandlers.ts` 등 **res** 폴더는 ‘**resources**’의 약자로, 앱에 필요한 이미지나 html 파일 등을 넣는 폴더입니다.
여기서 생성된 **main.ts** 파일은 앱 로직을 작성하는 메인 파일입니다. **main.ts** 에는 다음과 같이 샘플 코드가 적혀있습니다. 해당 코드를 참고하여 개발을 하시면 됩니다.
### 4. **빌드하기** **ZEP Script**는 자바스크립트가 아닌 언어로 실행 할 수 없기 때문에 타입스크립트를 자바스크립트로 변환하는 빌드 과정을 거쳐야 합니다. **main.ts** 파일이 있는 폴더에서 명령 창을 열어 다음과 같이 빌드를 위한 명령어를 입력합니다. ```powershell npm run build 또는 npx zep-script build ```
빌드 완료 시 `res` 폴더에 `main.js` 파일이 생성됩니다.
**5. 압축 파일 만들기** ZEP Script로 만든 앱을 배포하려면 main.js 파일과 앱에서 사용 할 이미지, html 파일 등을 함께 압축한 **.zip** 파일을 준비해야 합니다. **main.ts** 파일이 있는 폴더에서 명령 창을 열어서 다음과 같이 압축 파일을 만들기 위한 명령어를 입력합니다. ```powershell npm run archive 또는 npx zep-script archive ```
압축 과정이 성공했다면 다음과 같이 폴더에 압축 파일이 생긴 것을 확인 할 수 있습니다.
압축 파일을 만드는 것을 마지막으로, 앱을 배포할 준비가 끝났습니다. ### 6. 프로젝트 배포하기 1. **홈페이지에서 배포하기** 위에서 만든 압축(ZIP) 파일을 홈페이지에서 업로드 하는 방식으로 앱을 배포할 수 있습니다. [ZEP Script 배포 가이드](/creator/dev-guide/zep-script) 페이지를 참고해서 앱을 배포해보세요! **2. 명령어(CLI)로 배포하기** CLI를 사용해 위에서 만든 압축(ZIP) 파일을 배포할 수 있습니다. 프로젝트 폴더에서 `zep-script.json` 파일을 열어 업로드 될 앱을 설정합니다. ( zep-script.json 파일이 없다면 생성해주세요 )
```json { "appId": "Zjkgoj", // app ID "name": "Template", // app 이름 "description": "Template application" , // app 설명 "type": "normal" // app 타입 ( "normal" or "minigame" or "sidebar" ) } ``` ⭐ appID: 업로드할 앱의 ID를 입력합니다 * 기존 앱을 변경하시려면 에 접속해서 업로드할 앱을 선택 후 주소창에 apps/뒤에 붙는 값을 입력하시면 됩니다.(아래 예시 이미지에서 **Zjkoj**입니다)
설정이 끝났으면 프로젝트 폴더 경로에서 PowerShell 을 실행 한 뒤, 다음과 같이 배포를 하기 위한 명령어를 입력합니다. ```powershell npm run deploy 또는 npx zep-script publish ```
다음과 같이 email을 입력하는 부분이 나오면 배포 할 앱을 소유하고 있는 계정의 email을 입력합니다.
**Sending login code to your email..**이라는 메시지가 나오면 위에서 입력한 이메일의 메일 함에서 인증 코드를 확인한 뒤 입력해주면 배포가 시작됩니다.

메일 인증 예시

다음 그림과 같이 **Publishing…** 텍스트 좌측에 초록색 체크 표시가 생기면 배포가 완료된 것 입니다.
[**나의 앱**](https://zep.us/me/apps) 페이지에서 **zep-script.json** 에 작성한 내용대로 앱이 배포된 것을 확인 할 수 있습니다.
{% hint style="warning" %} **배포에 실패하는 경우 아래의 단계를 따라 재시도 해보세요.** **npx 명령어를 사용하는 경우** 1. 터미널에서 "`npm i zep-script@latest -g` "명령을 실행하여 SDK 패키지를 최신화 2. root 폴더에서 "`.zscsession"` 파일 삭제 3. "npx zep-script publish" 명령어로 배포 시도 **npm 명령어를 사용하는 경우** 1. package.json 파일의 "zep-script" 버전이 최신이 아니라면 최신 버전으로 업데이트 1. `npm i zep-script@latest` 명령어 실행 2. root 폴더에서 "`.zscsession"` 파일 삭제 3. "npm run deploy" 명령어로 배포 시도 {% endhint %} 라이브러리 관련하여 보다 자세한 내용은 아래 github 레포지토리 내용을 참고해주세요. [zep-script-sdk/packages/zep-script-cli at main · zep-us/zep-script-sdk](https://github.com/zep-us/zep-script-sdk/tree/main/packages/zep-script-cli) *** # ZEP Script 배포 가이드 이 문서는 ZEP 스크립트로 만든 앱을 적용하는배포 과정에 대해 설명합니다. ## STEP 1. #### ZEP Script로 개발한 코드(**main.js)**, 사용할 이미지 파일, 위젯 파일들을 선택한 후 압축합니다. {% hint style="danger" %} 주의: \- 앱의 파일명과 형식은 반드시 “**main.js**”로 지정해주어야 합니다. \- 폴더를 압축하는 것이 아니라 **파일을 멀티 선택한 후 압축**해야 합니다. \- **\*.zip** 형식의 확장자를 지원합니다. {% endhint %} **예시 파일** ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F6wYF95Y7LVFdmWYIhrnv%2Fimage.png?alt=media\&token=09a791f4-b645-4160-ace5-c8f1278487c4) {% file src="/files/flE4EOIaqhVKUAiy1SFU" %} ## STEP 2. #### ZEP에 회원가입 또는 로그인 후, [나의 스페이스 목록](https://zep.us/spaces/me) 페이지에서 \[프로필] > \[나의 앱(Beta)]를 클릭합니다
## STEP 3. #### [나의 앱 페이지](https://zep.us/me/apps)에서 **\[앱 업로드]** 버튼을 클릭합니다.
## STEP 4. #### 앱 이름, 설명, 유형, 아이콘, 압축 파일 (스크립트, 위젯, 이미지 파일의 압축된 버전)을 설정 후 업로 **버튼**을 눌러줍니다.

앱 이름과 아이콘이 적용된 모습 (미니게임)

## STEP 5. #### 앱의 종류에 따라 원하는 맵에 설치하기. * **노멀 앱**(**Normal app):** Owner 권한을 가진 맵의 사이드바에서 **\[설정] > \[맵 설정] > \[노말 앱 추가]**에서 적용할 수 있습니다.
* **미니게임(Mini game):** 플레이 화면의 **\[좌측 사이드바] > \[미니게임 버튼]**을 클릭해 설치할 수 있습니다.
## 🚧 **디버깅 및 에러 메시지** 앱 실행 시, 에러 메시지는 **스태프 권한 이상의 유저 채팅창에 ****빨간색 글씨**로 노출됩니다.
# ZEP Script 따라하기 ZEP Script의 기본부터 고급 기능까지 실습할 수 있는 튜토리얼과 예제 코드를 따라하며 ZEP Script를 손쉽게 익혀보세요. ### 기초 예제 코드 기초 예제 코드를 따라 차근차근 ZEP Script를 익혀보세요! {% content-ref url="/pages/G5HJLBG8sOWfWcz1J3q6" %} [ZEP APP lifecycle 이해하기](/creator/tutor/tutorial/2) {% endcontent-ref %} {% content-ref url="/pages/PtNpMdpLPXpve1TAhQUl" %} [메시지 출력해보기](/creator/tutor/tutorial/1) {% endcontent-ref %} {% content-ref url="/pages/IMUeuWBPqU5xLs3OSzcJ" %} [캐릭터 이미지 바꾸기](/creator/tutor/tutorial/3) {% endcontent-ref %} {% content-ref url="/pages/HOjgujTdkQVZnYYkEngG" %} [나만의 UI 만들기](/creator/tutor/tutorial/4) {% endcontent-ref %} {% content-ref url="/pages/cXwKwvHnqiUahcrzDtae" %} [2초 스턴 효과 만들어보기](/creator/tutor/tutorial/5) {% endcontent-ref %} ### ZEP Script 예제코드 ZEP Script 개발에 도움을 주는 다양한 예제 코드들을 확인해보세요. {% content-ref url="/pages/OI6snaeVngZfpbWJYP93" %} [타이머](/creator/tutor/sample/timer) {% endcontent-ref %} {% content-ref url="/pages/YGPvzykhZ4OrlEbbejCZ" %} [사이드바 앱](/creator/tutor/sample/sidebarapp) {% endcontent-ref %} {% content-ref url="/pages/UeAMNvt45BRoTZ1n6OzV" %} [좀비 게임](/creator/tutor/sample/zombie) {% endcontent-ref %} {% content-ref url="/pages/iBqdIgrUQ8HMN7vemuzR" %} [페인트맨 게임](/creator/tutor/sample/paintman) {% endcontent-ref %} {% content-ref url="/pages/2aeHsYO8gb0U9Ne7qjeu" %} [초성 퀴즈](/creator/tutor/sample/wordquiz) {% endcontent-ref %} {% content-ref url="/pages/lScaAm2qCsasGj6rnGsu" %} [똥피하기 게임](/creator/tutor/sample/avoidpoop) {% endcontent-ref %} {% content-ref url="/pages/RwDKwax8VLl4d8121sgu" %} [결투 게임](/creator/tutor/sample/boxing) {% endcontent-ref %} {% content-ref url="/pages/JxNeRB26NpMArX6v0FXr" %} [달리기](/creator/tutor/sample/running) {% endcontent-ref %} ## UI 예제 코드 ### **기초 유형** {% content-ref url="/pages/tHETfF3bSZLKCUsIz0Ck" %} [Image List](/creator/tutor/undefined/image-list) {% endcontent-ref %} {% content-ref url="/pages/nzfTOPCLzj4tQ0CgE9a3" %} [Text List](/creator/tutor/undefined/text-list) {% endcontent-ref %} {% content-ref url="/pages/QUKjF6PqVmnB7eDy7Wzp" %} [Text Button List](/creator/tutor/undefined/text-button-list) {% endcontent-ref %} {% content-ref url="/pages/KJi60kxORVyDxxuX5s7a" %} [Ranking List](/creator/tutor/undefined/ranking-list) {% endcontent-ref %} ### **심화 유형** {% content-ref url="/pages/EjzfLSPQwZoN7ajTvcmt" %} [Select List](/creator/tutor/undefined/select-list) {% endcontent-ref %} # 기초 예제 코드 튜토리얼을 따라 차근차근 ZEP Script를 익혀보세요! {% content-ref url="/pages/G5HJLBG8sOWfWcz1J3q6" %} [ZEP APP lifecycle 이해하기](/creator/tutor/tutorial/2) {% endcontent-ref %} {% content-ref url="/pages/PtNpMdpLPXpve1TAhQUl" %} [메시지 출력해보기](/creator/tutor/tutorial/1) {% endcontent-ref %} {% content-ref url="/pages/IMUeuWBPqU5xLs3OSzcJ" %} [캐릭터 이미지 바꾸기](/creator/tutor/tutorial/3) {% endcontent-ref %} {% content-ref url="/pages/HOjgujTdkQVZnYYkEngG" %} [나만의 UI 만들기](/creator/tutor/tutorial/4) {% endcontent-ref %} {% content-ref url="/pages/cXwKwvHnqiUahcrzDtae" %} [2초 스턴 효과 만들어보기](/creator/tutor/tutorial/5) {% endcontent-ref %} # 메시지 출력해보기 1. App의 중앙 상단부에 메시지를 출력해봅니다. 기본 Center label 색상은 검은 배경에 흰색 텍스트로 노출됩니다. ```jsx // main.js App.showCenterLabel("Hello world"); ``` 2\. 실행 결과
{% hint style="warning" %} 참고 \- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다. \- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다. \- 배포 방법을 아직 모르신다면, [ZEP Script 배포 가이드](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} # ZEP APP lifecycle 이해하기 앱이 실행되어 종료될 때까지를 하나의 **생애 주기(Lifecycle)**라고 합니다. Lifecycle 함수는 앱의 생애 주기를 관리해주는 함수입니다. 아래 그림과 같이 앱이 실행될 때는 **Enter 단계**의 함수들이 동작하고, 앱이 실행 중 일 때는 **Update 단계**의 함수들이 주기적으로 동작하며, 앱이 종료될 때는 **Exit 단계**의 함수들이 동작하게 됩니다.
```jsx // App이 최초로 시작될 때 App.onInit.Add(function(){ // 이 시점에 App에는 플레이어들이 참가하지 않은 상태 // App의 나머지 필요한 부분을 초기화시킨다. }); // 플레이어가 들어올 때 App.onJoinPlayer.Add(function(player){ // 해당하는 모든 플레이어가 이 이벤트를 통해 App에 입장 }); // 플레이어가 모두 입장한 뒤에 한번 호출 App.onStart.Add(function(){ // App에서 원하는 플레이어 속성값을 부여할 수 있다. }); // 플레이어가 떠날 때 App.onLeavePlayer.Add(function(player){ // 플레이어가 단순히 중간에 나갔을 때 // App이 종료될 때에서 이 이벤트를 통해 모두 App에서 퇴장합니다. }) // 매 20ms(0.02초) 마다 실행 App.onUpdate.Add(function(){ }) // App이 종료될 때 App.onDestroy.Add(function(){ // 이미 모든 플레이어가 App에서 나간 상태 // App을 나머지를 정리한다. }) ``` *** # 캐릭터 이미지 바꾸기 1. **애니메이션이 들어간 SpriteSheet 샘플을 준비합니다. 없다면 아래 이미지를 다운 받아주세요.**
\*주의: 직접 제작한 경우가 아닌 SpriteSheet는 저작권에 유의해서 사용해야 합니다. **2. 위 이미지 같이 낱장의 이미지들이 동일한 규격으로 합쳐진 형태의 SpriteSheet 그림의 확장자는 png 파일이어야 합니다.** * TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장합니다.
{% hint style="success" %} 스프라이트 시트(sprite sheet)는 여러 개의 작은 그래픽을 정렬하여 구성한 비트맵 이미지 파일입니다. 게임 개발에서 캐릭터의 연속적인 포즈를 한 장의 이미지에 구성하여 2D 애니메이션 제작에 사용됩니다. {% endhint %} **3. SpriteSheet를 읽는 API 로는** `App.loadSpritesheet` **를 사용합니다.** ```jsx App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource ``` * 첫 번째 인자(fileName): 확장자가 포함된 SpriteSheet 시트의 파일 명을 넣습니다. * 두 번째 인자(frameWidth): 하나의 동작이 그려져 있는 그림의 가로 크기(px) * 세 번째 인자(frameHeight): 하나의 동작이 그려져 있는 그림의 높이(px) * 네 번째 인자(anims): ZEP에서 정해져 있는 애니메이션 이름(left, right, up, down)과 각각에 사용될 그림 인덱스 넘버들 {% hint style="success" %} 그림 순서의 인덱스 넘버는 왼쪽 상단 가로 줄 부터 0으로 시작합니다. {% endhint %} * 다섯 번째 인자(frameRate): 1초에 몇 장을 돌아가게 할 것인지 정합니다. **4. player의 속성을 변경하였으므로** `player.sendUpdated()` **를 써주어야 실제 반영됩니다.** **5. 예시 코드** ```jsx // 블루맨이라는 변수를 자바스크립트 문법에 맞게 생성 let blueman = null; // 변수에 SpriteSheet를 읽어 저장 blueman = App.loadSpritesheet('blueman.png', 48, 64, { left: [5, 6, 7, 8, 9], // left 라는 이미 정해진 왼쪽 방향으로 걸을 때의 애니메이션 이름 up: [15, 16, 17, 18, 19], // 그 이름에 쓰일 전체 파일에서의 인덱스 넘버들 down: [0, 1, 2, 3, 4], right: [10, 11, 12, 13, 14], }, 8); // 1초에 8장으로 한다. // 플레이어가 입장할 때 바로 블루맨 그림으로 교체해준다. App.onJoinPlayer.Add(function(player){ player.sprite = blueman; // 플레이어 속성이 변경되었으므로 호출해서 실제 반영해준다. player.sendUpdated(); }) ``` **6. 활용** ```jsx // 변수 선언과 동시에 바로 저장이 가능하다. let blueman = App.loadSpritesheet('blueman.png', 48, 64, { left: [5, 6, 7, 8, 9], up: [15, 16, 17, 18, 19], down: [0, 1, 2, 3, 4], right: [10, 11, 12, 13, 14], }, 8); ``` {% hint style="success" %} 플레이어가 입장할 때가 아닌, 다른 특수한 조건일 때에도 캐릭터가 변할 수 있겠죠? 생각해보세요. 그리고 만들어 보세요! {% endhint %} {% hint style="warning" %} 참고 \- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다. \- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다. \- 배포 방법을 아직 모르신다면,[ ZEP Script 배포 가이드](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} # 나만의 UI 만들기 1. ZEP 캔버스 위에 내가 원하는 형태의 UI를 그릴 수 있습니다. ZEP에서는 HTML 을 통해 UI를 표현할 수 있습니다. 2. `App.showWidget()` 함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 [ScriptApp](https://app.gitbook.com/o/-MkvEtFn2kFBYSN4_5rX/s/iW553XSGeKCAPpImxXi3/~/changes/bRylDKw8UxLaVWLvuhVV/creator/zep-script-v2_kr/api/scriptapp)에서 Methods를 참고해주세요. 3. 생성한 변수에 `sendMessage()` 메소드를 통해, 원하는 값을 HTML 파일에 전달할 수 있습니다. 4. main.js에서 전달 받은 값을 사용하려면, HTML 문법에 맞게 작성한 다음 `addEventListener`를 통해 message 타입을 아래 예시와 같이 값을 받아올 수 있습니다. * main.js ```jsx //UI가 노출될 위치(정렬, 가로, 세로) 값을 변수로 사전에 제작 let postion = 'middle'; let width = 400; let height = 400; // my.html로 state라는 태그를 만들어 hello라는 값을 전달 let _widget = App.showWidget('my.html', position, width, height); _widget.sendMessage({ state: "hello", }); ``` * my.html ```html
-
``` {% hint style="warning" %} 참고 \- 튜토리얼의 App type은 installable App을 권장합니다. \- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다. \- 배포 방법을 아직 모르신다면,[ ZEP Script 배포 가이드](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} *** [외부 API 통신하기](/creator/reference/api) # 2초 스턴 효과 만들어보기 ### 2초 스턴 효과 만들어보기 ```jsx let _players = App.players; // 플레이어가 스페이스에 입장 했을 때 이벤트 App.onJoinPlayer.Add(function(p) { p.tag = { sturn : false, // 스턴에 걸림 여부, false sTime : 2, //스턴 효과 2초로 설정 }; _players = App.players; }); // 플레이어가 다른 플레이어를 공격혔을 때 (Z키) App.onUnitAttacked.Add(function(sender, x, y, target) { if(!target.tag.sturn) { target.tag.sturn = true; // 스턴에 걸림 여부를 true로 변경 target.moveSpeed = 0; // 이동속도를 0으로 변경 target.sendUpdated(); } }); App.onUpdate.Add(function(dt){ for(let i in _players) { let p = _players[i]; // 스턴에 걸림 여부가 true 이면 if(p.tag.sturn) { p.tag.sTime -= dt; //스턴 효과 지속시간이 0이 될 때까지 update마다 dt만큼 빼줌 if(p.tag.sTime <= 0) // 스턴 효과 지속시간이 0 이하가 되면, { p.tag.sturn = false; // 스턴에 걸림 여부를 false로 변경 p.tag.sTime = 2; // 지속시간 2초로 초기화 p.moveSpeed = 80; // 이동속도 정상화 p.sendUpdated(); } } } }); // 플레이어가 스페이스를 나갔을 때 이벤트 App.onLeavePlayer.Add(function(p) { p.moveSpeed = 80; // 이동속도 정상화 p.sendUpdated(); _players = App.players; }); ``` {% hint style="warning" %} 참고 \- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다. \- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다. \- 배포 방법을 아직 모르신다면, [ZEP Script 배포 가이드](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} *** # ZEP Script 예제 코드 ZEP Script 개발에 도움을 주는 다양한 예제 코드들을 확인해보세요 ## 타이머 *** ZEP에서 동작하는 타이머를 만들 수 있습니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :alarm\_clock: [**타이머 예제**](/creator/tutor/sample/timer) ## 방탈출 타이머 *** 방탈출 스페이스에서 동작하는 타이머를 만들 수 있습니다. 필수 지정 영역을 적용해서 방탈출 타이머를 만들어보세요 :clock1: [**방탈출 타이머 예제**](/creator/tutor/sample/escapetimer) ## 사이드바 앱 *** 사이드바 앱은 PC 좌측 사이드바에 아이콘으로 표시되는 형태의 앱 입니다. 다음 예제를 개인의 개발 스타일에 맞게 수정해 사이드바 앱을 개발하실 수 있습니다.. :left\_facing\_fist: [**사이드바 앱 예제**](/creator/tutor/sample/sidebarapp) ## 좀비 게임 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 좀비 게임 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :zombie: [**좀비게임 예제**](/creator/tutor/sample/zombie) ## 페인트맨 게임 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 페인트맨 게임 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :art: [**페인트맨 게임 예제**](/creator/tutor/sample/paintman) ## 초성 퀴즈 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 초성 퀴즈 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :woman\_gesturing\_ok: [**초성 퀴즈 예제**](/creator/tutor/sample/wordquiz) ## 똥피하기 게임 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 똥피하기 게임 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :poop: [**똥피하기 게임 예제**](/creator/tutor/sample/avoidpoop) ## 결투 게임 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 결투 게임 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :boxing\_glove: [**결투 게임 예제**](/creator/tutor/sample/boxing) ## 달리기 *** \[하단바] > \[미디어 추가] > \[미니게임]에서 실제로 작동하는 달리기 게임 스크립트입니다. 개인의 개발 스타일에 맞게 수정해서 사용할 수 있습니다. :person\_running: [**달리기 예제**](/creator/tutor/sample/running) # 타이머 **Example (Timer)** ```jsx let _timer = 90; let _stateTimer = 0; App.onUpdate.Add(function(dt){ _stateTimer += dt; if(_stateTimer >= 1){ _stateTimer = 0; _timer -= 1; } if(_timer <= 0){ // time over then... } }) ``` *** # 방탈출 타이머 ### Example (방탈출)타이머 **예제 코드** {% file src="/files/8JTEnZm0RZRUyilIHPpY" %} ```` // Set game time const GAME_TIME = 60 * 90; let ONE_SEC = 1; App.onJoinPlayer.Add(function (player) { player.tag = {}; }); App.onUpdate.Add(function (dt) { if (ONE_SEC > 0) { ONE_SEC -= dt; } else { ONE_SEC = 1; for (let player of App.players) { if (player.tag.playtime) { if(player.tag.startTimer){ player.tag.playtime += ONE_SEC; } } else { player.tag.playtime = ONE_SEC; } // When GAME_TIME is exceeded if (player.tag.playtime >= GAME_TIME) { let minutes = Math.floor((GAME_TIME - player.tag.playtime) * -1 / 60); let seconds = Math.floor((GAME_TIME - player.tag.playtime) * -1 % 60); let minutes_string = minutes < 10 ? "0" + String(minutes) : String(minutes); let seconds_string = seconds < 10 ? "0" + String(seconds) : String(seconds); showTimerLabel(player, "main", "⏰ Overtime : ", `${minutes_string} : ${seconds_string}`); } else { let minutes = Math.floor((GAME_TIME - player.tag.playtime) / 60); let seconds = Math.floor((GAME_TIME - player.tag.playtime) % 60); let minutes_string = minutes < 10 ? "0" + String(minutes) : String(minutes); let seconds_string = seconds < 10 ? "0" + String(seconds) : String(seconds); showTimerLabel(player, "main", "⏰ Remaining time : ",`${minutes_string} : ${seconds_string}`); } } } }); // Set timer start location name App.addOnLocationTouched("start_timer", function (player) { player.tag.startTimer = true; }); // Set timer end location name App.addOnLocationTouched("end_timer", function (player) { player.tag.startTimer = false; }); // Set timer widget view function showTimerLabel(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; const labelPercentWidth = isMobile ? 50 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; align-items: center; justify-content: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const highlightSpanStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: #FFEB3A;`; const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px 24px', } let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` ```` ### 방탈출 타이머 지정 영역 방탈출 타이머를 사용하려면 지정 영역을 꼭 설정해주세요 * `start_timer` : 이 영역을 지나면 타이머가 시작됩니다. * `end_timer` : 이 영역을 지나면 타이머가 종료됩니다. # 사이드바 앱 사이드바 앱 위젯을 표시하고, x 버튼을 눌러 닫는 간단한 예제입니다. 위젯에 이미지를 넣으려면 예제 html 코드처럼 **이미지를 base64 인코딩**해서 **img 태그로 감싸**주어야 합니다. #### **1) 파일** {% file src="/files/uP7hB8LCKs66XNmC1LXk" %} #### **2) main.js** ```jsx // 사이드바 앱이 터치(클릭)되었을 때 동작하는 함수 App.onSidebarTouched.Add(function (p) { p.tag.widget = p.showWidget("widget.html", "sidebar", 350, 350); p.tag.widget.onMessage.Add(function (player, data) { if (data.type == "close") { player.showCenterLabel("위젯이 닫혔습니다."); player.tag.widget.destroy(); player.tag.widget = null; } }); }); // 플레이어가 입장 할 때 동작하는 함수 App.onJoinPlayer.Add(function (p) { p.tag = { widget: null, }; }); // 플레이어가 퇴장 할 때 동작하는 함수 App.onLeavePlayer.Add(function (p) { if (p.tag.widget) { p.tag.widget.destroy(); p.tag.widget = null; } }); ``` #### **3) 사이드바 앱이 실행된 모습**
# 좀비 게임 #### **1) 파일** {% file src="/files/Vlf83QQBffAId3PVeIKs" %} #### **2) main.js** ```jsx // load sprite let monster = App.loadSpritesheet('monster.png', 96, 96, { // defined base anim left: [8, 9, 10, 11], up: [12, 13, 14, 15], down: [4, 5, 6, 7], right: [16, 17, 18, 19], }, 8); const STATE_INIT = 3000; const STATE_READY = 3001; const STATE_PLAYING = 3002; const STATE_JUDGE = 3004; const STATE_END = 3005; let _start = false; // Whether the game starts let _players = App.players; // App.players : get total players let _lastSurvivor = null; let _zombieKing = []; let _state = STATE_INIT; let _stateTimer = 0; // Timer to check status value let _live = 0; // number of survivors let _resultstr; function startApp() { if(_players.length > 2) { // Set the number of zombies let zombiCnt = Math.floor(_players.length * 0.1); if(zombiCnt < 1) zombiCnt = 1; let allPlayer = []; let zombieIdx = []; for(let i = 0; i < _players.length; ++i) { allPlayer.push(_players[i]); } for(let i = 0; i < zombiCnt; ++i) { let index = Math.floor(allPlayer.length * Math.random()); if(!zombieIdx.includes(allPlayer[index].id)) { zombieIdx.push(allPlayer[index].id); allPlayer.splice(index, 1); } } // give players zombie attribute for(let i in _players) { let p = _players[i]; // create and utilize option data using tags. p.tag = {}; if(zombieIdx.includes(p.id)) { p.tag.zombie = true; p.tag.attack = 0; } else { p.tag.zombie = false; p.tag.attack = 0; _live++; } // when player property changed have to call this method // 플레이어 속성 변경 시 반드시 호출하여 업데이트 한다. p.sendUpdated(); } _start = true; } else { App.showCenterLabel(`Playable number of people: 3 or more`); startState(STATE_END); } } function startState(state) { _state = state; _stateTimer = 0; switch(_state) { case STATE_INIT: startApp(); break; case STATE_READY: App.showCenterLabel("The game will start soon."); for(let i in _players) { let p = _players[i]; p.moveSpeed = 0; // Change the attribute of zombies if(p.tag.zombie) { p.title = ''; p.sprite = monster; } p.sendUpdated(); } break; case STATE_PLAYING: for(let i in _players) { let p = _players[i]; // Change speed and label text according to player status if(p.tag.zombie) { p.moveSpeed = 85; p.showCenterLabel('Infect people!'); } else { p.moveSpeed = 80; p.showCenterLabel('Survive from zombies!'); } p.sendUpdated(); } break; case STATE_JUDGE: for(let i in _players) { let p = _players[i]; p.moveSpeed = 0; p.sendUpdated(); } judgement(_live); break; case STATE_END: _start = false; for(let i in _players) { let p = _players[i]; p.moveSpeed = 80; p.title = null; p.sprite = null; p.sendUpdated(); } // Clear all objects in the map Map.clearAllObjects(); break; } } function checkSuvivors() { let resultlive = 0; for(let i in _players) { let p = _players[i]; if(!p.tag.zombie) { _lastSurvivor = p; ++resultlive; } } return resultlive; } function judgement(number) { // The highest number of attacks among all players let attack = 0; for(let i in _players) { let p = _players[i]; if(p.tag.attack > attack) attack = p.tag.attack; } zombieKing = []; for(let i in _players) { let p = _players[i]; if(p.tag.attack == attack) zombieKing.push(p); } let index = Math.floor(Math.random() * zombieKing.length); if(number == 1) // when there are survivors resultstr = `${_lastSurvivor.name} is the last survivor!\nThe Strongest Zombie [` + zombieKing[index].name + '] Number of infections : ' + attack; else if(number == 0) // when there are no survivors resultstr = `No survivors.\nThe Strongest Zombie [` + zombieKing[index].name + '] Number of infections : ' + attack; } App.onStart.Add(function(){ startState(STATE_INIT); }); // when player join the space event // 플레이어가 스페이스에 입장 했을 때 이벤트 App.onJoinPlayer.Add(function(p) { p.tag = { zombie : false, attack : 0, }; if(_start) { p.tag.zombie = true; p.sprite = monster; p.sendUpdated(); judgement(checkSuvivors()); } _players = App.players; }); // when player leave the space event // 플레이어가 스페이스를 나갔을 때 이벤트 App.onLeavePlayer.Add(function(p) { if(_start) { judgement(checkSuvivors()); } p.title = null; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); _players = App.players; }); // when the game block is pressed event // 게임 블록을 밟았을 때 호출되는 이벤트 App.onDestroy.Add(function() { App.stopSound(); }); // when player touched other player event // 플레이어가 다른 플레이어와 부딪혔을 때 App.onPlayerTouched.Add(function(sender, target, x, y) { if(_state != STATE_PLAYING) return; if(!sender.tag.zombie) return; if(target.tag.zombie) return; target.tag.zombie = true; target.sprite = monster; sender.tag.attack += 1; target.sendUpdated(); _live = checkSuvivors(); if(_live >= 2) { App.showCenterLabel(`${target.name} is infected!\n(${_live} survivors!)`); return; } else startState(STATE_JUDGE); }); // called every 20ms // 20ms 마다 호출되는 업데이트 // param1 : deltatime ( elapsedTime ) App.onUpdate.Add(function(dt) { if(!_start) return; _stateTimer += dt; switch(_state) { case STATE_INIT: App.showCenterLabel("Become a zombie and infect people. The host is faster .\nPeople do their best to run away and be the last survivor."); if(_stateTimer >= 5) startState(STATE_READY); break; case STATE_READY: if(_stateTimer >= 3) startState(STATE_PLAYING); break; case STATE_PLAYING: break; case STATE_JUDGE: App.showCenterLabel(resultstr); if(_stateTimer >= 5) startState(STATE_END); break; case STATE_END: break; } }); ``` # 페인트맨 게임 #### **1) 파일** {% file src="/files/YhkJSdMw7A27eWDtY6NK" %} **2) main.js** ```jsx // load sprite let redman = App.loadSpritesheet('redman.png', 48, 64, { left: [5, 6, 7, 8, 9], // defined base anim up: [15, 16, 17, 18, 19], // defined base anim down: [0, 1, 2, 3, 4], // defined base anim right: [10, 11, 12, 13, 14], // defined base anim }, 8); // load sprite let blueman = App.loadSpritesheet('blueman.png', 48, 64, { left: [5, 6, 7, 8, 9], up: [15, 16, 17, 18, 19], down: [0, 1, 2, 3, 4], right: [10, 11, 12, 13, 14], }, 8); const STATE_INIT = 3000; const STATE_READY = 3001; const STATE_PLAYING = 3002; const STATE_JUDGE = 3004; const STATE_END = 3005; // load sprite let red = App.loadSpritesheet('red.png'); let blue = App.loadSpritesheet('blue.png'); let tomb = App.loadSpritesheet('tomb.png'); let _start = false; let _gameEnd = false; let _state = STATE_INIT; let _stateTimer = 0; let _timer = 90; let _objects = {}; let _redScore = 0; let _blueScore = 0; // for using hash key let HEIGHT_KEY = 10000000; let _blueTeam = []; let _redTeam = []; let _players = App.players; // App.players : get total players let TEAM_COUNTER = 0; let _resultStr = ''; function startState(state) { _state = state; _stateTimer = 0; switch(_state) { case STATE_INIT: _start = true; _stateTimer = 0; _timer = 90; _redScore = 0; _blueScore = 0; _objects = {}; for(let i in _players) { let p = _players[i]; // create and utilize option data using tags. p.tag = { x: p.tileX, y: p.tileY, sturn : false, sTime : 1, super : false, team: Math.floor(TEAM_COUNTER % 2), }; TEAM_COUNTER++; if(p.tag.team == 0) _redTeam.push(p); else if(p.tag.team == 1) _blueTeam.push(p); p.sprite = p.tag.team == 0 ? redman : blueman; p.sendUpdated(); } break; case STATE_READY: for(let i in _players) { let p = _players[i]; p.moveSpeed = 0; p.sendUpdated(); } break; case STATE_PLAYING: for(let i in _players) { let p = _players[i]; p.moveSpeed = 80; p.sendUpdated(); } break; case STATE_JUDGE: for(let i in _players) { let p = _players[i]; p.moveSpeed = 0; p.sendUpdated(); } break; case STATE_END: _start = false; for(let i in _players) { let p = _players[i]; p.moveSpeed = 80; p.title = null; p.sprite = null; p.sendUpdated(); } // remove all objects created by the zep-scripts // 젭스크립트로 생성된 모든 오브젝트를 제거 Map.clearAllObjects(); break; } } App.onStart.Add(function(){ startState(STATE_INIT); }); // when player join the space event // 플레이어가 스페이스에 입장 했을 때 이벤트 App.onJoinPlayer.Add(function(p) { p.tag = { x: p.tileX, y: p.tileY, sturn : false, sTime : 1, super : false, team: Math.floor(TEAM_COUNTER % 2), }; if(p.tag.team == 0) _redTeam.push(p); else if(p.tag.team == 1) _blueTeam.push(p); TEAM_COUNTER++; p.nameColor = p.tag.team == 0 ? 16711680 : 255; p.sprite = p.tag.team == 0 ? redman : blueman; p.sendUpdated(); _players = App.players; }); // when player leave the space event // 플레이어가 스페이스를 나갔을 때 이벤트 App.onLeavePlayer.Add(function(p) { p.moveSpeed = 80; p.title = null; p.sprite = null; p.sendUpdated(); _players = App.players; // update all plyers for update(dt) }); // when player touched objects event // 플레이어가 오브젝트와 부딪혔을 때 App.onDestroy.Add(function() { Map.clearAllObjects(); }) // when player attacked other player event (z key) // 플레이어가 다른 플레이어를 공격혔을 때 (Z키) App.onUnitAttacked.Add(function(sender, x, y, target) { if(_state != STATE_PLAYING) return; // not stun, not invincible, not on the same team // 스턴상태가 아니고, 무적이 아니고, 같은 팀이 아니면 스턴을 건다. if(!target.tag.sturn && sender.tag.team != target.tag.team && !target.tag.super) { target.tag.sturn = true; target.moveSpeed = 0; target.sendUpdated(); } }); // called every 20ms // 20ms 마다 호출되는 업데이트 // param1 : deltatime ( elapsedTime ) App.onUpdate.Add(function(dt) { if(!_start) return; _stateTimer += dt; switch(_state) { case STATE_INIT: App.showCenterLabel("The team that has painted the most land wins.\nHitting another teammate stuns them for 1 second."); if(_stateTimer >= 5) { startState(STATE_READY); } break; case STATE_READY: App.showCenterLabel("The game will start soon."); if(_stateTimer >= 3) { startState(STATE_PLAYING); } break; case STATE_PLAYING: App.showCenterLabel(_timer + `\nRED TEAM VS BLUE TEAM\n` + _redScore + " VS " + _blueScore); if(_stateTimer >= 1) { _stateTimer = 0; _timer--; } // time over if(_timer <= 0) { if(_redScore > _blueScore) { for(let i in _players) { let p = _players[i]; p.title = null; if(p.tag.team == 1) { p.sprite = tomb; p.moveSpeed = 0; p.sendUpdated(); } } _resultStr = 'RED TEAM VS BLUE TEAM\n' + _redScore + " VS " + _blueScore + '\nRED TEAM WIN'; } else if(_redScore < _blueScore) { for(let i in _players) { let p = _players[i]; p.title = null; if(p.tag.team == 0) { p.sprite = tomb; p.moveSpeed = 0; p.sendUpdated(); } _resultStr = 'RED TEAM VS BLUE TEAM\n' + _redScore + " VS " + _blueScore + '\nBLUE TEAM WIN'; } } else { for(let i in _players) { let p = _players[i]; p.title = null; p.sprite = null; p.sendUpdated(); } _resultStr = 'RED TEAM VS BLUE TEAM\n' + _redScore + " VS " + _blueScore + '\nDRAW'; } startState(STATE_JUDGE); } else { for(let i in _players) { let p = _players[i]; // for speed buff if(_timer == 30 || _timer == 20 || _timer == 10) { if(_redScore > _blueScore) { if(p.tag.team == 1) { // set player title p.title = ''; p.moveSpeed = 90; p.sendUpdated(); } else { p.title = null; p.moveSpeed = 80; p.sendUpdated(); } } else if(_redScore < _blueScore) { if(p.tag.team == 0) { p.title = ''; p.moveSpeed = 90; p.sendUpdated(); } else { p.title = null; p.moveSpeed = 80; p.sendUpdated(); } } } // strun state check if(p.tag.sturn) { p.tag.sTime -= dt; if(p.tag.sTime <= 0) { p.tag.sturn = false; p.tag.super = true; p.tag.sTime = 1; p.moveSpeed = 80; p.sendUpdated(); } } // invincible state check if(p.tag.super) { p.tag.sTime -= dt; if(p.tag.sTime <= 0) { p.tag.super = false; p.tag.sTime = 1; p.sendUpdated(); } } // paint tile and update score if(p.tag.x != p.tileX || p.tag.y != p.tileY) { p.tag.x = p.tileX; p.tag.y = p.tileY; let oldValue = _objects[p.tileY * HEIGHT_KEY + p.tileX]; if(oldValue == p.tag.team) continue; if(oldValue == 0) { _redScore--; } else if(oldValue == 1) { _blueScore--; } if(p.tag.team == 0) _redScore++; else _blueScore++; _objects[p.tileY * HEIGHT_KEY + p.tileX] = p.tag.team; Map.putObject(p.tileX, p.tileY, p.tag.team == 0 ? red : blue, { overlap: true, }); } } } break; case STATE_JUDGE: App.showCenterLabel(_resultStr); if(_stateTimer >= 5) { startState(STATE_END); } break; case STATE_END: break; } }); ``` # 초성 퀴즈 **1) 파일** {% file src="/files/y88GaUnCOGeWHrRG3qld" %} **2) main.js** ```jsx const STATE_INIT = 3000; const STATE_READY = 3001; const STATE_PLAYING = 3002; const STATE_JUDGE = 3004; const STATE_END = 3005; const WORD_LINES = [ '한글날 휴게소 현기증 형광펜 호날두 허니문 하노이 핫도그 홍두깨 헤드셋 해돋이 한라봉 한라산 호랑이 허리띠 현미경 흰머리 황무지 햄버거 학부모 휘발유 허벅지 하수구 호신술 홍수아 화승총 허스키 햄스터 해운대 활주로 휴지통 화장품 회초리 핫팬츠 하회탈', '피규어 팔꿈치 포도주 피라냐 피라미 피뢰침 프리킥 프라하 포미닛 팥빙수 표백제 판소리 피시방 팔씨름 피아노 편의점 파자마 포장지 표지판 파충류 파출부 파출소 포청천 팬클럽 포켓볼 피카소 피카츄 폭탄주 피터팬', '태극기 태권도 턱걸이 테니스 트렁크 터미널 퇴마사 토마토 탬버린 투석기 턱시도 탕수육 토스트 태양계 티아라 타이밍 탈의실 트위터 퇴직금 통조림 태진아 태평양 테헤란', '캥거루 콧구멍 코끼리 캐나다 콩나물 코너킥 컨디션 코러스 카메라 카메오 키보드 콤바인 코뿔소 케이크 코코넛 카타르 칵테일 커플링', '참기름 철가방 초능력 축농증 취두부 청계천 책갈피 책꽂이 초능력 축농증 창덕궁 차두리 최루탄 최면술 칠면조 청바지 청소년 출석부 찹쌀떡 청와대 첫인상 치와와 초인종 추어탕 초음파 침전물 청첩장 초콜릿 치트키 출판사 챔피언 침팬지 최홍만', '계기판 개나리 기내식 강낭콩 교도관 고드름 골동품 기러기 가로등 가래떡 글러브 그림자 기모노 금메달 거머리 교무실 공무원 건망증 구미호 김병만 국방부 거북선 광복절 곱빼기 가속도 각선미 기숙사 가오리 걸음마 강의실 거짓말 교차로 골키퍼 과태료 김태원 김태희 건포도 곰팡이 골판지 공포탄 김흥국 광화문 공휴일 고현정 꽹과리 까나리 깍두기 꽃다발 꽃등심 꼽등이 까마귀 까치발 깐풍기', '케첩 킹카 킹콩 컨닝 채찍 창문 참깨 천국 축구 출근 친구 치과 취권 채권 초과 족발 절벽 젖병 주부 전복 중복 정복 절반 족보 쟁반 주번 좀비 제비 사과 사기 시급 시계 손금 선거 수능 설날 스님', '모래 미래 미로 만루 떡밥 딸기 떡국 두유 득음 뉴욕 노을 낙엽 녹용 노인 눈물 냉면 나비 나방 가위 거울 근육 기타 깃털 구토 굴뚝 개념 그네 구름 기린 경마 경매 고막 가방 공부 고백 간병 갈비 김밥 거봉 군밤 기분 건빵 가시' ]; let WORDS = []; let _state = STATE_INIT; let _stateTimer = 0; let _timer = 0; let _choanswer = ''; let _answer = ''; let _start = false; let _widget = null; // using for contents UI let _players = App.player; let _result = ''; for(let w in WORD_LINES) WORDS = WORDS.concat(WORD_LINES[w].trim().split(' ')); function cho_hangul(str) { cho = ["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"]; result = ""; for (let i = 0; i < str.length; ++i ) { code = str.charCodeAt(i)-44032; if(code>-1 && code<11172) result += cho[Math.floor(code/588)]; else result += str.charAt(i); } return result; } App.onStart.Add(function(){ startState(STATE_INIT); }); // when chatting event // 채팅을 치면 호출되는 이벤트 // player : person who chatted // text : chat text // return : enter chatting box // return false or true : not appear in chatting box App.onSay.add(function(player, text) { if(_state == STATE_PLAYING) { if(_answer == text) { _result = player.name + '님 정답!\n정답은 ' + _answer; startState(STATE_JUDGE); } } }); function startState(state) { _state = state; _stateTimer = 0; switch(_state) { case STATE_INIT: if(_widget) { _widget.destroy(); _widget = null; } _answer = WORDS[Math.floor(Math.random() * WORDS.length)]; _timer = 60; _choanswer = cho_hangul(_answer); // called html UI // param1 : file name // param2 : position // [ top, topleft, topright, middle, middleleft, middleright, bottom, bottomleft, bottomright, popup ] // param3 : width size // param4 : height size _widget = App.showWidget('widget.html', 'top', 200, 300); _widget.sendMessage({ state: _state, timer: _timer, answer: _choanswer, }); startState(STATE_READY); break; case STATE_READY: _start = true; startState(STATE_PLAYING); break; case STATE_PLAYING: App.showCenterLabel('목표: 초성힌트로 단어를 찾아내세요.',0xFFFFFF, 0x000000, 115); _widget.sendMessage({ state: _state, timer: _timer, answer: _choanswer, }); break; case STATE_JUDGE: break; case STATE_END: if(_widget) { _widget.destroy(); _widget = null; // must to do for using again } _start = false; break; } } App.onLeavePlayer.Add(function(p) { p.title = null; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); }); App.onDestroy.Add(function() { _start = false; if(_widget) { _widget.destroy(); _widget = null; } }); App.onUpdate.Add(function(dt) { if(!_start) return; _stateTimer += dt; switch(_state) { case STATE_INIT: break; case STATE_READY: _start = true; break; case STATE_PLAYING: if(_stateTimer >= 1) { _stateTimer = 0; _timer -= 1; } if(_timer == 0) { _result = '정답은 ' + _answer + ' 입니다.'; startState(STATE_JUDGE); } break; case STATE_JUDGE: App.showCenterLabel(_result, 0xFFFFFF, 0x000000, 115); if(_stateTimer >= 3) startState(STATE_END); break; case STATE_END: break; } }); ``` # 똥피하기 게임 #### **1) 파일** {% file src="/files/FQUzpDPseJ1u2HXG3xJl" %} #### **2) main.js** ```jsx const poop = App.loadSpritesheet("poop.png"); let tomb = App.loadSpritesheet("tomb.png", 32, 48, { left: [0], right: [0], up: [0], down: [0], }); const STATE_INIT = 3000; const STATE_READY = 3001; const STATE_PLAYING = 3002; const STATE_JUDGE = 3004; const STATE_END = 3005; const STATE_INTRO = 3006; let _level = 1; let _levelTimer = 15; let _levelAddTimer = 0; let _start = false; let _ending = false; let _timer = 5; let _poops = []; let _stateTimer = 0; let _genTime = 0; let _dropTime = 0; let _flushTime = 0; let _viewPlayer = false; let _viewTimer = 1; let _viewAddTimer = 0; let _live = 0; let _liveList = ""; let _widget = null; let _widget2 = null; let _players = App.players; let HEIGHT_KEY = 10000000; let _areaPoint = {}; let poopkeys = []; // CustomLabel을 span 태그로 스타일을 지정해출력하는 함수 function customShowLabelWithRadius(player, str, width, radius) { if (player) { if (player.isMobile) { width = 100; } } // span 태그 let spanStyle = ``; let res = spanStyle + str + ""; if (player) { player.showCustomLabel(res, 0xffffff, 0x000000, -150, 100, 1); } else { App.showCustomLabel(res, 0xffffff, 0x000000, -150, 100, 1); } } // 모든 플레이어에게 라벨을 출력하는 함수 function showLabel(str) { for (let i in _players) { let p = _players[i]; customShowLabelWithRadius(p, str, 40, 14); } } function startState(state) { _state = state; _stateTimer = 0; if (_widget) { _widget.destroy(); _widget = null; } switch (_state) { case STATE_INTRO: // 게임시작 라벨 및 사운드 출력 showLabel("\n 미니게임 - 똥피하기 \n\n"); App.playSound("intro.ogg"); // 게임시작 변수(_start)를 true로 변경 _start = true; break; case STATE_INIT: // 게임 목표 라벨 출력 및 게임 변수 초기화 showLabel("- 게임목표 - \n\n 위에서 떨어지는 똥을 피해 마지막까지 생존하세요 \n\n ( 잠시 후 게임이 시작됩니다 )"); _stateTimer = 0; _genTime = 0; _dropTime = 0; _timer = 90; for (let i in _players) { let p = _players[i]; p.tag = { alive: true, }; } break; case STATE_PLAYING: break; case STATE_JUDGE: // 최종 생존자 라벨 출력 Map.clearAllObjects(); App.playSound("result.ogg", false); if (_live == 1) { showLabel(`- 최종 생존자는 - \n\n ${lastSurvivor.name}`); } else if (_live == 0) { showLabel(`생존자가 없습니다.`); } else { showLabel(`- 최종 생존자는 - \n\n ${_liveList}`); } break; case STATE_END: // 게임시작 변수(_start)를 false로 변경, 모든 플레이어의 속도 80, 스프라이트를 null(기본상태)로 변경 _start = false; for (let i in _players) { let p = _players[i]; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); } App.stopSound(); // 사운드 Off break; } } App.onInit.Add(function () { if (_widget) { _widget.destroy(); _widget = null; } }); App.onStart.Add(function () { startState(STATE_INTRO); }); App.onJoinPlayer.Add(function (p) { // 게임이 시작 된 후 새로운 플레이어가 입장하면 탈락으로 처리 if (_start) { p.tag = { alive: false, }; p.moveSpeed = 20; p.sprite = tomb; p.sendUpdated(); } else { p.moveSpeed = 80; p.sprite = null; p.sendUpdated(); } _players = App.players; }); // 플레이어가 나갈 때 sprite title moveSpeed 초기화 App.onLeavePlayer.Add(function (p) { p.title = null; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); _players = App.players; }); // 똥 오브젝트에 닿았을 때 App.onAppObjectTouched.Add(function (player, key, x, y, tileID) { // 플레이어가 탈락하지 않은 상태일 경우 똥에 닿으면 탈락 if (player.tag.alive) { _viewPlayer = true; _viewAddTimer = 0; player.tag.alive = false; player.sprite = tomb; player.moveSpeed = 20; player.sendUpdated(); App.playSound("poopp.mp3"); if (checkSuvivors() !== 1) { showLabel(`${player.name} 님 탈락!`); } } }); // 생존자 수를 체크하는 자바스크립트 일반 함수 function checkSuvivors() { if (!_start) return; let alive = 0; for (let i in _players) { let p = _players[i]; if (!p.sprite) { lastSurvivor = p; ++alive; } } return alive; } // 최종 생존자의 이름을 _liveList에 추가하는 자바스크립트 일반 함수 function broardCastingSuvivors() { if (!_start) return; _liveList = ""; for (let i in _players) { let p = _players[i]; if (p.tag.alive) { _liveList += p.name + " "; } } } // 게임 종료 블록을 눌렀을 때 App.onDestroy.Add(function () { // 스크립트로 설치한 모든 오브젝트 제거 Map.clearAllObjects(); if (_widget) { _widget.destroy(); _widget = null; } // 사운드 전체 Off App.stopSound(); }); App.onUpdate.Add(function (dt) { if (!_start) return; _stateTimer += dt; switch (_state) { case STATE_INTRO: // STATE_INTRO 상태에서 3초동안 똥피하기 인트로 라벨을 보여주고 STATE_INIT 로직 실행 if (_stateTimer >= 3) { startState(STATE_INIT); } break; case STATE_INIT: // STATE_INIT 상태에서 3초동안 게임 목표 라벨을 보여주고 STATE_INIT 로직 실행 if (_stateTimer >= 3) { startState(STATE_PLAYING); } break; case STATE_PLAYING: // 탈락 메시지를 표시중이지 않을 때 라벨을 표시하도록 처리 if (!_viewPlayer) { if (_level < 6) { showLabel(`- 레벨 ${_level} - \n ${_timer} 초`); } else { showLabel(`- 최고레벨 - \n ${_timer} 초`); } } _genTime -= dt; let poopkey; if (_genTime <= 0) { // 오브젝트 생성주기(genTime)가 똥피하기 난이도 단계(_level)에 따라 짧아짐 _genTime = Math.random() * (0.5 - _level * 0.05); let rand_X = Math.floor(Map.width * Math.random()); // 똥 오브젝트의 key 값 생성 poopkey = new Date().getTime() + Math.random(); poopkeys.push(poopkey); // 똥피하기 난이도 단계(_level)에 따라 똥의 이동속도가 증가 Map.putObjectWithKey(rand_X, 0, poop, { overlap: true, movespeed: 80 + _level * 10, key: poopkey, }); // 똥 오브젝트를 맵 끝으로 이동 Map.moveObjectWithKey(poopkey, rand_X, Map.height - 1, false); } //_flushTime(3초) 마다 맵 하단에 쌓인 똥 오브젝트를 삭제 _flushTime += dt; if (_flushTime >= 3) { _flushTime = 0; for (let i = 0; i < poopkeys.length; i++) { let key = poopkeys[i]; if (Map.getObjectWithKey(key).tileY == Map.height - 1) { Map.putObjectWithKey(Map.getObjectWithKey(key).tileX, Map.height - 1, null, { key: key, }); poopkeys.splice(i--, 1); } } } // _levelTimer(15초) 마다 난이도 단계가 1씩 증가 _levelAddTimer += dt; if (_levelAddTimer >= _levelTimer) { _level++; _levelAddTimer = 0; // 최고 난이도 단계를 6으로 제한 if (_level > 6) { _level = 6; } } // 생존자 수 체크 함수 호출 _live = checkSuvivors(); // 생존자 수 가 1명 또는 0명일 경우 게임 종료 로직 실행 if (_live == 1 || _live == 0) { startState(STATE_JUDGE); } else { if (_stateTimer >= 1) { _stateTimer = 0; _timer--; // 시간(_timer)변수가 0이 되면 최종 생존자 발표 if (_timer <= 0) { broardCastingSuvivors(); startState(STATE_JUDGE); } } } // 플레이어가 탈락 한 경우 1초 동안 탈락 메시지를 보여주고 _viewPlayer를 false로 변경 if (!_viewPlayer) { } else { _viewAddTimer += dt; if (_viewAddTimer >= _viewTimer) { _viewAddTimer = 0; _viewPlayer = false; } } break; case STATE_JUDGE: // STATE_JUDGE 상태에서 5초 동안 최종 생존자 라벨을 보여준 뒤 게임 종료로직 실행 if (_stateTimer >= 5) { startState(STATE_END); } break; case STATE_END: break; } }); ``` *** # 결투 게임 #### **1) 파일** {% file src="/files/tzkMXs8BTpeDIgqDAVTJ" %} #### **2) main.js** ```jsx let ghost = App.loadSpritesheet("ghost.png", 32, 48, { left: [2], right: [1], up: [3], down: [0], }); let redBoxing = App.loadSpritesheet("redBoxing.png"); const STATE_INTRO = 3001; const STATE_INIT = 3002; const STATE_RULE = 3003; const STATE_PLAYING = 3004; const STATE_JUDGE = 3005; const STATE_END = 3006; let lastSurvivor = null; let _start = false; let _players = App.players; let _state = STATE_INIT; let _stateTimer = 0; let _alive = 0; let _widget = null; function init() { for (let i in _players) { let p = _players[i]; setHPgage(p, p.tag.hp); p.sendUpdated(); } _alive = checkSuvivors(); } function startState(state) { _state = state; _stateTimer = 0; switch (_state) { case STATE_INTRO: for (let i in _players) { let p = _players[i]; if (p.tag.widget) { p.tag.widget.destroy(); p.tag.widget = null; } } // 게임시작 _start = true; _widget = App.showWidget("intro.html", "middle", 350, 340); App.playSound("intro.wav"); break; case STATE_INIT: init(); break; case STATE_RULE: _widget = App.showWidget("rule.html", "middle", 400, 200); for (let i in _players) { let p = _players[i]; p.moveSpeed = 0; p.sendUpdated(); } break; case STATE_PLAYING: if (_widget) { _widget.destroy(); _widget = null; } _widget = App.showWidget("status.html", "top", 700, 300); for (let i in _players) { let p = _players[i]; p.moveSpeed = 80; p.sendUpdated(); } break; case STATE_JUDGE: break; case STATE_END: if (_widget) { _widget.destroy(); _widget = null; } _start = false; for (let i in _players) { let p = _players[i]; p.sprite = null; p.attackSprite = null; p.title = null; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); } Map.clearAllObjects(); break; } } // 체력바 표시 함수 function setHPgage(p, hp) { switch (hp) { case 5: p.title = "▮▮▮▮▮"; break; case 4: p.title = "▮▮▮▮"; break; case 3: p.title = "▮▮▮"; break; case 2: p.title = "▮▮"; break; case 1: p.title = "▮"; break; } } // 생존자 수 체크 함수 function checkSuvivors() { let alive = 0; for (let i in _players) { let p = _players[i]; if (p.tag.alive) { lastSurvivor = p; ++alive; } } return alive; } App.onStart.Add(function () { startState(STATE_INTRO); }); App.onJoinPlayer.Add(function (p) { p.tag = { widget: null, alive: true, hp: 5, shield: false, time: 1, // 피격 후 1초간 무적 상태를 설정하기 위한 속성 }; p.attackSprite = redBoxing; // 게임 시작 후 새로운 플레이어 입장시 해당 플레이어를 죽음으로 처리 if (_start) { p.moveSpeed = 5; p.sprite = ghost; p.tag.alive = false; p.sendUpdated(); } _players = App.players; }); App.onLeavePlayer.Add(function (p) { p.attackSprite = null; p.title = null; p.sprite = null; p.moveSpeed = 80; p.sendUpdated(); _players = App.players; }); // 다른 플레이어를 공격할 때 App.onUnitAttacked.Add(function (sender, x, y, target) { if (_state != STATE_PLAYING) return; // 공격자가 죽은 상태이면 return if (!sender.tag.alive) return; // 타겟이 살아 있는 상태이면서 shield가 false인 경우 if (target.tag.alive && !target.tag.shield) { target.tag.hp--; // 타겟의 체력이 1 만큼 감소 // 타겟의 체력이 0이된 경우 if (target.tag.hp == 0) { target.title = null; // 타이틀 삭제 target.tag.alive = false; // alive 속성 false target.sprite = ghost; // 캐릭터 이미지를 ghost로 변경 target.moveSpeed = 5; // moveSpeed 80 -> 5 target.sendUpdated(); // 타겟 속성 업데이트 _alive = checkSuvivors(); // 생존자가 1명이면 if (_alive == 1) { if (_widget) { _widget.destroy(); _widget = null; } // 접속중인 모든 플레이어에게 result.html 위젯을 보여줌 _widget = App.showWidget("result.html", "top", 1055, 500); // 위젯에 표시할 마지막 생존자의 닉네임을 전달 _widget.sendMessage({ alive: _alive, name: lastSurvivor.name, }); App.playSound("result.wav"); _stateTimer = 0; startState(STATE_JUDGE); } } else { // 타겟을 공격하면 타겟이 1초간 무적 상태가 됨. (shield = true) target.tag.shield = true; setHPgage(target, target.tag.hp); target.sendUpdated(); } } }); App.onUpdate.Add(function (dt) { if (!_start) return; _stateTimer += dt; switch (_state) { case STATE_INTRO: // intro.html 위젯을 5초 동안 표시하고 STATE_INIT 시작 if (_stateTimer >= 5) { if (_widget) { _widget.destroy(); _widget = null; } App.stopSound(); startState(STATE_INIT); } break; case STATE_INIT: startState(STATE_RULE); break; // rule.html 위젯을 3초 동안 표시하고 STATE_PLAYING 시작 case STATE_RULE: if (_stateTimer >= 3) { if (_widget) { _widget.destroy(); _widget = null; } startState(STATE_PLAYING); } break; case STATE_PLAYING: // status.html 위젯의 생존자 수 업데이트 if (_widget) { _widget.sendMessage({ suvivors: _alive, }); } for (let i in _players) { let p = _players[i]; // 플레이어가 죽은 상태라면 건너뜀 if (!p.tag.alive) continue; // 피격 후 1초가 지나면 shield 속성을 false로 변경 if (p.tag.shield) { p.tag.time -= dt; if (p.tag.time <= 0) { p.tag.shield = false; p.tag.time = 1; // shield 지속시간 1초로 초기화 } } } _alive = checkSuvivors(); // 생존자가 1명 또는 0명일 경우 result.html 위젯 표시 if (_alive == 1) { if (_widget) { _widget.destroy(); _widget = null; } _widget = App.showWidget("result.html", "top", 1055, 500); _widget.sendMessage({ alive: _alive, name: lastSurvivor.name, }); App.playSound("result.wav"); startState(STATE_JUDGE); } else if (_alive == 0) { if (_widget) { _widget.destroy(); _widget = null; } _widget = App.showWidget("result.html", "top", 1055, 500); _widget.sendMessage({ alive: _alive, }); App.playSound("result.wav"); startState(STATE_JUDGE); } break; //result.html 위젯을 5초 동안 표시하고 STATE_END 시작 case STATE_JUDGE: if (_stateTimer >= 5) { startState(STATE_END); } break; case STATE_END: break; } }); // App이 종료되거나 Game Block이 파괴 될 때 실행되는 함수 App.onDestroy.Add(function () { // 앱으로 설치된 모든 오브젝트 삭제 Map.clearAllObjects(); }); ``` # 달리기 #### **1) 파일** {% file src="/files/cmgvOgOGGkHUkTRg1FSW" %} #### **2) main.js** ```jsx const STATE_INIT = 3000; const STATE_READY = 3001; const STATE_PLAYING = 3002; const STATE_JUDGE = 3004; const STATE_END = 3005; const STATE_INTRO = 3006; let _players = App.players; let _state = STATE_INIT; let _start = false; let _stateTimer = 0; let _countDown = 10; let _finishCountDown = false; let _finishCount = 30; let _finishTimer = 0; let _delayTimer = 0; let _playerBaseSpeed = 120; let _rank = 1; let _rankList = []; //모든 플레이어가 결승점을 통과한 경우 처리 function finishCheck(){ let allPlayer = 0; let finishedPlayer = 0; for(let p of _players){ if(!p) continue; if(p.tag.isNotPlayer) continue; if(p.tag.isFinish) finishedPlayer++; allPlayer++; } if(finishedPlayer == allPlayer) return true return false; } //달리기 맵 설정이 정상적으로 되어있는 지 확인하고, 아닌 경우 에러메세지를 리턴한다. function checkSetting(){ let warningMsg = ''; if (!Map.hasLocation("race_start_point")) { warningMsg = 'race_start_point'; } if (!Map.hasLocation("race_end_point")) { warningMsg = 'race_end_point'; } if (!Map.hasLocation("race_finish_point")) { warningMsg = 'race_finish_point'; } return warningMsg; } function startState(state){ _state = state; _stateTimer = 0; switch (state) { case STATE_INIT: for(let p of _players){ //달리기 앱을 실행한 유저를 확인한다. if(p.id == App.creatorID){ if(p.isMobile) //유저의 환경이 모바일인 경우의 위젯 p.tag.widget = p.showWidget("setting.html", "bottom", 440, 340); else //유저의 환경이 pc인 경우의 위젯 p.tag.widget = p.showWidget("setting.html", "middle", 440, 340); p.tag.widget.sendMessage({ str_title : 'Run', str_title_text1 : "A race to see who reaches the finish line the fastest", str_title_text2 : 'Click the Start Running button to start the game', str_title_start : "Start", str_title_how : "How to set up a map" }); p.tag.widget.onMessage.Add(function (sender, msg) { //게임을 취소하는 경우, 나타난 위젯을 제거한다 if (msg.type == "cancle") { if(p.tag.widget_warning){ p.tag.widget_warning.destroy(); p.tag.widget_warning = null; } if(p.tag.widget){ p.tag.widget.destroy(); p.tag.widget = null; } } else { // 맵에 필요한 설정 체크 let warning = checkSetting(); if(warning !== ''){ if(p.tag.widget_warning){ p.tag.widget_warning.destroy(); p.tag.widget_warning = null; } if(p.isMobile) p.tag.widget_warning = App.showWidget("warning.html", "top", 440, 60); else p.tag.widget_warning = App.showWidget("warning.html", "bottom", 440, 250); p.tag.widget_warning.sendMessage({ str_warningText : 'Race track needs to be setup', str_warningText2 : ' needed)', str_warningText3 : 'Run', warningMsg: warning, }) } else { if(p.tag.widget){ p.tag.widget.destroy(); p.tag.widget = null; } startState(STATE_INTRO); _start = true; } } }) } } break; case STATE_INTRO: App.showCenterLabel("\n minigame - RUN \n\n", 0xffffff, 0x000000, 120); ; break; case STATE_READY: for(let p of _players){ if(p.tag.start) continue; //모든 플레이어가 "race_start_point" 로케이션으로 이동한다 p.spawnAtLocation("race_start_point"); p.moveSpeed = 0; p.sendUpdated(); } break; case STATE_PLAYING: App.showCenterLabel("Start!!", 0xffffff, 0x000000, 120); ; for(let p of _players){ if(p.tag.start) continue; p.moveSpeed = _playerBaseSpeed; p.sendUpdated(); } break // 게임 결과 처리 case STATE_JUDGE: for(let i =0 ; i <_rankList.length; i++){ let rank = ''; if(i == 0) rank = '1st'; else if(i == 1) rank = '2nd'; else if(i == 2) rank = '3rd'; else rank = `${i + 1}th`; //게임종료 후 등수 표시 App.sayToAll(`${rank} : ${_rankList[i].name} !`); } for(let p of _players){ p.moveSpeed = 80; p.sendUpdated(); } _start = false; break // 게임 종료 처리 case STATE_END: for(let p of _players){ //게임이 종료되면 모든 플레이어는 "race_end_point" 로케이션으로 이동한다 p.spawnAtLocation("race_end_point"); if(p.tag.isNotPlayer) p.tag.isNotPlayer = false; } _start = false; break } } App.onLeavePlayer.add(function(p){ _players = App.players; p.moveSpeed = 80; p.sendUpdated(); }) // 플레이어가 해당 맵에 들어왔을 때 처리 App.onJoinPlayer.Add(function (p) { p.tag = {}; //게임시작 후 들어온 플레이어 처리 if (_start) { p.tag.isNotPlayer = true; } else { p.tag.isNotPlayer = false; p.tag.speedTimer = 0; p.tag.isFinish = false; p.tag.speedChnage = false; p.sendUpdated(); } //게임이 시작된 후 들어온 플레이어는 'race_end_point' 로케이션으로 이동시킨다 if(p.tag.isNotPlayer) p.spawnAtLocation("race_end_point"); _players = App.players; }); App.onStart.Add(function(){ startState(_state); //"speed_set_40", "speed_set_60", "speed_set_140", "speed_set_160" 으로 지정한 로케이션을 밟으면 //2초간 해당 로케이션 이름의 숫자와 같이 플레이어의 속도가 변한다. (2초 후 플레이어의 속도는 _playerBaseSpeed 가 된다 ) //ex) "speed_set_40"를 밟으면 속도가 40으로 변함 let speed = [40,60,140,160]; for(let i =0; i= 3){ startState(STATE_READY); } break; case STATE_READY: //출발선에서 _countDown 초(디폴트 10초) 간 레이스 카운트 다운을 시작한다 App.showCenterLabel(`${_countDown} seconds later the race will start. `,0xffffff, 0x000000, 120); if(_stateTimer >= 1){ _stateTimer = 0; _countDown --; } //카운트가 종료되면 (_countDown 가 0이 되면) 레이스가 시작된다 if(_countDown <= 0) startState(STATE_PLAYING); break; case STATE_PLAYING: for(let p of _players){ if(finishCheck() && _rankList.length == 0){ p.showCenterLabel("There is no winner",0xffffff, 0x000000, 120); p.spawnAtLocation("race_end_point"); startState(STATE_END); } // else if(finishCheck()) // startState(STATE_JUDGE); if(p.tag.isNotPlayer) continue; if(p.tag.speedChnage) p.tag.speedTimer += dt; //어떤 속도 지정 타일을 밟아도 2초 후 기본 속도(_playerBaseSpeed)로 돌아온다 if(p.tag.speedTimer >= 2 && p.tag.speedChnage){ p.moveSpeed = _playerBaseSpeed; p.tag.speedChnage = false; p.sendUpdated(); } } if(_finishCountDown) { _delayTimer += dt; //플레이어가 결승선을 통과하면 1.5초간 플레이어의 이름과 레이스 카운트다운을 라벨로 나타낸다 if(_delayTimer <=1.5) App.showCenterLabel(`${_rankList[_rankList.length -1].name} ${_rank - 1} place ! \n\n ${_finishCount} seconds later the race will end`,0xffffff, 0x000000, 120); else App.showCenterLabel(`${_finishCount} seconds later the race will end`,0xffffff, 0x000000, 120); _finishTimer += dt; if(_finishTimer >= 1){ _finishCount--; _finishTimer = 0; } // 레이스 카운트다운이 종료(0초)되었거나, 모든 플레이어가 결승선을 통과한 경우, 다음 단계로 넘어간다 if(_finishCount == 0 || finishCheck()){ startState(STATE_JUDGE); } } break; case STATE_JUDGE: //5초간 우승자(1등)의 이름을 라벨로 나타낸다 if(_stateTimer <= 5){ App.showCenterLabel(`- Winner - \n\n ${_rankList[0].name}`,0xffffff, 0x000000, 120); } //5초간 "잠시 후 대기실로 이동합니다"라는 라벨을 띄웁다 else if(_stateTimer > 5 && _stateTimer <= 10 ){ App.showCenterLabel("You will soon be transported to the waiting room",0xffffff, 0x000000, 120); } else { startState(STATE_END); } break; case STATE_END: break; } }); ``` # Custom Label 예제 코드 Cutom Label 예제 코드를 통해 미니게임에서 자주 쓰이는 Label을 구현할 수 있습니다. ### 예제코드 예제코드를 다운받아서 자신의 스페이스에 노말 앱으로 설치해보세요 0-9까지 숫자를 누르면 타입에 따른 Custom Label이 보여집니다. {% file src="/files/A7z02qZALv5DrQhl85sJ" %} ### 타입 별 예제코드 보러가기 [**Type-A >** ](/creator/tutor/custom-label/type-a) Type-A는 미니게임의 종류를 알려줄 때 인트로 Custom Label로 자주 사용됩니다.
[**Type-B >** ](/creator/tutor/custom-label/type-b) Type-B는 미니 게임에서 목표를 알려줄 때 자주 쓰이며, 두 줄로 된 긴문장을 쓸 때 주로 사용합니다.
[**Type-C >** ](/creator/tutor/custom-label/type-c) Type-C는 페인트 맨 팀 전 게임에서 사용된 Custom Label로, 대결 구도의 게임에서 자주 사용됩니다.
[**Type-D >**](/creator/tutor/custom-label/type-d) Type-D는 Type-C와 마찬가지로 팀 전 점수를 기록할 때 자주 쓰이며, 3줄로 나누어 쓸 수 있습니다.
[**Type-E >** ](/creator/tutor/custom-label/type-e) Type-E는 가위바위보 게임에서 나온 Custom Label로, 이미지를 삽입할 수 있습니다.
[**Type-F >** ](/creator/tutor/custom-label/type-f) Type-F는 ox 퀴즈, 퀴즈 골든벨에서 자주 사용되는 Custom Label로 본문 text를 길게 넣을 수 있습니다.
[**Type-G >** ](/creator/tutor/custom-label/type-g) Type-G는 한 줄 text를 사용할 수 있는 Custom Label입니다.
[**Type-H >**](/creator/tutor/custom-label/type-h) Type-H는 제한 시간이 있는 게임에서 남은 시간을 표시할 때 쓰는 Custom Label입니다.
[**Type-I >** ](/creator/tutor/custom-label/type-i) Type-I 는 미니 게임에서 우승자가 나오거나 플레이어가 특정될 때 나오는 Custom Label 입니다.
[**Type-J >**](/creator/tutor/custom-label/type-j) Type-J는 레벨이 있는 미니 게임에서 자주 쓰이는 Custom Label 입니다.
# Type-A Type-A는 미니게임의 종류를 알려줄 때 인트로 Custom Label로 자주 사용됩니다. ### 이미지
### 예제코드 ```javascript function showLabelTypeA(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // gap between top and label ( mobile 60px, pc 48px ) 60px, pc는 48px이 되도록 설정한 값 /** * Size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 70 : 28; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const secondRowStyle = ` font-size: ${isMobile ? "16px" : "24px"}; font-weight: 800; color: #FFEB3A;`; const customLabelOption = { key: key, borderRadius: "12px", fontOpacity: false, padding: "8px", }; let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-B Type-B는 미니 게임에서 목표를 알려줄 때 자주 쓰이며, 두 줄로 된 긴문장을 쓸 때 주로 사용합니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeB(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. * Size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 90 : 50; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "16px" : "18px"}; font-weight: 700; color: #FFEB3A;`; const secondRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const customLabelOption = { key: key, borderRadius: "12px", fontOpacity: false, padding: "8px", }; let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-C Type-C는 페인트 맨 팀 전 게임에서 사용된 Custom Label로, 대결 구도의 게임에서 자주 사용됩니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeC(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const secondRowStyle = ` font-size: ${isMobile ? "16px" : "24px"}; font-weight: 800; color: white;`; const customLabelOption = { key: key, borderRadius: "12px", fontOpacity: false, padding: "8px", }; let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-D Type-D는 Type-C와 마찬가지로 팀 전 점수를 기록할 때 자주 쓰이며, 3줄로 나누어 쓸 수 있습니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeD(player, key, text1, text2, text3) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "16px" : "18px"}; font-weight: 700; color: #FFEB3A;`; const secondRowStyle = ` font-size: ${isMobile ? "16px" : "18px"}; font-weight: 700; color: white;`; const thirdRowStyle = ` font-size: ${isMobile ? "16px" : "24px"}; font-weight: 800; color: white;`; const customLabelOption = { key: key, borderRadius: "12px", fontOpacity: false, padding: "8px", }; let htmlStr = ` ${text1} ${text2} ${text3} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-E Type-E는 가위바위보 게임에서 나온 Custom Label로, 이미지를 삽입할 수 있습니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeE(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const secondRowStyle = ` font-size: ${isMobile ? "48px" : "64px"}; font-weight: 800; color: white;`; const customLabelOption = { key: key, borderRadius: "12px", fontOpacity: false, padding: "8px", }; let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-F Type-F는 ox 퀴즈, 퀴즈 골든벨에서 자주 사용되는 Custom Label로 본문 text를 길게 넣을 수 있습니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeF(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 90 : 50; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "16px" : "18px"}; font-weight: 700; color: #FFEB3A;`; const secondRowStyle = ` font-size: ${isMobile ? "16px" : "18px"}; font-weight: 700; color: white;`; const thirdRowStyle = ` font-size: ${isMobile ? "11px" : "13px"}; font-weight: 700; color: #D5D9E0; margin-top: 18px; `; const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px', } let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-G Type-G는 한 줄 text를 사용할 수 있는 Custom Label입니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeG(player, key, text) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px', } let htmlStr = ` ${text} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-H Type-H는 제한 시간이 있는 게임에서 남은 시간을 표시할 때 쓰는 Custom Label입니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeH(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; align-items: center; justify-content: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const highlightSpanStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: #FFEB3A;`; // Show red(#FF5353) when timeout is about to expire const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px', } let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-I Type-I 는 미니 게임에서 우승자가 나오거나 플레이어가 특정될 때 나오는 Custom Label 입니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeI(player, key, text1, text2) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; //60px from the top on mobile and 48px on PC. /** * size-based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const parentStyle = ` display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; `; const firstRowStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`; const highlightSpanStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: #74FADA; `; const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px', } let htmlStr = ` ${text1} ${text2} `; player.showCustomLabel(htmlStr, 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # Type-J Type-J는 레벨이 있는 미니 게임에서 자주 쓰이는 Custom Label 입니다. 똥 피하기 게임에서 쓰인 것을 볼 수 있습니다. ### 이미지
### 예제 코드 ```javascript function showLabelTypeJ(player, key, text1, text2, text3) { const isMobile = player.isMobile; const topGap = isMobile ? 10 : -2; // 60px from the top on mobile and 48px on PC. /** * size based @labelPercentWidth * XL: isMobile ? 90 : 50; * L: isMobile ? 80 : 40; * M: isMobile ? 70 : 28; * S: isMobile ? 60 : 20 */ const labelPercentWidth = isMobile ? 60 : 20; const labelDisplayTime = 300000; const directionColumnStyle = ` display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;`.trim(); const rowStyle = ` display: flex; align-items: center; justify-content: center; text-align: center; `.trim(); const spanStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: white;`.trim(); const highlightSpanStyle = ` font-size: ${isMobile ? "14px" : "18px"}; font-weight: 700; color: #FFEB3A;`.trim(); // Show red(#FF5353) when timeout is about to expire const customLabelOption = { key: key, borderRadius: '12px', fontOpacity: false, padding: '8px', } let htmlStr = ` ${text1} ${text2} ${text3} `; player.showCustomLabel(htmlStr.trim(), 0xffffff, 0x27262e, topGap, labelPercentWidth, 0.64, labelDisplayTime, customLabelOption); } ``` # 사이드 바 앱 예제 코드 사이드 바 앱 예제 코드를 이용해 나만의 앱을 만들어 보세요! 각 항목에 포함된 zip파일을 받아서 사이드바 앱으로 업로드한 후 맵에 설치하시면 바로 실행해 보실 수 있습니다 ### **기초 유형** {% content-ref url="/pages/tHETfF3bSZLKCUsIz0Ck" %} [Image List](/creator/tutor/undefined/image-list) {% endcontent-ref %} {% content-ref url="/pages/nzfTOPCLzj4tQ0CgE9a3" %} [Text List](/creator/tutor/undefined/text-list) {% endcontent-ref %} {% content-ref url="/pages/QUKjF6PqVmnB7eDy7Wzp" %} [Text Button List](/creator/tutor/undefined/text-button-list) {% endcontent-ref %} {% content-ref url="/pages/KJi60kxORVyDxxuX5s7a" %} [Ranking List](/creator/tutor/undefined/ranking-list) {% endcontent-ref %} ### **심화 유형** {% content-ref url="/pages/EjzfLSPQwZoN7ajTvcmt" %} [Select List](/creator/tutor/undefined/select-list) {% endcontent-ref %} # Image List #### Image List 위젯은 이미지와 텍스트를 함께 표시하고 선택할 수 있는 UI입니다. 활용 예) 탑승 앱, 찌르기 앱, 아바타 특수 효과 등 **Image** ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F4CjFnONKpPwEvZPMEOk9%2FGroup%201364.png?alt=media\&token=3d3e5286-8023-4111-8f88-4368ecf1616a) #### Example {% file src="/files/xLhzZjKrV8LeMTYUsMXG" %} ```javascript function openWidget(p) { //Check if player is mobile or not if(p.isMobile) //Set the widget's name, anchor position, width, and height. p.tag.widget = p.showWidget('widget.html','sidebar',300,550); else p.tag.widget = p.showWidget('widget.html','sidebar',280,520); //Send data to widget p.tag.widget.sendMessage({ isMobile : p.isMobile, }) //Register events for messages sent from widgets p.tag.widget.onMessage.Add(function(sender, msg) { switch (msg.type) { case 'close': if(p.tag.widget) { p.tag.widget.destroy(); p.tag.widget = null; } break; case 'submit': let choiceItem = msg.choice; p.showAlert('Item' + choiceItem); break; } }) } //Event when a player joins the app App.onJoinPlayer.Add(function(p) { //Reset the player's tag value p.tag = {}; }); // Action when the player clicks the sidebar app App.onSidebarTouched.Add(function(p) { openWidget(p); }); ``` # Text List #### Text List 형 위젯은 텍스트와 서브 텍스트를 같이 사용한 UI입니다. 활용 예 ) 내 포인트 앱 이용자 내역 **Image** ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FZvQOtGIpGfNX1p1hXyHx%2Fimage.png?alt=media\&token=76dd4986-f677-4496-9733-be60f27dbc5b) **Example** {% file src="/files/NQHm3AfZKRkXNGtVlqmN" %} ```javascript /** * Widget Handle Function * @param player Script Player Object * @returns */ function openWidget(player) { if (player.isMobile) { player.tag.widget = player.showWidget('widget.html', 'sidebar', 300, 500); } else { player.tag.widget = player.showWidget('widget.html', 'sidebar', 290, 460); } // send message to widget player.tag.widget.sendMessage({ isMobile : player.isMobile, }); // handle message from child frame(widget) player.tag.widget.onMessage.Add(function(sender, msg) { switch (msg.type) { case 'close': if(sender.tag.widget) { sender.tag.widget.destroy(); sender.tag.widget = null; } break; case 'submit': sender.showAlert('OK'); break; } }) } App.onJoinPlayer.Add(function(player) { // Initialize tag properties of player player.tag = {}; }); App.onSidebarTouched.Add(function(player) { openWidget(player); }); ``` # Text Button List #### Text Button List 형 위젯은 텍스트와 버튼을 함께 표시할 수 있는 UI입니다. 활용 앱 ) 카메라 관전 프리미엄 기능 #### Image ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FmNLotSQD7iT1g2xwEaqW%2Fimage.png?alt=media\&token=370a745c-cb5f-45b6-96f2-344ed19e6536) **Example** {% file src="/files/tAQ6urAqcEI8PQ47w53C" %} ```javascript function openWidget(p) { //Check if player is mobile or not if(p.isMobile) //Set the widget's name, anchor position, width, and height. p.tag.widget = p.showWidget('widget.html','sidebar',300,550); else p.tag.widget = p.showWidget('widget.html','sidebar',280,520); //Send data to widget p.tag.widget.sendMessage({ isMobile : p.isMobile, }) //Register events for messages sent from widgets p.tag.widget.onMessage.Add(function(sender, msg) { switch (msg.type) { case 'close': if(p.tag.widget) { p.tag.widget.destroy(); p.tag.widget = null; } break; } }) } //Event when a player joins the app App.onJoinPlayer.Add(function(p) { // Initialize tag properties of player p.tag = {}; }); // Action when the player clicks the sidebar app App.onSidebarTouched.Add(function(p) { openWidget(p); }); ``` # Ranking List #### Ranking List 형 위젯은 플레이어의 랭킹을 정렬한 UI입니다. 활용 예 ) 달리기 공식 맵, 결투장 공식 맵, 승부 예측 앱, 포인트 앱 #### Image ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FHEDODin0VArauKQpEi1K%2Fimage.png?alt=media\&token=4b670d4e-0b03-45ad-9f10-1dbf8b5b682f) #### Example {% file src="/files/nmg5sF3qrdFJUW6LVVxY" %} ```javascript const dummyData = { 'a': { id: 'a', name: 'user1', point: 100, }, 'b': { id: 'b', name: 'user2', point: 200, }, 'c': { id: 'c', name: 'user3', point: 400, }, 'd': { id: 'd', name: 'user4', point: 1000, }, 'e': { id: 'e', name: 'user5', point: 2000, }, 'f': { id: 'f', name: 'user6', point: 4000, }, }; function openWidget(p) { //Check if player is mobile or not if (p.isMobile) //Set the widget's name, anchor position, width, and height. p.tag.widget = p.showWidget('widget.html', 'sidebar', 350, 480); else p.tag.widget = p.showWidget('widget.html', 'middle', 400, 448); //Send data to widget p.tag.widget.sendMessage({ data: dummyData, id: p.id, isMobile: p.isMobile, }); //Register events for messages sent from widgets p.tag.widget.onMessage.Add(function (sender, msg) { if (msg.type == "close") { if (sender.tag.widget) { sender.tag.widget.destroy(); sender.tag.widget = null; } } }); } //Event when a player joins the app App.onJoinPlayer.Add(function(p) { //Reset the player's tag value p.tag = {}; }); // Action when the player clicks the sidebar app App.onSidebarTouched.Add(function(p) { openWidget(p); }); ``` # Select List #### Select List 형 위젯은 텍스트와 텍스트 입력 창, 혹은 선택 버튼을 함께 사용할 수 있는 UI입니다. 활용 예 ) 탑승 앱, 찌르기 앱, 아바타 특수 효과 앱 #### Image ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F9tYFarZSoRL99qnbwOij%2Fimage.png?alt=media\&token=b958acf1-ac4f-481f-a241-18debe0da7d0) #### #### Example {% file src="/files/14laQzAmRS4hpdf6ksOM" %} ```javascript // Editable fields. Used for validation. const RequiredFields = { password: "string", lock: "boolean" }; const SELECT_ITEM_DATA = { Select_1: { id: 1, order: 1, // Item sorting order displayName: "Item 1", // Item display name password: "password", // password lock: false, // lock(boolean) }, Select_2: { id: 2, order: 2, displayName: "Item 2", password: "password", lock: false, }, Select_3: { id: 3, order: 3, displayName: "Item 3", password: "password", lock: false, }, Select_4: { id: 4, order: 4, displayName: "Item 4", password: "password", lock: false, }, Select_5: { id: 5, order: 5, displayName: "Item 5", password: "password", lock: false, }, Select_6: { id: 6, order: 6, displayName: "Item 6", password: "password", lock: false, }, Select_7: { id: 7, order: 7, displayName: "Item 7", password: "password", lock: false, }, Select_8: { id: 8, order: 8, displayName: "Item 8", password: "password", lock: false, }, }; App.onStart.Add(() => { init(); }); App.onJoinPlayer.Add(function (player) { player.tag = {}; }); App.onSidebarTouched.Add(function (player) { showMainWidget(player); }) function init() { // ensureStorageInitialized if (!App.storage) { App.storage = "{}"; App.save(); } const appStorage = JSON.parse(App.storage); // updateItemDataFromStorage if (appStorage.setting) { for (let key in SELECT_ITEM_DATA) { if (appStorage.setting.hasOwnProperty(key)) { SELECT_ITEM_DATA[key] = Object.assign({}, SELECT_ITEM_DATA[key], appStorage.setting[key]); } else { SELECT_ITEM_DATA[key] = Object.assign({}, SELECT_ITEM_DATA[key]); } } } } function showMainWidget(player) { App.getStorage(() => { const appStorage = JSON.parse(App.storage); if (player.tag.widget) { player.tag.widget.destroy(); player.tag.widget = null; } if (player.isMobile) { player.tag.widget = player.showWidget("SelectList.html", "sidebar", 0, 0); } else { player.tag.widget = player.showWidget("SelectList.html", "bottomleft", 0, 0); } let selectItemData = SELECT_ITEM_DATA; if (appStorage.setting) { let newList = {}; for (let key in selectItemData) { if (appStorage.setting.hasOwnProperty(key)) { newList[key] = Object.assign({}, selectItemData[key], appStorage.setting[key]); } else { newList[key] = Object.assign({}, selectItemData[key]); } } selectItemData = newList; } player.tag.widget.sendMessage({ type: "init", isMobile: player.isMobile, isAdmin: isAdmin(player), selectItemData: selectItemData, }); player.tag.widget.onMessage.Add(function (sender, msg) { switch (msg.type) { case "close": if (sender.tag.widget) { sender.tag.widget.destroy(); sender.tag.widget = null; } break; case "requestSaveSetting": const result = validateDatabase(msg.editData); if (!result) { sender.showAlert("Invalid Input"); return; } App.getStorage(() => { const appStorage = JSON.parse(App.storage); appStorage.setting = result; App.setStorage(JSON.stringify(appStorage)); if (sender.tag.widget) { sender.tag.widget.sendMessage({ type: "responseSaveSetting", }); } let selectItemData = {}; for (let key in SELECT_ITEM_DATA) { if (appStorage.setting.hasOwnProperty(key)) { selectItemData[key] = Object.assign({}, SELECT_ITEM_DATA[key], appStorage.setting[key]); SELECT_ITEM_DATA[key] = selectItemData[key]; } else { SELECT_ITEM_DATA[key] = Object.assign({}, SELECT_ITEM_DATA[key]); } } if (selectItemData == {}) { selectItemData = SELECT_ITEM_DATA; } handleUpdateSetting(selectItemData); }); break; } }); }); } function handleUpdateSetting(selectItemData) { for (const player of App.players) { if (!player) continue; if (player.tag.widget) { player.tag.widget.sendMessage({ type: "update", selectItemData: selectItemData, }); } } } function validateDatabase(database) { let newDB = {}; for (let key in database) { let item = database[key]; newDB[key] = {}; for (let field in RequiredFields) { // validateFields if (!item.hasOwnProperty(field) || typeof item[field] !== RequiredFields[field]) { return false; } if (field === "password" && (!item[field] && item["lock"])) { return false; } newDB[key][field] = item[field]; } } return newDB; } function isAdmin(player) { return player.role >= 3000; } ``` # ZEP Script FAQ #### Q. ZEP Script로 캐릭터의 외양을 변경할 수 있나요? {% hint style="success" %} Spritesheet를 로드한 후, 특정 이벤트 발생 시 Player에 적용시키면 캐릭터의 외양을 변경할 수 있습니다. 아래 예제 문서를 참고해주세요. :fairy: [**캐릭터 이미지 바꾸기**](/creator/tutor/tutorial/3) {% endhint %} #### Q. ZEP Script 사용은 유료인가요? {% hint style="success" %} ZEP Script를 사용해 앱을 개발하고 배포하는 과정은 무료입니다. {% endhint %} #### Q. ZEP Script로 유저에게 과금을 하는 것이 가능한가요? {% hint style="success" %} ZEP Script에서 제공하는 결제 함수를 사용해 과금을 하는 것이 가능합니다. 자세한 내용은 [**API 문서**](/zep-script-api/zepscriptapi/scriptplayer/methods#showbuyalert)를 참고해주세요, {% endhint %} #### Q. ZEP Script로 만든 앱을 유료로 판매할 수 있나요? {% hint style="success" %} [**ZEP 에셋스토어**](https://zep.us/store/assets?type=app)에 앱을 업로드하고 판매할 수 있습니다. {% endhint %} #### Q. ZEP Script 로 만든 앱을 배포하지 않고 보다 쉽게 디버깅 할 수 있는 방법이 있나요? {% hint style="success" %} 보다 나은 개발 환경을 현재 준비 중에 있습니다. {% endhint %} #### Q. 다른 언어로도 ZEP Script를 개발할 수 있나요? {% hint style="success" %} 현재 ZEP Script 개발 환경은 **Javascript** 와 **Typescript** 언어로 제공하고 있습니다. [**Javascript 개발 가이드**](/creator/dev-guide/javascript) | [**Typescript 개발 가이드**](/creator/dev-guide/typescript) {% endhint %} #### Q. 저희의 자체 서버 API와 연동을 하고 싶습니다. 어떻게 할 수 있나요? {% hint style="success" %} ZEP Script는 아래 방식을 통해서 Javascript 통신을 지원하고 있습니다. 자세한 내용은 아래 문서를 참고해주세요. :satellite\_orbital: [**외부 API 통신하기**](/creator/reference/api) {% endhint %} *** # 부록 {% content-ref url="/pages/SJhAcKsANUnrFn4W8mCe" %} [ZEP 스크립트 활용 사례](/creator/reference/zep) {% endcontent-ref %} {% content-ref url="/pages/6N3IG1fQABpHPpos7wc0" %} [스페이스와 맵 이해하기](/creator/reference/undefined) {% endcontent-ref %} {% content-ref url="/pages/NYBjr6SUu1kExPQAYncU" %} [자바스크립트 키코드 표](/creator/reference/keycode) {% endcontent-ref %} {% content-ref url="/pages/gjoj7GGNyQQBYIEMNuKo" %} [스프라이트시트 이해하기](/creator/reference/spritesheet) {% endcontent-ref %} {% content-ref url="/pages/PWVKbzRpvLZ3RSShT3sD" %} [TileEffectType 상세 설명](/creator/reference/tileeffecttype) {% endcontent-ref %} {% content-ref url="/pages/pNhkgoVXVtKHafnqDP82" %} [기준 좌표](/creator/reference/coordinate) {% endcontent-ref %} {% content-ref url="/pages/cPjXXbLOA0cNpfZ3gkNj" %} [외부 API 통신하기](/creator/reference/api) {% endcontent-ref %} {% content-ref url="/pages/lqgnI4JUuFkdNoja9WQi" %} [URL 쿼리스트링 활용하기](/creator/reference/url) {% endcontent-ref %} {% content-ref url="/pages/tL1zNIDDsxpITpe7WoaX" %} [위젯에서 사용가능한 문법](/creator/reference/scriptaction) {% endcontent-ref %} {% content-ref url="/pages/C4WjMYSc8U9wYodYFNgY" %} [모바일버튼 이미지 변경하기](/creator/reference/mobilebutton-image) {% endcontent-ref %} {% content-ref url="/pages/kbbYq1ORDhGncpBTbsN6" %} [ZEP 스크립트 상호작용 오브젝트 가이드](/creator/reference/script-object-interaction) {% endcontent-ref %} {% content-ref url="/pages/jE090TJPep3C8JASB2tW" %} [오브젝트 npcProperty](/creator/reference/npcproperty) {% endcontent-ref %} # ZEP 스크립트 활용 사례 ## :joystick: 게임 ZEP 스크립트를 활용해 개발한 게임 사례를 확인해 보실 수 있습니다. ### ### 🗃 ZEP 스크립트 활용 사례 **ZEP Script**를 활용해 다양하고 재미있는 게임을 만들 수 있습니다. **ZEP Script**를 활용한 게임 개발 사례들을 만나보세요. #### ### 강일병 구하기 게임 : 링티 X 바람의나라:연 바람:연 X ZEP X 링티가 콜라보하여 ‘**강일병 구하기**’ 라는 퀘스트 형태의 게임을 만들어 선보인 사례입니다.
### 팩맨 미니게임 : 링티 X 바람의나라:연 바람:연 X ZEP X 링티가 콜라보하여 \ ‘팩맨’ 게임에 다람쥐, 도토리 등 바람의나라:연 이미지를 입혀 귀엽게 표현한 미니게임 입니다
### 슈퍼캣 채용박람회에서 진행된 페인트맨 게임 슈퍼캣 채용박람회에서 진행된 페인트맨 게임입니다. ZEP Script를 활용하면 100명 이상이 참가하는 단체 게임 개발도 가능합니다!
### ZEP 유저가 개발한 오목 게임 ZEP 유저들이 ZEP Script를 활용해 개발한 게임 사례가 많아지고 있습니다. ZEP 캐릭터를 움직여 두는 오목! 재미있지 않나요?
## :tada: 행사 행사에서 ZEP 스크립트를 활용한 사례를 확인해 보실 수 있습니다. ### 🗃 ZEP Script 활용 사례 **ZEP Script**를 활용하면 좀 더 인터랙티브한 행사를 기획할 수 있습니다. **ZEP Script**를 활용한 행사 사례들을 만나보세요. ### 클레이튼 뮤지엄 ( Klaytn Museum ) 클레이튼의 기술적 강점 등을 **ZEP Script**를 활용해 효과적으로 보여준 사례입니다.

ZEP 스크립트로 구현한 컨베이어벨트

ZEP 스크립트로 구현한 보안 체험관

*** *** # 스페이스와 맵 이해하기

space와 map의 관

space는 1개 이상의 map을 포함하고 있는 그룹의 단위 입니다. space와 map은 다른 스페이스 또는 맵과 자신을 구분하기 위한 **HashID**를 가지고 있습니다. space에 포함된 1개 이상의 map들 중 하나는 **‘첫 방문 맵’** 속성을 가지고 있으며, mapID 없이 spaceHashID만 가지고 스페이스에 접근 할 경우 ‘첫 방문 맵’ 속성을 가진 맵으로 이동하게 됩니다. 젭 맵 에디터에 들어가면 다음과 같은 URL 형식을 볼 수 있는데요,
여기서 **Ak42Xz가 SpaceHashID**, **25g3RQ가 MapHashID** 입니다. # 자바스크립트 키코드 표 ### ⌨️ 자바스크립트 키코드 표
입력 키키 코드
backspace8
tab9
enter13
shift(left)16
shift(right)16
ctrl(left)17
ctrl(right)17
alt(left)18
alt(right)18
pause/break19
caps lock20
escape27
space32
page up33
page down34
end35
home36
left arrow37
up arrow38
right arrow39
down arrow40
print screen44
insert45
delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
left window key91
right window key92
select key93
numpad 096
numpad 197
numpad 298
numpad 399
numpad 4100
numpad 5101
numpad 6102
numpad 7103
numpad 8104
numpad 9105
multiply106
add107
substract109
decimal point110
divide111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f11122
f12123
num lock144
scroll lock145
audio volume mute173
audio volume down174
media player175
audio volume up181
launch application 1182
launch application 2183
semi-colon186
equal sign187
comma188
dash189
period190
forward slash191
Backquote192
open bracket219
back slash220
close bracket221
single quote222
# 스프라이트시트 이해하기 ## App.loadSpritesheet
```jsx // 이미지를 객체화 시키는 함수 App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer) ``` ### frameWidth 와 frameHeight 블루맨 스프라이트 한 칸의 이미지 크기는 48픽셀 x 64픽셀 입니다. frameWidth, frameHeight 파라미터에 48, 64를 지정하면 블루맨 스프라이트 각각의 이미지가 0번부터 41번까지 번호를 가지게 됩니다. ### anims anims는 애니메이션을 지정할 배열을 의미합니다. 캐릭터 스프라이트로 사용 할 때와 오브젝트 스프라이트로 사용 할 때 양식이 다릅니다. ### 예시1) 단일 이미지인 경우
스프라이트가 단일 이미지인 경우 파일 이름을 제외한 나머지 파라미터는 입력하지 않아도 됩니다. ```jsx let blueman = App.loadSpritesheet('blueman.png') ``` 단일 이미지도 캐릭터 이미지로 적용할 수 있습니다. 다만, 애니메이션을 지정하지 않았으니 어느 방향으로 움직여도 같은 이미지일 것 입니다. ### 예시2) 단일 애니메이션을 정의하는경우 단일 애니메이션을사용하는 경우에는 아래와 같이 하나의 배열로 애니메이션 프레임을 정의 할 수 있습니다. 춤추는 블루맨 오브젝트 애니메이션은 아래 코드와 같이 21번째 \~ 38번째 이미지에 해당하는 이미지 번호를 배열로 지정해 사용할 수 있습니다. ```jsx let blueman_dance = App.loadSpritesheet( "blueman.png", 48, 64, [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], // 21번째 ~ 38번째 이미지로 애니메이션을 구성 8 ); ``` ### 예시3) 2개 이상의 애니메이션을 정의하는 경우 여러 애니메이션을 정의하는 경우에는 아래와 같이 anims 파라미터에 { } 브라켓을 입력 한뒤 다음과 같이 애니메이션 이름에 대한 이미지 배열을 지정해주면 됩니다. 아래 예시에서는 **`Map.playObjectAnimationWithKey`** 함수를 사용해 정의한 여러 애니메이션 중 "dance"에 대한 애니메이션을 실행합니다. ``` var blueman_sprite = App.loadSpritesheet( "blueman.png", 48, 64, { left: [5, 6, 7, 8, 9], up: [15, 16, 17, 18, 19], down: [0, 1, 2, 3, 4], right: [10, 11, 12, 13, 14], dance: [20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], idle: [0], }, 8 ); // q 키를 누르면 동작하는 함수 App.addOnKeyDown(KeyCodeType.Q, function (player) { Map.putObjectWithKey(10, 10, blueman_sprite, { overlap: true, movespeed: 80, // default: 80 key: "blueman", }); // "dance" 애니메이션 재생 Map.playObjectAnimationWithKey("blueman", "dance", -1); }); ``` ### 예시4) 캐릭터 애니메이션 정의 캐릭터는 오브젝트와 달리 플레이어가 조작하는 키에 따라 다양한 애니메이션 실행 할 수 있습니다. 캐릭터에 지정 가능한 애니메이션의 종류는 다음과 같이 총 9가지 이며, 특정 애니메이션에 대한 이미지가 부족한 경우 생략할 수 있습니다. ```jsx let blueman = App.loadSpritesheet('blueman.png', 48, 64, { left: [5, 6, 7, 8, 9], // 좌방향 이동 이미지 up: [15, 16, 17, 18, 19], down: [0, 1, 2, 3, 4], right: [10, 11, 12, 13, 14], dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37], down_jump: [38], left_jump: [39], right_jump: [40], up_jump: [41], }, 8); // 플레이어가 입장하면 캐릭터 이미지가 바뀜 App.onJoinPlayer.Add(function(player){ player.sprite = blueman; player.sendUpdated(); }); ``` ✅ 추가로 사용가능한 캐릭터 애니메이션 키 앉기 모션: `down_sit, left_sit, right_sit, up_sit` 서있는 모션: `down_idle, left_idle, right_idle, up_idle` 공격 모션: `down_attack, left_attack, right_attack, up_attack` *** *** # TileEffectType 상세 설명 `Map.putTileEffect` 함수에서 사용되는 **타일 효과(TileEffectType)**의 사용 방법을 안내하는 페이지입니다. 타일 효과에 대한 자세한 설명은 아래 링크를 참고해주세요. :fire: [**타일 효과**](https://docs-kr.zep.us/creator/editor/undefined-1) ## 📗 기본 타일 효과 ### TileEffectType.NONE NONE 타입의 타일 효과 입니다. **예시** ```jsx //해당 좌표에 있는 타일 효과를 지웁니다. Map.putTileEffect(x, y, TileEffectType.NONE); ``` ### ### **TileEffectType.IMPASSABLE** 이동불가(IMPASSABLE) 타일 효과 입니다 **예시** ```jsx //해당 좌표에 이동불가(IMPASSABLE) 타일 효과를 설치합니다. Map.putTileEffect(x, y, TileEffectType.IMPASSABLE); ``` ### ### **TileEffectType.SPAWN** 플레이어가 맵에 진입 할 때 진입 지점을 설정하는 타일 효과 입니다 **예시** ```jsx //해당 좌표에 스폰(SPAWN) 타일 효과를 설치합니다. Map.putTileEffect(x, y, TileEffectType.SPAWN); ``` ## 🌀 포털 관련 타일 효과 ### TileEffectType.PORTAL **스페이스 내 다른 맵으로 이동** 또는 **맵 내 지정 영역**으로 이동 하는 타일 효과 입니다. **파라미터**
이름타입설명
typeNumbertype이 0 인 경우
스페이스 내 다른맵으로 이동하는 포털 타일을 설치합니다.
type이 1 인 경우
맵 내 지정 영역으로 이동하는 포털 타일을 설치합니다.
targetMapIDString이동할 맵의 MapID 값
labelString포털 위에 표시할 텍스트 값
triggerByTouchBooleantrue인 경우: 닿았을 때 실행
false인 경우: F를 눌러 실행
invisibleBooleantrue인 경우: 기본 포털 이미지를 숨김
false인 경우: 기본 포털 이미지가 보임
locationNameString이동할 로케이션의 이름 값 ( type이 1인 경우 필수 입력 )
**예시** ```jsx // type: 0 인 경우 // 스페이스 내 다른맵으로 이동하는 포털 타일을 설치합니다. Map.putTileEffect(x, y, TileEffectType.PORTAL, { type: 0, // 필수 locationName: "TEST", // 선택 targetMapID: "gyV1N2", // 필수 label: "PORTAL-TYPE0", // 선택 triggerByTouch: true // 선택, 기본값 false }); // type: 1 인 경우 // 맵 내 지정 영역으로 이동하는 포털 타일을 설치합니다. Map.putTileEffect(x, y, TileEffectType.PORTAL, { type: 1, // 필수 label: "PORTAL-TYPE1", // 선택 locationName: "TEST", // 필수 invisible: true, // 선택, 기본 포털이미지 숨기기 triggerByTouch: true // 선택, 기본값 false }); ``` ### ### TileEffectType.SPACE\_PORTAL 외부 스페이스로 이동하는 타일 효과 입니다. **파라미터**
이름타입설명
labelString포털 위에 표시할 텍스트 값
targetMapIDString이동할 외부 스페이스 ID값
* https://zep.us/play/[스페이스 ID]
locationNameString이동할 로케이션의 이름 값
triggerByTouchBooleantrue인 경우: 닿았을 때 실행
false인 경우: F를 눌러 실행
invisibleBooleantrue인 경우: 기본 포털 이미지를 숨김
false인 경우: 기본 포털 이미지가 보임
**예시** ```jsx // 외부 스페이스로 이동하는 포털 타일을 설치합니다. Map.putTileEffect(x, y, TileEffectType.SPACE_PORTAL, { label: "SPACE_PORTAL", // 선택 targetMapID: "zydmYD", //필수 locationName: "SPACE1", // 선택 invisible: true, // 선택, 기본값 false triggerByTouch: true, // 선택, 기본값 false }); ``` ## 🌐 임베드 관련 타일 효과 ### TileEffectType.EMBED 팝업으로 웹 링크를 여는 타일 효과입니다. **파라미터**
이름타입설명
linkString웹 URL 값
align2String팝업을 표시할 위치
’popup’, ‘sidebar’, ‘top’, ‘topleft’, ‘topright’, ‘middle’, ‘middleleft’, ‘middleright’, ‘bottom’, ‘bottomleft’, ‘bottomright’
labelString포털 위에 표시할 텍스트 값
triggerByTouchBooleantrue인 경우: 닿았을 때 실행
false인 경우: F를 눌러 실행
invisibleBooleantrue인 경우: 기본 포털 이미지를 숨김
false인 경우: 기본 포털 이미지가 보임
**예시** ```jsx // 팝업으로 웹 링크를 여는 타일 효과를 설치합니다. Map.putTileEffect(x, y, TileEffectType.EMBED, { link: "https://zep.us/", // 필수 align2: "top", // 필수 label: "ZEP-SCRIPT-EMBED", // 선택 }); ``` ### ### TileEffectType.WEB\_PORTAL 새 탭으로 웹 링크를 여는 타일 효과입니다. **파라미터**
이름타입설명
linkString웹 URL 값
labelString포털 위에 표시할 텍스트 값
invisibleBooleantrue인 경우: 기본 포털 이미지를 숨김
false인 경우: 기본 포털 이미지가 보임
**예시** ```jsx // 새탭으로 웹 링크를 여는 타일 효과를 설치합니다. Map.putTileEffect(x, y, TileEffectType.WEB_PORTAL, { link: "https://zep.us/", // 필수 label: "ZEP-SCRIPT-WEB-PORTAL", // 선택 invisible: true, // 선택, 기본값 false }); ``` ### ### TileEffectType.TILE\_EMBED 웹 화면을 고정 영역에 표시하는 타일 효과입니다. **파라미터**
이름타입설명
linkString웹 URL 값
widthnumber고정 영역의 너비 ( 타일 수 )
heightnumber고정 영역의 높이 ( 타일 수 )
**예시** ```jsx // 웹 화면을 고정 영역에 설치합니다. Map.putTileEffect(x, y, TileEffectType.TILE_EMBED, { link: "https://zep.us/", // 필수 width: 5, // 필수 height: 5, // 필수 }); ``` ## 💠 유틸 타일 효과 ### TileEffectType.PRIVATE\_AREA 프라이빗 영역 타일 효과 입니다. **파라미터**
이름타입설명
idNumber프라이빗 영역의 ID 값
impassableBooleantrue일 경우 프라이빗 영역을 impassable(통과 불과)로 만듭니다
param1Stringparam1 이 “true” 일 경우 인원제한 프라이빗 영역이 설정됩니다.
**예시** ```jsx // 해당 좌표에 프라이빗 영역을 설치합니다. Map.putTileEffect(18, 15, TileEffectType.PRIVATE_AREA, { id: 3, // 필수 impassable: false, // 선택, 기본 값 false param1: "true", // 선택, 기본 값 "false" }); ``` ### ### TileEffectType.LOCATION 지정영역 타일 효과 입니다. **파라미터**
이름타입설명
labelString타일 위에 표시할 텍스트 값
nameString지정 영역의 이름
widthnumber고정 영역의 너비 ( 타일 수 )
heightnumber고정 영역의 높이 ( 타일 수 )
**예시** ```jsx // 해당 좌표에 지정 영역을 설치합니다. Map.putTileEffect(x, y, TileEffectType.LOCATION, { label: "LOCATION", // 선택 name: "zep-script-location", // 필수 width: 3, // 필수 height: 2, // 필수 }); ``` ### ### TileEffectType.AMBIENT\_SOUND 배경 음악 타일 효과 입니다. **파라미터**
이름타입설명
linkString재생할 음악 파일의 이름 ( 압축 파일에 포함 )
activeDistanceNumber음악의 재생 범위 ( 타일 )
triggerByTouchBooleantrue인 경우: 닿았을 때 실행
false인 경우: F를 눌러 실행
**예시** ```jsx Map.putTileEffect(x, y, TileEffectType.AMBIENT_SOUND, { link: "ring.mp3", // 필수 activeDistance: 1, // 필수 triggerByTouch: false, // 선택 }); ``` # 기준 좌표 기준 좌표란 오브젝트 배치 시 이미지가 그려지는 기준을 의미합니다. 다음과 같은 맵에 **Left-Top** 기준으로 오른쪽의 오브젝트 이미지를 3, 3에 삽입하면 어떻게 될까요?
기준 좌표가 **Left-Top**일 경우 다음 그림과 같이 3, 3 박스의 왼쪽 위 지점부터 이미지가 그려집니다.
*** *** # 외부 API 통신하기 외부 API에 GET, POST 등의 요청을 인자와 함께 보낼 수 있습니다. ### httpGet [한국어 별명 생성기](https://nickname.hwanmoo.kr/) API를 이용해 입장하는 플레이어의 닉네임을 바꿔보기 ![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2F4NxVaReOQTRYUh5Hba16%2FUntitled.png?alt=media\&token=7e3f7d3e-8df9-4d2b-b184-6443f4c9ba27) ```jsx // 플레이어가 입장할 때 동작하는 함수 App.onJoinPlayer.Add(function (player) { App.httpGet( "https://nickname.hwanmoo.kr/?format=json&count=1&max_length=6&whitespace=_", null, function (res) { // 응답 결과를 JSON 오브젝트로 변경 let response = JSON.parse(res); player.name = response.words[0]; player.sendUpdated(); } ); }); ``` ### httpPost 앱에서 보낸 헤더와 데이터를 응답으로 받아 채팅창에 출력해보기. ```jsx // q를 눌렀을 때 실행되는 함수 App.addOnKeyDown(81, function (player) { App.httpPost( "https://postman-echo.com/post", { "test-header": "zep", }, { name: "zepscript", }, (res) => { let response = JSON.parse(res); App.sayToAll(`보낸 헤더: ${response.headers["test-header"]}`, 0xffffff); App.sayToAll(`보낸 데이터: ${response.form.name}`, 0xffffff); } ); }); ``` {% hint style="warning" %} 참고 \- 튜토리얼의 App type은 미니게임(Mini game)을 권장합니다. \- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다. \- 배포 방법을 아직 모르신다면, [ZEP Script 배포 가이드](/creator/dev-guide/zep-script)를 참고해주세요. {% endhint %} # URL 쿼리스트링 활용하기 URL 쿼리스트링이란 URL의 뒤에 입력 데이터를 함께 제공하는 데이터 전달 방법 입니다. \ **예시)** `https://zep.us/play/{mapHashId}?{파라미터}={값}` URL 쿼리스트링을 이용해 ZEP 스페이스 또는 ZEP Script로 데이터를 전달 할 수 있습니다. ## ZEP에서 사용 가능한 URL 쿼리스트링 파라미터 ### 1. name 비로그인 유저 입장 시 닉네임을 name 파라미터로 전달한 값으로 설정할 수 있습니다. * 예시: `https://zep.us/play/{mapHashId}?name=학생A`
:warning: 게스트 유저 닉네임 설정 팝업 비활성화 설정을 해주세요!
### 2. customData ZEP Script player 객체에 데이터를 전달할 수 있습니다. \ SSO 토큰 정보 등의 유저 식별 정보를 ZEP Script로 전달하여 유저를 식별하는 등 화이트리스트 기능을 만드는 데 활용할 수 있습니다. **예제 1** \ customData로 플레이어 정보를 받아 적용해보기 (노멀앱, 사이드바앱 권장) ⚡예제에서 사용한 URL `https://zep.us/play/{mapHashId}?customData={"name":"커스텀유저", "moveSpeed":150, "title":"커스텀타이틀"}` ```jsx App.onJoinPlayer.Add(function (player) { // 전달받은 customData가 있는지 체크 if (player.customData) { // customData를 오브젝트로 변환하여 사용 let playerCustomData = JSON.parse(player.customData); if (playerCustomData.hasOwnProperty("name")) { player.name = playerCustomData["name"]; } if (playerCustomData.hasOwnProperty("moveSpeed")) { player.moveSpeed = playerCustomData["moveSpeed"]; } if (playerCustomData.hasOwnProperty("title")) { player.title = playerCustomData["title"]; } App.sayToAll("커스텀 데이터를 적용했습니다"); player.sendUpdated(); } // 전달받은 customData가 없다면 메시지 출력 else { App.sayToAll("커스텀 데이터를 전달받지 못했습니다."); } }); ```

customData를 전달받지 못한 경우

customData를 전달받아 적용한 경우

**예제 2** 간단한 토큰기반 화이트리스트 기능 만들어보기 (노멀앱, 사이드바앱 권장) {% file src="/files/fgE7LgU5HV5dQtW2hCcG" %} ✅ 브라우저 개발자 도구(F12)에서 다음과 같이 base64 암호화를 하여 토큰을 만들었습니다.
⚡ 예제에서 사용한 URL `https://zep.us/play/{mapHashId}?customData=JTdCJTIydG9rZW4lMjIlM0ElMjIlRUMlOUMlQTAlRUMlQTAlODAxJTJGd2hpdGVMaXN0JTIyJTdE` ```jsx App.onJoinPlayer.Add(function (player) { player.tag = {}; if (player.customData) { let token = player.customData; // 위젯으로 토큰을 보내 복호화하기 player.tag.widget = player.showWidget("main.html", "topleft", 1, 1); player.tag.widget.sendMessage({ type: "decode", token: token, }); player.tag.widget.onMessage.Add(function (player, data) { if (data.type == "decode") { let decodedToken = data.decodedToken; App.sayToAll(decodedToken); // 복호화 된 코드를 받은 후 오브젝트로 변환 let playerData = JSON.parse(decodedToken); let playerName = playerData["token"].split("/")[0]; let isTrusted = playerData["token"].split("/")[1]; if (isTrusted == "whiteList") { player.name = playerName; player.title = "인증된유저"; player.sendUpdated(); } player.tag.widget.destroy(); player.tag.widget = null; } }); } else { App.sayToAll("커스텀 데이터를 전달받지 못했습니다."); } }); ``` ```powershell // 위젯에서 사용한 스크립트 window.addEventListener("message", function (e) { if (e.data.type == "decode") { // base64 토큰 복호화 decodedToken = decodeURIComponent(atob(e.data.token)); window.parent.postMessage({ type: "decode", decodedToken: decodedToken }, "*") } }) ```

토큰으로 인증에 성공한 경우

# 위젯에서 사용가능한 문법 ## 새 창에서 웹페이지 열기 위젯의 ` ``` ### 부록 [위젯에서 사용가능한 문법](/creator/reference/scriptaction) # Methods ### 소개 App에서 위젯으로 데이터를 보내거나, 위젯을 파괴하는 함수입니다. | 이름 | 설명 | | ----------- | -------------------------- | | sendMessage | App에서 위젯으로 데이터를 보내는 함수입니다. | | destroy | 위젯을 삭제하는 함수입니다. | ## 📚 API 설명 및 예제 #### **Methods 함수 한 눈에 보기** ```jsx // 생성한 위젯에 메세지를 보냄 widget.sendMessage(object: any) // 위젯을 제거 widget.destroy() ``` ### sendMessage {% hint style="info" %} widget.sendMessage(object: any) {% endhint %} App에서 위젯으로 데이터를 보냅니다. **파라미터**
이름타입설명
objectany앱에서 위젯으로 보내는 데이터
Ex) { name : “test”, message : “message” }
**예제** 위젯에 텍스트와 이미지 데이터 보내기 {% file src="/files/PX572edWfqeWmPLWlIkB" %}
```jsx // 플레이어가 입장할 때 동작하는 함수 App.onJoinPlayer.Add(function (player) { player.tag = { widget: null, }; player.tag.widget = player.showWidget("sample.html", "top", 300, 300); //위젯에서 앱으로 메시지를 보내면 동작하는 함수 player.tag.widget.onMessage.Add(function (player, data) { if (data.type == "close") { player.showCenterLabel("위젯이 닫혔습니다."); player.tag.widget.destroy(); player.tag.widget = null; } }); player.sendUpdated(); }); // q를 누르면 동작하는 함수 // 위젯에 텍스트와 blueman 이미지를 보냄 // App.addOnKeyDown 설명(링크) App.addOnKeyDown(81, function (player) { if (player.tag.widget) { player.tag.widget.sendMessage({ text: "블루맨", }); } }); ``` **sample.html**: 텍스트, 이미지 데이터를 받아 표시하는 부분 ```jsx //앱에서 위젯으로 메시지를 보내면 동작하는 함수 window.addEventListener("message", function (e) { let text = e.data.text; let content = document.getElementById("content"); if (content) { while (content.hasChildNodes()) { content.removeChild(content.firstChild); } let content_image = document.createElement("img"); content_image.setAttribute("src", BLUEMAN); content_image.setAttribute("class", "cover"); content.append(content_image); } if (text) { document.getElementById("text").innerText = text; } }); // 이미지로 사용할 블루맨 이미지 (base64 인코딩) const BLUEMAN = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABACAYAAABcIPRGAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAF+UlEQVRoge2ZX2hTVxzHPxk+lOFDbJCtHYVYmpCO7qHEsDWtyFrppkLtxDD3v8hgm7TLgw42Xeek6wSnD7XgJhvi0G1CpDphlHWdIiN3jrb40CDlRmyhKA7XGvaw9WFw9nBzbm9u7k1zb9L5sHzhkntPfuec7/fc3/md8zsXKqigggoqqKCCCiqooIL/Kzyr3L5Y7b5Wo1GddF1wUC+cVw+udr+uIYxXXXBQv4/0Tgvz/zbXQ4VoVoRoVoSo2fORkM8YCMpn46+8KFHAIyXTz+JG1MPjbx7OKYv0The0vxEt3ZNKFaCPXrMiuPfVoaIrNiuCZkWv/lDcSPh83bYuwgouhGHOyHbckCjpDTzqi+j3htHUn41ldv/Pqwdz2vmvIHy+7pyIY3cVa+P2LbidRULG+Cp/EID0WAzQYr8ss8LSnKqvCYHOhF4G+lrhiNMaR7RtkB6LrUhcosofJOBPsDSnkh6L6SLcomQBVuS9wZCtfUadATQhdQzq9d2iJAHSFSR5SVyStILRpsofBFVrpxQRbiAA0REKC0AEOhMi0jtd1IQlO2kjvdMi0JnIaQcXk9j1G+gIhfX7pTmVibEYi+p1oKOo+tXBp3JGvSMU5ueZKcc8XAuo9Xq4mxFc7uujKbwWb2AU7j/Q/ly/zr5i1mYxOUomrZKa6mPoJ4Var7uAWNJCVuv10BRuwBswRR8pxAxTuTcQpCnc4Jo8lCmMAkRfeifnWfnuc1c2TuFGurjc10di4lcAho4PlEwivq8fgFikha7hYUe8Cr0Bc0TQG20KN9AUbuDQF2dzDIwjbDe6djaH336tCLr5sBMgIr3TejxfnPqGhYVLAtPIxCItlpWLcQ2jjV07xcBqEotAZ4J/Xm4CtJW2OvwKPl83aG/FU98TJzV1a7nG+nW5kUc+W102dVJTt6jviYNDtzYLEIHORN5WQIowwJP11Rwo4+dRxs8X7NDOxqnvSxgFCJ+vWye/5tsUaz/eVWiz5ekaHiaTVu3D5kq4/4BMWnVNHpYFCJ+vO2eUM+oMf/R8Cmjb3ux22dyJp74nbikiumV3wWdJ3o3b5BAwk/cGQ2TUGX2PDkXt08XtM0PagmbwayPpHLcpE3lLAbCcYPy1MMHCwqViOxEAuhAbGIgX225B5IVRt+TlXKnv0TIzbY/UoBucnIdj/RpxaZsei+WFZqfwACLyzCbuLT5vJu6IvJz8H+xcQkkq7K3LNzw5D9HWKEdGqgBtntnMLUcCkCImrv/ipA6AGLkyAaCT+nqfD4DT5xJEW6O6oZJU2POq9nbeOL4AaGIBdrZHzO06FgBZEQCbt+/KM7z2wwVC/M3Z65Oynhi5MkFowxMA7HgriTcYYvNjV/jsw3dtO3zvkxNc+72djDrD96daAZiZveNahLlCwYxIJjHGxOPm7F1dgIT6Y/4ASASfu6DfSwHgXoR5JfYUuiTxjlCY22eGWEyO8uSGWk6fS7BjkyZkaU7l4tVJy84uXp3Ug4S0b/TX0Oiv4YVnN5J1R0dppZN8QFzu66NreJiOUBhv9GlAizZd/XH2Dwzp5I6MVHFkJGXRhDZPluZU2LSWmdk7NPpr9H+liJ3tkaKjk6OMrG33NhaTo3z5/utawf0HtO3elmOTOnqK8S3byagzedf4lu2kjp7SbZWkkteHVVkhOPE3YVykMmlVv69u3cr+gSF9cq50LiQn+7H+ODdn79Lor+Hi1UmUpMKB9qCjVdrprBdygUpN3cK4IzWuBTKPMAoxl8k1YP/AEAAHXtRcUu6pqlu3FsXPcVIvk3iz65hHvZjnQGeCvXUG8i7gNKn31PfE86JEXXDQctTtYDy5q++JZ8+TllHs6IO7U4m8tcN4Lip3svfm1JzzUhmhMhYNZpTf9HunO9RyfO4UVkmP8cjcfBRvhDyWd8upbB/5rCDzCNM3YisYF0xHKIsAY/IjYUqCLEVY1XOKcggoZoQt4eaLjBllO1r0/nlCv89uy/Py5/RYTN/xlgvleAOuSWXrPfwv9W0tG2lr2QjYjr6ERyZNxjr/a/wLheTsVoCMSQ0AAAAASUVORK5CYII=" ``` #### ### destroy {% hint style="info" %} widget.destroy() {% endhint %} 위젯을 삭제하는 함수입니다. **파라미터** * 없음 **예제** :fire: [Event Listeners](/zep-script-api/zepscriptapi/scriptwidget/event-listeners) ### 부록 [위젯에서 사용가능한 문법](/creator/reference/scriptaction) # UtilityClass 유용하게 사용할 수 있는 작은 단위의 클래스들을 소개합니다. ### [Time](/zep-script-api/zepscriptapi/utilityclass#time) > **ZEP** 서버의 시간을 조회하는 등 시간 데이터를 가져오는 함수를 모아 놓은 클래스입니다. # Time ### **소개** ZEP 서버의 시간을 조회하는 등 시간 데이터를 가져오는 함수를 모아놓은 클래스입니다. ### Methods
이름설명
getTimeZEP 서버의 현재 시간을 milliseconds 단위의 값으로 리턴합니다.
getUtcTime현재 UTC 시간을 milliseconds 단위의 값으로 리턴합니다.
getTimeInterval파라미터로 입력한 두 시간의 차이를 계산해 값을 리턴합니다.
### getTime {% hint style="info" %} Time.getTime() {% endhint %} ZEP 서버의 현재 시간을 milliseconds 단위의 값으로 리턴합니다. #### 예제 ``` // Q를 누르면 동작하는 함수 App.addOnKeyDown(KeyCodeType.q, (player)=>{ player.sendMessage(`Server Time: ${Time.getTime()}`); }); ``` ### ### getUtcTime {% hint style="info" %} Time.getUtcTime() {% endhint %} 현재 UTC 시간을 milliseconds 단위의 값으로 리턴합니다. #### 예제 ``` // Q를 누르면 동작하는 함수 App.addOnKeyDown(KeyCodeType.q, (player)=>{ player.sendMessage(`UTC Time: ${Time.getUtcTime()}`); }); ``` ### getTimeInterval {% hint style="info" %} Time.getTimeInterval(timeA: number, timeB: number, returnType: DateType) {% endhint %} `timeB - timeA`를 계산하고, 그 결과를 지정한 `returnType`으로 반환합니다. **파라미터**
이름타입설명
timeA, timeBNumber차이를 계산할 시간 (milliseconds)
returnTypeDateType

DateType.MILLISECONDS ( ms 단위 )

DateType.SECONDS (초 단위 )

DateType.MINUTES ( 분 단위 )

DateType.HOURS ( 시간 단위 )

DateType.DAYS ( 일 단위 )

#### 예제 ``` // Q를 누르면 동작하는 함수 App.addOnKeyDown(KeyCodeType.q, (player)=>{ const currentTime = Time.getTime(); const utcTime = Time.getUtcTime(); player.sendMessage(`timeInterval: ${Time.getTimeInterval(currentTime, utcTime, DateType.MILLISECONDS)}`); }) ```