Flex 패널 사용법

이 문서에서는 Flex 패널 런타임 함수의 사용법에 대해 설명합니다. 이 함수들은 UI 레이아웃을 생성하는 데 도움을 주며, UI 박스의 배치 및 동작에 관한 모든 논리 계산을 처리합니다. Flex 패널 기능은 Yoga 라이브러리를 사용합니다.

개요

이 함수들을 사용하여 노드로 구성된 레이아웃을 설정할 수 있습니다. 각 노드는 직사각형 영역이며 다른 노드를 포함할 수 있어 노드를 컨테이너로 만들 수 있습니다. 노드 안에 노드를 설정함으로써 레이아웃 트리를 생성할 수 있습니다. 각 노드는 크기, 컨테이너 내에서의 위치, 자식 노드의 동작 등을 정의하는 속성을 가질 수 있습니다.

레이아웃 트리는 주어진 캔버스 크기에 따라 계산될 수 있으며, 최종 노드의 위치와 크기는 UI 시스템 설정 등 다양한 곳에서 사용할 수 있습니다. 이 함수들은 렌더링이나 자산 지원을 제공하지 않으며, 이 데이터를 어떻게 활용할지는 전적으로 사용자에게 달려 있습니다.

레이아웃 생성 방법

레이아웃을 생성하는 것은 flexpanel_create_node 함수를 호출하고 구조체 또는 JSON 문자열을 전달하는 것만큼 간단합니다. 이 구조체/JSON은 루트 노드 및 루트 노드 아래에 중첩된 모든 노드의 속성을 정의해야 합니다. 구조체/JSON의 구조는 이 페이지에 설명되어 있습니다.

구조체/JSON에 원하는 만큼의 옵션을 지정할 수 있으며, 구조체/JSON 없이 함수를 호출하면 빈 노드가 생성됩니다. 이후 Flex 패널 함수를 호출하여 노드의 속성을 설정하고 자식을 삽입/제거할 수 있습니다.

각 노드는 스타일링 속성을 가지며, 이는 컨테이너 내에서의 위치, 크기 및 동작을 정의합니다. 이러한 스타일링 속성은 노드를 생성할 때 전달하는 구조체/JSON에 지정할 수 있으며, 모든 속성은 여기에 나열되어 있습니다: 스타일링 속성.

노드를 생성한 후에는 스타일링 함수를 사용하여 이러한 스타일링 속성을 설정하고 가져올 수 있습니다.

레이아웃 데이터 사용하기

레이아웃을 설정한 후, 사용하려는 레이아웃의 크기를 인수로 하여 flexpanel_calculate_layout을 호출해야 합니다. 그런 다음, 정보를 얻고자 하는 노드에 대해 flexpanel_node_layout_get_position을 호출하면 위치 데이터가 포함된 구조체를 반환합니다. 이 위치 데이터는 UI 객체 인스턴스를 생성하거나 사각형으로 그리는 등 원하는 방식으로 사용할 수 있습니다.

레이아웃 예제

아래는 위에서 보여준 두 레이아웃을 생성하는 데 사용된 코드입니다:

왼쪽 레이아웃 생성 코드

n_root = flexpanel_create_node({
    left: 20,
    top: 20,
    width: 800,
    height: 600,
    justifyContent: "center",
    alignItems: "center",
    nodes: [{
        width: "60%",
        height: "60%",
        nodes: [{
            width: 200,
            height: 200,
            right: 20,
            bottom: 20,
            position: "absolute"
        }]
    }]
});

첫 번째 자식은 부모의 Justify Content와 Align Items 속성 덕분에 중앙에 배치됩니다. 두 번째 자식은 Position Type이 "absolute"로 설정되어 있어 하단 오른쪽 모서리에 독립적으로 배치됩니다.

오른쪽 레이아웃 생성 코드

n_root = flexpanel_create_node({
    left: 20,
    top: 20,
    width: 400,
    height: 600,
    flexDirection: "column",
    padding: 20,
    gapRow: 10,
    alignItems: "flex-end"
});
var i = 0;
repeat (6) {
    flexpanel_node_insert_child(n_root, flexpanel_create_node({
        width: "70%",
        height: 100,
        flexShrink: 1,
    }), i);
    i++;
}

여기서는 repeat 루프를 사용하여 자식을 삽입하여 동일한 정보를 중복해서 작성할 필요가 없습니다. 부모의 "column" Flex Direction 덕분에 자식들이 수직으로 배치되며, "flex-end" Align Items 속성은 자식들을 교차 축의 끝(즉, 오른쪽)으로 정렬합니다. 자식의 Flex Shrink 속성은 부모의 경계를 넘칠 경우 축소되도록 보장합니다.

이 두 예제 모두 flexpanel_node_layout_get_position에서 얻은 데이터를 사용하여 draw_rectangle로 노드의 사각형 영역을 그립니다.

Flex 패널 미리보기

디버그 오버레이에는 flexpanel_create_node에 전달할 JSON 데이터를 사용하여 레이아웃을 실시간으로 테스트할 수 있는 창이 포함되어 있습니다. 이를 통해 JSON 데이터를 테스트하고 게임 코드에서 사용하기 전에 레이아웃을 편집할 수 있습니다. 이 JSON 코드는 코드 내에서 구조체 리터럴로도 사용할 수 있습니다.

포함 블록

일부 스타일링 속성은 노드의 포함 블록에 따라 달라지며, 이는 직접 부모와 다를 수 있습니다. 예를 들어, positionType이 relative인 노드는 직접 부모 내에서 위치를 설정하지만, absolute 노드는 포함 블록에 따라 위치를 설정합니다. 포함 블록이 노드에 어떻게 선택되고 노드에 미치는 영향에 대한 정보는 포함 블록을 참조하세요.