Sprite in gun.sprite.js (mootools 1.2)
Overview
대부분의 아케이드 게임에서(3D 이전)는 화면의 객체가 움직이는 것 처럼 보이게 하기위해서 스프라이트 이미지를 사용한다. 스프라이트 이미지는 움직이는 캐릭터의 순간순간 이미지를 연속해서 붙여놓은 큰 이미지이다. gun.sprite.js 의 Sprite 는 이 스프라이트 이미지를 특정 DOM element 안에서 애니메이션 되도록한다.
구글의 예를 보면 하단에 애니메이션되는 버튼들이 있는데 이는 플래시가 아닌 스프라이트 이미지를 이용한거다. 구글에서는 우측에 보이는 스프라이트 이미지를 이용해 이 효과를 만들었다.
[singlepic id="67" w="250" h="" mode="" float="left" ]
Sample
아직은 포스트 안에 실행되는 스크립트를 넣는 방법을 몰라 샘플 페이지를 따로 만들었다.
Download
gun.sprite.js v.20080909 / gun.sprite.js include sample
Usage
gun.sprite.js 는 mootools 1.2 를 기반으로 하기 때문에 항상 mootools를 다운로드해 항상 먼저 포함시켜야한다.
<script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="gun.sprite.js"></script> <script type="text/javascript"> var sprite = new gun.sprite.Sprite(element, options); </script>
Reference
arguments
- element : 스프라이트 이미지를 담을 DOM 객체
- options: 선택사항들 아래 참조
options
- sprite: 스프라이트로 사용할 이미지. CSS 스타일의 ‘background-image’ 에 들어가는 형식
ex) url(…..gif) - movies: 스프라이트에 포함된 무비 갯수. 일련의 연속된 이미지 집합을 movie 로 정의한다.
- movieName: [열,행]
- 혹은 무비의 갯수 : 이 경우 무비들은 자동으로 아래와같이 설정된다.
movie1:[1,1], movie2[2,1], movie2[3,1] …
- frames: 프레임 목록.
- movieName: {frameName: framePosition, frameName: framePosition}
- 생략 가능하다.
- framesPerMovie: 무비당 프레임의 갯수
- frameSize: [넓이, 높이] 각 프레임의 크기. 모든 프레임의 크기는 같아야 한다.
- movie: 시작 무비. 숫자 혹은 무비명 (movies 내에 포함되어야 한다.) 기본값: 1
- frame: 시작 프레임. 프레임 숫자 혹은 프레임 명. 기본값: 1
- autoPlay: true 이면 객체 생성과 동시에 무비를 플레이 한다. 기본값:false
- speed: play 시에 각 프레임사이의 간격. 기본값:80 (1초는 1000)
- wrap: true면 마지막 프레임에서 첫번째 프레임으로 반복한다. false 면 마지막 프레임에서 재생을 멈춘다.
- toRight: true면 스프라이트에서 우측으로 프레임이 진행된다. 기본값:true
events
- MOVIE_FINISH : 각 무비의 재생이 끝나는 마지막 프레임
- movie: 재생 종료된 무비명
- PLAY: 무비의 재생시 발생
- movie; 현재 재생중인 무비명
- frame: 현재 프레임
- REVERSE: 재생방향 변경시
- movie: 현재 무비명
- frame: 현재 프레임
- STOP: 재생 종료시
- movie: 현재 무비명
- frame: 현재 프레임
- ENTER_FRAME: 매 프레임마다 발생
- movie: 현재 무비명
- frame: 현재 프레임
methods
- setSprite (sprite:String)
실행중에 스프라이트 이미지를 변경한다.- sprite: 변경할 이미지. 형식은 options 의 sprite 와 같다.
- setMovies (movies:Object)
실행중에 무비 목록을 변경한다. 스프라이트 변경 후 사용할 수 있다.- movies: options 의 movies와 동일한 형식
- goto (frame:int)
특정 프레임으로 이동하고 이미지를 설정한다. - setMovie(movie: int | string)
현재 무비를 설정 - setFrame(frame: int | string)
현재 프레임을 설정 - play()
재생을 시작 - reverse()
재생 방향을 반대로 변경 - stop()
재생을 종료 - stepFrame()
프레임 한단계 전진
관련 포스트
개발 | 
gun.sprite.js, javascript, mootools, sprite
:
예전 홈페이지에서 mootools에 관한 글을 정말 재미있게 읽다가,,
돌연 홈페이지가 폐쇠되서 무척 서운했었는데,,
이런 좋은글로 다시 뵙게 되니 오늘 참 럭키한 하루네요^^
hym77 // 관심 가져 주셔서 감사합니다. 계속 좋은 정보를 드렸으면 좋겠네요. 좋은 하루 되세요.