JAVASCRIPT#60 - 스프라이트 시트 GIMP!

God save us, god bless us. let me get through this. let me pass this. i must meet her.

JAVASCRIPT#60 - 스프라이트 시트 GIMP! 

1. 네임 스페이스 만들어서 함수 관리하기

cocktail 이라는 객체를 선언해서 shake 과 woot 이라는 함수를 메소드로 지정하는 방식으로

네임스페이스를 만들었다.

2. 스프라이트

- 사이다 스프라이트는 게임내에 움직이는 이미지를 이야기한다.

▲ 김프를 이용해서 직접 만든 내사랑 애플잭♥ 애플잭 결혼해줘 애플잭 정말 사랑해 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

3. 도트 이미지 만들기

- GIMP를 이용한다. (김프 다운로드 : GIMP HERE! )

4. 스프라이트 시트 만들기

- 각 이미지를 복사해서 일렬로 배치한다. 위치, 간격 정확히 재야함.

* 김프꿀팁1 - 배경 투명하게 하는 방법 : 요술봉으로 선택한후 레이어 > 투명도 > 색상을 알파로!

* 김프꿀팁2 - 작은 도트 이미지를 큰 도트 이미지로 만드는 방법 이미지 -> 이미지 크기조정 -> 화질보간 없음으로 설정하고 크기 증가시킴. 

5. 스크립트로 애니메이션 재생하기

$("#field").append("<div id='AJ'><div>"); //애플잭 소환
$("#AJ").css("backgroundImage", "url('AJ.png')").css("left", "1300px"); // 그림과 위치 할당

var gameFramework = {}; // 게임프래임워크 네임스페이스 설정

gameFramework.setFrame = function(divId, frameNumber, frameDimension)
{
    $("#"+divId).css("backgroundPosition", "" + frameNumber * frameDimension + "px");
}

// 원하는 장면, 프레임 지정하는 함수 참고로 frameDimension은 한 프레임의 너비.

var totalNumberOfFrame = 4; // 총 프레임 수
var frameNumber = 0; // 프레임 넘버

var move = setInterval(function(){
    gameFramework.setFrame("AJ",frameNumber, 640);
    frameNumber = (frameNumber + 1) % totalNumberOfFrame;
}, 120); // 맨뒤에 숫자 120은 반복 간격인데 작을수록 매우빨리 반복됨.

$("#AJ").animate({left: "0"}, 4000, function(){
    clearInterval(move);
    gameFramework.setFrame("AJ", 0, 640);
}); // AJ가 left 0에 도달시 멈추기

* 유클리드 호제법에 의한 프레임 관리

- 최대 프레임 넘버인 3에 도달시, 총 프레임값(4)으로 % 연산을 해주면 다시 0으로 만들어버림.

- % 연산?? : 나머지를 구하는 연산. 만약 3 % 99999 이면 값은 3임. 최대값 도달시 초기값인 0 으로 만들때 유용할듯.