Basic Screen Shapes
너비와 높이가 360×570인 이미지가 있다고 가정해 봅시다. 우리는 실제 화면보다 더 큰 배경이미지를 만들겁니다. 왜냐구요? 그 이미지를 여러 디바이스에서 다 사용할 거거든요. 안쪽 사각셩( inner rectangle)은 320×480 block 입니다. 아마 이미지의 맨 가장자리 부분은 화면 밖으로 나갈 겁니다. 이것을 iPhone 5 나 대부분의 안드로이드 폰 같은 tall device 에서는 이 이미지의 full height를 이용할 겁니다. 그 경우에도 왼쪽과 오른쪽 가장자리는 화면 밖으로 나가게 될 겁니다. 여러분이 좀 더 정사각형에 가까운 iPad 를 가지고 있다면 그 이미지는 위와 아래쪽 가장자리가 잘리고 왼쪽과 오른쪽은 모두 다(full width) 보일 겁니다. 이렇게 밖으로 나가는 부분은 “bleed area” 라고 합니다. 일반 인쇄를 할 때 종이 여백에 잉크가 번질 수도 있는 그런 여분의 공간을 말할 때 그 말을 사용합니다.
이제 어떻게 background 가 사용되는지 이해하고 직접 볼 수 있습니다. 바로 config.lua file 에 셋업하시면 됩니다. 이 파일은 standard Corona Lua file 이기 때문에 아래 사항을 구현하기 위해 몇가지 API 를 사용할 수 있습니다.
- read the pixel width/height of the device. 디바이스 너비 높이 얻기
- use math for various calculations. 다양한 계산을 위해 math 사용하기
- read the device model number. 디바이스 모델 번호 얻기
- perform string manipulations. string manipulation 사용하기
- use conditional “if-then-else” logic. if 문 사용하기
iPad Configuration
우리가 할 첫번째 작업은 앱이 실행되는 기기가 아이패드일 경우에 대한 코딩입니다. 아래 Corona API 로 모델 number 를 얻을 수 있습니다.
system.getInfo("model")
실제 지금 아이패드에서 실행하면 string iPad를 결과 값으로 얻으실 겁니다. 그런데 아마 애플은 조만간 이것을 바꿀 수도 있습니다. iPad Retina 뭐 이런걸로요. 그러니까 if 문을 사용해서 이런 경우에도 대비를 해 두는게 낫겠죠.
if ( string.sub( system.getInfo("model"), 1, 4 ) == "iPad" ) then
application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
코로나는 루아의 string.sub() 함수를 사용합니다. 디바이스 모델을 읽은 뒤 앞의 4글자만 취하게 되죠. 그러니까 애플이 iPad 뒤에 무엇을 넣던지 이 로직에서는 상관이 없겠죠. 이 경우 얻은 글자가 iPad이면 content table을 작성할 건데요. width and height parameters 들은 각각 360 and 480 으로 합니다. 여기서 너비를 360으로 하는 이유는 우리가 사용하는 샘플 이미지의 너비가 360 픽셀이기 때문입니다. 우리는 이 이미지를 아이패드 스크린에 맞게 이미지를 늘릴겁니다. 코로나는 기본으로 portrait 을 사용합니다. 만약 여러분 앱이 landscape 모드를 사용한다면 그 이미지를 portrait orientation 을 가정해서 거기에 맞게 너비와 높이를 정해야 합니다. 그러면 코로나가 자동으로 알아서 기기를 세웠을 때와 뉘었을 때에 맞게 알아서 이미지를 돌려 줍니다.
너비가 360 이니까 이제 높이를 계산해야죠. 이 높이도 iPad 의 화면에 딱 맞게 해야 합니다. iPad 스크린은 768X1024 입니다. 그리고 Retina iPad 인 경우는 1536X2048 이죠. (정확히 두배입니다. 그러니까 그 비율은 정확히 같은 겁니다.) 우선 첫번쨰로 1024를 768로 나눕니다. 그 결과는 1.33 이 됩니다. 그리고 높이를 얻기 위해 360X1.33을 합니다. 그러면 480이 되겠죠.
1024 / 768 = 1.33 --screen ratio (height:width) 1.33 x 360 = 480
iPhone5 Configuration
elseif ( string.sub( system.getInfo("model"), 1, 2 ) ==
"iP" and display.pixelHeight > 960 ) then
application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
아이폰의 경우는 모델 string 에서 첫 두글자만 취하겠습니다. iPad 하고 iPod Touch 둘 다 iP 로 시작하는데 왜 그렇게 하냐구요? 그래서 이것 말고 디바이스의 pixelHeight 를 구할 거거든요. (이 pixelHeight 프로퍼티는 Corona build #971 에서부터 지원했습니다. 그러니까 그 아래 버전을 사용하시는 분은 그 상위 버전을 download 하세요.) 만약 그 pixel heignt 가 960 보다 크다면 그 디바이스는 iPhone 5 가 되는 겁니다. (아니면 iPod Touch 최신버전이던가요.) 그 디바이스의 해상도는 640 X 1136 이니까 이것을 320 pixel로 그 비율을 맞춘다면 320×568 이 됩니다.
그래서 너비와 높이늘 320×568 로 해 주시면 됩니다.
위 계산대로 하면 배경 이미지의 높이가 iPhone 5 의 높이에 딱 맞게 표시 될 겁니다. iPhone 5의 실제 해성도는 640X1136 이구요 우리 이미지의 안쪽 사각형 (inner rectangle" 이 너비가 320 이니까 이걸 가지고 아래처럼 간단히 계산하면 그 비율에 맞는 높이를 구할 수 있습니다.
320 / 640 = 0.5 --inner rectangle width / device pixel width = factor 1136 × 0.5 = 568 --device pixel height × factor = config.lua 'height' setting
우리가 가지고 있는 샘플 배경 이미지의 높이는 570 입니다. 그러니까 iPhone 5 화면에서는 위와 아래쪽에 각각 1pixel 씩 화면 밖으로 나갈 겁니다.
iPhone 3,4 and Older iPod Touch
elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" ) then
application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
위쪽에서 이미 iPhone 5 를 사용했으니까 다음 else if 문에서 모델이 iP 로 시작하는 스트링을 얻는다면 그것은 이전 버전의 iPhone 이나 iPod Touch 가 될 겁니다. 해상도는 320X480 과 640X960 이렇게 두 종류가 있죠. 이 경우에는 우리가 가지고 있는 이미지의 inner rectangle 인 320X480 을 사용할 수 있습니다.
Android, Kindle Fire, and Nook
마지막으로 우리는 16:9 인 안드로이드 디바이스와 5:3 인 NOOK 과 Kindle Fire 디바이스를 따로 작성해야 합니다. 16:9 device 들은 그 비율이 1.777:1 이 됩니다. Nook 과 Kindle Fire 는 1024X600 에 가깝구요 그 비율은 1.7:1 이 됩니다. 그러니까 이 경우 화면 크기 비율을 계산하기 위해 pixelHeight and pixelWidth를 사용할 수 있겠죠. 만약 그것이 1.72 보다 크면 iPhone 5 와 비슷한 16:9 로 계산하면 될 겁니다. 만약 그렇지 않으면 그 기기에 맞도록 너비와 높이를 세팅해야 겠죠.
elseif ( display.pixelHeight / display.pixelWidth > 1.72 ) then
application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
end
Important Notes
여기에 완성된 파일이 있습니다. 이 파일만 사용하시면 현재까지 나온 대부분의 디바이스들이 cover 될 겁니다. 아래 사항들을 기억해 두세요.
- On some devices parts of the background will be off screen, so don’t put anything “critical” in the bleed areas.
- Objects positioned using fixed numbers like player.x = 64 and player.y = 64 will always be 64 points away from the top and left edges, but based on the device will be closer or further away from center. Likewise, objects placed using the right and bottom edges will stay the prescribed distance away from those edges (player.x = display.contentWidth-64 will stay 64 points away from the right edge) but they will move closer or further from the center too. Objects positioned based on a center coordinate (player.x = display.contentCenterX+100) will stay in the same relative position regardless of the screen shape.
Dynamic Image Selection
각 configuration block 에는 아래와 같이 imageSuffix table 이 있습니다.
imageSuffix =
{ ["@2x"] = 1.5, ["@4x"] = 3.0,},
만약 코로나를 처음 접해 보신다면 이 방법이 바로 코로나 SDK 가 Dynamic Image Selection을 지원하는 부분이라는 점을 알고 계시면 됩니다. 예를 들어 여러분이 Retina iPad 와 iPhone 3GS 에 같은 이미지를 사용하지 않고 해상도를 충분히 지원해 주는 그런 이미지를 별도로 사용하고 싶으실 수 있을 겁니다. 그러면 이 image sets 를 일반 디바이스와 Retina/HD 디바이스에 맺게 각각 다르게 세팅하시면 그 디바이스 해상도에 맞게 작업하신 이미지를 자동으로 바꿔서 display 할 수 있습니다.
imageSuffix table 은 두개의 부분으로 구성돼 있습니다.
["@2x"] = --append this suffix to all images designed for those device(s) (decimal value) --scale factor that Corona uses to pick the proper assets
첫번째 값은 여러분이 이름을 정해 주시면 됩니다. 두번째 값은 아래 공식에 의해 계산된 값입니다.
device width / config.lua 'width' = scale factor
아래와 같이 세팅하시면 될 겁니다.
["@2x"] = 2.0 ["@4x"] = 4.0
저희들이 계산한 아래 예제들을 참조하세요.
600 / 320 = 1.875 --Kindle Fire & Nook 640 / 320 = 2.0 --iPhone 5 768 / 360 = 2.13 --iPad 800 / 320 = 2.5 --Kindle Fire HD / Nexus7 1200 / 320 = 3.75 --Kindle Fire HD 8.9 1536 / 360 = 4.26 --Retina iPad
만약 여러분이 4.0 으로 세팅했다면 이것은 Retina iPad 에만 적용 되고 Kindle Fire HD 8.9 이하에는 적용되지 않을 겁니다. 즉 Retina iPad 전용 이미지가 되는 것이죠.
그런데 대개 Kindle Fire HD 8.9 와 Retina iPad 에는 같은 이미지를 사용해도 문제가 없습니다.
그래서 다운 받은 configuration file 에는 아래와 같이 세팅 돼 있을 겁니다.
["@2x"] = 1.5, ["@4x"] = 3.0,
이렇게 하면 해당 “@4x”
image 는 Retina iPad, Kindle Fire HD
8.9, and the Nexus 10 같은 고 해상도 디바이스용 이미지를 별도로 사용할 때 유용할 수 있습니다. 그 이외의 디바이스들은 “@2x”
images 를 사용할 겁니다.
끝으로 중요한 것 한가지 더 언급해 드린다면 배경을 display 하기 위해 display.newImageRect() 를 사용하시라는 겁니다.
local background = display.newImageRect( "background.png", 360, 570 )끝의 두 숫자 360과 570 은 1X 에 근거한 이미지의 너비와 높이 입니다. 샘플 파일에서는 lowest resolution target device 가 original Kindle Fire 와 NOOK Color 로 돼 있습니다. 이 디바이스들과 “@2x” bracket 에 속하는 다른 디바이스들은 코로나에서 720X1140 을 사용할 거고 “@4x” version 에서는 1440X2280 을 사용할 겁니다. 이런 작업들은 코로나가 알아서 할 거니까 별로 크게 신경 안 쓰셔도 됩니다.
In Summary…
이 튜토리얼은 약간 detail 한 부분까지 설명 했습니다. 코로나를 처음 접해 보시는 분들에게는 좀 더 간단히 설명해 드릴 필요가 있을 텐데요. 위에 저희가 샘플 파일을 다운로두 받을 수 있도록 했으니 그 config.lua file 을 받으셔서 잘 분석해 보시고 또 실제로 적용해 보시면 이해하시는데 도움이 되실 겁니다. 아직 다운 받지 않으신 분들을 위해서 여기 다운 받으실 링크를 다시 알려 드릴께요.
| Multi-Element Physics Body 다루기 (0) | 2013.01.11 |
|---|---|
| 내 앱에 애플의 iAds 광고 달기 (0) | 2013.01.03 |
| 코로나의 Holiday Gifts : Android Push Notification 등 등 (0) | 2012.12.30 |
| iOS 에 구글 맵이 돌아왔다. (Corona의 구글 맵 지원 기능 소개) (2) | 2012.12.19 |
| 간단하게 Device 분별하는 예제 (0) | 2012.12.13 |
| physics engine (물리엔진)의 새로운 기능 event.contact 소개 (0) | 2012.11.29 |
| 새 위젯 사용하기 Part 1 (0) | 2012.11.08 |
| Blend Modes 사용해서 Creative Effects 내기 (1) | 2012.11.01 |
| 원근감을 주는 parallax scrolling 구현하기 (0) | 2012.10.18 |
| Sprite 로 애니메이션 표현하기와 그 methods 들 (0) | 2012.10.11 |