비동기 방식으로 image from URL 구현시 유의사항

모바일앱의 보편적인 UI에서, 동적으로 URL을 통해 받아오는 리스트의 썸네일 이미지는 스레드를 이용하여 비동식으로 처리를 해준다.

이는, 다 아시다시피 웹서버와 연결중에도, 사용자가 다른 작업을 할 수 있게 하기 위함이다.

Cocos2d-x에서도 동일한 기능을 구현하기 위해서,

먼저 접근한 방법은,

1. 동시에 여러장의 이미지를 받아오는 프로세스를 각각 별도의 스레드로 생성한다.
2. 각각의 스레드에서 이미지  데이터를 텍스쳐 메모리에 저장한다.(OpenGL은 이미지를 Texture 메모리에 올린 다음에 화면에 그려주는 방식임.)
3. 저장이 완료되면, 이미지 텍스터 클래스인 CCSprite 또는 CCSpriteFrame에 이미지 데이터가 저장된 Texture메모리를 설정해주고 나서, 객체 교체를 해준다.

위와 같은 절차로 진행하면,

이미지 텍스쳐 영역이 검은색으로 표시된다.

문제의 원인은, OpenGL은 Main Thread를 제외한 영역에서 텍스쳐 메모리의 이미지 교체가 동적으로 동작하지 않는다는 것이다.

이는, iOS 개발에서도 동일하게 경험했던 내용이다.

Coco2d-x 포럼을 검색해보니, 프로세스중에 Sub-Thread에서 Main-Thread로 이동하는 기능은 추후에 업데이트 될 항목이라는 것이다. ㅜㅜ

차선책은, 2번 단계를 아래와 같은 절차로 바꿔서 구현해주면 해결된다.

1. 동시에 여러장의 이미지를 받아오는 프로세스를 각각 별도의 스레드를 생성한다.
2. 각각의 스레드에서 이미지  데이터를 디바이스에 파일로 저장한다.
3. 저장이 완료되면, 디바이스 로컬영역에 저장된 이미지를 불러와서 객체 교체를 해준다.

 

혹시나 해서, Cocos2d-x로 만든 게임을 다운받아서 동적으로 이미지를 불러오는 부분으로 의심되는 부분을 실행하고 나서 App파일을 열어보니, 역시나, 디바이스에 이미지를 저장하고 있더라.

역시, 다들 같은 길을 걷고 있었더군요.ㅋ