[HTML5 Game] Sound Effect

이번 글에서는 게임에 사운드(Sound) 효과를 추가해 볼 것이다.

 

이전 글(http://m.mkexdev.net/252)에서 스페이스 키를 누르면 총알이 발사되도록 해 봤으니, 여기서는 총알이 발사되는 소리를 구현해 보도록 하겠다.

 

사운드 처리는 HTML5 스펙에 새로이 추가된 Audio 요소를 이용할 것이다.(참고: http://m.mkexdev.net/63)

 

 

 

단순히 하나의 사운드를 재생하는 것은 매우 심플한 코드로 구현이 가능하다. 하지만 게임 사운드는 한 번에 하나의 사운드만 재생되는 것이 아니라 여러 사운드가 동시에 재생되어야 하는 경우가 많고 또한 하나의 사운드라 해도 그 사운드가 종료되기 전에 같은 사운드가 다시 재생되어야 하는 경우도 있다. 이러한 대표적인 경우가 총알이 발사되는 경우이다. 예를들어 총알 사운드의 플레이 타임이 3초인 경우, 첫번째 총알이 발새되고 3초가 지나기 전에 두 번째 총알이 발사되는 경우이다. 이를 위해서는 하나의 사운드를 여러개로 분리해서 각각 재생되도록 하는 기법이 필요하다.

 

바로 구현해 들어가 보자. 다음과 같이 총알 사운드를 추상화환 객체 기반을 준비한다.

여러 개의 총알 소리가 거의 동시에 같이 재생될 수 있도록 사운드 배열을 관리하고 플레이 가능한 사운드를 찾으면 그 사운드를 재생하고 바로 루프를 빠져 나간다. 또한 특정 사운드의 재생이 완료되면 명시적으로 paused(일시정지)처리를 하는데 이 함수에서는 이 속성값을 검사하여 재생가능한 사운드 파일을 탐색한다. 

function FireShot(sounds){
  this.sounds = sounds

  this.playSound = function(){   
    for(var i = 0; i < this.sounds.length; i++){  
      if(this.sounds[i].audio.paused){             
         this.sounds[i].audio.play();
         break;    
      }    
    }   
  }
}

 

이어지는 코드는 FireShort 객체를 이용하여 스페이스 키가 눌러졌을 때 사운드 재생을 처리하는 코드이다.

총알 소리로 사용되는 사운드 파일은 한개이지만, (앞서 설명한대로) 동시 재생을 위해 여러개의 Audio 요소를 동적으로 생성한다. 코드에서는 50개를 생성했는데 이것은 사운드 파일의 재생시간과 동시 재생 환경등을 고려하여 적절한 값을 지정해야 한다. 필자가 사용하는 (인터넷에서 다운받는) 사운드 파일의 재생시간은 대략 4초 가량 되며(너무 길다. 짧막한 총성소리에 비해 너무 긴 재생 시간이다. ㅡ,ㅡ;) 스페이스 키를 계속 누르고 있을 경우 소리가 끊임없이 나도록 해야 하기 때문에 50이라는 좀 과한(?) 값을 지정했다. (이렇게 해도 플레이타임이 길어서 매끄럽지 못하다.) 예제에서는 사운드 재생만이 목적이기 때문에 이러한 과도한 값을 지정했지만 실제 게임 개발시에는 자원의 낭비 및 성능의 저해가 없는 수준에서 적절한 선택을 해야 할 것이다.

 

참고로 크롬 브라우저의 경우 한번 재생한 Audio를 재사용 하기 위해서는 다시 로드해야 하는것을 주의하기 바라며 기타 코드는 HTML5의 Audio 요소를 사용하는 코드와 FireShot 객체를 호출하는 부분으로 이뤄져있다.

var sounds = []; 
var fireShot; 
var currentSoundLoadCount = 0;   

function init(){
 for(var i = 0; i < 50; i++){  
    var gunAudio = new Audio();
    gunAudio.src = 'audio/gun.mp3'; 
        
    gunAudio.addEventListener("canplaythrough", onSoundReadyComplete, false);  
    gunAudio.addEventListener("ended", function(){
       if(window.chrome) this.load();                    

         this.pause(); 
     },false); 
      
    document.body.appendChild(gunAudio);
  
    sounds.push({audio: gunAudio});  
 }               
}

 

function onSoundReadyComplete(){    
   if(++currentSoundLoadCount >= 50){         
     fireShot = new FireShot(sounds);             
 }
}

 

function onKeyDown(e){   
 if(e.keyCode = 32){        
    fireShot.playSound(); 
 }
}

 

window.addEventListener("load", init, false);
window.addEventListener("keydown",onKeyDown,false);

 

브라우저로 실행하여 사운드 효과를 감상(?)해 보자.

다시한번 말하지만, 사운드 파일의 재생시간과 동시 재생의 환경에 따라 적절히 수정을 가하며 테스트 해 보는 것이 좋다.