> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-ko/sdk7/3d/text.md). # 텍스트 씬에 텍스트를 추가하는 방법 을 사용하여 장면에 텍스트를 추가합니다 `TextShape` 컴포넌트. 이 텍스트는 위치 Decentraland의 텍스트는 모든 *utf8* 문자를 지원하며, 여기에는 동양 문자와 특수 문자가 포함됩니다. {% hint style="warning" %} **📔 참고**: 이 컴포넌트는 장면의 3D 공간에 존재하는 월드 내 레이블과 UI에 유용하며, 플레이어의 2D HUD UI에는 적합하지 않습니다. {% endhint %} 텍스트 컴포넌트를 기존 엔티티의 레이블로 추가하려면, 다음을 가진 두 번째 엔티티를 만드는 것이 좋은 방법입니다. `TextShape` 컴포넌트를 만들고 이를 다른 엔티티의 자식으로 설정합니다. ## Creator Hub의 Scene Editor를 사용하세요 월드 내에 텍스트를 배치하는 가장 쉬운 방법은 다음을 추가하는 것입니다. **텍스트** [스마트 아이템](/creator/content-creator-ko/scene-editor/interactivity/smart-items.md) Scene Editor에서 시각적으로. 그런 다음 Scene Editor UI에서 사용 가능한 모든 필드를 설정할 수 있습니다. ![](https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e555db49c09743be8685fc9f249cfd2ab00480f0%2Ftext-smart-item.png?alt=media\&token=d9ebef2a-4c56-4439-a5c1-c67792aa6f78) ## 텍스트 컴포넌트 만들기 다음 예제에서는 어떻게 `TextShape` 컴포넌트를 만들고 코드로 엔티티에 추가하는지 보여줍니다. ```ts const sign = engine.addEntity() Transform.create(sign, { position: Vector3.create(8, 1, 8), }) TextShape.create(sign, { text: 'Hello World', }) ``` {% hint style="warning" %} **📔 참고**: 텍스트 컴포넌트가 있는 엔티티가 다른 엔티티의 자식이면 부모의 스케일 영향을 받습니다. 부모가 축을 따라 고르지 않게 스케일되면 텍스트도 늘어나거나 압축됩니다. {% endhint %} {% hint style="warning" %} **📔 참고**: `TextShape` 컴포넌트는 클릭할 수 없습니다. `PointerEvents` 해당 엔티티에 사용하면 comopnents가 활성화되지 않습니다. `TextShape` 컴포넌트를 추가해야 합니다. {% endhint %} {% hint style="warning" %} **📔 참고**: `TextShape` 는 다음과 같이 가져와야 합니다. > `import { TextShape } from "@dcl/sdk/ecs"` 다음 [가져오기](/creator/content-creator-ko/sdk7/getting-started/coding-scenes.md#imports) 를 참고해 쉽게 처리하는 방법을 확인하세요. {% endhint %} ## 텍스트 값 변경하기 새 텍스트 컴포넌트를 만들 때 표시할 문자열을 할당합니다. 이 문자열은 다음에 저장됩니다. `텍스트` 필드. 컴포넌트가 표시하는 문자열을 변경하려면, 다음의 값을 바꾸어 언제든지 할 수 있습니다. `텍스트` 필드 [mutable 버전](/creator/content-creator-ko/sdk7/programming-patterns/mutable-data.md) 의 컴포넌트. ```ts const mutableText = TextShape.getMutable(myEntity) mutableText.text = 'new string' ``` ## 기본 텍스트 속성 이 `TextShape` 컴포넌트에는 텍스트 스타일을 지정할 수 있는 여러 속성이 있습니다. 아래는 가장 일반적인 몇 가지입니다: * `font`: 열거형의 값 `Font`. * `fontSize`: *number*. font 10을 가진 엔티티는 높이가 1미터입니다. * `textColor`: *Color4* 객체에 사용합니다. *Color4* 객체는 다음을 저장합니다. *RBG* 0에서 1 사이의 세 숫자로 된 *alpha* 색상과 [투명도를 위한 값을 참조하세요. ](/creator/content-creator-ko/sdk7/3d/color-types.md) 자세한 내용은. ```ts TextShape.create(sign, { text: 'Hello World', 색상 유형 textColor: { r: 1, g: 0, b: 0, a: 1 }, fontSize: 5, }) ``` ## font: Font.F\_SANS\_SERIF, 글꼴 `Font`Text shape는 열거형 * `Font.F_SANS_SERIF` * `Font.F_SERIF` * `Font.F_MONOSPACE` 기본적으로는 이를 사용합니다 `Font.F_SANS_SERIF`. ```ts TextShape.create(sign, { text: 'Hello World', 색상 유형 textColor: { r: 1, g: 0, b: 0, a: 1 }, fontSize: 5, }) ``` {% hint style="warning" %} **📔 참고**: 현재 모든 글꼴은 Sans Serif로 렌더링됩니다. 이는 향후 수정될 알려진 문제입니다. {% endhint %} {% hint style="info" %} **💡 팁**: VS Studio나 다른 IDE를 사용하는 경우 다음을 입력하세요. `Font.` 그리고 사용 가능한 모든 글꼴을 제안하는 목록이 표시되어야 합니다. {% endhint %} ## 텍스트 정렬 및 패딩 속성 이 `TextShape` 컴포넌트는 크기, 패딩 등이 있는 텍스트 상자를 만듭니다. * `textAlign`: 다음 중에서 값을 선택하세요. `TextAlignMode` 열거형. 가능한 값에는 세로(*top*, *middle*, *bottom*)과 가로(*왼쪽*, *center*, *오른쪽*) 정렬의 모든 조합이 포함됩니다. * `width`: *number*. 텍스트 상자의 너비입니다. * `height`: *number*. 텍스트 상자의 높이입니다. * `paddingTop`: *number*. 텍스트와 텍스트 상자의 윤곽선 사이의 공간입니다. * `paddingRight`: *number*. 텍스트와 텍스트 상자의 윤곽선 사이의 공간입니다. * `paddingBottom`: *number*. 텍스트와 텍스트 상자의 윤곽선 사이의 공간입니다. * `paddingLeft`: *number*. 텍스트와 텍스트 상자의 윤곽선 사이의 공간입니다. {% hint style="info" %} **💡 팁**: 텍스트가 공간에 떠 있는 것이 목적이라면 다음을 추가하는 것이 좋습니다. [`빌보드` 컴포넌트](/creator/content-creator-ko/sdk7/3d/entity-positioning.md#face-the-user) 텍스트가 플레이어를 항상 향하도록 회전하여 읽을 수 있게 됩니다. {% endhint %} ## 텍스트 그림자 및 윤곽선 속성 텍스트는 기본적으로 그림자가 없지만, 다음 값을 설정하여 그림자 같은 효과를 줄 수 있습니다. * `shadowBlur`: *number* * `shadowOffsetX`: *number* * `shadowOffsetY`: *number* * `shadowColor`: *Color3* 객체에 사용합니다. *Color3* 객체는 다음을 저장합니다. *RBG* 0에서 1 사이의 세 숫자로 된 색상. ```ts TextShape.create(sign, { text: 'Text with shadow', shadowColor: { r: 1, g: 0, b: 0 }, shadowOffsetY: 1, shadowOffsetX: -1, }) ``` 텍스트의 글자 주위 가장자리를 둘러싸는 다른 색상의 윤곽선도 가질 수 있습니다. * `outlineWidth`: *number*. 텍스트 윤곽선의 너비를 모든 방향으로 0에서 1 사이의 숫자로 나타낸 것입니다. 기본값은 *0*, 이 값은 보이지 않게 만듭니다. * `outlineColor`: *Color3* 객체에 사용합니다. *Color3* 객체는 다음을 저장합니다. *RBG* 0에서 1 사이의 세 숫자로 된 색상. ## 여러 줄 텍스트를 여러 줄로 나누고 싶다면 다음을 사용하세요. `\n` 문자열의 일부로. 다음 예제에는 서로 분리된 두 줄의 텍스트가 있습니다: ```ts TextShape.create(sign, { text: 'This is one line. \nThis is another line', }) ``` 여러 줄 텍스트와 관련하여 다음 속성도 설정할 수 있습니다: * `lineCount`: *number*. 텍스트 상자에 최대 몇 줄의 텍스트를 맞출지입니다. 설정하지 않으면 줄 수에 제한이 없습니다. `textWrapping` 속성은 *true* 보다 많은 한 줄을 사용하려면 * `lineSpacing`: *number*. 각 줄 사이의 간격이 얼마인지입니다. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.decentraland.org/creator/content-creator-ko/sdk7/3d/text.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.