텍스트, 이미지, 모양 표시하기... 1

오늘은 텍스트와 이미지, 라인, 다각형 같은 모양들 표시하는 방법에 대해 공부하겠습니다.

display.setStatusBar( display.HiddenStatusBar )
local textObj = display.newText("A short string", 0,0, nil, 14);
textObj:setReferencePoint(display.CenterLeftReferencePoint);
textObj.x = 20;

textObj.text = "This string has several more characters than before..."

textObj.text = "This is third sentence."
textObj:setReferencePoint(display.CenterLeftReferencePoint);
textObj.x = 20

우선 첫번째 줄은 아이폰에서 status bar 없애는 거구요.
다음줄 보맨 textObj 변수에 "A short string"이란 텍스트를 담고 위치는 0,0 폰트는 nil로 설정해서 그냥 디폴트가 나오도록 하고 글자 사이즈는 14포인트로 정했습니다.
다음은 textObj에 setReferencePoint를 적용하고 x 좌표를 20으로 했습니다.

그리고 textObj.text 를 이용해서 다른 문구를 적용했습니다.
그리고 다음줄은 또 다른 문구를 적용했구요.

화면에는 위와 같이 맨 마지막 적용된 값이 표시됩니다.

화면에 표시되는 모든 것은 DisplayObjects가 만듭니다. 즉 화면에 표시되는 모든 것은 이 DisplayObjects의 인스턴스 입니다.
사각형, 원, 이미지, 텍스트 같은 모든 것들은 다 DisplayObject를 사용해 표시할 수 있습니다.
이걸 기초로 애니메이션을 만든다던가 터치를 하면 다른 객체를 표시한다던가 하는 일들을 하게 됩니다.
이 DisplayObject는 특별한 함수인 생성자(constructor)를 호출함으로서 생성할 수 있습니다. 직접적으로 생성하지는 않습니다.
예를 들어 display.newRect()는 Vector Object를 생성하게 됩니다.

이러한 display object들은 아래와 같은 프로퍼티들과 메소드들을 사용할 수 있습니다.
프로퍼티들은 . 로 접근 할 수 있습니다.
예를 들어 아까 작성했던 텍스트에 투명도를 주려면
textObj.alpha=0.5 를 주면 됩니다.
자주 사용되는 프로퍼티 몇개를 살펴 보면요.
object.inVisible = true or false
object.height , object.width, object.length 객체 크기와 길이 등을 구할 수 있습니다.
object.isHitTestable 객체가 보이지 않을 때에도 hit 이벤트를 받을 수 있도록 합니다. (true 일 경우)
object.rotation = 숫자 -> 해당 객체를 로테이션 시킵니다.

위 화면은 아까 작성했던 코드에 아래 몇줄을 더 한 겁니다.
textObj.alpha=0.8
oHeight = textObj.height
print("Height = " .. oHeight)
textObj.rotation = 45

object.x, object.y 객체의 x,y 좌표
좀 더 자세한 사항은 아래 페이지를 참고 하세요.
http://developer.anscamobile.com/content/display-objects

다음은 메소드를 살펴 봅니다.
메소드는 : 를 이용해서 접근 할 수 있습니다.

object:rotate() 현재의 로테이션에 ()안에 있는 로테이션 각도를 추가해서 적용합니다.
예를 들어 아까 소스에 textObj:rotate(-25) 를 하면 45-25=20 이니까 20도의 기울기가 나오게 됩니다.
파라미터를 쓰게 되면 (textObj.rotation = -25) 그냥 -25도로 기울기가 표시 됩니다.
object:scale(sx,sy) 객체의 길이와 높이를 세팅합니다.
object:setReferencePoint(referencePoint) 기준점을 정합니다.
reference Point 종류는 아래와 같습니다.
    * display.CenterReferencePoint
    * display.TopLeftReferencePoint
    * display.TopCenterReferencePoint
    * display.TopRightReferencePoint
    * display.CenterRightReferencePoint
    * display.BottomRightReferencePoint
    * display.BottomCenterReferencePoint
    * display.BottomLeftReferencePoint
    * display.CenterLeftReferencePoint

예를 들어 처음의 예제에서 referncePoint를 CenterLeftReferncePoint를 사용했습니다. 그리고 text길이가 다르게 세팅을 했고 x포인트를 20으로 늘렸습니다.
이 레퍼런스 포인트를 어떻게 설정하느냐에 따라 해당 객체의 길이가 달라질 때 화면에 표시되는 위치가 다르게 보일 수가 있습니다.

object:translate(deltaX,deltaY) 현재 위치에서 deltaX,deltaY만큼 이동시킵니다.
object:removeSelf() 객체를 없앱니다. 이는 메모리 할당을 풀어주게 됩니다.


*** 이미지 Images
 Bitmap 이미지 객체도  DisplayObject의 한 타입입니다.

display.newImage(filename[,baseDirectory][,left,top])

저는 이미지테스트 할 때 아래 이미지를 사용하겠습니다.

