2011년 2월 9일 수요일

라이브월페이퍼 만들기 (Making livewallpaper)

어제 라이브 월페이퍼 제작에 관한 메일 답변을 올립니다.
혹시 관심있으신 분들이 있으실까해서요..

========================================================================
안녕하세요.
라이브월페이퍼 개발에 관심이 있으신거 같네요^^

라이브월페이퍼가 어플을 개발하는 것에 비하면 큰 기술없이 접근할 수 있는 분야라 저도 뛰어들었고
구글 마켓의 경우 엔터테인먼트 카테고리 다음으로 많은 어플이 올라오고 있어서 경쟁도 치열하답니다.
밤에 리스트 상위로 올려놓고 자고 일어나면 한참 밀려있고..;; 저는 3카피를 만들어서 주기적으로 올려주고 있는데 생각보다 수입이 많이 나지 않고 있습니다. 또, 올해부터 구글 자체적으로 앱도 개발하고 업체도 지원을 해서 무료 앱을 많이 만들어 올린다고 하는데 라이브월페이퍼 쪽은 안건드려 줬으면 하는데... 어찌될지 모르겠습니다.

제가 프로그래머가 아니고 디자이너 인데 아래 어플의 소스들이 제가 3개월여 더듬더듬 하나씩 공부한 내용들의 전부이고, 조금씩 응용해서 어플들을 만들고 있는 처지라 통째로 드리지 못하는 점  이해해주시기 바랍니다.
또 제가 thread 를 제대로 다루지 못해서 큐브 3d 예제와 같은 핸들러 방식을 이용하는데 퍼포먼스에 문제가 있습니다.


참고하시라고 고수분의 블로그와 부분적으로 만드는 방법을 설명 드립니다.

http://foxmann.blog.me/  // 저녁놀님 블로그

http://www.androidside.com/bbs/board.php?bo_table=421&wr_id=167
//저녁놀님이 제 질문에 답변 해주시느라고 손수 제작하신 소스..


이 블로그의 주인이신 저녁놀님에게 처음에 도움을 많이 받아서 만들었습니다. 그 과정에서 위의 소스를 직접 제작하셨고
안드로이드사이드에서 강좌도 진행중이시고 대부분의 이미지 다루는 방법은 위 블로그에서 찾으실 수 있습니다.
위에 말씀드렸지만 저는 핸들러 방식을 사용하는데 thread 방식이 좋다고 하여 여러번 시도하였으나 단말기가 먹통이 되는 현상에 겁먹고 그냥 핸들러로 돌리고 있습니다..;;

위에 빠진 내용중에..

1. 일반 이미지 처럼 좌우로 배경 스크롤 되게 하기
Background image scrolling

public void onOffsetsChanged(float xOffset, float yOffset, float xStep, float yStep,
                                       int xPixels, int yPixels) {
           xp = xPixels;
  }
부분에서 xPixels 가 홈스크린을 여러개 설정했을때 홈스크린 순서에 따라서 배경이미지가 좌우로  약간씩 이동되어 놓이게 되는 위치가 됩니다.

만약 홈스크린이 3개 설정되어있고 해상도가 480x800 이라면, 첫번째 홈스크린에서 xpixels은 0, 두번째는 -240, 세번째는 -480 이됩니다.

if user have 3 homescreen and resolution is 480x800 ,xPixel is first is 0, second is -240, last is -480

여기에 기반해서 좌우로 스크롤되면 물체가 따라다니도록 만들 수가 있습니다.
바로 따라가려면 그냥 + 얼마 해주면 배경의 일정한 장소에 물체가 있을 것이구요.
거리의 차를 몇등분해서 좁혀가도록 하는 방법으로 스스륵 이동할 수 있죠..

Gradually moves
dx += (xp-dx)/10;

이런 식으로 사용하고 있습니다.
그럼 feel free 와 bored seal, Night scenery  의 배경 스크롤 및 케릭터가 따라서 굴러가는게 설명 되었다고 봅니다.

아 굴러가는 것은..

http://foxmann.blog.me/90095169727

여기 켄버스를 회전 시키는걸 참고 하세요.

2. water drop  과 bored seal 의 이미지 그리기

이건 path 를 이용해서 그렸습니다. 코너 둥굴리기, 흐리게 하기 등 필터 관해 아래 블로그를 참고하세요
http://blog.naver.com/schweine7?Redirect=Log&logNo=40112889175

