ZEP Guidebook (KR)
Search…
⌃K

Methods

소개

UI, 유저 컨트롤, 사운드 등 ZEP에서 일어날 수 있는 전반적인 기능을 제공하는 함수입니다.
플레이어 개인 화면에 UI를 표시, 플레이어를 이동, 플레이어 개인에게 사운드 재생 등 편리한 기능을 제공합니다.

UI

이름
설명
showCenterLabel
플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다.
showCustomLabel
플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다. text 부분에 span 태그를 넣어 텍스트를 꾸밀 수 있습니다.
showWidget
플레이어에게 지정된 위치에 위젯을 불러오는 함수입니다.
showBuyAlert
플레이어에게 구매 위젯을 표시하고, 구매 후 동작하는 콜백함수를 작성할 수 있습니다.

Data Load

이름
설명
isEmail
플레이어의 이메일을 비교하는 함수입니다.
getLocationName
플레이어가 서있는 지정 영역의 이름을 출력합니다.

User Control

이름
설명
spawnAt
플레이어의 캐릭터를 지정한 좌표로 이동시키는 함수입니다.
spawnAtLocation
플레이어의 캐릭터를 지정 영역으로 이동시키는 함수입니다.
spawnAtMap
플레이어를 다른 스페이스 또는 맵으로 이동시키는 함수입니다.

Sound

이름
설명
playSound
플레이어에게 사운드 파일을 재생하는 함수입니다.
playSoundLink
플레이어에게 사운드 URL을 재생하는 함수입니다.

공통

이름
설명
sendUpdated
Player 관련 필드 값이 변경되면 변경 값을 적용하는 함수입니다.
save
Player storage 값이 변경되면 변경 값을 적용하는 함수입니다.

📚 API 설명 및 예제

🎨 UI Methods

UI 함수 한 눈에 보기
// 플레이어에게 지정된 위치에 해당 text를 3초간 표시
player.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0, time: int = 3000)
// 모든 플레이어에게 지정된 위치에 해당 text를 3초간 표시, 커스터마이징 가능
player.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6, time: int = 3000);
// 플레이어에게 지정된 align의 위치에 해당 html파일을 위젯으로 불러옴
player.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget
// 플레이어에게 구매 위젯을 표시하고, 구매 후 동작하는 콜백함수를 작성할 수 있습니다.
player.showBuyAlert(itemName: string, price: number, callback: function);

showCenterLabel

player.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: number = 0, time: number = 3000)
해당 플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다.
파라미터
이름
타입
설명
text
String
라벨에 출력할 텍스트
color
Unit
출력할 글씨의 색을 지정합니다. (HexCode) 값을 입력하지 않을 경우, 흰색(0xFFFFFF)으로 적용됩니다. ➡️구글 색상 선택 도구
bgColor
Unit
메시지가 출력되는 라벨의 배경색을 지정합니다. 값을 입력하지 않을 경우, 검은색(0x000000)으로 적용됩니다.
offset
Integer
offset 값이 클수록 표시되는 위치가 화면 아래쪽 방향으로 가까워집니다. 값을 입력하지 않을 경우, 0으로 지정됩니다.
time
number
라벨 표시 시간 (ms), 기본 값 3000 ( 3초 )
예제
노란색 라벨을 2초간 출력해보기
App.onJoinPlayer.Add(function(player){
player.showCenterLabel(`${player.name}님 환영합니다.`, 0x000000, 0xFFFF00, 500, 2000); // 노란색 배경, 검정색 글씨로 표시하기
});

showCustomLabel

player.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6, time: number = 3000);
모든 플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다.
text 부분에 span 태그를 넣어 텍스트를 꾸밀 수 있습니다.
파라미터
이름
타입
설명
text
String
라벨에 출력할 텍스트 ( span 태그 허용 )
color
Unit
출력할 글씨의 색 (HexCode) 값을 입력하지 않을 경우, 흰색(0xFFFFFF)으로 적용됩니다. ➡️구글 색상 선택 도구
bgColor
Unit
메시지가 출력되는 라벨의 배경색 값을 입력하지 않을 경우, 검은색(0x000000)으로 적용됩니다.
offset
number
offset 값이 클수록 표시되는 위치가 화면 아래쪽 방향으로 가까워집니다. 값을 입력하지 않을 경우, 0으로 지정됩니다.
width
number
라벨의 너비를 n%로 설정하는 값 입니다. (기본 값 100)
opacity
number
라벨의 배경 투명도를 설정하는 값 입니다. (기본 값 0.6, 범위 0 ~ 1)
time
number
라벨 표시 시간 (ms), 기본 값 3000 ( 3초 )
예제
HTML 태그를 넣어 라벨 꾸며보기
// x를 눌렀을때 동작하는 함수
App.addOnKeyDown(88, function (player) {
// x 를 넣을 흰색 박스 스타일
let style =
"display: inline-block; text-align: center; width:1.2em; height:1.2em; line-height: 1.2em; color: black; background-color: white; font-size: 1.2em; border-radius:3px";
player.showCustomLabel(
`<span style="${style}">X</span> 버튼을 눌러 예제를 실행할 수 있습니다`,
0xffffff, // 흰색글씨
0, // 검은색 배경
300, // 오프셋 300
20, // 너비 20%
1, // 투명도 1 -> 불투명
5000 // 표시 시간 5000 -> 5초간 표시
);
});

