Behind the my-space-in-ZEP

my-space-in-ZEP

2023.04.01

Zep으로 나만의 메타버스 공간 만들기 (VS코드, zep.us사이트)

• 기초적인 js 문법을 익히고, console 창에 연습해보고, zep script를 이용하여 zep 메타버스 만들기
• < 뼈대잡기 - 플레이어 조작하기 (스피드 조작, 캐릭터 타이틀 변경하기, 스프라이트 시트) - 채팅 인터랙션 만들기 - 맵 조작하기 - 배포하기 & 기록하기 - 소감 >

	- js 문법 기초를 배운다. (변수, 함수, 자료형, zep js)
    - vs코드에 문서에 폴더를 생성하여 'main.js' 파일을 생성한다.
      넣을 이미지를 준비하여 폴더 안에 넣어둔다.
    - zep.us 사이트에 가입한다.
    * NAVER Z에서 만든 zep script 문법을 사용하였다.

① 뼈대 잡기

• APP이 시작될 때, 진행중일 때, 종료될 때를 구분해야 하므로
  'App.ㅡㅡㅡㅡㅡ.Add(function(player){})' 틀을 사용하여 코드를 짠다.
  플레이어가 들어올 때, 상단에 "Hello, Buddy" 창을 띄어주도록 한다.

App.onJoinPlayer.Add(function(player){
    App.showCenterLabel("Hello, Buddy")
})

• 저장한 후, 파일을 압축한다.
• zep.us 사이트에서 < '계정' 선택 - '나의 앱' 선택 - '앱 업로드' 선택- '이름' 설정 후 파일에 압축한 파일을 업로드 > 하고, '스페이스 만들기' 선택하여 나만의 공간을 만든다. 입력한 코드대로 실행되는지 확인한다.
  

② 플레이어 조작하기 (+스피드 조작, 캐릭터 타이틀 변경하기, 스프라이트 시트)

• 스피드 조작하기
  플레이어가 진입할 때 (listen), 그 플레이어의 스피드를 200으로 바꿔준다 (action).

App.onJoinPlayer.Add(function(player){
    player.moveSpeed = 200;
    player.sendUpdated();
})

• 캐릭터 타이틀 변경하기
  플레이어가 진입할 때 (listen), 그 플레이어의 타이틀을 바꿔준다 (action).
  랜덤으로 플레이어 머리 위에 16가지 mbti를 띄어준다.

App.onJoinPlayer.Add(function(player){
    App.showCenterLabel("Hello, Buddy")
    let mbtis = ["INTJ","INTP","ENTJ","ENTP","INFJ","INFP","ENFJ","ENFP","ISTJ","ISFJ","ESTJ","ESFJ","ISTP","ISFP","ESTP","ESFP"];
    let nth = Math.floor(Math.random() * mbtis.length);
    player.moveSpeed = 200;
    player.title = mbtis[nth];
    player.sendUpdated();
})

• 스프라이트 시트
  준비해둔 이미지에 spritesheet를 읽어 캐릭터를 변경한다.
  왼쪽과 오른쪽으로 걸을 때의 4가지 이미지대로 움직이게 한다. 위와 아래로 걸을 때는 변화가 없도록 한다.
  플레이어가 입장할 때 (listen), 바로 준비해둔 이미지로로 교체되도록 한다.

let 준비해둔 이미지명 = APP.loadSpritesheet('이미지명.png', 64, 96, {
	left: [0,1,2,3],
    up: [0]
    down: [0]
    right: [0,1,2,3],
    }, 8)
    
 App.onJoinPlayer.Add(function(player){
 	player.sprite = 이미지명;
    player.sendUpdated();
    })

➂ 채팅 인터랙션 만들기

• App에서 사용자들이 입력하는 채팅창을 받아들이고, 어떤 채팅을 입력했을 때 어떤 액션을 수행하도록 한다.

• onSay

1) 어떤 사용자인지, 그 사용자가 채팅창에 입력한 값을 받아 중앙에 띄우도록 한다.

App.onSay.Add(function(player, text){
    let message = player.name + '님이 ' + text + '(이)라고 말했습니다';
    App.showCenterLabel(message);
})

2) "speed up," "speed down" 이라고 입력했을 때, 플레이어의 속도를 변경해본다.

• 만약, 플레이어 속도를 +50씩 증가/감소시키고 싶으면, 'player.moveSpeed =player.moveSpeed +/-50'라고 입력한다.

App.onSay.Add(function(player, text){
    if(text == 'speed up'){
        player.moveSpeed = 300; (*'player.moveSpeed =player.moveSpeed +50')
    }
    if(text == 'speed down'){
        player.moveSpeed = 100; (*'player.moveSpeed =player.moveSpeed -50')
    }
    player.sendUpdated();
    let message = player.name + '님이 ' + text + '(이)라고 말했습니다';
    App.showCenterLabel(message);
})

④ 맵 조작하기

• object put을 사용하여 미리 준비한 구름 이미지를 불러와 배치하고 움직여본다.
  가로 픽셀은 659, 세로 픽셀은 400, 애니메이션은 없고, 구름 이미지를 x좌표 5, y좌표 5 영역에 배치하고, 구름 이미지를 x좌표 100, y좌표 5로 34초동안 움직이게 한다.

let cloud = App.loadSpritesheet("cloud.png", 659, 400, [0], 6);

App.onJoinPlayer.Add(function(player){

    Map.putObject(5, 5, cloud);
    Map.moveObject(5, 5, 100, 5, 34);

⑤ 배포하기 & 기록하기

깃허브에 코드 배포하기
https://github.com/developerpyk/my-space-in-ZEP

벨로그에 결과물 기록하기
https://velog.io/@developerpyk/my-space-in-ZEP
https://velog.io/@developerpyk/Behind-the-my-space-in-ZEP

➅ 소감

🔡➡️💻➡️🤓👍

공부를 시작하는 단계이기에 강의를 보고 따라한 거라 완벽하게 내가 사용한 코드들을 이해한 것은 아니다.
코드들을 작성하며 궁금한 것은 찾아보고, 이해하느라 하나의 결과물을 만드는 데에 꼬박 반나절이 걸렸다.
이번 결과물을 만들면서 나는 zep script를 이용하여 나만의 메타버스 공간을 만들었다.

나만의 결과물을 만들고 싶어 app의 이름과 아이콘을 직접 생각하였다. 아직은 부족하지만 내가 만든 공간에 친구들을 초대하여 경험하게 하는 것은 엄청난 성취감과 뿌듯함을 느끼게 했다.

내가 찍기도 하고 흔히 볼 수 있는 메타버스 공간과 게임들이 이런 식으로 만들어진다는 것을 알게 되었다.

심화 학습으로 랭킹을 저장하고, 외부 서버에 전달하며, widget 함수를 사용하여 디자인 등이 있는데
더 열심히 해서 심화 학습도 할 수 있도록 할 것이다.
벨로그와 깃허브에 나의 결과물들을 기록하며, 오늘의 나보다 성장하는 것이 올해 나의 목표이다.