water drop 은  블러 필러로 그리고 위에 다시 물방울을 그리고 그 위에 다시 그라데이션으로 광택을 그린겁니다. 3번 그리는거죠..
bored seal 은 삼각함수로 원을 그리면서 길고 짧은 걸 반복해서 그리되 짧은 부분은 둥글려지지 않게 두번 그리는 거죠. 간격이 좁으면 둥글려지지 못하니까요.. 이건 해보시는 방법 밖에...

3. 센서 적용하기
vitamin water 에 사용되었는데 이건 제 블로그의 포스트를 링크합니다.

http://barraganslivewallpapers.blogspot.com/2011/01/sensor-apply-to-livewallpaper.html

5. 터치에 반응하기

이건 머... 위에 저녁놀님 소스에서...
onTouchEvent 부분에

if (event.getAction() == MotionEvent.ACTION_MOVE) {
                mTouchX = (int)event.getX();
                mTouchY = (int)event.getY();
            } else {
                mTouchX = 0;
                mTouchY = 0;
            }

 이런식으로 변수를 하나 뽑아서 bored seal 같은 경우에는 그냥 터치가 되었는지 감지해서 애니메이션을 줬구요.
water drop 같은 경우는 삼각함수 cos 값으로 출렁임을 만들었습니다. 근데 좀 정교하지 못해서 아직 해결해야할 부분입니다..^^;

아.. 출렁임 같은 경우에 api demo ( 안드로이드 sdk에 기본으로 깔림) 에 graphic > polytopoly 부분을 참고하셔서 변형을 주시면 됩니다.

6. night scenery 에 물결.. waves...
이건 겔럭시s 에 기본으로 들어있는 낙엽 떨어지는 물결과 비교하면 참 허접한 물결인데요..^^;;
이건 cipRect 를 이용한 겁니다. 역시 api demo > graphic > clipping 에서 근거를 찾으실 수 있습니다.

두장이미지가 있는데, 하나는 배경에 깔리고
다른 하나는 물이 있는 부분만 있고 나머지는 투명한데 그게 이미지 자체가 약간 아래로 내려와 있습니다.

그걸 작은 clipRect을 일정 간격으로 반복시켜서 그 부분만 보이게 하면서 clipRect 을 약간씩 아래로 이동시킵니다.

two images, one is background and another one is transparent except the area of water, and that image is drawn little moved down.
A long thin horizontal (ex. 960x5 pixels) clipRects is covered second imaage and move slow down.


참 별거아니죠^0^;

그럼 공부하시면서 잘 안되시는 부분은 (부분적으로..) 물어보시면 아는데까지 답변드릴게요.
전체 소스를 드리지 못하는 점 다시 한번 양해 바랍니다.

아 그리고 이 이메일은 제 블로그에 게시하겠습니다. 또, 궁금해 하시는 분들이 있으실거 같아서요^^
감사합니다.^^



barragan2

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

barragan님 안녕하세요?

저는 안드로이드 입문한지 얼마 안되었고, 배경화면 부분을 공부하고있습니다.
그런중에 님의 홈페이지를 알게됐고,
홈페이지도 마켓도 보면서 신기한거 많이 보고있거든요^^ 감사합니다^^

올때마다 저건 어떻게 만들지..하면서 생각했는데...
해서...어려우시겠지만 혹시 제게도 프로그램 소스를 공유해 주실 수 있는지 하여 메일을
드립니다~;;;;;;;;;

제가 공부해보고 싶은 소스는,
1번. Water drop Live (올리신날 2011.2)
2번. Vitamin Water Livewallpaper (2010.12)
이렇게 두개 넘넘 배워보고 싶구요^^/

3번. Feel Free LiveWallpaper  (2010.10)
4번. Bored Seal LiveWallpaper (2011.1)
5번. Night Scenery Livewallpaper (2011.1)
추가로 3번이랑, 4번..5번..도 배워보고 싶거든요 ㅠㅠ;;;;;

어려운 부탁인줄 알지만 혹시나 해서 메일드립니다;;;;;;;;;
제가 초보자라 가능하시다면 주석 많이 많이 달아서 주시면 넘넘넘넘 감사드려용^---------^/

좋은 소식있었으면 좋겠어요^^
그럼 안녕히계세요^^

댓글 없음:

댓글 쓰기