[Cocos Creator 강좌] RichText 사용하기

RichText component reference 

 RichText component는 string을 다양한 스타일로 표현할 수 있게 해줍니다. 약간의 BBCode를 통해서 텍스트를 커스터마이징 할 수 있죠. Creator에서 제공하고 있는 태그는 다음과 같습니다. (color, size, outline, b, i, u, br, img) 기존 Label 컴포넌트로는 할 수 없었던 텍스트에 테두리(outline)을 만드는 것을 예제로 해보겠습니다.

1. Hierarchy 탭에 Create Empty Node를 만듭니다.

2. Add Componet - Add Renderer Component - RichText 

3. 생성된 RichText의 String 프로퍼티에 BBCode를 넣어줍니다. 사용 예시는 아래의 표를 참고하세요.

4. 위와 같이 리치텍스트가 적용된 것을 볼 수 있습니다.

Supported tags

Name	Description	Example	Note
color	Specify the font rendering color, the color value could be a built-in value or a hex value. eg, use #ff0000 for red.	<color=#ff0000>Red Text</color>	For built-in color, please refer to cc.Color
size	Specify the font rendering size, the size should be a integer.	<size=30>enlarge me</size>
outline	Specify the font  outline , you could customize the  outline  color and width by using the  color  and  width  attribute.	<outline color=red width=4>A label withoutline</outline>	If you don't specify the color and width attribute, the default color value is #ffffff and the default width is 1.
b	Render text as bold font	<b>This text will be rendered as bold</b>	The tag name must be lowercase and tag name bold is not supported.
i	Render text as italic font	<i>This text will be rendered as italic</i>	The tag name must be lowercase and tag name italic is not supported.
u	Add a underline to the text	<u>This text will have a underline</u>	The tag name must be lowercase and tag name underline is not supported.
on	Specify a event callback to a text node，when you click the node，the callback will be triggered.	<on click="handler"> click me! </on>	Every valid tag could also add another click event attribute. eg. <size=10 click="handler2">click me</size>
br	Insert a empty line	<br/>	Note：<br></br> and <br> are both invalid tags.
img	Add image emoji support to your RichText. The emoji name should be a valid spriteframe name in the ImageAtlas property.	<img src='emoji1' click='handler' />	Note: Only <img src='foo' click='bar' /> is a valid img tag. If you specify a large emoji image, it will scale the sprite height to the line height of the RichText together with the sprite width.