Corona Display Groups 101

이번주 코로나에서 제공하는 튜토리얼은 Display Group에 대한 겁니다.

기본 API는 여기에 있습니다.
group.numChildren, group:insert(), group:remove() 세가지 요소들이 있습니다.
group.nemChildren은 해당 그룹에 있는 객체들의 숫자를 알 수 있는 메소드 입니다.
주로 그룹 내 모든 객체들에 어떤 변경이나 효과를 줄 때 for 문에서 이용하게 됩니다.
group:insert()는 새로운 객체를 해당 그룹에 추가할 때 사용하구요.
기본은 맨 마지막에 삽입 되는데 원하면 삽입되는 위치도 지정해 줄 수 있습니다.
그리고 group:remove()는 그 그룹에서 특정 객체를 제거할 때 사용합니다.

그룹을 처음 만들 때는 display.newGroup()을 사용하구요.
여기를 클릭하시면 이와 관련되서 정리한 문서를 보실 수 있습니다.

오늘 다룰 튜토리얼의 원본은 여기 있습니다.
이 원본을 정리해 두겠습니다.

======= o ======= o ======= o ======= o ======= o ======= o

Corona Display Groups 101

이번주 다룰 주제는 모든 개발자들이 가장 자주 접하는 코로나 프로그래밍에서 아주 기본이 되는 group에 관련 해서 다루겠습니다. 이 group을 자주 사용했던 개발자 분들에게도 아무 도움이 되는 내용일 겁니다.

What are Groups?

코로나에서 화면에 나오는 모든 객체들은 display object 입니다. 이 display object에는 세가지 유형이 있습니다.
- Vectors (Shapes & Text)
- Images (익히 알려져 있는 "normal" display objects)
- Groups

코로나 display group(이후 부터는 group으로 하겠습니다.)은 좌표(x,y), 투명도, 회전값 등의 여러 property들과 메소드들을 가지고 있습니다. 이는 이 object를 control 하는데 아주 편리한 기능을 제공해 줍니다.

Object Grouping

group의 목적은 다른 object 들을 하나로 묶는 것입니다. 그래서 여러개의 object들을 하나의 object 처럼 다룰 수 있도록 해 줍니다. 이 기능은 프로그래밍 할 때 손쉽게 여러 object들을 제어할 수 있게 도와줘서 편리하기도 하지만 반면에 불편한 점도 있습니다.
여러분들이 어떤 display object를 group에 넣고 이 그룹의 property들을 변경하더라도 그 그룹 안에 있는 개별 object들의 property들은 변경되지 않습니다. 다만 group의 property에 따라서 display 될 뿐입니다.
이 group이 또 다른 group에 포합 될 수도 있고 그 group이 또 다른 group에 포함될 수도 있습니다. 이 경우에도 group의 프로퍼티와 그룹 내 object의 프로퍼티의 관계는 위와 같습니다.
이런식으로 group의 포함관계가 많이 될 수록 이 그룹과 그 안의 요소들을 콘트롤 하는게 만만치 않습니다.

하나 예를 들어보죠.

A와 B 라는 그룹이 있습니다. 그리고 보통 display object인 C 가 있습니다. 모두 위치는 0,0 입니다. C가 B에 insert 됐습니다. B는 다시 A에 insert 됐습니다. 그러면 이제 A의 x를 100으로 바꾸고 B의 x를 50으로 바꾸겠습니다. C의 좌표는 여전히 0,0입니다. 하지만 이 C가 실제로 화면에 표시 될 때는 150,0 의 위치에 표시 됩니다. 왜 그럴까요? 왜냐하면 그 parent인 B의 x 값이 50이고 또 B의 parent인 A의 x 값이 100이기 때문입니다.

약간 혼란스럽기는 하지만 실제 프로그래밍할 때는 그렇게 크게 문제가 되지는 않죠? 그냥 group별로 display 되면 되니까요.  하지만 touch 리스너에 따라 그룹 내의 특정 object를 움직이거나 회전시키거나 크기를 변화시킬 때는 약간 혼란 스러울 수가 있습니다. 만약 여러분의 parent group들의 값이 변경 됐을 때 그 children들에 어떻게 영향을 미치는지 자세히 알고 있다면 이런 경우 문제없이 프로그래밍을 하실 수 있을 겁니다.

Group Methods

Group에는 insert와 remove라는 두개의 메소드가 있습니다.

group:insert( [index,], child, [, resetTransform] )

이 메소드는 group에 display object 를 insert 할 때 사용됩니다. 이 함수에는 한개의 필수 parameter가 있고 두개의 옵션 파라미터들이 있습니다.

아래 예제는 이 insert  함수를 어떻게 사용하는지에 대해 보여줍니다. 주석을 잘 보시면 그룹의 프로퍼티들이 바뀔 때 그 안의 child는 어떤 영향을 받는지 잘 설명돼 있습니다.

-- 이미지 객체를 생성한다. 객체의 이름은 object1이고 위치는 50,50이다.

local object1 = display.newImage( "image.png" )

object1.x, object1.y = 50, 50

-- display group을 생성한다. 그룹의 이름은 group1이다.

