[CreateJS] PreloadJS - Multiple Queues 를 이용해 Resource 병렬(동시) 다운로드 방법

Example URL: http://chan-wedding.appspot.com/#/game

GitHub URL: https://github.com/1004lucifer/Angular_CreateJS_Wedding


CreateJS를 이용해 제작한 위의 Example 링크에서 이미지가 많다보니 단일 Queue를 이용한 경우에는 처음 로딩 시 10초가 넘어가는 로딩속도를 보여줬다.
(크롬 개발자도구를 이용해서 확인 시 아래와 같이 Image Resource 들을 순차적으로 로딩하는 것을 확인 할 수 있었다.)

브라우저의 기본 사양은 같은 도메인에서 동시에 여러개의 리소스들을 동시에 다운로드가 가능하다. http://sgdev-blog.blogspot.kr/2014/01/maximum-concurrent-connection-to-same.html

아무리 Canvas를 이용한 게임이라지만 15초 가까이 되는 로딩속도를 나는 견딜 수 가 없었다.

제목은 거창하지만 Multiple Queues 라는게 그냥 LoadQueue 를 여러개 만들어서 loadManifest 함수를 각각 수행하는 것이다.

처음에는 createjs.LoadQueue 객체를 하나로 loadManifest 함수를 실행 시 이미지를 병렬로 같이 받아올 줄 알았는데 아무리 찾아봐도 loadManifest 함수를 실행 시 병렬로 리소스를 가져오는 부분은 없었다.
(말그대로 Multiple Queues 이다보니 Queue를 여러개 만들어서 로딩이 가능한 것이었다.)





https://github.com/1004lucifer/Angular_CreateJS_Wedding/blob/master/app/scripts/services/loaderSvc.js

위의 소스와 같이 여러개의 Queue를 생성한 뒤 각각 loadManifest를 수행하도록 만들었다.

아래와 같이 코드를 수행 시 각각의 manifest를 병렬로 로딩하는 것을 볼 수 있다.

loaderSvc.getLoader().addEventListener("complete", handleComplete);
loaderSvc.getLoader2().addEventListener("complete", handleComplete2);
loaderSvc.getLoader3().addEventListener("complete", handleComplete3);
loaderSvc.loadAssets();
loaderSvc.loadAssets2();
loaderSvc.loadAssets3();

나의 경우에는 병렬로 리소스를 다운로드 해보니 게임에 문제가 생겨서 첫 manifest 로딩 후 바로 게임이 진행되도록 응답속도만 빠르게 수정했다.
그렇기 때문에 리소스를 로딩하는 영역을 나눈 것 외에 병렬로 이미지를 다운로드 하도록 수정하지 못했다. => Link

대신 일단 화면이 보이인 후 사용자의 액션이 취할 수 있게 만든 다음에 다음 리소스들을 지속적으로 다운로드 한다.