이것을 찾게 된 이유?
이 스프라이트 이미지에 대해 알게 된 것은 사실 게임에서이다. 게임에서 여러프레임을 통해 움직이는 캐릭터를 하나의 이미지 안에 넣어놓고, 원하는 부분의 영역의 좌표를 이용하여 사용하는 것을 보았다.
RPG-XP 같은 게임 제작에서도 게임 타일이 모두 스프라이트 형식이었던 걸로 기억난다.
올해 6월 쯤 VampireSurvivor 라는 게임이 JavaScript를 통해 제작되었다는 것을 알게 되었다. 그래서 나도 한번 JavaScript를 더 잘 다룰 수 있게 해볼 겸 javascript를 이용한 반응 속도 게임을 만들어 보기로 해보았다.
결과물은 다음과 같다.
Fast Reactor
엄청나게도 플레이스토어에도 출시를 했다.
Fast Reactor 플레이 스토어
문제점
반응속도게임에서 몇가지 이미지를 사용해야 했고, 이미지를 빠른 시간 내에 계속 교체하는 형식으로 게임을 제작하였다. 여기에서 문제가 발생하였는데,
처음 코드를 짤 때 계속 이미지를 불러오는 형식으로 했는데, 이때 이미지가 불러오는 시간보다 게임에서 이미지를 요청하는 시간이 짧아서 이미지가 계속 출력이 안되었다.
이것을 해결하기 위해 다음처럼 무지성으로 처음 시작할 때 이미지를 모두 서버에서 불러왔다.
<div>
<img class="setting" src="resources/img/info/1.png">
<img class="setting" src="resources/img/info/2.png">
<img class="setting" src="resources/img/info/3.png">
<img class="setting" src="resources/img/info/4.png">
<img class="setting" src="resources/img/info/5.png">
<img class="setting" src="resources/img/info/6.png">
<img class="setting" src="resources/img/info/e1.png">
<img class="setting" src="resources/img/info/e2.png">
<img class="setting" src="resources/img/info/e3.png">
<img class="setting" src="resources/img/info/e4.png">
<img class="setting" src="resources/img/info/e5.png">
<img class="setting" src="resources/img/info/e6.png">
<img class="setting" src="resources/img/alien/0.png">
<img class="setting" src="resources/img/alien/1.png">
<img class="setting" src="resources/img/alien/2.png">
<img class="setting"src="resources/img/alien/alien.png">
<img class="setting"src="resources/img/char/0.png">
<img class="setting"src="resources/img/char/1.png">
<img class="setting"src="resources/img/char/2.png">
<img class="setting"src="resources/img/char/3.png">
<img class="setting"src="resources/img/char/4.png">
<img class="setting"src="resources/img/char/5.png">
<img class="setting"src="resources/img/match/m0.png">
<img class="setting"src="resources/img/match/m1.png">
<img class="setting"src="resources/img/match/m2.png">
<img class="setting"src="resources/img/match/m3.png">
<img class="setting"src="resources/img/match/f0.png">
<img class="setting"src="resources/img/match/f1.png">
<img class="setting" src="resources/img/match/f2.png">
<img class="setting"src="resources/img/match/f3.png">
<img class="setting"src="resources/img/info/info.png">
<img class="setting"src="resources/img/info/info2.png">
<img class="setting"src="resources/img/info/info3.png">
<img class="setting"src="resources/img/info/info4.png">
<img class="setting"src="resources/img/info/einfo.png">
<img class="setting"src="resources/img/info/einfo4.png">
<img class="setting"src="resources/img/info/info5.png">
<img class="setting"src="resources/img/info/info6.png">
</div>CSS Sprites
이를 조금 개선할 수 없을까 하여 여러가지 자료들을 찾아보던중 css Sprites에 대해 알게 되었다.
이는 여러개의 이미지를 하나로 만들어서 사용하는 것으로, 
*다음은 네이버의 sprites 이미지이다.
다음처럼 이미지를 하나를 불러온 후에 원하는 부분에 이미지 영역의 좌표를 이용하여 가져오는 것을 말한다.
이를 사용하게 된다면, 여러개의 이미지 요청으로 인해 네트워크 지연이 일어나서 사이트를 운영할 때 불편함을 주지 않고, 한번의 요청으로 빠르게 사용할 수 있다.
마무리
아직 sprites 이미지를 적용해보지 않았지만, 다음 프로젝트나 개인 연구를 할 때 사용해볼만 할 것같다.