local group1 = display.newGroup()

-- 그룹의 위치를 100,100으로 한다.

group1.x, group1.y = 100, 100

-- 이미지 객체를 그룹에 insert 한다.

group1:insert( object1 )

-- 이미지 객체의 위치는 50,50이지만 화면에 나타날 때는 150,150 위치에 
나타난다.
-- group1에 insert 돼 있기 때문에 group의 위치인 100,100이 더해 
지기 때문이다.



디폴트로 insert된 객체는 그 그룹의 top 에 위치 됩니다

디폴트로 insert된 객체를 그 그룹의 top에 위치 됩니다. 하지만 옵션 파라미터인 첫번째 argument인 index 번호를 바꿈으로서 해달 객체의 순서를 지정할 수 있습니다.
이 때 index번호 1은 가장 하위를 가리킵니다. 새로운 객체를 1로 지정하면 이전의 객체들은 하나씩 위로 올라갑니다. 다른 위치에 insert해도 그 상위의 객체들은 하나씩 위로 올라가게 됩니다.

예를 들어서 그룹에 4개의 객체들이 있는데 여러분이 새 객체를 index 위치 2로 지정하면 새 객체를 그룹내의 두번째 객체가 되고 기존의 2,3,4번째 객체들은 3,4,5번째 객체들로 바뀌게 됩니다.

만약에 새 객체를 그 그룹 안에 있는 객체수 보다 더 큰 수의 index 위치로 지정하게 되면 코로나는 그냥 default 로 처리해서 top에 위치시킵니다.

그 외에 optional parameter로 resetTransform이 있습니다. 만약에 여러분이 객체들의 위치, 회전, 투명도, 크기 등을 그룹에 insert 할 때 디폴트값으로 재 세팅하기를 원하신다면 이것은 true로 세팅 돼 있어야 합니다. 즉 그 객체가 가지고 있는 기본 값(위치, 회전, 투명도 등)은 적용되지 않고 오직 group의 값만 적용 되게 됩니다. resetTransform의 디폴트 값은 false입니다.

IMPORTANT NOTE

하나의 객체는 한 그룹 내에만 소속될 수 있습니다. 그렇기 때문에 객체를 group A에 insert 한 후 다시 group B에 insert 하면 이 객체는 A의 그룹에서는 자동으로 해제 되게 됩니다.
참고로 코로나의 display stage도 하나의 display group입니다. 그렇기 때문에 display object나 그룹이 생성되면 자동적으로 이 stage 그룹에 포함 되게 됩니다.
그렇기 때문에 한 객체가 다른 그룹에 insert 되면 그 객체는 더이상 stage에 소속 돼 있지 않겠죠. 하지만 그 그룹의 stage에 소속돼 있으니까 화면에 display하는데는 문제 없을 거예요.

group:remove( indexOrChild )

이 메소드는 그룹 내에 있는 특정 객체를 remove 하기 위해 사용 됩니다. removeSelf()나 display.remove() 와 개념이 유사합니다. 괄호 안에는 객체 이름이나 그 객체의 index 번호를 넣으면 됩니다.
어떤 display object를 remove 할 때 그 객체를 nil 로 만드는 것을 잊지 마세요. 효율적으로 메모리를 사용하는데 중요한 사항입니다.

Group Properties

group도 display object이기 때문에 이 그룹도 일반 display object들이 가지는 일반적인 메소드나 프로퍼티들을 가지고 있습니다. 그리고 numChildren이라는 프로퍼티를 덤으로 가지고 있구요.
이 numChildren은 그룹 내에 몇개의 객체들이 있는지 쉽게 알수 있게 해 줍니다. 이 프로퍼티는 for문등 루프를 돌릴 때 주로 사용 됩니다.
아래 예제는 그룹내의 모든 object들에 대해 어떤 값을 변경하기 위해 루핑 하는 방법을 보여줍니다.

-- This example assumes you have already inserted


-- several objects into the 'group2' display group.
-- forward iteration


for i=1,group2.numChildren do

  local child = group2[i]
  child.score = child.score + 1


end
-- backwards iteration; useful for removing objects manually

for i=group2.numChildren,1,-1 do

  local child = group2[i]
  totalScore = totalScore + child.score


  child:removeSelf()

end

Property Differences

Group과 일반 이미지 객체와 몇가지 다른 점이 있습니다.
가장 중요한 다른 점은 default reference point가 다르다는 겁니다. 그룹은 display.TopLeftReferencePoint가 디폴트이고 다른 display object는 display.CenterReferencePoint가 디폴트입니다.
그 다음은 contentWidth와 contentHeight인데 당연히 group은 자체적으로 어떤 모양이 없기 때문에 고정된 width와 height가 없습니다. 그 child 중에 가장 큰 object의 값을 가질 겁니다.

Wrap-Up and Further Reading

지금까지 정리한 내용만 충분히 이해하면 코로나 Display Group에 대해서는 전문가가 되신 겁니다.
이번 튜토리얼은 basic 내용이긴 하지만 기본에 충실한 것이 좋은 앱을 만드는 바탕이 됩니다.

~~~~~~~~~~