showWidget

player.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget
해당 플레이어에게 지정된 align의 위치에 해당 html파일을 위젯으로 불러오는 함수입니다.
파라미터
이름
타입
설명
fileName
String
불러올 파일의 이름
align
String
위젯을 표시할 위치 ’popup’, ‘sidebar’, ‘top’, ‘topleft’, ‘topright’, ‘middle’, ‘middleleft’, ‘middleright’, ‘bottom’, ‘bottomleft’, ‘bottomright’
width height
Integer
위젯을 표시할 영역의 가로, 세로 크기(px)
예제
초성퀴즈 위젯 따라해보기
예제_showWidget(player).zip
1KB
Binary
let _widget = null;
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
_widget = player.showWidget("widget.html", "top", 200, 300); // 화면 상단, 200x300 영역에 위젯을 보여줌
_widget.sendMessage({
timer: 15,
answer: "ㅅㅍㅋ",
});
});

showBuyAlert

player.showBuyAlert(itemName: string, price: number, callback: function)
플레이어에게 구매 위젯을 표시하고, 구매 후 동작하는 콜백함수를 작성할 수 있습니다.
소모된 ZEM은 앱 제작자에게 돌아가며, 내 후원 내역 페이지에서 내역을 확인 할 수 있습니다.
ZEM 정산 관련 내용은 정산가이드 페이지에서 확인하실 수 있습니다.
파라미터
이름
타입
설명
itemName
String
구매창에 표시할 아이템의 이름
price
number
아이템의 가격 (화폐단위: ZEM)
callback
function
구매 성공시 동작할 콜백함수
예제
아이템을 구매하고 player.storage에 구매정보 저장하기
// q를 누르면 동작하는 함수
App.addOnKeyDown(81, function (player) {
let pStorage = JSON.parse(player.storage);
let itemName = "아이템";
if (pStorage == null) {
pStorage = {};
}
//이미 아이템을 구매했다면 메시지 출력
if (pStorage[itemName]) {
player.showCenterLabel(`${itemName}을 이미 구매했습니다.`);
} else {
player.showBuyAlert(itemName, 0, function () {
App.sayToAll(`[정보] ${player.name}님이 ${itemName}을 구매했습니다!`);
pStorage[itemName] = true;
player.storage = JSON.stringify(pStorage);
player.save();
});
}
});
구매위젯 예시
구매에 성공한 경우

💻 Data Load Methods

Data Load Methods 함수 한 눈에 보기
// 지정한 이메일과 플레이어의 이메일을 비교
player.isEmail(email: string): boolean
// 플레이어가 서있는 구역이름을 호출
player.getLocationName(): string

isEmail

player.isEmail(email: string): boolean
해당 플레이어의 이메일이 파라미터 값과 같다면 true, 아니면 false를 리턴합니다.
파라미터
이름
타입
설명
email
String
비교할 이메일 텍스트
예제
플레이어의 이메일이 지정한 텍스트와 같은지 비교해보기
// q 키를 누르면 동작하는 함수
// App.addOnKeyDown
let check = player.isEmail("[email protected]");
App.sayToAll(`이메일 일치 여부: ${check}`)
})

getLocationName

player.getLocationName : string
플레이어가 서있는 지정 영역의 이름을 출력합니다.
지정 영역은 ‘맵에디터 > 타일효과’ 에서 설정 할 수 있습니다.
파라미터
  • 없음
예제
캐릭터가 서있는 타일의 영역이름 출력해보기
→ 지정 영역 설정이 안되있다면 공백으로 출력됩니다
// q 키를 누르면 동작하는 함수
// App.addOnKeyDown
App.addOnKeyDown(81,function(player){
App.sayToAll(`현재 서있는 구역: ${player.getLocationName()}`)
})

🙍‍♂️ User Control

User Control 함수 한 눈에 보기
// 플레이어를 해당 좌표로 소환
player.spawnAt(tileX: int ,tileY: int, dir: int = 0)
// 플레이어를 해당 구역으로 소환
player.spawnAtLocation(name: string ,dir:int = 0)
// 플레이어를 해당 스페이스 해당 맵으로 이동시키기
player.spawnAtMap(spaceHashID string, mapHashID:string = null)

