카카오톡 움직이는 이모티콘을 gif 로 만들어보기

README.md

준비물

aosp 소스코드 & 이걸 eng 또는 userdebug 모드로 빌드한 이미지가 flash 된 넥서스 단말(jdb 만 있어도 될 것 같은데 아직 해보지는 않았음)

aosp 빌드환경을 갖추고 싶다? 여기로!!

이클립스 세팅

빌드된 aosp 코드와 이클립스를 연결해놔야 됨. 여기 참고

움직이는 이모티콘 동작 방식

• 카톡의 이모티콘 데이터는 모두 /sdcard/Android/data/com.kakao.talk/cache/emoticon_dir 에 저장되어 있음
• file 로 파일 타입을 보면 대부분 png 타입인데 간혹 data 타입이 있음. 일단 이놈들이 움직이는 이모티콘 이라고 추측
• data 타입 파일들은 나중에 lib/libdigitalitem_image_decoder.so 를 통해 디코딩됨.(이때 인자중에 isDecrypt 가 있는 걸로 봐선 암호화 되어 있는듯?)

저 so 를 사용해 디코딩 하는건 나중에 시도해보자

• 디코딩되면 ImageView 를 상속한 AnimatedItemImageView 를 통해 이미지를 뿌림
• 이모티콘이 움직이는건 android 의 animation framework 를 쓰지 않고 디코딩된 이미지를 한 프레임씩 Drawable 로 만들어 ImageView.setImageDrawable 함수를 통해 ImageView 에 세팅
• 즉, ImageView.setImageDrawable에 브레이크 포인트를 걸고 전달된 Drawable의 비트맵 데이터를 png 파일로 저장하면 한 프레임씩 뜰 수 있지 않을까?

노가다 시작

• 카톡을 실행해 아무 챗창에 진입.
• 챗창에 움직이는 이모티콘하나 보내고, 이모티콘이 멈출때까지 기다림
• 이클립스를 켜서 com.kakao.talk 프로세스에 디버거 붙이기(여기 참고)
• 디버거 붙으면 ImageView.setImageDrawable 함수의 첫라인에 브레이크 포인트를 걸고
• 이모티콘을 클릭하면 브레이크 포인트가 걸림
• 이클립스의 display 뷰를 열어 아래의 코드를 inspect

String path =  "sdcard/emoji_" + System.currentTimeMillis() + ".png";
java.io.FileOutputStream out = new java.io.FileOutputStream(new java.io.File(path));
((BitmapDrawable)drawable).getBitmap().compress(Bitmap.CompressFormat.PNG, 100, out);

• resume
• 브레이크 포인트가 다시 걸리면 inspect 과정 반복

• 움직이는 이모티콘은 4번 반복 재생되는데 어디까지 캡쳐할지는 알아서 결정
• 대충 찍었으면 /sdcard/emoji_*.png 파일들을 꺼냄
• png 들은 ffmpeg 으로 비디오로 묶을 수 있음

$ ffmpeg -i %d.png -vcodec png hehe.mov

• 생성된 비디오 파일을 gif로 변환하면 끝

https://github.com/sublimehq/anim_encoder 도 한번 시도해 보자.

왜 이런 글을 쓰나?

그냥 카톡의 이모티콘을 gif로 써보고 싶어서.

으하하하 님이 짱입니다