언어/기타
2012.10.27 00:49

[Android] 멀티스크린 노하우

조회 수 1462 추천 수 3 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

아마, 창조도시에서 개임개발자의 꿈을 꾸고 만들기툴을 사용하는

 

사람들이 많을 껍니다.

 

저 또한 중고딩 시절 그러했었고, 어느덧 대학생이 되어

 

이렇게 현역 프로그래머의 길을 걷고 있습니다.

 

====================================================================

 

PC게임 시장에서 Offline 게임 시장은 패망했습니다.

 

CD Package 유통망 자체가 국내에서는 파탄난 지경인데다가

 

아무리 보안을 철저히 해도, 출시 일주일이면 크랙판이 나돌아다닙니다.

 

뭐, PC 기반 Online게임의 포부를 가진 분이라면 괜찮지만

 

솔직히 모바일 게임이 100배 쉽습니다. PC보다는...

 

====================================================================

 

모바일 게임에서 가장 큰 문제는

 

안드로이드의 멀티스크린입니다.

 

일단 사라져버린

 

QVGA 240 * 320

HVGA 320 * 480 을 비롯하여

 

WVGA 480*800 / 480 * 854

qHD 540 * 960

WSVGA 600 * 1024

HD 720 * 1280

WXVGA 800 * 1280 , 768 * 1280

 

해상도가 있습니다.

여기에 새로나올 해상도가 1200 * 2000 대인 것을 감안하면 (TV size)

개발자의 멀티스크린 지원 능력은 필수입니다.

 

눈썰미 있는 분들은 눈치챘겠지만,

해상도마다 가로세로 비율이 제각각입니다.

 

======================================================================

 

1) Bitmap은 Rect로 그리자

 

대부분의 프로그래머가 Bitmap Drawing을 좌표로 했습니다.

그러나 Rect로 그리게 되면, Application에서 Rect에 맞춰서 Resizing을 하게 됩니다.

어느정도의 안티얼라이싱은 Paint에서 감당할 수 있습니다.

Window Programming을하다가 넘어오면, 가장 많이 헤맬 것이 여깁니다.

습관이 좌표로 Bitmap을 드로잉하다가, Rect로 그리려니 번거롭죠.

하지만 안드로이드에서 Bitmap 그리기의 기본은 Rect입니다.

 

2) Default Screen의 크기를 정하자.

 개발할 때 기준이 되는 Screen 크기입니다. 얼마전까지만해도 480 * 800 이 대세였는데

 요 근래 들어서 720 * 1280 이 대세가 되었습니다.

 일단 이런식으로 디폴트 스크린 크기를 정하면

 DeviceScreen이랑 비교를 하면, scale_w 값과 scale_h값이 나오게 됩니다.

비율 좀 깨지더라도 화면에 꽉채우고 싶으면, scale_w값과 scale_h값을 각각 가로 세로에

적용하여 로딩 시 이미지를 늘리고 줄이면 되었으나....

옵티머스 뷰2라는 제품이 3 : 4 비율을 들고 나왔으므로

scale_w, scale_h값 중 작은 값을 적용하게 됩니다.

이렇게 되면, 더 긴 쪽은 여백이 남게 되는데 이 여백은 검은색으로 채색을 하시면 됩니다.

 

3) Drawable-hdpi 폴더를 너무 믿지 말자

사실 안드로이드는 해상도에 맞추어 이미지를 자동 리사이징 해줍니다.

해상도별로 폴더를 따로 나누어서 이에 맞추어서 사용할 수 있게 해놓습니다.

때문에 많은 개발자들이...심지어는 잔뼈 굵은 중견개발자들도

(x, y)로 이미지를 그립니다.

그러나 제조업체의 중구난방식의 제작 때문에

한계가 있습니다.

앞서 언급한 해상도는 Google에서 어느정도 정한 공식 해상도이고

이 외에 제조사 마음대로 만든 해상도도 많습니다.

대표적인게 삼성 갤럭시탭으로, 하단 바를 소프트웨어로 구현을 하였기 때문에

좌표로 이미지를 뿌릴 경우, 하단바에 이미지가 씹어먹히게 됩니다.

즉, 쉽게 말해 갤럭시탭은 768 * 1280 해상도이지만, (Portrait)기준으로

하단바를 감안하면, 갤럭시노트와 얼추 비슷한 가로세로비율을 갖게 됩니다.

같은 hdpi라고 하지만, 탭의 좌표가 더 적죠.

이미지 리사이징 과정이 없으면 어플리케이션은 안드로메다로 가는 겁니다.

 

4) Sprite는 따로 저장하자.

스프라이트(프레임 이미지)를 각각의 파일로 저장해 만들었을 때의 장점은

최악의 상황에서도 크기만 다른 온전한 이미지가 출력이 되기 때문입니다.

물론 하나의 통이미지를 불러와서 이것을 한칸 한칸 뜯어내서 그리면

이상적이겠지만....

이게 비추인 이유가 뭐냐하면

 

1픽셀의 손실이 반드시 발생하기 때문입니다.

 

scale_w, scale_h는 실수값이고

pixel은 정수값이니 형 변환에서 발생하는 문제입니다.

가로세로 비율이 똑같은

480 * 800 // 768 * 1280을 놓고 봅시다.

가로세로비율은 0.625 : 1 입니다.

즉, WVGA에서 Chpset 32 * 32의 크기는

768 * 1280의 탭(하드웨어 버튼을 가진 탭)에서는

51.2Pixcel이 되어버립니다.

픽셀이 인트형 정수이므로 세로 resizing된 셀은

51*51픽셀이 되어버립니다.

잘못만들면 캐릭터 프레임이 돌아갈 때 마다 옆에서 픽셀벽이 깜빡깜빡거리게 됩니다.

 

