박종명의 아름다운 개발 since 2010.06

앞서 전개한 글들에서 충돌처리, 총알발사, 오브젝트 이동 처리 등을 구현해 보았다.

이번 글에서는, 이러한 개별 개념을 조합하여 총알로 적(enemy) 비행체를 격추하는 샘플을 구현해 보자.

간략한 시나리오

- 적(enemy) 비행체는 캔버스 상단에서 좌/우로 방향을 바꿔가며 계속 이동한다.

- 키보드의 스페이스 키를 누르면 총알이 발사된다.

- 총알이 적 비행체에 명중하면 폭발한 듯한 이미지 효과를 준다.

격추라는 시나리오에만 충실하기 위해 아군 비행기는 등장시키지 않았으며, 총알의 출발 위치도 캔버스 하단 중앙에서만 출발하도록 한다. 또한 지속적인 테스트를 위하여 적 비행체가 격추되어도 충돌을 표현하는 이미지 효과만 줄 뿐 비행체는 계속 살아서 움직이도록 할 것이다.

먼저 적 비행체와 총알, 그리고 충돌 처리를 위한 객체 기반을 작성할 것인데 그전에, 주요 코드부터 간략히 살펴보자.

총알 발사

이전 글에서는, 과도한 연사 속도를 조절하기 위해 FPS를 기반의 조절값을 사용한 반면 여기서는 총알 발사의 전/후 시간을 속도 조절의 기준 값으로 사용했다. 즉 직전 총알 발사 시간과 현재 총알 발사 시간의 간격이 0.1초 이상 되어야만 새 총알이 배열에 추가되도록 처리한다. 그리고 총알의 발사 위치는 캔버스의 하단 중앙으로 설정한다.

오브젝트 이동

적 비행체와 총알의 이동을 위해 좌표값을 변경하는 코드이다. 게임 루프의 update() 메서드에서 매 프레임마다 호출하는 부분으로, 총발 위치는 위쪽 방향으로 이동하도록 Y 좌표값을 변경하고 적 비행체는 캔버스의 좌/우우를 계속해서 왔다갔다 하도록 방향값을 기준으로 X 좌표값을 변경시켜준다.

오브젝트 그리기 및 충돌처리

객체의 마지막 코드로, 게임 오브젝트들을 캔버스에 그린다. 게임 루프의 display() 메서드에서 매 프레임마다 호출하는 부분으로, 먼저 캔버스의 모든 내용을 지우고 적 비행체를 그린다. 다음으로 총알을 배열 수 만큼 그려주는데 총알이 캔버스 영역 밖으로 이동했다면 배열에서 제거하고 루프를 빠져나간다. 그리고 총알과 적 비행체와의 충돌처리를 통하여 격추되는 이미지를 그려줄지 판단한다. 

여기까지 해서 객체기반 작성이 완료되었다. 나머지 코드는 각종 초기화 및 이미지 리소스 다운로드, 위의 객체를 기반으로 게임 루프를 구현하는 것이다. 다음 코드는 객체를 포함한 전체 소스이다.

브라우저를 통해 확인해보면, 다음 그림과 같이 총알이 명중하면 폭발한듯한 이미지 효과를 확인할 수 있다.

