HTML5 게임에 다중 상태 애니메이션 만들기 하는 방법

이 모든 동작을 HTML5 게임에서 계속 진행하면서 정교한 여러 애니메이션을 원할 것입니다. 언제든지 스프라이트와 연결된 이미지를 변경하기 위해 changeImage () 또는 setImage () 함수 (두 가지 이름이 같습니다)를 사용할 수 있습니다. 때로는 훨씬 정교한 애니메이션이 필요합니다. walkAnim을 한번보세요. html.

이미지 교환 작업이 많이 진행됩니다. 워킹 애니메이션은 실제로 워킹의 환상을주기 위해 빠르게 바꿔 놓은 일련의 8 가지 이미지입니다. 4 가지 애니메이션 (각 추기경 방향마다 하나씩)이 있습니다. 총 32 개의 이미지가 있습니다. 그러나 코드를 살펴보면 문자 스프라이트에는 하나의 이미지 만 포함되어 있음을 알 수 있습니다.

이 이미지는 합성 애니메이션입니다. 각 행은 방향을 나타내며, 각 행에는 반복 될 일련의 이미지 또는 일련의 이미지가 포함됩니다.

rpg_sprite_walk. png 이미지는 Franck Dupont에 의해 작성되었습니다. 그는 관대하게이 이미지를 OpenGameArt에 게시했습니다. org 사이트에서 그는 "Arikel"로 알려져 있습니다. "그는 특별 저작물 인"저작자 표시 - 공유 "와 같은 저작물을 발표했습니다. "이것은 사람들이 원 저작자를 기인하는 한 무료로 작품을 사용하거나 리믹스 할 수 있음을 의미합니다.

배경 이미지는 Hyptosis라는 저자가 작성한 것으로, 같은 사이트에서 공개 도메인으로 이미지를 공개했습니다. Franck 및 Hyptosis와 같은 재능 있고 사려 깊은 기고자는 번성하는 창조적 인 지역 사회의 열쇠입니다. 오픈 게임 아트 사이트를 통해 게임에서 사용하기에 더 좋은 예술 작품을 자유롭게 구경 할 수 있지만 필자가 가치있는대로 작가에게 고맙고 속성을 부여해야합니다.

단순 게임. js 라이브러리에는 멀티 이미지 애니메이션을 아주 쉽게 만들 수있는 기능이 포함되어 있습니다. walkAnim 코드를 살펴보십시오. 어떻게 작동하는지 보려면 html:

walkAnim. html var 게임; var 배경; var 문자; 함수 init () {game = new Scene (); background = new Sprite (게임, "rpgMap.png", 800, 600); 배경. setSpeed (0, 0); 배경. setPosition (400, 300); character = new Sprite (게임, "rpg_sprite_walk.png", 192, 128); 문자. loadAnimation (192, 128, 24, 32); 문자. generateAnimationCycles (); 문자. renameCycles (new Array ("down", "up", "left", "right"))); 문자. setAnimationSpeed (500); // 일시 정지 된 문자를 시작합니다. setPosition (440, 380); 캐릭터. setSpeed (0); 문자. pauseAnimation (); 문자. setCurrentCycle ("down"); 게임.start ();} // init 함수를 끝내십시오. update () {game. 명확한(); checkKeys (); 배경. 최신 정보(); 캐릭터. (keyDown [K_LEFT]) { 문자입니다. setSpeed (1); 문자. playAnimation () 문자. setMoveAngle (270); 문자. setCurrentCycle ("left"); } if (keysDown [K_RIGHT]) {문자. setSpeed (1); 캐릭터. playAnimation () 문자. setMoveAngle (90); 캐릭터. setCurrentCycle ("right");} if (keysDown [K_UP]) {문자. setSpeed (1); 캐릭터. playAnimation () 문자. setMoveAngle (0); 캐릭터. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {문자. setSpeed (1); 캐릭터. playAnimation () 문자. setMoveAngle (180); 캐릭터. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { 문자입니다. setSpeed (0); 문자. pauseAnimation (); 문자. setCurrentCycle ("down"); }}

애니메이션을 제작하려면 몇 가지 새로운 단계를 거쳐야하지만, 그 결과는 그만한 가치가 있습니다.

애니메이션 이미지를 얻습니다.

이미지를 직접 만들거나 OpenGameArt와 같은 우수한 리소스를 볼 수 있습니다. org는 다른 사람들이 한 일을 찾습니다. 물론, 당신은 다른 사람의 일을 존중할 책임이 있지만, 오늘날 매우 관대 한 면허에서 가능한 훌륭한 일이 있습니다. 이미지가 행과 열로 구성되고 각 하위 이미지가 정확히 같은 크기인지 확인하십시오.

이미지를 올바른 형식으로 만들고 각 하위 이미지의 크기를 알 수 있도록 이미지 편집기를 사용해야 할 수도 있습니다.
애니메이션 이미지를 스프라이트에 붙입니다.

전체 이미지를 스프라이트에 첨부 할 수 있지만, 한 번에 작은 부분 만 표시하면됩니다. 이것은 많은 이미지로 작업하는 것보다 쉽고 더 효율적입니다.
loadAnimation () 메소드로 애니메이션 객체를 생성합니다.

객체의 loadAnimation () 메소드를 호출하면 애니메이션 관리에 도움이되는 애니메이션 도구가 생성됩니다. 처음 두 매개 변수는 전체 이미지의 크기 (너비 및 높이)이고 두 번째 매개 변수는 각 하위 이미지의 너비와 높이입니다. 이 값이 잘못되면 애니메이션이 스크롤되는 것처럼 보입니다. 이 값을 올바르게 얻을 때까지 계속 플레이하십시오:
```
. loadAnimation (192, 128, 24, 32);
```
애니메이션주기를 만듭니다.

각 행은 애니메이션주기로 바뀝니다. 기본 버전 (매개 변수없이)은 대부분의 상황에서 정상적으로 작동합니다. 이 도구의 고급 사용법은
```
문자를 참조하십시오. generateAnimationCycles ();
```
사이클의 이름을 바꿉니다.

buildAnimationCycles () 명령으로 생성 된 애니메이션에는 기본 이름이 있지만,보다 의미있는 이름을 붙이는 것이 좋습니다. 각 행의 의미를 나타내는 이름을 가진 배열을 추가하십시오:
```
문자. renameCycles (new Array ("down", "up", "left", "right")));
```
애니메이션 속도를 설정합니다.

애니메이션 속도는 애니메이션 실행 속도를 나타냅니다. 대부분의 어플리케이션에서는 500의 값이 적당하지만이 값을 조정하여 캐릭터의 도보 사이클이 실제로 캐릭터를 추진하는 것처럼 보입니다 (
```
문자).setAnimationSpeed (500);
```
표시 할 사이클을 설정하십시오.

setCurrentCycle () 메서드를 사용하면 renameAnimationCycles () 단계에서 지정한 이름 중 하나 인
```
문자를 사용하여 사이클을 선택할 수 있습니다. setCurrentCycle ("down");
```
pauseAnimation () 명령을 사용하여 애니메이션을 일시 중지합니다.

pauseAnimation () 명령은 애니메이션을 일시적으로 정지시킵니다.
playAnimation ()을 사용하여 애니메이션을 시작합니다.

이 방법은 현재 애니메이션주기를 계속 반복합니다.