Cocos2d-x 로 모바일 게임을 만들게 됐다. 내 기기에서 확인했을 때는 잘 나왔다. 다른 Android 기기에서 켜니 배치가 어긋나 있었다.
Table of contents
Open Table of contents
좌표를 숫자로 박아 뒀다
버튼 위치를 이렇게 적어 뒀다.
button->setPosition(ccp(240, 400));기기마다 화면 크기가 다르다. 내 기기는 가로가 480이라 240이 가운데인데, 가로가 320인 기기에서는 오른쪽 끝 밖이다. 같은 좌표가 다른 위치가 된다.
비율로 바꿨다
CCDirector 에서 화면 크기를 얻어 비율로 계산했다.
CCSize s = CCDirector::sharedDirector()->getWinSize();
button->setPosition(ccp(s.width * 0.5f, s.height * 0.5f));가운데가 어느 기기에서든 가운데가 됐다.
여기서 한 번 헷갈렸다. getWinSize() 와 getWinSizeInPixels() 가 따로 있다. 앞은 포인트이고 뒤는 실제 픽셀이다. setContentScaleFactor 를 준 상태면 둘이 다른 값이 된다. 배치는 포인트 쪽으로 하는 것이 맞았다.
그런데 이번엔 버튼이 작아 보였다. 이미지 크기가 픽셀로 고정돼 있어서다. 화면이 800일 때 버튼 100은 8분의 1이고 화면이 480이면 5분의 1쯤이다. 같은 100인데 화면에서 차지하는 비중이 다르다.
크기도 화면에 맞춰 조절했다. 기준 화면을 하나 잡고 그 비율로 키우거나 줄인다.
float scale = s.height / 800.0f;
button->setScale(scale);기준 화면 하나를 정해 두는 것이 요점이었다. 기준이 없으면 기기마다 따로 맞춰야 한다.
우리가 쓰는 판에는 이걸 대신 해 주는 것이 없었다. CCDirector 에 enableRetinaDisplay 는 있는데 iPhone 4 와 iPod touch 4 만 본다. Android 의 여러 해상도는 손으로 맞춰야 했다.
화면 비율이 다르면 또 어긋났다
크기를 맞췄는데도 어긋나는 기기가 있었다. 가로세로 비율이 달랐다. 높이를 맞추면 가로가 남거나 모자라고 너비를 맞추면 세로가 그렇다. 둘 다 맞출 수는 없다.
방법이 셋 있었다. 여백을 두면 전부 보이는 대신 검은 띠가 생긴다. 잘라내면 꽉 차는 대신 가장자리가 잘린다. 늘리면 꽉 차는 대신 그림이 찌그러진다. 찌그러지는 것은 바로 눈에 띄어서 뺐다.
여백 쪽은 CCEGLView 의 setViewPortInPoints 로 그릴 자리를 좁혀서 만든다.
배경과 버튼의 차이
남은 둘을 놓고 보다가 배경과 버튼의 성격이 다르다는 것을 알았다. 배경은 가장자리가 잘려도 되지만 버튼은 잘리면 못 누른다.
그래서 나눴다. 배경은 화면을 덮게 하고 버튼은 안전 영역 안에 뒀다. setAnchorPoint 를 가운데로 두면 배율을 바꿔도 기준점이 안 흔들린다. 하나로 정할 문제가 아니라 대상마다 다르게 정할 문제였다.
확인은 양 끝 기기로 했다. 가장 작은 화면과 가장 큰 화면과 가장 긴 비율을 본다. 그러면 가운데는 대체로 따라온다. 한 기기에서만 보면 그 기기에서만 맞는다.
이걸 나중에 고치느라 좌표를 전부 다시 썼다. 처음부터 비율로 썼으면 숫자만 다르게 적으면 될 일이었다. 이후로는 좌표를 비율로 쓰고 크기를 기준 화면 대비 배율로 쓰고 중요한 것을 안전 영역에 두는 셋을 처음부터 지켰다.
정리
- 좌표를 숫자로 박으면 기기마다 위치가 달라진다
getWinSize()로 화면 크기를 얻어 비율로 계산한다getWinSizeInPixels()는 실제 픽셀이라 값이 다르다. 배치는 포인트로 한다- 크기도 기준 화면 대비 배율로 조절한다
- 기준 화면 하나를 정해 두지 않으면 기기마다 따로 맞춰야 한다
- 화면 비율이 다르면 한쪽만 맞고 다른 쪽이 남는다
- 여백과 잘림과 찌그러짐 중 하나를 골라야 한다
- 배경과 버튼은 성격이 달라 다르게 처리한다
- 확인은 양 끝 기기로 한다. 가운데는 따라온다
- 나중에 고치면 전부 찾아 고쳐야 한다