HTML5 Game을 개발하다보면 Image, Audio, Video등의 Resource들을 Pre-Load할 필요가 있습니다.
굳이 Game이 아니더라도 필요한 Resource들을 Pre-Load 해두면 도음이 되는 경우는 많이 있습니다.
이때 사용하면 좋은 Library가 있어서 소개합니다.
Cut the Rope를 만든 개발팀에서 Cut the Rope를 HTML5로 Migrate할 때 사용한 Library인데요. MIT License로 공개되었습니다.
사용방법
1. 긷에서 PxLoader(https://github.com/thinkpixellab/PxLoader)를 다운받습니다.
2. Project에 필요한 파일을 import합니다.
|
1 2 |
<script type="text/javascript" src="lib/PxLoader.js"></script> <script type="text/javascript" src="lib/PxLoaderImage.js"></script> |
3. PxLoader 객체를 생성한 뒤 Pre-Load할 이미지들을 추가합니다.
|
1 2 3 4 |
var loader = new PxLoader(); loader.addImage("http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/PS3-Consoles-Set.jpg/220px-PS3-Consoles-Set.jpg"); loader.addImage("http://www.extremetech.com/wp-content/uploads/2012/04/ps3-repair-san-diego.jpeg"); loader.addImage("http://cyimg.global.cyworld.com/G001001/2011/11/30/49/Life_with_playstation.jpg"); |
4. Event Callback을 등록한 뒤 Pre-Load를 시작합니다.
|
1 2 3 4 5 6 7 8 9 |
loader.addProgressListener(function(e) { console.dir(e); }); loader.addCompletionListener(function() { alert('Complete'); }); loader.start(); |
자주 사용될 부분은 위에서 소개한 이미지 Pre-Load 기능일 것 같고, 그 외의 다양한 기능들은 사이트에(http://thinkpixellab.com/pxloader/) 데모와 함께 자세하게 소개되어 있습니다. 관심 있으신 분들은 한번 둘러보세요.
답글 남기기
로그인을 해야 댓글을 남길 수 있습니다.