도트에서 움직이는 것처럼 착시현상을 주려면 이미지가 8장이 필요하다.
예를들면 친숙한 게임으로 메탈슬러그가 있는데 모덴군 군인들은 이러한 이미지로 구현이 된다.
(출처 : http://www.suitgames.com/forum/printthread.php?tid=3842&page=4)
이러한 이미지를 저장해서 불러올 때
여러 이미지에 각각의 동작을 그려 불러오면 속도가 느려지고 용량 또한 커지게 된다.
특히 과거의 메모리 16mb짜리를 쓰던 고전 게임들의 경우 이러한 단점이 영향이 컷다.
그래서 나온게 스프라이트 이미지로 여러 이미지를 하나의 시트에 모아놓은 형태이다.
이미지를 사용할 때 잘라서 어디 부분의 이미지를 불러와서 연속으로 보여주어
애니메이션처럼 보여주는 것이다.
좋은 스프라이트 이미지는 크기와 간격이 일정 한 것인데 사용하려면 이미지의 간격과 위치가 일정해야
코드에 쓰기 좋다. 해보면 알것이다. 전부 제각기 위치한다면 위치 잡기가 피곤해진다.
위의 병사 이미지를 활용한 예제를 확인해보자.
투명 이미지 파일 :
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "img/btn.png">
<style>
.soldier1{
width: 32px;
height: 42px;
background: url("img/MSspriteimg.png") 0 0;
}
.soldier2{
width: 33px;
height: 42px;
background: url("img/MSspriteimg.png") -32px 0;
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<img class="soldier1"/>
<!--테두리 제거 방법 1 : 투명 이미지-->
<img src="img/img_trans.png" class="soldier2"/>
<!--테두리 제거 방법 2 : 다른 태그 이용-->
<!--이미지 태그는 기본적으로 이미지 지정을 선언 시 안하면 테두리가 생긴다.-->
<div class="soldier1"></div>
<!--
img태그는 이미지가 없을 경우 테두리를 생성한다.
그래서 (투명)이미지를 넣어 준다.
이때 넣어준 이미지가 배경 이미지를 가릴 수 있어서
투명 이미지를 사용한다.
-->
</body>
</html>
결과는 다음과 같다.
한번 hover을 사용해서 마우스를 올렸을 때 이미지가 바뀌게 해보자.
게임처럼 움직이게 하기 위해선 java Script와 함께 코딩을 해야 가능하다.
+추가
http://www.spritecow.com/ 스프라이트 카우라는 사이트인데
이 사이트에 Open Image를 눌러 원하는 sprite 이미지를 띄어놓고
각 동작들을 클릭하면 아래와 같이 코드, 좌표를 잡아준다.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-12.배운걸 토대로 간단한 사이트 만들기 (0) | 2018.10.18 |
|---|---|
| [CSS]03-10.z-index, opacity (화면 순서, 투명도 조절) (0) | 2018.10.18 |
| [CSS]03-09.position(static, relative, absolute, fixed) 요소의 위치 속성 (0) | 2018.10.17 |
| [CSS]03-08.clear(float 정렬 줄 넘김) (0) | 2018.10.17 |
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |