백로 엔진 개발 가이드: 시각적 프로그래밍_node.js

개체 표시 및 목록 표시

"표시 개체", 정확한 의미는 무대에 표시할 수 있는 개체입니다. 표시할 수 있는 객체에는 직접 볼 수 있는 그래픽, 텍스트, 동영상, 그림 등이 포함되며, 볼 수는 없지만 실제로 존재하는 표시 객체 컨테이너도 포함됩니다.

Egret에서 시각적 그래픽은 표시 개체와 표시 개체 컨테이너로 구성됩니다.

위 그림의 장면을 표현하려면 나무를 통해 어떻게 표현해야 할까요?

객체 계층 구조 표시

Egret에서 표시 객체는 두 가지 범주로 나뉩니다. 하나는 다른 표시 객체를 포함할 수 있는 표시 객체 컨테이너(간단히 "컨테이너"라고 함)입니다. 다른 하나는 자신을 제외한 다른 표시 객체를 포함할 수 없는 순수 표시 객체로, "비컨테이너 객체"라고 합니다.

실제 작업에서는 이러한 구조를 트리 구조로 생각할 수 있습니다. 컨테이너는 가지로 이해될 수 있고, 컨테이너가 아닌 객체는 잎으로 이해될 수 있습니다.

이 트리 구조에서 최상위 레벨은 '스테이지'입니다. 프로그램에 대응하여 <font face="NSimsun">stage</font> 객체를 볼 수 있습니다. 무대는 Egret 디스플레이 아키텍처에서 가장 기본적인 디스플레이 컨테이너입니다. 각 Egret 애플리케이션에는 단 하나의 스테이지 개체가 있습니다. 스테이지는 이 디스플레이 트리 구조의 루트 노드입니다.

스테이지에는 메인 컨테이너도 있습니다. 이 컨테이너는 문서 클래스에 의해 생성된 컨테이너입니다. 각 Egret에는 표시 개체 컨테이너여야 하는 문서 클래스가 있습니다.

이 장면에는 배경 이미지와 큰 나무로 구성된 장면 배경이 포함됩니다. 나머지 두 요소는 인물과 잔디밭으로 구성됩니다.

목록 표시

위에 보이는 트리 표시 개체 구조 다이어그램은 실제로 Egret의 "표시 목록"입니다.

표시 목록을 사용하면 컨테이너 개체와 컨테이너가 아닌 개체를 관리할 수 있어 매우 편리합니다. 표시 개체가 표시 목록에 있으면 화면에서 해당 개체를 볼 수 있습니다. 표시 목록에서 표시 개체를 제거하면 해당 개체가 화면에서 사라집니다.

Egret는 내부적으로 표시 목록을 유지 관리합니다. 개발자는 목록이 어떻게 작동하는지 신경 쓸 필요가 없습니다. 사용자는 자신의 표시 개체에 해당 작업을 수행하기만 하면 됩니다.

객체 유형 표시

Egret는 건축 설계 과정에서 표시 목록 개념을 중심으로 모든 객체를 엄격하게 캡슐화합니다. Egret에서는 모든 표시 객체가 <font face="NSimsun">DisplayObject</font> 클래스에서 상속됩니다. <font face="NSimsun">DisplayObject</font> 클래스는 앞서 설명한 "표시 개체"입니다. Egret에서는 모든 "컨테이너"가 <font face="NSimsun">DisplayObjectContainer</font>에서 상속됩니다.

표시 목록을 통일적으로 관리하기 위해 모든 표시 객체를 DisplayObject 클래스로 통일했습니다. 모든 표시 객체는 DisplayObject에서 상속되고 DisplayObject는 EventDispatcher에서 상속됩니다. 즉, 모든 표시 객체는 이벤트를 보낼 수 있습니다.

DisplayObjectContainer 표시 개체 컨테이너의 상위 클래스도 DisplayObject입니다.

실제 작업에서 개념을 다시 단순화했는데, 이는 두 가지 규칙으로 요약할 수 있습니다.

DisplayObject에서 직접 상속되는 클래스는 컨테이너가 아닙니다. DisplayObjectContainer에서 상속되는 클래스는 컨테이너입니다.