ZEP Guidebook (KR)
Search…
⌃K

Methods

소개

화면에 UI를 표시, 유저 이동 또는 강퇴, 사운드 재생 등 편리한 기능을 제공하는 함수들 입니다.
Methods 함수는 용도에 따라 UI , User Control, Sound, 통신, 공통 메소드로 나눌 수 있습니다.

UI

이름
설명
loadSpritesheet
스프라이트 시트 그림 파일을 읽어 객체화하는 함수입니다.
showCenterLabel
모든 플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다.
showCustomLabel
모든 플레이어에게 지정된 위치에 text를 3초간 표시하는 함수입니다. text 부분에 span 태그를 넣어 텍스트를 꾸밀 수 있습니다.
showWidget
모든플레이어에게 지정된 align의 위치에 html파일을 위젯으로 불러오는 함수입니다.
showYoutubeWidget
링크에 해당하는 Youtube 컨텐츠를 위젯으로 불러옵니다.

Control

이름
설명
spawnPlayer
플레이어를 지정한 x, y 좌표로 이동 시키는 함수입니다.
kickPlayer
플레이어를 추방하는 함수입니다.
forceDestroy
미니게임 앱을 강제 종료하는 함수입니다.
clearChat
모든 채팅 내용을 삭제하는 함수입니다.

Sound

이름
설명
playSound
사운드 파일을 재생하는 함수입니다.
playSoundLink
사운드 URL을 재생하는 함수입니다.
stopSound
재생 중인 모든 사운드를 멈추는 함수입니다.

통신

이름
설명
httpGet
http get 요청을 보내는 함수입니다.
httpPost
Form-Data 형태의 http post 요청을 보내는 함수 입니다.
httpPostJson
JSON 형태의 http post 요청을 보내는 함수입니다.

공통

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

📚 API 설명 및 예제

🎨 UI Methods

UI 함수 한 눈에 보기
// 스프라이트 시트 그림 파일을 읽어 객체화
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource
// 모든 플레이어에게 지정된 위치에 해당 text를 1초간 표시
App.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0, time: int = 3000)
// 모든 플레이어에게 지정된 위치에 해당 text를 3초간 표시, 커스터마이징 가능
App.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6, time: int = 3000);
// 채팅창에 해당 text내용을 출력
App.sayToAll(text: string, color: uint = 0xFFFFFF)
// 모든 플레이어에게 지정된 align의 위치에 해당 html파일을 위젯으로 불러오기
App.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget
// 모든 플레이어에게 지정된 align의 위치에 해당 YouTube link의 동영상을 재생시킴
App.showYoutubeWidget(link: string, align: string, width: integer, height: integer): ScriptWidget

loadSpritesheet

App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource
스프라이트 시트 그림 파일을 읽어 객체화하는 함수입니다.
ScriptDynamicResource에 대한 이해를 돕는 스프라이트시트 이해하기 문서를 확인해보세요!
파라미터
이름
타입
설명
fileName
String
불러올 파일의 이름
frameWidth frameHeight
Integer
한 프레임의 가로, 세로 픽셀 크기
anims
Array
애니메이션으로 지정할 frame 이미지 번호 배열
frameRate
Integer
프레임 하나 당 데이터를 표시하는 속도 frameRate: 8 → 1초에 8개의 이미지를 보여줌
예제
페인트맨 - 블루맨 스프라이트 이미지 적용해보기
예제_loadSpritesheet.zip
29KB
Binary
// 한 프레임의 사이즈 48x64
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();
});

showCenterLabel

App.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
number
offset 값이 클수록 표시되는 위치가 화면 아래쪽 방향으로 가까워집니다. 값을 입력하지 않을 경우, 0으로 지정됩니다.
time
number
라벨 표시 시간 (ms), 기본 값 3000 ( 3초 )
예제
노란색 배경 입장 메시지 라벨을 2초간 출력해보기
App.onJoinPlayer.Add(function(player){
App.showCenterLabel(`${player.name}님이 입장하셨습니다.`, 0x000000, 0xFFFF00, 200, 2000); // 노란색 배경, 검정색 글씨로 표시하기
});

showCustomLabel