이전 글(http://m.mkexdev.net/247)에서 게임 루프를 기반으로 게임 오브젝트 이동에 대해 알아 보았다.

키보드의 방향키에 반응해 전투기가 이동하는 샘플을 작성해 봤는데 여기서 덧붙여 전투기에서 총알이 발사되도록 해 볼 것이다. 키보드의 스페이스 바를 누르면 총알이 발사되며 키를 계속 누르고 있으면 총알 다발이 연속해서 발사되는 시나리오이다.

총알 이미지

총알으로 사용할 이미지는 총알을 제외한 배경이 투명한 형태로 만드는 것이 좋다. 그러나 투명 이지미를 수급하기 쉽지 않아,  여기서는 캔버스 배경과 동일한 흰색 배경의 총알 이미지를 사용할 것이다. (ppt로 간단히 만들고 캡쳐해서 이미지로 변환하자 ㅎㅎ)

데모 실행 화면

실제 구현에 앞서 데모 실행화면을 먼저 확인해 보자. 이전 글의 예제와 같이 전투기는 방향키에 반응해 이동을 하며, 여기서 더해 스페이스 키를 누르면 총알이 위쪽 방향으로 발사된다.

구현 내용 정리

구현해야 할 내용을 큰 맥락에서만 정리해 보자.

- 스페이스 키를 누르면 총알 이미지가 비행기 중앙에서 출발하도록 한다

- 총알은 연속적으로 발사되기 때문에 배열로 관리한다.

- 발사된 총알이 위쪽 방향으로 계속 이동하게끔 하기 위해 Y 좌표 값을 업데이트 한다

대략 이 정도만 정리하고 자세한 건 구현하면서 살펴 보도록 하자.

이전 글에서는 전투기 객체를 Character로 명명했었는데, 맘에 들지 않아 Fighter로 변경하고 메서드 이름도 drawFighter 로 변경하였다. 그리고 총알을 그리기 위해 추가된 코드는 파란색으로 표시했다.

총알은 하나 이상 발사될 수 있기 때문에 배열로 관리하며 발사된 총알 수 만큼 배열 요소가 생성된다. drawFighter 메서드에서는 전투기를 그리기 전에 배열에 담긴 총알을 그려준다. 이때 캔버스의 맨 위쪽까지 도달했을 경우(Y 좌표가 '0'일 경우) 배열에서 제거하고 루프를 건너뛴다. 이렇게 하지 않으면 캔버스를 벗어난 총알도 배열에 계속 잔존하게 되고 이 배열은 게임 실행 중 계속 커져 버려서 성능에 좋지 못하다. 따라서 반드시 총알 제거를 해 주어야 한다.(참고로 캔버스의 위쪽 끝 Y 좌표가 오프셋 값 등으로 인해 0보다 클 수 있어나 큰 의미 없으므로 그냥 0 값을 기준으로 한다) 

이어지는 코드 역시 이전 글의 샘플 코드에서 파란색 부분의 주요 변경이 이뤄졌다. 파란색으료 표시하지 않는 부분도 일부 변경되 되었는데 이것은 일부 변수명 변경, 이미지를 두 개(전투기, 총알) 다운 받기 위한 코드, 게임 루프 메서드 분리 등 총알 발사와 관련된 로직과 크게 관련되어 있지 않아 별도 표시를 하지 않았다.

변경된 부분을 대략 설명하면, 전투기와 총알 이미지 객체를 담기 위한 assets 객체와 스페이스 바를 누를때 전투기 객체의 총알 배열에 (총알이 발사될 최초 x,y 지점을 지정하여) 하나의 총알 요소를 추가하고 있다. 그리고 매 업데이트마다 Y 값을 점점 줄여나가면서 위쪽 방향으로 이동시킨다.

추가로 위의 코드에서 다음의 부분을 주의깊게 보자. 이 코드가 필요한 이유는 30프레임이라는 빠른 속도는 스페이스 키를 한번만 눌러도 두 세번 누른 것처럼 되기도 하고, 스페이스 키를 계속 누르고 있을 경우 그 속도가 너무 빨라 총알이 겹쳐서 발사되어 시각적으로 완전하기 못하게 된다. 따라서 총알이 한번 발사된 후 0.1초 정도 지나야만 다음 총알이 발사될 수 있도록 약간의 딜레이(delay) 시간을 주는 것이 좋다.

bulletTime += 1000 / fps;
if(bulletTime >= 100){
   if(isKeyDown[32]){ //space
      fighter.bullets.push({x: fighter.position.x + 6, y: fighter.position.y});
      bulletTime = 0;
   }
}

이전 글(http://m.mkexdev.net/246)에서 키보드에 반응해 게임 오브젝트가 이동하는 예를 살펴 보았다.

당시 제기했던 문제점을 해결해서 완성도를 높여 보자.

이전 글에서 제기한 문제점을 다시 가져와 본다.

두 가지 문제의 해결책은 바로 게임 루프이다.

키보드의 키 입력 이벤트가 발생할 때 UI를 갱신하는 것이 아니라 게임 루프 상에서 빠르고도 지속적으로 UI를 갱신하도록 하며 키 이벤트는 키 입력 상태 값을 업데이트 해 주는 용도로만 그치게 하는 것이 핵심이다.

이렇게 하면 동시 키 입력이나 초기 지연 현상을 극복할 수 있게 되는 것이다.

Character 객체는 이전 코드와 동일하다.

이어지는 코드는 이전 코드이 문제점을 개선한 것인데, 먼저 UI를 갱신시키는 부분을 키 이벤트가 아닌 게임 루프에서 처리하는 것을 주의깊게 보자. 키 이벤트에서는 isKeyDown이라는 배열에 키 입력 여부를 삽입하고 게임루프에서 이 값을 기반으로 오브젝트 이동을 처리한다. 키 입력을 해제하기 위해 keyup 이벤트도 사용하고 있다.

브라우저로 결과를 확인해 보면 이전 샘플에서 발생했던 동시키 입력 문제나 초반 지연 현상이 개선된 것을 확인할 수 있다.

이번 글에서는 게임 오브젝트를 움직여 이동시키는 방법에 대해 알아보자.

키보드의 방향키에 반응하여 상,하,좌,우로 움직여 볼텐데 뻔한 개념이니 바로 코드를 살표보자.

먼저 다음과 같이 Character 객체 기반을 작성한다. 지금까지 작성해오던 코딩 패턴과 유사하기에 별도의 설명은 생략하며, 위치 정보를 위한 position 객체 변수와 이 값을 기준으로 이미지를 그리고 있는 것을 확인하자.

이어지는 코드에서는 키보드의 방향키에 반응하여 앞서 생성한 Character 객체의 위치 값(position)을 변경하면서 그리기 작업을 호출하고 있다. speed라는 전역변수는 이동 속도 즉 간견을 위한 값이다. 여기서 사용한 캐릭터는 전투기 이미지인데 구글에서 다운 받아서 무단으로 사용한 것이다 ㅡ,ㅡ;

코드는, 전형적인 자바스크립트 키 이벤트 처리 로직이며 브라우저로 실행해 보면 전투기가 방향키대로 움직이는 것을 확인할 수 있다.

문제점

브라우저로 결과를 확인해 봤다면 뭔가 완전하지 않다는 것을 느꼈을 것이다. 전투기가 방향키에 반응해 원하는 곳으로 이동 하는 것은 분명하지만 완성도 있는 게임으로써는 뭔가 부족하다.

먼저 제일 문제가 되는 것은 '동시 키 입력'이 되지 않는다는 것이다.

예를 들어 대각선 방향으로 이동하기 위해 '→, ↑'  두 키를 동시 누르고 있더라도 뒤에 눌러진 키에만 반응하여 한쪽 방향으로만 이동하게 된다. 이것은 PC에서 Sift, Alt 키와 같은 보조키를 제외하고는 동시키 입력을 지원하지 않기 때문에 발생하는 현상이다. 따라서 이에 대한 처리를 별도로 해 줘야 한다.

두 번째 문제는, 전투기 이동의 시작이 매끄럽지 못하다는 것이다. 전투기를 끊김 없이 이동 시키기위해 키를 떼지 않고 계속 누르고 있을 경우 처음 이동이 끊기는 현상을 볼 수 있다. 이것은 키 입력이 지속될 때 발생하는 최초 지연 현상 때문인데 실제로 키 입력의 초당 실행수를 측정해 보면 최초 시작시점에 1~5사의 값이 나오고 이후부터는 최대 30정도로 유지되는 것을 확인할 수 있었다.

결국 이 두가지 문제를 해결해야 정상적인 이동 처리가 가능하며 다음 글에서 해결된 내용을 살펴볼 것이다.

게임 루프(http://m.mkexdev.net/242)를 다루는 글에서 초당 프레임 수인 FPS의 개념과 샘플을 작성해 보았다. 이번 글에서는 실제 초당 얼마의 프레임률을 보이는지 파악할 수 있는 초당 프레임 수 계산기를 작성해 보자.

초당 프레임 수는 게임 실행환경이나 가변적인 연산처리 등으로 일정하지 않거나, 목표한 프레임 률(framerate) 보장하지 못하는 등의 문제가 발생하기 때문에 게임 개발과 디버깅 시 관심있게 살펴봐야 하는 데이터이다.

특히 가변 프레임 방식이라면 초당 몇 프레임이 나오는지에 대한 실제적 자료가 필요하며 고정 프레임 방식일지라도 항상 고정값을 보장하지 않는 환경이 될 수도 있으니 실제 프레임 수를 살펴보는 것이 여전히 도움이 된다.

또한 만들고자 하는 게임이, 초당 몇 프레임에서 가장 원활한 동작을 보이는 지를 확인할 때도 유용하다 하겠다.

아래 사이트는 tree.js의 3D 샘플인데, 이 샘플에서도 좌측 상단에 초당 프레임 수를 보여주고 있다.

http://threejs.org/examples/ (이 사이트의 예제는 날 감탄스럽게 만들어 버렸다)

초당 프레임 수 계산 방식

초당 프레임수를 계산하기 위해서는 크게 두 가지 접근방식을 취할 수 있다.
먼저 밀리세컨드 단위의 이전 프레임의 실행 시간과 현재 프레임의 실행 시간을 비교해서 그 간격을 보고 프레임 수를 역으로 계산하는 방식과 실제 프레임 실행시마다 카운팅하는 방식이 그것이다. 두 방식 모두 큰 의미에서는 동일하다 할 수 있으나, 두 번째 방식이 좀 더 직관적이고 명료한 듯 하여 이 글에서도 두번째 방식으로 샘플을 작성해 볼 것이다.

예제가 복잡하지 않으니 바로 작성해 보자. 더 이상 HTML 파일은 언급하지 않겠다.(너무 심플하뉘...)

다음과 같이 초당 프레임 수를 계산하기 위한 객체 기반을 작성한다. 코드의 핵심은 현재 시간과 직전 시간을 (밀리세컨드 단위로) 비교하여 1000 즉, 1초가 지났을 경우 계속 증가시켜오던 callCount 값을 framePerSecond에 대입하는 부분이다. 참고로 자바스크립트의 Date.now()는 1970년 1월 1일 자정으로부터 현재 시간 사이의 밀리초를 반환하는 함수인데 new Date().getTime()으로도 동일한 결과를 받을 수 있으나 검색한 자료에 의하면 성능상 Date.now()가 더 좋은 효율을 보인다고 한다.

이어지는 코드는 앞서 생성한 FrameCounter 인스턴스를 생성해서 게임루프마다 fps를 증가시키기 위해
countFps 함수를 호출하는 것이다. 초당 프레임 수는 좌측 상단에 표시하며 전체 누적 프레임 수는 중앙에 표시하도록 한다.

브라우저로 실행하면 가운데 누적 프레임 수와 좌측 상단의 초당 프레임 수를 확인할 수 있다 

게임은 상태의 집합이라 할 수 있다. 보통 우리가 게임을 할 때 대략 다음과 같은 수순의 단계를 만나게 된다.

게임 준비 -> 게임 실행 -> 게임 종료

물론 복잡한 게임에서는 더 다양한 단계가 있을 수 있지만, 개념을 이해하는 수준에서 위와 같이 간단히 세 가지 단계이 있고 한 번에 하나의 단계가 활성화되어 게임이 실행된다는 것을 이해하는게 중요하다.

이러한 게임 흐름의 각 단계를 '게임 상태'라 하며 HTML5 Game 개발에서도 이러한 상태의 전이를 통해 전반적인 게임 흐름을 관리하게 된다.

다음 그림은 게임 루프상에서 실행되는 게임 상태를 표현한 것이다. 게임 상태는 특정한 이벤트에 의해 서로 교체되며 한 번에 하나의 상태가 게임 루프 상에서 동작하여 게임이 진행된다.

게임 상태를 잘 분리해서 독립화시켜 적절히 모듈화한다면 개발과 유지보수에 좋은 영향을 미치게 된다. 따라서 게임 개발 시 각각의상태를 객체화 시켜서 관리하는 것이 권장된다.

그럼 이제 게임 상태와 상태의 변경을 통한 게임 흐름을 체험해 볼만한 간단한 샘플을 작성해 보자.

총 3가지 게임상태(ready, running, end)를 객체로 관리하고 키보드의 스페이스 바를 누르면 다음 상태로 이동하는 예인데, running 상태에서는 캔버스에 랜덤한 사격형을 그리는 이전 글(Game Loop, http://m.mkexdev.net/242)의 샘플을 그대로 사용할 것이다.

먼저 다음과 같이 HTML 파일을 준비한다.

다음으로 '준비/실행/종료'에 해당하는 각각의 게임상태를 객체로 관리하기 위한 3개의 생성자 함수를 정의하는데 공통 속성을 재사용하기 위해 프로토타입의 상속을 활용한다. 3가지 상태는 모두 게임 루프상에서 실행되기 위한 update(), display() 함수를 가지고 있으며 각 상태에 맞는 업데이트와 화면 갱신을 처리하도록 한다.

게임 상태가 준비되었으니, 각 상태가 실행되도록 다음과 같이 작성한다. 게임상태를 저장하기 위한 gameState 배열과 이 배열에서 특정 상태를 선택하기 위한 인덱스 값을 저장하는 currentGameStateIndex 변수를 선언한다. 키보드의 스페이스 바를 누르면 이 변수 값을 차례대로(0~2) 변경되도록 하여 게임 상태가 순환되도록 한다. 나머지 코드는 지금까지 학습했던 내용과 동일하므로 설명을 생략한다.

샘플을 브라우저로 확인해 보면 스페이스 키로 인해 다음의 3 단계가 순환되는 것을 확인할 수 있다.

거의 대부분의 게임은 충돌감지를 필요로 한다.

플레이어를 향해 달려오는 적(enemy), 적을 향해 쏘는 총알 등 게임 요소들간 충돌을 구현하기 위해서는 개별 요소들의 시각적 겹침을 처리해야 한다.

2D 게임에서의 충돌 감지는, 충돌 감지 대상이 되는 게임 요소의 형태에 따라 충돌박스, 충돌구, 충돌점 등 상황에 맞는 감지 로직을 구현해야 한다.

여기서는 가장 기본이 되는 충돌 박스에 대해 알아 보겠다.

* 간단한 개념

앞서 언급했듯이, 충돌 감지는 두 그래픽 요소의 시각적 겹침을 처리하면 된다. 겹침은 그래픽 요소의 X, Y 좌표와 요소의 크기(너비/높이) 값이 기준이 되는데 다음과 같이 크게 두 영역의 겹첨을 감지하면 된다.

1) X 좌표 겹침

player 와 enemy 라는 두 그래픽 요소가 있다고 가정하자.

player를 기준으로 보면, enemy가 player의 X좌표 영역 안에 있을 경우 충돌되었다고 할 수 있다.

아래 그림을 보면 이해가 쉬울 것이다.

먼저 enemy의 우측 끝 X좌표(enemy.x + enemy.width)가 player의 좌측 끝 X좌표(player.x)보다 크고,

enemy의 좌측 끝 X좌표(enemy.x)가 player의 우측 끝 X좌표(player.x + player.width)보다 작으면 서로 겹침 즉, 충돌되었다고 할 수 있다.

2) Y 좌표 겹침

같은 개념으로 Y 좌표 겹침을 감지할 수 있다.

먼저 enemy의 하단 끝 Y좌표(enemy.y + enemy.height)가 player의 상단 끝 Y좌표(player.y)보다 크고,

enemy의 상단 끝 Y좌표(enemy.y)가 player의 하단 끝 Y 좌표(player.y + player.height)보다 작으면 서로 겹침 즉, 충돌되었다고 할 수 있다.

결론적으로 두 요소의 X 좌표 겹침과 Y 좌표 겹침이 둘다 만족한다면 서로 충돌되었다고 감지하면 되는 것이다.이 개념을 코드화 하면 다음과 같다.

* HTML

충돌 박스에 근거한 간단한 예제를 만들어 보겠다. 먼저 다음과 같이 HTML 파일을 구성한다. 캔버스와 마우스 좌표를 표시하기 위한 span 요소를 정의한다.

* Javascript

먼저 Player 객체를 위한 Box 생성자 함수를 정의하는데, Player가 위치할 X,Y 좌표와 크기(너비/높이)를 매개변수로 전달받도록 한다.

다음으로 문서의 로딩 완료와 마우스 움직임을 처리하기 위한 이벤트 리스너를 등록하고 필요한 전역 변수를 정의한다. 예제의 단순함을 위해 enemy 요소는 따로 정의하지 않고 마우스 포인트를 사용할 것이다. 즉 Player 박스와 마우스 포인터의 겹침(충돌)을 감지하게 되므로 마우스 이벤트가 필요하다.

그리고 초기화 함수와 Player 박스를 그리는 함수를 정의한다. 여기서 주의깊게 봐야 할 것은 Canvas의 getBoundingClientRect() 함수이다. Canvas가 문서에 표시될 때 div와 같은 부모요소에 포함될 수도 있고 문서 자체의 margin, padding 값에 의해 문서의 좌측 상단에서 떨어져 있을 수 있다.

다시말해, Canvas의 좌측 상단의 좌표가(0,0)이 아닐 수 있다는 것이다. Canvas에 포함된 게임 요소들의 충돌 감지를 위해서는 Canvas의 좌측 상단의 좌표가 (0,0)이어야 하므로 문서와 Canvas의 간격을 좌표계산에서 제거해야 한다. 이를 위해 문서 자체의 margin값을 0으로 설정하거나 Canvas의 offSet값을 계산에 포함할 수도 있지만 좀더 범용적으로 적용하기 위해서 getBoundingClientRect()함수를 사용하는 것이 좋다. 이 함수를 이용하면 Canvas가 문서로부터 얼마나 떨어져 있는지 알 수 있으므로 쉽게 계산할 수 있게 된다.

이제 남은건 마우스 무브 이벤트와 충돌감지 로직이다. 이 코드가 핵심인데 다음과 같이 구현한다.

앞서 설명한대로 Player 요소와 마우스 포인터의 겹침을 감지하고 충돌 시 이를 표시해 준다.

* 실행 화면

예제를 브라우저로 실행해 보면 마우스 포인터가 Player 박스 안에 들어가면 충돌되었다고 표시하는 것을 확인할 수 있을 것이다. 물론 이 예제에서는 마우스 포인트가 enemy를 대신하기 때문에 enemy의 박스 계산(너비/높이 계산)이 필요없게 되지만 개념은 동일하다. 

지난 포스팅에서 백그라운드 애니메이션 처리 기법을 알아 보았다.

=> http://m.mkexdev.net/239

이 글에서는 하나의 배경이미지를 사용해서 애니메이션을 구현했는데,

이번 글에서는 더욱 현실감있게 하기 위해 몇 개의 배경을 중첩시켜서 서로 다른 속도로 애니메이션이 동작하도록 구현해 볼 것이다.

여러개의 배경이 서로 중첩되어 각기 다른 속도로 움직이도록 처리하면 게임을 더욱 실감나게 만들 수 있는데, 이를 시차 스크롤 방식이라 한다. 이에 대한 깔끔한 설명은 'LEARNING HTML5 온라인 게임 개발 프로그래밍'의 설명을 인용한다.

이번 글에서는 HTML5 게임의 백그라운드 애니메이션 구현 기법을 알아보자.

백그라운드 애니메이션은 배경이 고정되어 있지 않고 지속적으로 움직이는 것으로, 여기서는 마치 자동차를 타고 지나가는 것과 같이 배경이 우측에서 좌측으로 계속 움직이는 애니메이션 효과를 구현해 볼 것이다.

실제 게임에서는 캐릭터와 배경 애니메이션이 적절히 조화된 상태로 구현되지만 간단하게는 캐릭터는 가만히 있어도 배경이 계속 흐르듯 움직이면 마치 캐릭터가 앞으로 나아가는 것같은 느낌을 줄수도 있다.

* 간단한 개념

배경이 움직인다고 해서 여러개의 이미지가 사용되는 것은 아니다.(물론 여러개의 배경이라면 그 만큼 이미지가 필요하다). 여기서는 하나의 배경이 우측에서 좌측으로 움직이는 것이므로 하나의 배경 이미지만 사용하면 된다. 이전 글, Image Sprites의 개념에서 설명했듯이 HTML5 Canvas에는 원본 이미지에서 원하는 부분만 잘라내어 그릴 수 있다고 했다. 배경 애니메이션 역시 Canvas의 이러한 특징을 이용하는 것으로 총 두 번의 그리기 작업을 지속적으로 수행함으로써 배경이 움직이도록 할 수 있다.

먼저 배경이 좌측으로 움직인만큼 X좌표를 이동시켜서 첫 번째 그리기를 수행하고, 우측에 남은 공간만큼 원본에서 다시 잘라내어 두 번째 그리기를 수행하면 된다. 이것은 마치 회전목마(carousel)를 연상시킨다. 만일 회전목마의 한 단면만 볼 수 있다면 그 단면은 지나간 말의 꼬리와 새로운 말의 머리가 만나는 것의 연속이라 할 수 있다. 

결국 배경이 움직인다는 것은 시간의 흐름에 따라 배경의 그리기 좌표를 조정하고 이를 빠르게 전환시키면서 그려주면 자연스러운 애니메이션 처리가 된다는 것이다.

이제 본격적으로 Background Animation 구현방법을 알아보자.

* HTML

HTML 코드는 설명할 것도 없이 간단하다. 캔버스가 있고 대체 텍스트와 스크립트 참조가 전부이다.

* Javascript

늘 그래왔듯이 모든 마법(?)은 자바스크립트에서 이뤄진다. 전체적인 구조는 지금까지 구현해 왔던 것과 유사하다. 다만 캐릭터 객체가 아닌 백그라운드 객체로 변화가 있으며 두 번의 그리기 작업이 필요하다는 것이다.

애니메이션을 위하 Trident.js를 사용할 수도 있으나 이번에는 라이브러리 의존없이 구현해 보도록 한다.

1. 백그라운드, 생성자 함수와 메서드

먼저 Background 생성자 함수에서는 배경이미지를 표현하는 에셋 인스턴스와 Canvas 요소를 전달받아서 초기화 작업을 수행한다. spritesX 변수는 배경이미지의 이동을 처리하기 위해 원본 이미지에서 이동할 크기를 저장하는 변수이다.

다음으로 실제 애니메이션 처리가 이뤄지는 startAnimation 메서드에서는 캔버스를 다 지우면서 시작한다.

drawX 변수는 원본 이미지 크기에서 spritesX를 곱한 값으로, 원본 이미지에서 원한는 부분을 자르게 될 X좌표 값이 된다. spritesX의 값은 이후 나오게 될 spritesRate값을 계속 더하여 원본 이미지의 x 좌표를 spritesRate 간격만큼 이동시키는데, 예를 들어 원본 이미지 너비가 100px이고 spritesRate가 0.1일 경우 spritesX와 drawX값의 변화는 다음과 같다.

즉, X좌표가 10px 만큼 이동하게 되는 것이다.

이어지는 drawWidth는 원본 이미지에서 drawX르 뺀 값으로 drawX부터 이미지 나머지 부분의 크기를 나타낸다. 이렇게 첫번째 그리기 작업이 수행된다.

이후 두번째 그리기 작업이 수행되는데, 이 시점에 브라우저로 확인해 보는 것도 프로그램 로직 이해에 도움이 될 것이다. 두 번째 그리기 작업은 앞서 첫번째 그리기 작업에서 비워진 우측 공간을 메우는 작업으로 역시 동일한 원본 이미지의 첫 부분에서 비워진 공간만큼 잘라내어 그리는 것이다.

두번째 그리기 작업에서 중요한 것은 fillDrawWidth 변수인데, 이 변수에는 비워진 공간의 너비를 계산해서 그 값을 저장하게 된다. 그리고 비워진 공간의 X좌표에 두번째 그리기 작업을 수행하면 두 개의 그리기 작업이 자연스럽게 연결됨으로써 애니메이션 효과가 구현되는 것이다.

마지막으로 spritesX 값을 spritesRate만큼 계속 더해가는데, 최대 크기 비율인 1이 될 시점에 다시 0으로 만들어 줌으로써 이미지가 처음부터 다시 그려지도록 한다.

2. 기타 프로그램 로직

나머지 코드는 이전에 알아봤던 캐릭터 애니메이션의 그것과 거의 유사하다.

fps 값을 60 즉, 1초에 60번 프레임을 교체하도록 하여 캐릭터 애니메이션 보다 조금 더 빠른 속도를 지정했다.

나머지 코드는 캐릭터 애니메이션 예제와 동일하므로 이전 글을 참고하면 되고 다만 spritesRate가 추가되었는데 이것은 배경 이미지의 이동 간격을 나타낸다. 코드에서는 0.01을 지정했는데 이것의 의미는 프레임이 이동할 때마다 원본 이미지에서 0.01px 이동한다는 의미가 된다. fps와 함께 이 값의 변화는 배경 애니메이션의 속도에 영향을 준다. 이 값이 클수록 한 프레임에 이동하는 배경 이미지의 간격이 크지므로 더욱 빠른 애니메이션 효과를 낼 수 있다. 즉 이 값의 조정을 통해 동일한 fps 상에서 캐릭터의 속도를 증가시킬수도 있다는 것이다.

실행화면

인터넷에서 background image를 검색해서 이미지의 좌측 시작부분과 우측 끝 부분이 매끄럽게 연결되는 이미지를 다운로드 해서 예제를 실행해 보자.

마무리하며...

이 글에서는 횡스크롤 형태의 게임에서 사용할법한 배경 애니메이션을 구현해 봤다.

원본 이미지의 좌표를 이동해 가며 두 번의 그리기 작업을 반복함으로써 배경이 우측에서 좌측으로 이동하는 효과를 구현했는데 이는 유명한 고전 오락실 게임인 1945와 같이 위에서 아래로 흐르는 배경 애니메이션 처리에도 동일한 개념으로 접근할 수 있을 것이다. 애니메이션의 방향을 바꿔서 직접 구현해 보면 더욱 빠른 이해가 될 것이다.

앞서 두 개의 글을 통해 HTML5 상에서 애니메이션 구현을 알아봤다.

이 두 글에서는 자바스크립트의 setInterval() 함수를 통해 애니메이션 처리를 직접 구현했었다.

> http://m.mkexdev.net/235

> http://m.mkexdev.net/237

이번에는 잘 알려진 오픈소스 라이브러리를 이용해 애니메이션을 구현해 보도록 한다.

이 글에서 사용할 라이브러리는 Kirill Grouchnikov라는 스마트한 개발자에 의해 개발된,

Trident.js 라는 자바스크립트 애니메이션 라이브러리로 ProcessingJS 처럼 기존 JAVA 라이브러리를 자바스크립트 버전으로 포팅한 것으로 타임라인과 키프레임에 기반한 애니메이션 처리를 지원하고 Easing 함수를 통해 비선형 타임라인을 지원하는 등 애니메이션 처리와 관련된 안정되고 다양한 기능을 제공한다.

이 라이브러리는 github에 공개되어 있다.

> https://github.com/kirillcool/trident-js

공개된 라이브러리를 사용한다는 것은 개발의 생산성과 안정성을 높이고 유용하고 다양한 기능을 큰 시행착오 없이 적용할 수 있는 등 많은 장점을 가져다 준다. 따라서 대부분의 개발환경에서 이미 구현된 라이브러리 사용을 권장하고 있다.

다만 기본 개념이 전혀 갖춰져 있지 않은 상태에서 무작정 라이브러리에만 의존하다보면 프로그램의 원리적 동작의 이해가 부족하게 되고 복잡한 문제를 대응하는 능력이 떨어져 전반적인 프로그램 개발 역량을 성장시키지 못하게 되는 원인이 되기도 한다. 따라서 이전 두 글에서와 같이 라이브러리 의존 없이 기본적인 구현을 직접 해 봄으로써 애니메이션 처리의 기본 구현 원리를 숙지하고 난후 유용한 라이브러리에 관심을 가지는 수순을 따르는게 좋겠다.

그럼. 본격적으로 Trident.js를 사용해보게 될텐데, 캐릭터 애니메이션 구현을 해 보기 전에 기본적인 라이브러리 사용법을 간단히 알아보자.

* Trident.js 기본

Trident.js 사용해서 HTML 이미지요소의 투명도를 타임라인에 기반해 서서히 변경해 보는 간단한 예를 살펴봄으로써 이 라이브러리의 기본 사용법을 익혀보자.

먼저 다음과 같이 github에서 다운받은 trident.js와 이미지요소가 정의된 간단한 HTML파일을 만들자.

그리고 자바스크립트에서 다음과 같은 로직을 구현한다.

Trident.js는 그래픽 편집 툴의 그것과 동일한 개념의 타임라인 객체를 제공한다. 이 객체에 설정한 각종 정보를 기반으로 애니메이션 처리가 이뤄지는데 먼저 생성자 함수로 애니메이션할 요소와 대상 속성을 설정한다.

여기서는 이미지 요소의 style속성을 애니메이션 대상 속성으로 지정했다.

var rolloverTimeline = new Timeline(myImg.style);

그리고 애니메이션할 속성과 시작-끝 값 그리고 시작과 끝 값 사이에 변경해야 할 값(보간값)의 형태를 지정한다. 여기서는 이미지의 투명도에 해당하는 opacity 속성을 지정하고 0.3 ~ 1.0 사이의 값을 실수 형태의 보간(FloatPropertyInterpolator)이 이뤄지도록 지정했다.

rolloverTimeline.addPropertiesToInterpolate([
   {
      property: "opacity", from:0.3, to:1.0, interpolator: new FloatPropertyInterpolator()
     }
]);

참고로 보간형태는 FloatPropertyInterpolator외에도 정수값 보간인 IntPropertyInterpolator과 RGB값 보간인 RGBPropertyInterpolator가 제공된다.

마지막으로 애니메이션이 동작할 시간을 밀리초단위로 지정하는데 여기서는 0.5초로 지정했다

rolloverTimeline.duration = 500;

결국 0.5초 동안 이미지 투명도가 0.3에서 1.0으로 점점 밝아 지도록 하는 것이다. 여기까지해서 Trident.js의 애니메이션 설정은 모두 끝이 났다.

이어지는 코드는 실제 애니메이션 처리를 하기 위한 이벤트를 등록하는 것이다.

코드에서는 이미지에 마우스를 올리면 애니메이션이 시작하도록 하고 마우스를 떼면 역방향으로 애니메이션이 진행하도록 구현했다.

myImg.addEventListener("mouseover", function(){rolloverTimeline.play()}, false);
myImg.addEventListener("mouseout", function(){rolloverTimeline.playReverse()}, false);

브라우저로 샘플을 실행해서 애니메이션을 확인해 보자.(눈의 즐거움을 위해 국민 여동생 등장시킴!)

                =>               

* Trdent.js를 활용한 캐릭터 애니메이션 구현

이제 이 라이브러리를 이용해서 캐릭터 애니메이션을 구현해 보자. 전체적인 흐름은 이전과 유사하며 이미지는 Image Sprites 기법으로 처리한다.

1. 캐릭터, 생성자 함수와 메서드

캐릭터 메서드의 구조가 이전과는 조금 달라졌다.

startAnimation() 메서드에서 Trident.js의 타임라인을 생성하고 애니메이션을 시작하도록 구현했으며 캔버스에 그리는 작업인 drawCanvas() 메서드를 분리시켰다.

타임라인 인스턴스를 생성할 때 앞서 기본 예제와는 달리 HTML 요소가 아니라 객체 자체를 매개변수로 전달하고 있다. 이렇게 하면 객체의 특정 속성을 기준으로 애니메이션 처리를 할 수 있게 된다.

var self = this;

var spriteTimeline = new Timeline(self);

또한 여기서 캐릭터 인스턴스의 문맥을 나타내는 'this' 값을 self라는 지역변수에 할당하고 있는데 이렇게 하는 이유는 this 키워드가 다른 유효범위에서는 다른 문맥을 가르키기 때문에 프로그램이 정상 동작하지 않을 수 있다. 이 예제에서는 타임라인에 이벤트 리스너를 등록할 때 문제가 발생한다. 따라서 self라는 변수를 통해 캐릭터 인스턴스의 문맥이 유효할 수 있도록 하며 타임라인 위치가 변경할 때마다 동작할 이벤트 리스너를 다음과 같이 등록한다.

spriteTimeline.addEventListener("onpulse", function (timeline, durationFraction, timelinePosition) {
   self.drawCanvas();
});

그리고 원본 이미지의 자르기 x좌표인 spritesX 값은 더이상 직접 업데이트 해 줄 필요가 없게 되었다. Trident.js의 보간값 설정에서 다음과 같이 이 변수의 변경될 값 범위(0~36)를 지정했기 때문에 타임라인이 실행되면서 자동으로 spritesX값이 업데이트 되기 때문이다.

spriteTimeline.addPropertiesToInterpolate([
   {
      //Interpolate Property: spritesX, Interpolate Value: 0 ~ 36, Interpolate Type: Int
      property: "spritesX", from:0, to: 36, interpolator: new IntPropertyInterpolator()
   }
]);

마지막으로 애니메이션을 2.5초간 동작하도록 하여 이전 두 글의 fps와 값을 유사하게 맞췄다. 더불어 애니메이션이 무한 반복되도록 다음과 같이 playInfiniteLoop() 메서드를 호출한다.

spriteTimeline.playInfiniteLoop();

2. 프로그램 로직

나머지는 이전 코드와 모두 동일하며 onAssetLoadComplete() 함수에 약간의 변화가 있다.

이전 코드에서는 자바스크립트의 setInterval() 메서드를 이용해 직접 루프를 동작시켰지만 Trideng.js에서는 자체 타임라인을 기반으로 루프가 동작하기 때문에 더 이상 사용할 필요가 없다.

실행화면

브라우저로 실행해 보면 이전 예제와 동일한 애니메이션을 확인할 수 있다. 

마무리하며...

지금까지 총 3차례에 걸쳐 캐릭터 애니메이션을 구현해 보았다. 첫번째는 동작별로 분리된 이미지들을 이용해 애니메이션을 구현해 봤으며 두번째는 하나의 이미지를 기반으로 Image Sprites 기법을 활용했으며 마지막으로 이 글에서는 Image Sprites 기법과 더불어 Trident.js 라는 오픈소스 라이브러리를 활용해서 동일한 애니메이션을 구현해 보았다. 이 중에서 제일 권장되는 방법은 1 < 2 < 3 즉, 이 Trident.js를 활용하는 것이 여러모로 좋을 것이다. 라이브러리의 안정성이 곧 프로그램의 안정성으로 직결되며 반복 카운트 및 되감기 애니메이션 지원과 타임라인과 키프레임의 조합, 비선형 타임라인 지원 등 더 강력한 기능을 공짜로(?) 얻을 수 있기 때문이다. 하지만 자바스크립트의 애니메이션 처리를 위한 기본 원리를 알기 위해서는 이전 두 과정을 필수로 거쳐보기 바란다. 기본기 없이 라이브러리에만 의존한다면 언젠가 더 높은 벽을 만나게 될 것이다.