이름은 endinggreen.png입니다.
이번에 Corona로 만든 간단한 게임에 사용했던 이미지 입니다.
제가 이미지 디자인한건 아니고 동료 디자이너가 디자인 했죠. 저는 개발만 했습니다.
잠깐 홍보 하자면 안드로이드는 아래 링크로 볼 수 있습니다.
https://market.android.com/details?id=nowbyte.corona.multipingpong&feature=search_result
저희 회사에서 제가 만든 앱들을 보려면 아래 링크로 가시면 보실 수 있구요.
https://market.android.com/search?q=effilonNY&so=1&c=apps
대부분이 게임이라서 한국에서는 볼 수 있을 지 모르겠습니다.
아이폰 앱 스토어는 아래 링크로 보실 수 있구요.
http://itunes.apple.com/us/app/multi-player-ping-pong/id466527438?ls=1&mt=8
이것도 게임 카테고리에 들어 있어서 한국에서는 보실 수 있을 지 모르겠습니다.
예전 강좌에 있던 대로 config.lua 파일에서 아이폰 (iPhone) 해상도 (resolution) 인 320 X 480 으로 하고 scale = "letterbox" 로 했기 때문에 안드로이드 폰의 모든 기기 (갤럭시S, 갤럭시S2, 드로이드, 넥서스 원 (NexusOne), 갤럭시 탭) 에서 사용할 수 있습니다. 새로나온 갤럭시 탭이나 이번에 나온 아마존의 킨들 파이어 (Kindle fire)에서는 테스트 해 보지 않았지만 여기서도 돌아갈 겁니다.
그리고 애플 쪽 디바이스은 아이폰, 아이폰 4 , iPod Touch, iPad 에서 다 돌아갑니다. 그리고 오늘 발표 될 iPhone 5 에서도 제대로 나올겁니다.

코로나 SDK (Corona SDK) 의 장점은 Box2D를 사용한 강력한 물리엔진 (Physics Engine)과 한번 개발해서 애플의 아이폰, 아이패드 디바이스와 안드로이드의 모든 모바일 폰 과 태블릿 (갤럭시 탭, 모토로라의 줌 (XOOM), 아이리버의 아이리버 탭 그리고 아마존의 Kindle fire 까지) 에서 사용할 수 있고 해상도도 간편하게 적용할 수 있다는 것에 있습니다.

일단 제가 개발한 앱과 코로나 SDK에 대한 홍보는 여기서 마치구요.
코로나에서 이미지 디스플레이 하는 것을 보도록 하겠습니다.

아까까지 사용했던 소스에 아래 두 줄을 덧 붙이겠습니다.

myImage = display.newImage( "endinggreen.png", 10, 150 )
myImage2 = display.newImage( "endinggreen.png" )

보시는 대로 이미지는 display.newImage 생성자(constructor)를 사용해서 그립니다.
이미지 이름만 파라미터로 넣어도 되고 x,y 좌표도 같이 넣어도 됩니다.
코로나에서는 PNG와 JPEG파일을 지원한다고 나옵니다.
제 기억엔 GIF도 나왔던 것 같은데요.. 잘 모르겠네요. GIF는 나오고 GIF 애니메이션은 지원이 안 되서 그냥 정지된 이미지 하나만 나온 것 같은데요... 궁금하시면 한번 해 보세요.
이미지 크기가 맥시멈을 넘어서면 autoscale됩니다. iPhone 3G 의 경우 1024  X 1024 , iPhone 3GS, iPad 의 경우는 2048X2048 이 맥시멈 사이즈 입니다.

이전 코드에 아래 세줄을 넣어 보세요.
myDynamicImage = display.newImageRect( "endinggreen.png", 60, 200 )
myDynamicImage.x =260
myDynamicImage.y =300

newImageRect 는 이렇게 이미지의 width,height를 다이나믹하게 설정할 때 사용합니다.
이 다이나믹 이미지 해상도(Dynamic Image Resolution) 과 configuring 에 대해 좀 더 자세히 보시려면 아래 링크를 참조하세요.
http://developer.anscamobile.com/content/configuring-projects#Dynamic_Image_Resolution

오늘은 이렇게 텍스트와 이미지 표시하는 법과 displayObject 에서 사용되는 파라미터와 메소드들에 대해 알아봤습니다.

다음 시간엔 사각형, 원 그리고 다각형 그리는 법과 색깔 넣는 법, 글자 폰트 지정하는 법과 새로운 폰트 사용하는 법, Group 사용법 (display.newGroup), stage 객체에 대해 알아보겠습니다.

이 모든 것들이 Display Object 의 객체(인스턴스) 들입니다.

그리고 간단히 Display Object 와 테이블에 대한 기술적인 분석에 대해서도 다룰 거구요.

뭐 별거는 아니지만 오늘 사용했던 코드 전체는 아래와 같습니다.
display.setStatusBar( display.HiddenStatusBar )
-- A text object is created and is aligned left at point x=20
local textObj = display.newText("A short string", 0,0, nil, 26);
textObj:setReferencePoint(display.CenterLeftReferencePoint);
textObj.x = 20;

 
-- Later, the textObj.text property is assigned a new string value of different length,
-- causing the object's width to change, but not its reference point.
-- Consequently, the text is no longer aligned left at point x =20
textObj.text = "This string has several more characters than before..."
 
-- Work-around:
-- Reset the text object's reference point and x position
-- after you update its text property:
textObj.text = "This is third sentence."
textObj:setReferencePoint(display.CenterLeftReferencePoint);
textObj.x = 20
textObj.alpha=0.8
oHeight = textObj.height
print("Height = " .. oHeight)
textObj.rotation = 45
textObj:rotate(-25)

myImage = display.newImage( "endinggreen.png", 10, 150 )
myImage2 = display.newImage( "endinggreen.png" )
myDynamicImage = display.newImageRect( "endinggreen.png", 100, 100 )
myDynamicImage.x =260
myDynamicImage.y =300


그럼 다음 시간에 뵙겠습니다.