Skip to content

Commit

Permalink
Merge pull request cocos#1150 from cocos-creator/v2.3
Browse files Browse the repository at this point in the history
V2.3
  • Loading branch information
jareguo authored Feb 14, 2020
2 parents 3c17eb3 + 5cbacb1 commit cb1be02
Show file tree
Hide file tree
Showing 30 changed files with 353 additions and 166 deletions.
1 change: 1 addition & 0 deletions en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
- [Publish to Alipay Mini Games](publish/publish-alipay-mini-games.md)
- [Publish to WeChat Mini Games](publish/publish-wechatgame.md)
- [WeChat Open Data Context](publish/publish-wechatgame-sub-domain.md)
- [Publish to QTT Mini Games](publish/publish-qutoutiao-mini-games.md)
- [Publish to Facebook Instant Games](publish/publish-fb-instant-games.md)
- [Publish to Google Play Instant](publish/publish-android-instant.md)
- [Publish to OPPO Mini Games](publish/publish-oppo-instant-games.md)
Expand Down
61 changes: 34 additions & 27 deletions en/components/label.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,52 @@
# Label Component Reference

Label components are used to display a piece of text, text can be system fonts, TrueType fonts or BMFont fonts and art numbers, in addition, label also has typesetting function.
Label component is used to display a piece of text, the text can be **System Font**, **TrueType Font**, **BMFont** or **Atlas Font**. In addition, label also has typesetting function.

![label-property](./label/label-property.png)

Click the **Add Component** button at the bottom of the **Properties** panel and select **Label** from **Renderer Component** to add the Label component to the node.

## Label Properties