spawnAt

player.spawnAt(tileX: int ,tileY: int, dir: int = 0)
플레이어의 캐릭터를 tileX, tileY 좌표로 지정한 방향을 바라보게 이동시킵니다.
파라미터
이름
타입
설명
tileX tileY
Integer
플레이어를 이동시킬 x, y 좌표 값
dir
Integer
- 캐릭터가 바라볼 방향 • 왼쪽 : 1 • 위쪽 : 2 • 오른쪽 : 3 • 아래쪽 : 4 • 왼쪽위 : 5 • 왼쪽아래 : 6 • 오른쪽위: 7 • 오른쪽아래: 8
예제
입장하는 플레이어를 지정한 좌표로 이동시키기
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
player.spawnAt(5, 5, 1); // 플레이어를 5,5 위치로 왼쪽 방향을 바라보게 이동시키기
});

spawnAtLocation

player.spawnAtLocation(name: string, dir:int = 0)
플레이어의 캐릭터를 name에 해당하는 지정 영역으로 지정한 방향을 바라보게 이동시킵니다.
파라미터
이름
타입
설명
name
String
플레이어를 이동시킬 지정 영역의 이름
dir
Integer
- 캐릭터가 바라볼 방향 • 왼쪽 : 1 • 위쪽 : 2 • 오른쪽 : 3 • 아래쪽 : 4 • 왼쪽위 : 5 • 왼쪽아래 : 6 • 오른쪽위: 7 • 오른쪽아래: 8
예제
입장하는 플레이어를 지정 영역으로 이동시키기
같은 이름의 지정 영역이 여러 곳 있다면 해당 영역들 중 한 곳으로 랜덤 이동합니다.
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
// 플레이어를 "test"라는 이름의 지정영역으로 왼쪽 방향을 바라보게 소환하기
player.spawnAtLocation("test", 1);
});

spawnAtMap

player.spawnAtMap(spaceHashID string, mapHashID:string = null)
플레이어를 해당 스페이스 해당 맵으로 이동시킵니다.
파라미터
이름
타입
설명
spaceHashID
String
이동할 스페이스의 spaceHashID
mapHashID
String
mapHashID를 적지 않을 경우 해당 스페이스의 ‘첫 방문맵’ 으로 이동합니다.
예제
입장하는 플레이어를 ZEP 튜토리얼 맵으로 이동시키기 ( 스페이스와 맵 이해하기 )
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
// 플레이어를 ZEP 튜토리얼 맵으로 이동시키기
player.spawnAtMap("65jeBA", "2YvXMJ");
});

🔉 Sound Methods

Sound Methods 함수 한 눈에 보기
// 플레이어에게 사운드를 재생
player.playSound(fileName: string, loop: boolean = false)
// 플레이어에게 링크에 해당하는 사운드를 재생
player.playSoundLink(link: string, loop: boolean = false)

playSound

Player.playSound(fileName: string, loop: boolean = false, overlap: boolean = false)
해당 플레이어에게 사운드를 재생하는 함수입니다.
파라미터
이름
타입
설명
fileName
String
불러올 파일의 이름
loop
boolean
true: 반복 재생 false: 1회 재생
overlap
boolean
사운드 오버랩(겹침) 재생 가능 여부
예제
입장음 설정해보기(파일)
join.mp3
20KB
Binary
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
player.playSound("join.mp3",false, true);
});
player.playSoundLink(link: string, loop: boolean = false)
모든 플레이어에게 사운드를 재생하는 함수입니다.
💡 올바른 링크를 입력했는데 재생이 되지 않는 경우
CORS 정책을 위반한 경우일 가능성이 높습니다. CORS 정책을 맞출 수 없는 경우에는 playSoundLink 대신 음악 파일을 업로드 하여 playSound 함수를 사용하는 것을 권장 드립니다.
파라미터
이름
타입
설명
link
String
사운드 url
loop
boolean
true: 반복 재생 false: 1회 재생
예제
입장음 설정해보기(사운드 url)
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
player.playSoundLink("https://zep.us/assets/sounds/ring.mp3",false);
});

💠 공통 Methods

공통 Methods 함수 한 눈에 보기
// 플레이어 필드값을 수정한 후 업데이트
player.sendUpdated()
// 플레이어 스토리지값을 저장
player.save()

sendUpdated

player.sendUpdated()
App, Player 관련 필드 값이 변경되면 변경 값을 적용하는 함수입니다.
파라미터
  • 없음

save

player.save()
App, Player storage 값이 변경되면 변경 값을 적용하는 함수입니다.
파라미터
  • 없음
Last modified 18h ago