App.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";
App.showCustomLabel(
`<span style="${style}">X</span> 버튼을 눌러 예제를 실행할 수 있습니다`,
0xffffff, // 흰색글씨
0, // 검은색 배경
300, // 오프셋 300
20, // 너비 20%
1 // 투명도 1 -> 불투명
);
});

sayToAll

App.sayToAll(text: string, color: uint = 0xFFFFFF)
채팅창에 text 내용을 출력합니다.
파라미터
이름
타입
설명
text
String
채팅창에 출력할 텍스트
color
Unit
출력할 글씨의 색을 지정합니다. (HexCode) 값을 입력하지 않을 경우, 흰색(0xFFFFFF)으로 적용됩니다. ➡️구글 색상 선택 도구
예제
입장메시지를 하늘색으로 출력해보기
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
App.sayToAll(`${player.name}님이 입장하셨습니다.`, 0x00ffff); // 하늘색으로 표시하기
});

showWidget

App.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.zip
1KB
Binary
let _widget = null;
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
_widget = App.showWidget("widget.html", "top", 200, 300); // 화면 상단, 200x300 영역에 위젯을 보여줌
_widget.sendMessage({
timer: 15,
answer: "ㅅㅍㅋ",
});
});

showYoutubeWidget

App.showYoutubeWidget(link: string, align: string, width: integer, height: integer): ScriptWidget
링크에 해당하는 Youtube 컨텐츠를 위젯으로 불러옵니다.
파라미터
이름
타입
설명
link
String
Youtube 컨텐츠 url
align
String
위젯을 표시할 위치 ’popup’, ‘sidebar’, ‘top’, ‘topleft’, ‘topright’, ‘middle’, ‘middleleft’, ‘middleright’, ‘bottom’, ‘bottomleft’, ‘bottomright’
width height
Integer
위젯을 표시할 영역의 가로, 세로 크기(px)
예제
Youtube 위젯 표시해보기
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
App.showYoutubeWidget("https://www.youtube.com/watch?v=SXnMGIR8cjY","top",600,500);
});

🔗Control Methods

Control 함수 한 눈에 보기
// playerID 에 해당하는 플레이어를 tileX, tileY 좌표로 이동시킨다.
App.spawnPlayer(playeID: string, tileX: integer, tileY: integer)
// playerID 에 해당하는 플레이어를 추방한다.
// 추방당한 유저는 24시간 동안 해당 스페이스에 접근하지 못하게 된다.
App.kickPlayer(playeID: string)
// 미니게임 앱을 강제종료시킵니다.
App.forceDestroy();
// 모든 채팅내용을 삭제합니다.
App.clearChat();

spawnPlayer

App.spawnPlayer(playeID: string, tileX: integer, tileY: integer)
playerID 에 해당하는 플레이어를 tileX, tileY 좌표로 이동시키는 함수입니다.
파라미터
이름
타입
설명
playerID
String
플레이어의 ID 값
tileX tileY
Integer
플레이어를 이동시킬 x, y 좌표 값
예제
입장하는 플레이어를 지정 좌표로 이동시키기
// 플레이어가 입장할 때 실행
App.onJoinPlayer.Add(function (player) {
App.spawnPlayer(player.id, 5, 5); // 플레이어를 5,5 위치로 이동시키기
});

kickPlayer

App.kickPlayer(playerID: string)
playerID 에 해당하는 플레이어를 추방하는 함수입니다.
파라미터
이름
타입
설명
playerID
String
플레이어의 ID 값
예제
강퇴 명령어 만들어보기
⛔ 강퇴 당한 참가자는 24시간 동안 해당 스페이스에 접속하지 못합니다.
// 플레이어가 채팅을 입력할 때 실행
// 명령어 형식 '!강퇴 닉네임'
App.onSay.Add(function (player, text) {
let players = App.players;
if (text.indexOf("!강퇴 ") == 0) {
let nickname = text.slice(4);
for (let i in players) {
let p = players[i];
if (p.name == nickname) {
App.kickPlayer(p.id);
break;
}
}
}
});

forceDestroy

