올리비아 코딩스쿨

목차 1. 벚꽃 배치하기map은 listen이 없고, action만 있다. ♣결과♧코드//olivia_codingschool // 변수 설정, 파일명, 가로픽셀크기, 세로픽셀크기, 인덱스넘버, 1초에 8번 let flower = App.loadSpritesheet("flower.png", 40, 40, [0], 8); App.onJoinPlayer.Add(function(){ //이미지를 놓기(x좌표, y좌표, 파일이름) Map.putObject(5,5, flower); })- putObject 함수를 쓴다. 2. 벚꽃 움직이기♣결과 30초 동안 정해진 좌표 만큼 서서히 움직인다. ♧코드// 변수 설정, 파일명, 가로픽셀크기, 세로픽셀크기, 인덱스넘버, 1초에 8번 let flower = App.load..

목차 1. 스프라이트 시트스프라이트 개념, 스프라이트 시트 무료 이미지 사이트1) 스프라이트 sprite컴퓨터 그래픽에서 스프라이트란 2차원 비트맵이나 이미지를 합성하는 기술을 의미한다. 2) 스프라이트 시트 sprite sheet여러 개의 스프라이트들을 하나의 파일로 만드는 방법이다. 스프라이트 시트를 이용하면 사물이 움직이는 것처럼 보일 수 있다. 또한 스프라이트들이 하나의 시트에 더 효율적으로 들어가 있다면 메모리 공간을 절약할 수 있다. 그림 순서의 인덱스 넘버는 왼쪽 상단 가로 줄 부터 0으로 시작한다. 3) 스프라이트 시트 무료 이미지----->클릭 4) 스프라이트 시트 생성 사이트 ----->클릭 TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장한다고 나와있..

목차 1. 라이프 사이클 앱이 실행되어 종료될 때까지를 하나의 생애 주기(Lifecycle)라고 합니다. Lifecycle 함수는 앱의 생애 주기를 관리해주는 함수입니다. 1-1 앱이 실행될 때 : Enter 단계의 함수가 동작 // App이 최초로 시작될 때 App.onInit.Add(function(){ // 이 시점에 App에는 플레이어들이 참가하지 않은 상태 // App의 나머지 필요한 부분을 초기화시킨다. }); // 플레이어가 들어올 때 App.onJoinPlayer.Add(function(player){ // 해당하는 모든 플레이어가 이 이벤트를 통해 App에 입장 }); // 플레이어가 모두 입장한 뒤에 한번 호출 App.onStart.Add(function(){ // App에서 원하는 플..

목차 1. VS코드 설치하기VS코드/ VISUAL STUDIO 모두 가능하다. 2. 새폴더 만들기원하는 곳에 새폴더를 만들어둔다. 나 같은 경우는 zep이라는 폴더를 만들었다. 3. 폴더 열기File > Open polder>zep 4. 파일 만들기새로운 파일을 만들고, 이름은 main.js라고 적는다. 5. 코드 입력 후, 저장Ctrl +S를 눌러서 저장한다. 6. Zep.us 사이트 로그인 후, 아이디 클릭 7. 나의 앱(Beta) 클릭하기 8. 앱 업로드 버튼 클릭하기 9. 파일 zip으로 압축 후, 앱 업로드하기앱 이름, 앱 설명, 앱 타입(노말 앱)으로 선택하고 Zep 스크립트 파일을 zip으로 압축하여 업로드하기 만약 이미지 파일이 있다면 동시에 하나의 파일로 압축할 것 10. 맵에디터 접속하..

zep에서 맵에 미디어(유튜브, 웹, 이미지)를 위치를 고정하여 넣을 때 고려할 사항이다. 원하는 위치에서, 원하는 크기로 넣어야 하기에 아래의 사항을 생각하자. 1. 타일단위 1) 크기 보통 유튜브는 16*9의 크기를 취한다. 너비와 높이는 각각 가로와 세로의 길이를 뜻하며, 1은 타일1개를 뜻한다. 따라서 너비=16, 높이=9라고 적는다. 2) 위치 마우스를 놓는 위치가 왼쪽 상단 꼭지점 위치라고 생각하면 된다. 2. 픽셀단위 먼저 1타일의 크기는 32px *32px이다. 예를 들어 내가 넣고자 하는 웹, 이미지, 유튜브의 너비와 높이가 px단위로 되어있다면 미디어 너비 또는 높이 / 32 = 타일 개수 를 계산하면 된다.