[zep] zepscript 3차시 스프라이트 시트, 플레이어 이미지 변경, 채팅 메시지

목차

1. 스프라이트 시트

스프라이트 개념, 스프라이트 시트 무료 이미지 사이트

1) 스프라이트 sprite

컴퓨터 그래픽에서 스프라이트란 2차원 비트맵이나 이미지를 합성하는 기술을 의미한다.
 

2) 스프라이트 시트  sprite sheet

여러 개의 스프라이트들을 하나의 파일로 만드는 방법이다.
스프라이트 시트를 이용하면 사물이 움직이는 것처럼 보일 수 있다. 
또한 스프라이트들이 하나의 시트에 더 효율적으로 들어가 있다면 메모리 공간을 절약할 수 있다.
그림 순서의 인덱스 넘버는 왼쪽 상단 가로 줄 부터 0으로 시작한다.
 

3) 스프라이트 시트 무료 이미지

----->클릭
 

4) 스프라이트 시트 생성 사이트 

----->클릭
 
TIP: 캐릭터의 경우 한 동작의 그림 규격으로 48(px) x 64(px)를 권장한다고 나와있다.
 
 
- 아래의 캐릭터 사이즈: 64px * 96px

예시 이미지 출처: 스파르타 코딩

♣결과
https://www.awesomescreenshot.com/video/16049846?key=b143f99cbbc3f202b0bd7b809e6eb4be 

ZEP - zepscript

♧코드
App.loadSpritesheet: spritesheet를 읽는 API
(file명, 가로px, 세로px, {left, right, up, down에 사용될 이미지 인덱스 넘버})
player.sendUpdated() 변경 내용을 반영한다.

let character_image = App.loadSpritesheet('character4.png', 64, 96, { 
    left: [0,1,2,3], //왼쪽 방향으로 걸을 때 애니메이션
    up:[1],  //전체 파일에서 인덱스는 0부터 시작한다.
    down:[3],
    right:[0,1,2,3]
}, 8); //1초에 8장으로 한다.

App.onJoinPlayer.Add(function(player){
    player.sprite = character_image; //플레이어 속성 변경 
    player.sendUpdated(); //플레이어 상황 업데이트
})

listen: 플레이어가 입장할 때
action: 바로 캐릭터이미지로 바뀜
 
 

2. 특정 플레이어만 이미지 변경 

♧코드

//javascript문법에 맞게 character_image 변수 생성
let character_image = null;

character_image = App.loadSpritesheet('character4.png', 64, 96, { 
    left: [0,1,2,3], //왼쪽 방향으로 걸을 때 애니메이션
    up:[1],  //전체 파일에서 인덱스는 0부터 시작한다.
    down:[3],
    right:[0,1,2,3]
}, 8); //1초에 8장으로 한다.

//플레이어가 입장할 때 
App.onJoinPlayer.Add(function(player){
    if (player.name =="워렌버핏"){
        player.sprite = character_image; //플레이어 속성 변경 
    }
    player.sendUpdated(); //플레이어 상황 업데이트
})

 
 

3. 채팅 내용을 화면에 크게 띄우기

♣결과

♧코드

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

>> message라는 변수를 만들어서, 채팅 내용을 가지고 다양한 내용을 만들 수 있다.
 
listen: 앱에서 플레이어가 채팅을 입력하면
action: 앱이 화면 중간에 메시지를 띄운다.
 
 

4. 채팅 기능으로 스피드 조절하기

♣결과
https://www.awesomescreenshot.com/video/16050698?key=778f12d95c1c592f771b92efa564b531 

ZEP - zepscript

♧코드

// 채팅 기능 말하기
App.onSay.Add(function(player, text){
    if(text=='speed up'){
        player.moveSpeed = 500;
    }
    else if (text=='speed down'){
        player.moveSpeed = 30;
    }
    let message = player.name +'님이' +text +'라고 말했습니다.';
    App.showCenterLabel(message);
    player.sendUpdated();
})