App.forceDestroy();
미니게임 앱을 강제 종료하는 함수입니다.
예제
미니게임 앱을 강제 종료시키기
// q 키를 누르면 동작하는 함수
App.addOnKeyDown(81, function (player) {
App.forceDestroy();
});

clearChat

App.clearChat();
모든 채팅 내용을 삭제하는 함수입니다.
예제
Q를 눌러 채팅 내용 지우기
// q 키를 누르면 동작하는 함수
App.addOnKeyDown(81, function (player) {
App.clearChat();
});
채팅이 삭제되는 모습

🔉 Sound Methods

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

playSound

App.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) {
App.playSound("join.mp3", false, true);
});

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

stopSound

App.stopSound();
재생되고 있는 사운드를 멈추는 함수입니다.
파라미터
  • 없음
예제
q를 누르면 사운드가 멈추는 기능 만들어보기
// q 키를 누르면 동작하는 함수
App.addOnKeyDown(81,function(p){
App.stopSound();
})

📡 통신 Methods

통신 함수 한 눈에 보기
// 해당 URL에 HTTP Get 요청을 실행
App.httpGet(url: string, headers: object, callback: ((string) => void))
// 해당 URL에 HTTP Post 포스팅을 실행
App.httpPost(url: string, headers: object, body: object, callback: ((string) => void))
// 해당 URL에 HTTP Post 포스팅을 실행
App.httpPostJson(url: string, headers: object, body: object, callback: ((string) => void))

httpGet

App.httpGet(url: string, headers: object, function(res: string){})
http get 요청을 보내는 함수입니다.
파라미터
이름
타입
설명
url
String
요청을 보낼 주소
headers
Object
요청 헤더
res
String
요청에 대한 응답
예제
한국어 별명 생성기 API를 이용해 입장하는 플레이어의 닉네임을 바꿔보기
// 플레이어가 입장할 때 동작하는 함수
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

App.httpPost(url: string, headers: object, body: object, function(res: string))
Form-Data 형태의 http post 요청을 보내는 함수 입니다.
파라미터
이름
타입
설명
url
String
요청을 보낼 주소
headers
Object
요청 헤더, 요청 헤더가 없으면 { } 를 입력.
body
Object
요청 바디 ( Form data )
res
String
요청에 대한 응답
예제
앱에서 보낸 헤더와 데이터를 응답으로 받아 채팅창에 출력해보기.
예제와 같이 key, value 값을 string 형태로 작성해야하며, 요청 서버에서 폼데이터를 받아 처리가 가능해야합니다.
// q를 눌렀을 때 실행되는 함수
App.addOnKeyDown(81, function (player) {
App.httpPost(
"https://postman-echo.com/post",
{
"test-header": "zep",
},
{
"name": "zepscript",
},
(res) => {
// 요청 결과를 JSON 오브젝트로 변환
let response = JSON.parse(res);
App.sayToAll(`보낸 헤더: ${response.headers["test-header"]}`, 0xffffff);
App.sayToAll(`보낸 데이터: ${response.form.name}`, 0xffffff);
}
);
});

httpPostJson

App.httpPostJson(url: string, headers: object, body: object, function(res: string))
Json 형태의 http post 요청을 보내는 함수 입니다.
파라미터
이름
타입
설명
url
String
요청을 보낼 주소
headers
Object
요청 헤더, 요청 헤더가 없으면 { } 를 입력.
body
Object
요청 바디 ( JSON data )
res
String
요청에 대한 응답
예제
앱에서 보낸 데이터를 응답으로 받아 채팅창에 출력해보기.
// q를 눌렀을 때 실행되는 함수
App.addOnKeyDown(81, function (player) {
App.httpPostJson(
"https://postman-echo.com/post",
{},
{
name: "zepscript",
},
(res) => {
App.sayToAll(`${res}`, 0xffffff);
// 요청 결과를 JSON 오브젝트로 변환
let response = JSON.parse(res);
App.sayToAll(`보낸 데이터: ${response.data.name}`, 0xffffff);
}
);
});

💠 공통 Methods

공통 함수 한 눈에 보기
// App 관련 필드값이 변경되면 변경값을 적용함
App.sendUpdated()
// App 스토리지 값을 저장
App.save()

sendUpdated

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

save

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