| Properties | Function Explanation
| -------------- | ----------- |
|String| Text content character string.
|Horizontal Align| Horizontal alignment pattern of the text. The options are LEFT, CENTER and RIGHT.
|Vertical Align| Vertical alignment pattern of the text. The options are TOP, CENTER and BOTTOM.
|Font Size| Font size of the text.
|SpacingX | The spacing between font characters, only available in BMFont.
|Line Height| Line height of the text.
|Overflow| Layout pattern of the text. Currently supports CLAMP, SHRINK and RESIZE_HEIGHT. See [Label Layout](#label-layout) below for more detailed information.
|Enable Wrap Text| Enable or disable the text line feed. (which takes effect when the Overflow is set to CLAMP or SHRINK)
|Font | Designate the font file needed for rendering the text. If the system font is used, then this attribute can be set to null.
|Font Family| Font family name, takes effect when using system font.
|Cache Mode| The text cache mode (New in v2.0.9). Takes effect only for **system font** or **ttf** font, BMFont do not require this optimization. And includes **NONE**, **BITMAP**, **CHAR** three modes. See [Cache Mode](#cache-mode-new-in-v209) below for details.
| Use System Font | Boolean value, choose whether to use the system font or not.
| Properties | Function Explanation |
| ---------------- | -------------------- |
| String | Text content character string. |
| Horizontal Align | Horizontal alignment pattern of the text. The options are LEFT, CENTER and RIGHT. |
| Vertical Align | Vertical alignment pattern of the text. The options are TOP, CENTER and BOTTOM. |
| Font Size | Font size of the text. |
| Line Height | Line height of the text. |
| SpacingX | The spacing between font characters, only available in BMFont. |
| Overflow | Layout pattern of the text. Currently supports CLAMP, SHRINK and RESIZE_HEIGHT. See [Label Layout](#label-layout) below for more detailed information. |
| Enable Wrap Text | Enable or disable the text line feed. (which takes effect when the Overflow is set to CLAMP or SHRINK) |
| Font | Specify the font file needed for text rendering. If the System Font is used, then this property can be set to `null`. |
| Font Family | Font family name. (Takes effect when using System Font) |
| Enable Bold | If enabled, bold effect will be added to the text. (Takes effect when using System Font or TTF font) |
| Enable Italic | If enabled, italic effect will be added to the text. (Takes effect when using System Font or TTF font) |
| Enable Underline | If enabled, underline effect will be added to the text. (Takes effect when using System Font or TTF font) |
| Underline Height | Height of underline. |
| Cache Mode | Text cache mode includes **NONE**, **BITMAP** or **CHAR**. Takes effect only for System Font or TTF font, BMFont does not require this optimization. See [Cache Mode](#cache-mode-new-in-v209) below for details. |
| Use System Font | If enabled, **System Font** will be used. |
| Materials | Material of Label, see the document [Material](../render/material.md) for details. |

For API interface of Label, please refer to [Label API](../../../api/en/classes/Label.html).

## Label Layout

| Properties | Function Explanation
| -------------- | ----------- |
|CLAMP| The text size won't zoom in or out as the Bounding Box size changes. When Wrap Text is disabled, parts exceeding the Bounding Box won't be shown according to the normal character layout. When Wrap Text is enabled, it will try to wrap the text exceeding the boundaries to the next line. If the vertical space is not enough, any not completely visible text will also be hidden.
|SHRINK| The text size will zoom in or out (it won't zoom out automatically, the maximum size that will show is specified by Font Size) as the Bounding Box size changes. When Wrap Text is enabled, if the width is not enough, it will try to wrap the text to the next line before automatically adapting the Bounding Box's size to make the text show completely. If Wrap Text is disabled, then it will compose according to the current text and zoom automatically if it exceeds the boundaries. **Note**: This mode may takes up more CPU resources when the label is refreshed.
|RESIZE_HEIGHT| The text Bounding Box will adapt to the layout of the text. The user cannot manually change the height of text in this status; it is automatically calculated by the internal algorithm.
| Properties | Function Explanation |
| ------------- | ------------- |
| CLAMP | The text size won't zoom in or out as the Bounding Box size changes. When Wrap Text is disabled, parts exceeding the Bounding Box won't be shown according to the normal character layout. When Wrap Text is enabled, it will try to wrap the text exceeding the boundaries to the next line. If the vertical space is not enough, any not completely visible text will also be hidden. |
| SHRINK | The text size will zoom in or out (it won't zoom out automatically, the maximum size that will show is specified by Font Size) as the Bounding Box size changes.<br>When Wrap Text is enabled, if the width is not enough, it will try to wrap the text to the next line before automatically adapting the Bounding Box's size to make the text show completely.<br>If Wrap Text is disabled, then it will compose according to the current text and zoom automatically if it exceeds the boundaries.<br>**Note**: This mode may takes up more CPU resources when the label is refreshed. |
| RESIZE_HEIGHT | The text Bounding Box will adapt to the layout of the text. The user cannot manually change the height of text in this status; it is automatically calculated by the internal algorithm. |

## Cache Mode (New in v2.0.9)
## Cache Mode

| Properties | Function Explanation
| -------------- | ----------- |
| NONE | Defaults, the entire text in label will generate a bitmap
| BITMAP | After selection, the entire text in the Label will still generate a bitmap, but will try to participate in [Dynamic Atlas](../advanced-topics/dynamic-atlas.md). As long as the requirements of Dynamic Atlas are met, the Draw Call will be merged with the other Sprite or Label in the Dynamic Atlas. Because Dynamic Atlas consume more memory, **this mode can only be used for Label with infrequently updated text**. **Note**: Similar to NONE, BITMAP will force a bitmap to be generated for each Label component, regardless of whether the text content is equivalent. If there are a lot of Labels with the same text in the scene, it is recommended to use CHAR to reuse the memory space.
| CHAR | The principle of CHAR is similar to BMFont, Label will cache text to the global shared bitmap in "word" units, each character of the same font style and font size will share a cache globally. Can support frequent modification of text, the most friendly to performance and memory. However, there are currently restrictions on this model, which we will optimize in subsequent releases:<br>1. **This mode can only be used for font style and fixed font size (by recording the fontSize, fontFamily, color, and outline of the font as key information for repetitive use of characters, other users who use special custom text formats need to be aware). And will not frequently appear with a huge amount of unused characters of Label.** This is to save the cache, because the global shared bitmap size is 2048*2048, it will only be cleared when the scene is switched. Once the bitmap is full, the newly appearing characters will not be rendered. <br>2. Cannot participate in dynamic mapping (multiple labels with CHAR mode enabled can still merge Draw Call in the case of without interrupting the rendering sequence).
| Properties | Function Explanation |
| ---------- | ---------------------- |
| NONE | Defaults, the entire text in label will generate a bitmap. |
| BITMAP | After selection, the entire text in the Label will still generate a bitmap, but will try to participate in [Dynamic Atlas](../advanced-topics/dynamic-atlas.md). As long as the requirements of Dynamic Atlas are met, the Draw Call will be merged with the other Sprite or Label in the Dynamic Atlas. Because Dynamic Atlas consume more memory, **this mode can only be used for Label with infrequently updated text**. **Note**: Similar to NONE, BITMAP will force a bitmap to be generated for each Label component, regardless of whether the text content is equivalent. If there are a lot of Labels with the same text in the scene, it is recommended to use CHAR to reuse the memory space. |
| CHAR | The principle of CHAR is similar to BMFont, Label will cache text to the global shared bitmap in "word" units, each character of the same font style and font size will share a cache globally. Can support frequent modification of text, the most friendly to performance and memory. However, there are currently restrictions on this model, which we will optimize in subsequent releases:<br>1. **This mode can only be used for font style and fixed font size (by recording the fontSize, fontFamily, color, and outline of the font as key information for repetitive use of characters, other users who use special custom text formats need to be aware). And will not frequently appear with a huge amount of unused characters of Label.** This is to save the cache, because the global shared bitmap size is 2048*2048, it will only be cleared when the scene is switched. Once the bitmap is full, the newly appearing characters will not be rendered. <br>2. Cannot participate in dynamic mapping (multiple labels with CHAR mode enabled can still merge Draw Call in the case of without interrupting the rendering sequence). |

**Note**
**Note**:

- Cache Mode has an optimized effect for all platforms.
- The BITMAP mode replaces the original Batch As Bitmap option, and old projects will automatically migrate to this option if Batch As Bitmap is enabled.
Expand Down
Binary file modified en/components/label/label-property.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 4 additions & 6 deletions en/components/richtext.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ For more information about BBCode, please refer to the **BBCode format** section

Click the **Add Component** button at the bottom of the **Properties** panel and select **richtext** from **Renderer Component** to add the richtext component to the node.

The API reference of RichText is here: [RichText API](../../../api/en/classes/RichText.html).

## RichText property

| Property | Function Explanation |
Expand All @@ -27,6 +25,8 @@ The API reference of RichText is here: [RichText API](../../../api/en/classes/Ri
| Image Atlas | The image atlas for the img tag. For each src value in the img tag, there should be a valid spriteFrame in the image atlas. |
| Handle Touch Event | Once checked, the RichText will block all input events (mouse and touch) within the bounding box of the node, preventing the input from penetrating into the underlying node. |

The API reference of RichText is here: [RichText API](../../../api/en/classes/RichText.html).

## BBCode format

### Basics
Expand Down Expand Up @@ -92,17 +92,15 @@ There are two ways to set the color of RichText:

## Cache Mode (New in v2.3)

Since the RichText component is assembled from multiple Label nodes, the number of drawcalls for complex rich text will also be high. Therefore, the engine provides the CacheMode setting of the Label component for the RichText component to avoid the increase of drawcall. For a detailed description of each cache type, refer to [Cache Mode of the Label component](../label.md)
Since the RichText component is assembled from multiple Label nodes, the number of drawcalls for complex rich text will also be high. Therefore, the engine provides the CacheMode setting of the Label component for the RichText component to avoid the increase of drawcall. For a detailed description of each cache type, refer to [Cache Mode of the Label component](./label.md)

| Attributes | Description
| -------------- | ----------- |
| NONE | By default, for each Label node created by RichText, set its CacheMode to NONE, that is, generate a bitmap of the entire text of each Label and render it separately.
|BITMAP| After selection, for each Label node created by RichText, set its CacheMode to BITMAP type, that is, generate a bitmap of the entire text of each Label, and add the bitmap to the dynamic atlas, and then according to the dynamic atlas to assemble and render.
| CHAR | After selection, each Label node created by RichText has its CacheMode set to CHAR type, that is, the text of each Label is cached in a globally shared bitmap in "words". Each of the same font style and size is Characters will share a cache globally.

**Note**

- The **RenderTexture** module in the **Project -> Project Settings -> Module Config** panel cannot be removed when using the cache mode.
**Note**: The **RenderTexture** module in the **Project -> Project Settings -> Module Config** panel cannot be removed when using the cache mode.

## Detailed explanation

Expand Down
1 change: 1 addition & 0 deletions en/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ Welcome to the **Cocos Creator User Manual**! **Cocos Creator** is a free, cross
- **As of v2.3.0**, Cocos Creator has added support for [3D Physics and Collision](physics-3d/index.md) and [3D Particle System](3d/particle-system-3d.md), while the [Material System](render/index.md) has been upgraded to the official version.
- [Spine ReplaceTexture](components/spine.md#spine-replacetexture).
- [DragonBones ReplaceTexture](components/dragonbones.md).
- **As of v2.3.0**, Cocos Creator supports publishing to [QTT Mini Games](publish/publish-qutoutiao-mini-games.md).
- **As of v2.1.4**, Cocos Creator supports publishing to [Alipay Mini Games](publish/publish-alipay-mini-games.md).
- **As of v2.1**, Cocos Creator introduced 3D support. Please refer to [v2.1.0 Release Notes](release-notes/upgrade-guide-v2.1.md).
- **As of v2.0.7**, Cocos Creator supports publishing to [Huawei Quick Games](publish/publish-huawei-quick-games.md).
Expand Down
1 change: 1 addition & 0 deletions en/publish/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
- [Publish to Alipay Mini Games](publish-alipay-mini-games.md)
- [Publish to WeChat Mini Games](publish-wechatgame.md)
- [WeChat Open Data Context](publish-wechatgame-sub-domain.md)
- [Publish to QTT Mini Games](publish-qutoutiao-mini-games.md)
- [Publish to Facebook Instant Games](publish-fb-instant-games.md)
- [Publish to Google Play Instant](publish-android-instant.md)
- [Publish to OPPO Mini Games](publish-oppo-instant-games.md)
Expand Down
2 changes: 1 addition & 1 deletion en/publish/publish-huawei-quick-games.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ The specific filling rules for the relevant parameter configuration are as follo

**2. Build**

After the relevant parameters of the **Build** panel are set, click **Build**. After the build is complete, click the **Open** button behind the **Build Path** to open the build release package. You can see that the **huawei** directory is generated under the default release path build directory, which is the exported **Huawei Quick Game**. The game project directory and **rpk**, **rpk** package are in the **/build/huawei/dist** directory.
After the relevant parameters of the **Build** panel are set, click **Build**. After the build is complete, click the **Open** button behind the **Build Path** to open the build release package. You can see that the **huawei** directory is generated under the default release path `build` directory, which is the exported Huawei Quick Game project directory and **rpk**, **rpk** package are in the **/build/huawei/dist** directory.

![](./publish-huawei-quick-games/rpk.png)

Expand Down
2 changes: 1 addition & 1 deletion en/publish/publish-oppo-instant-games.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ The specific filling rules for the relevant parameter configuration are as follo

**2. Build**

After the relevant parameters of the **Build** panel are set, click **Build**. After the build is complete, click the **Open** button behind the **Build Path** to open the build release package. You can see that the **quickgame** directory is generated under the default release path build directory, which is the exported __OPPO Mini Game__. The game project directory and **rpk**, **rpk** package are in the __/build/quickgame/dist__ directory.
After the relevant parameters of the **Build** panel are set, click **Build**. After the build is complete, click the **Open** button behind the **Build Path** to open the build release package. You can see that the **quickgame** directory is generated under the default release path `build` directory, which is the exported OPPO Mini Game project directory and **rpk**, **rpk** package are in the __/build/quickgame/dist__ directory.

![](./publish-oppo-instant-games/package.jpg)

Expand Down
Loading

0 comments on commit cb1be02

Please sign in to comment.