imageSuffix로 디바이스 해상도에 맞는 이미지 출력하기

오늘은 config.lua에서 세팅하는 imageSuffix에 대해 알아보겠습니다.

스마트폰은 종류가 아주 다양하고 해상도도 여러가지 입니다. 여기에 iPad나 Galaxy Tab 과 같은 태블릿도 종류가 많아서 어느 한 해상도에 맞추다보면 다른 디바이스에서는 이미지가 깔끔하게 안 나오는데요.

해상도에 맞는 이미지가 출력되도록 하는 방법중의 하나인 imageSuffix 사용하는 방법에 대해 알아보겠습니다.

이 글의 원본은 여기 가시면 보실 수 있습니다.
지난번 물방울 올라가는 효과도 이 친구가 개발해서 공유한 소스입니다.
Emanuele Feronato 인데요.
이 웹사이트에 가면 어도비(Adobe)의 플래시(Flash)나 포토샵 (PhotoShop), 워드프레스, PHP 같은 툴에 대한 좋은 정보도 있으니까 참조하시면 좋을 거예요.
그리고 고맙게 자신의 노력을 공유하는 우리 Emanuele에게 고맙다는 댓글도 달아 주시면 좋겠죠?

이번 앱은 위 두 이미지 가지고 작업을 할 건데요.
왼쪽 이미지는 iPhone에 맞는 480*320 크기이구요 오른쪽 이미지는 iPhone4에 맞는 960*640 입니다. 해상도 크기가 가로 세로 딱 두배 입니다.

여러분은 여러분들 나름대로 이미지를 사용하셔도 됩니다. 이미지 사이즈만 두개로 맞게 해 놓으면 되겠죠?
이 예제에서 왼쪽 이미지는 splash.png 입니다. 그리고 오른쪽 이미지는 splash_hd.png 입니다.
여기서 중요한 것은 큰 이미지는 뒤에 _hd가 붙었다는 겁니다.
여러분도 이미지 이름은 마음대로 하셔도 되지만 뒤에 _hd를 붙이셔야 합니다.
(아니면 다른 글자를 붙이셔야 하는데 나중에 config.lua 파일에서 이 부분을 수정하셔야 합니다.)

이제 build.settings, config.lua, main.lua를 만들어 볼까요?

settings =
{
    orientation =
    {
        default = "landscapeRight",
    },
}
위 파일은 build.settings 파일입니다.
앱 방향을 가로로 설정했네요.

다음은 config.lua인데요. 이 부분이 핵심입니다.
application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = "letterbox",
        imageSuffix =
        {
            ["_hd"] = 2,
        },
    },
}

해상도의 기본 설정은 iPhone  해상도인 320*480으로 설정했습니다.
그리고 scale은 letterbox로 했구요.

예전에도 다룬바 있는데 scale은 dynamic 하게 이미지를 해상도에 맞도록 바꿔주는 기능입니다.
none,letterbox,zoomEven, zoomStretch 네가지 종류가 있습니다.

letterbox는 이미지를 해상도에 맞게 늘려줍니다. 이미지 가로 세로 비율이 깨지지 않도록요. 만약 가로 세로 해상도 비율이 다르면 까만 배경이 나오는 부분이 있습니다. TV에서 영화를 영화 화면 비율로 상영할 때 처럼 말이죠.

zoomEven 은 이미지를 그냥 확대합니다. 때에 따라서 어떤 이미지는 화면 밖으로 나갈 수도 있습니다.

zoomStretch는 화면안에 모든 이미지가 들어오게 만들면서 화면을 꽉 채웁니다. 이렇게 되면 이미지의 가로 세로 비율이 달라져서 약간 이그러져 보이겠죠?

이 scale을 한 후 오늘 하려고 하는 imageSuffix를 코딩합니다.
위 코드의 의미는 해상도가 2배이면 이미지 이름 끝에 _hd가 붙은 이미지를 사용하라는 뜻입니다.

아래는 main.lua 입니다.

display.setStatusBar(display.HiddenStatusBar)
local bg = display.newImageRect("splash.png",480,320)
bg.x = bg.contentWidth/2
bg.y = bg.contentHeight/2

첫줄은 아이폰의 status bar를 없애고 배경이미지를 display 하고 위치를 가운데로 잡습니다.

main.lua 에서는 따로 코딩할 부분은 없습니다.

그러면 아래와 같이 iPhone과 iPhone 4에서 각각 다른 이미지를 display 하게 됩니다.

imageSuffix 에 대해 좀 더 자세히 알고 싶으시면 여기를 누르세요.
~~~~~~~~~~