어차피 따로따로 개별저장을 하던, Sprite로 저장을 하던

저장되는 이미지 크기는 똑같습니다.

그리고 요즘 누가 쌩코드로 그림 불러오나요?

다 XML로 정리한다음에 읽어들여서 불러오지...

 

5 Loading할 때, 이미지를 리사이징하자.

 

DefaultScreen은 상수이고...

DeviceScreen도 상수이므로...Application 구동 시 MainActivity에서

DeviceScreen의 정보를 전달받으면

scale_w, scale_h값을 구할 수 있습니다.

가로세로비율고정이라면 두 값 중 작은 값으로 리사이징을 하면 됩니다.

 

물론 리사이징 없이 canvas.drawBitmap(bmp, null, rect, null);

로 그려버리면 되나...

도트튑니다. 안티얼라이싱이 없기 때문에, 확대 축소 다 튀죠

 

그래서 많이 쓰는 방법이

Paint p = new Paint();

p.setAntiAlias(true);
p.setFilterBitmap(true);
p.setDither(true);

이겁니다.

canvas.drawBitmap(bmp, null, rect, p);

이렇게 하면 안티얼라이싱이 되어서 부드럽게 나옵니다.

근데 느려지죠.

이걸로 BackgroundImage를 그리면, 지연이 발생합니다.

그럼 우쩌냐?

 

scale_w, scale_h가 있습니다.

네 Bitmap을 Load할 때, 이 비율값을 적용해서 메모리에 Load합니다.

후에 이것을 사용하면 편하죠.

1번 안얼이 적용되었기 때문에

canvas.drawBitmap(bmp, null, rect, null);  이렇게 그려도 부드럽게 그려집니다.

 

 

 

 

 

?
  • ?
    세이엘 2012.10.27 02:37
    굉장히 유익한 정보 감사합니다. 저도 480 x 800 기준으로 개발하면서 다중 해상도 생각안했다가 굉장히 많이 돌아갔었어요.. ㅠㅠ
  • profile
    [카스]해커 2012.10.27 17:18
    큰 도움이 되었습니다. 좋은 정보 정말 감사합니다.
    행복한 시간되세요.

  1. 페인터(코럴) 브러쉬 세팅 공유 :)

    Date2015.03.28 Category언어/기타 By샤이귤군 Views1474
    Read More
  2. 유화재료 & 기법 살짝 팁 공유 (매우 깁니다 -3-)

    Date2015.03.28 Category언어/기타 By샤이귤군 Views817
    Read More
  3. 픽사에서 텍스쳐 꽁짜로 뿌림ㅋ

    Date2015.03.26 Category언어/기타 By사람님(대회참가) Views825
    Read More
  4. 알만툴이 아닌 새로운 툴강좌 (이클립스 강좌)

    Date2014.10.07 CategoryRPG Maker By이클립스 Views1338
    Read More
  5. 이클립스 강좌 1 AVD생성 밑 실행

    Date2014.10.07 CategoryRPG Maker By이클립스 Views877
    Read More
  6. [XP, VX, VXA] 시야제한 만들기

    Date2014.08.16 CategoryRPG Maker By빙냥이 Views2610
    Read More
  7. 처음 제작하시는분들 흔히 일어나는 실수

    Date2014.07.12 CategoryRPG Maker By지브릴 Views1926
    Read More
  8. 게임제작 시작하시는분들을위한 강좌!(외부링크)

    Date2013.09.23 CategoryRPG Maker Bydiget Views1736
    Read More
  9. 멀티해상도에 따른 속도와 가속도 값의 조절

    Date2013.01.13 Category언어/기타 ByMiDtics2 Views781
    Read More
  10. [Android] 멀티스크린 노하우

    Date2012.10.27 Category언어/기타 ByMiDtics2 Views1462
    Read More
  11. [정보] 일본의 RPG만들기 관련 커뮤니티

    Date2012.10.01 CategoryRPG Maker By비형랑 Views1136
    Read More
  12. 꼬마 캐릭터 쯔 꾸르

    Date2012.10.01 CategoryRPG Maker By비형랑 Views2574
    Read More
  13. rpg2003 액션알피지 간단한 예제

    Date2012.09.03 CategoryRPG Maker By아자2™ Views1090
    Read More
  14. SRPG95에서 MP 0 소모 마법의 활용.

    Date2012.06.30 CategoryRPG Maker By협객 Views1482
    Read More
  15. [쯔꾸르] 애기들 따라다니게 만들기

    Date2012.06.26 CategoryRPG Maker By Views1394
    Read More
  16. [js] 코드 압축 걸음마

    Date2012.06.12 Category언어/기타 By Views963
    Read More
  17. RPG2003용 플러그인 제작 SDK:DynRPG 의 설치와 적용 +@

    Date2012.05.08 CategoryRPG Maker By아름다운마을 Views1844
    Read More
  18. [css] css 겉핥기 핥핥

    Date2012.05.03 Category언어/기타 By Views853
    Read More
  19. [css, js] form - select안의 option들에 스타일 적용하기

    Date2012.04.28 Category언어/기타 By Views5198
    Read More
  20. [rpg2k] 바로가기를 이용해 테스트 플레이 실행하기

    Date2012.01.14 CategoryRPG Maker By베넘 Views1593
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 51 Next
/ 51






[개인정보취급방침] | [이용약관] | [제휴문의] | [후원창구] | [인디사이드연혁]

Copyright © 1999 - 2016 INdiSide.com/(주)씨엘쓰리디 All Rights Reserved.
인디사이드 운영자 : 천무(이지선) | kernys(김원배) | 사신지(김병국)