galacean · eyworldwide · Feb 10, 2025 · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025
diff --git a/docs/en/UI/overall.md → docs/en/UI/overall.mdx b/docs/en/UI/overall.md → docs/en/UI/overall.mdx
diff --git a/docs/en/UI/quickStart/button.md → docs/en/UI/quickStart/button.mdx b/docs/en/UI/quickStart/button.md → docs/en/UI/quickStart/button.mdx
@@ -13,15 +13,15 @@ label: UI
 
 Add a `Button` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Zjn4QbY0B-IAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Zjn4QbY0B-IAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 > If the parent or ancestor node does not have a Canvas component, a root Canvas node will be automatically added.
 
 ### Set Transition
 
 In the editor, you can easily set the button's transition effects for different states.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*IFiaSLZqIWYAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*IFiaSLZqIWYAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ## Properties
 
@@ -41,4 +41,4 @@ In the editor, you can easily set the button's transition effects for different
 
 ## Script Development
 
-<playground src="ui-Button.ts"></playground>
+<Playground href="/embed/ui-Button" />
diff --git a/docs/en/UI/quickStart/canvas.md → docs/en/UI/quickStart/canvas.mdx b/docs/en/UI/quickStart/canvas.md → docs/en/UI/quickStart/canvas.mdx
@@ -13,19 +13,19 @@ The root canvas is the foundation of the UI, but not all `UICanvas` nodes are ro
 
 Add a Canvas node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZFO6Q7P7NwQAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZFO6Q7P7NwQAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Set Properties
 
 Select the node that has the `Canvas` component and you can set its properties in the **[Inspector Panel](/docs/interface/inspector)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4nbARKclT8sAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*4nbARKclT8sAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Root Canvas
 
 If the parent or ancestor node of the newly added canvas node already contains an active `UICanvas` component, this canvas will not have rendering or interaction functionality.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9CxZQ5t6GVEAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9CxZQ5t6GVEAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ## Properties
 

diff --git a/docs/en/UI/quickStart/event.md → docs/en/UI/quickStart/event.mdx b/docs/en/UI/quickStart/event.md → docs/en/UI/quickStart/event.mdx
@@ -37,4 +37,4 @@ stateDiagram
 
 ## Script Development
 
-<playground src="ui-Event.ts"></playground>
+<Playground href="/embed/ui-Event" />
diff --git a/docs/en/UI/quickStart/group.md → docs/en/UI/quickStart/group.mdx b/docs/en/UI/quickStart/group.md → docs/en/UI/quickStart/group.mdx
@@ -11,7 +11,7 @@ The `UIGroup` component allows you to inherit or ignore properties such as **opa
 
 Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, click **Add Component** and choose **UIGroup**. You can control the opacity of multiple UI elements by modifying the settings.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*PWGYRb7MJs4AAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*PWGYRb7MJs4AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ## Properties
 
@@ -25,4 +25,4 @@ Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, c
 
 ## Script Development
 
-<playground src="xr-ar-simple.ts"></playground>
+<Playground href="/embed/xr-ar-simple" />
diff --git a/docs/en/UI/quickStart/image.md → docs/en/UI/quickStart/image.mdx b/docs/en/UI/quickStart/image.md → docs/en/UI/quickStart/image.mdx
@@ -13,21 +13,21 @@ The `Image` component is used to display images within a `UICanvas`.
 
 Add an `Image` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9SCNTZNglo0AAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9SCNTZNglo0AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 > If the parent or ancestor node does not have a Canvas component, a root canvas node will be automatically added.
 
 ### Set Sprite
 
 The content displayed by the `Image` depends on the selected [Sprite asset](). Select the node with the `Image` component, and in the **[Inspector Panel](/docs/interface/inspector)**, choose the corresponding sprite asset in the Sprite property to change the displayed content.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aztPTKxnkHEAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*aztPTKxnkHEAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Modify Draw Mode
 
 The `Image` component currently provides three draw modes: Normal, Nine-Patch, and Tiled (the default is Normal). You can visually feel the rendering differences between modes by modifying the width and height in each mode.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*z6iPRb0U9FUAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*z6iPRb0U9FUAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Adjust Size
 
@@ -45,4 +45,4 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size]
 
 ## Script Development
 
-<playground src="ui-Image.ts"></playground>
+<Playground href="/embed/ui-Image" />
diff --git a/docs/en/UI/quickStart/order.md → docs/en/UI/quickStart/order.mdx b/docs/en/UI/quickStart/order.md → docs/en/UI/quickStart/order.mdx
diff --git a/docs/en/UI/quickStart/text.md → docs/en/UI/quickStart/text.mdx b/docs/en/UI/quickStart/text.md → docs/en/UI/quickStart/text.mdx
@@ -13,27 +13,27 @@ The `Text` component is used to display text within a `UICanvas`.
 
 Add a `Text` node in the **[Hierarchy Panel](/docs/interface/hierarchy/)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*yklkSI-wIq0AAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*yklkSI-wIq0AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 > If the parent or ancestor node does not have a Canvas component, a root canvas node will be automatically added.
 
 ### Set Text Content
 
 Select the node with the `Text` component, and in the **[Inspector Panel](/docs/interface/inspector)**, modify the `text` property to change the content of the `Text` element.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*j46eSYWAfVYAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*j46eSYWAfVYAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Set Font
 
 Select the node with the `Text` component, and in the **[Inspector Panel](/docs/interface/inspector)**, modify the `font` property to change the font type of the `Text` element.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*vR-rR7eGHZkAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*vR-rR7eGHZkAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 ### Modify Font Size
 
 The `Text` component can modify the rendering size by adjusting the `FontSize`.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*DcrDR6Y_fKAAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*DcrDR6Y_fKAAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 > Changing the `size` in `UITransform` will not affect the rendering size of `Text`.
 
@@ -57,4 +57,4 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`.
 
 ## Script Development
 
-<playground src="ui-Text.ts"></playground>
+<Playground href="/embed/ui-Text" />
diff --git a/docs/en/UI/quickStart/transform.md → docs/en/UI/quickStart/transform.mdx b/docs/en/UI/quickStart/transform.md → docs/en/UI/quickStart/transform.mdx
@@ -11,7 +11,7 @@ The `UITransform` component is specifically designed to represent the size and p
 
 When a node with a UI component is added, the `UITransform` component will automatically be added (replacing the previous [Transform](/apis/core/#Transform) component). In the editor, you can select the node and use the `RectTool` (shortcut key `T`) to quickly adjust properties, or you can set precise properties in the **[Inspector Panel](/docs/interface/inspector)**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*hJ81TKtDKLIAAAAAAAAAAAAAehuCAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*hJ81TKtDKLIAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
 
 > When the main canvas's render mode is `Screen`, the editor will prohibit modifications to its `transform` to avoid screen adaptation issues. Therefore, in scripts, **developers should avoid modifying the `transform` properties of the main canvas in screen space.**
 

diff --git a/docs/en/UI/system.md → docs/en/UI/system.mdx b/docs/en/UI/system.md → docs/en/UI/system.mdx
diff --git a/docs/en/animation/animator.mdx b/docs/en/animation/animator.mdx
@@ -26,16 +26,16 @@ The Animation Control Component ([Animator](/apis/core/#Animator)) of the model
 If the model contains animations, a read-only [Animation Controller](/en/docs/animation/animatorController/) will be automatically bound for you.
 </Callout>
 
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WkafRagPFo8AAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WkafRagPFo8AAAAAAAAAAAAADsJ_AQ/original" />
 
 If there is no Animation Control Component ([Animator](/apis/core/#Animator)), you can create one as shown below
 
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uOuPT5cFwx4AAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uOuPT5cFwx4AAAAAAAAAAAAADsJ_AQ/original" />
 
 2. Create an [Animation Controller](/en/docs/animation/animatorController/) asset and bind it to the model
 
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*PxHwTrU58yAAAAAAAAAAAAAADsJ_AQ/original)
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Ds5TTosYiDYAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*PxHwTrU58yAAAAAAAAAAAAAADsJ_AQ/original" />
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Ds5TTosYiDYAAAAAAAAAAAAADsJ_AQ/original" />
 
 3. After editing the Animation Controller ([see details](/en/docs/animation/animatorController/)), you can play the animations according to the logic of the [Animation Controller](/en/docs/animation/animatorController/)
 

diff --git a/docs/en/animation/animatorController.mdx b/docs/en/animation/animatorController.mdx
@@ -13,20 +13,20 @@ Through the Animation Controller editor, users can organize the playback logic o
 
 1. Prepare the Animation Clips ([Create Animation Clips](/en/docs/animation/clip)).
 
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Wl35T7U_zg8AAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Wl35T7U_zg8AAAAAAAAAAAAADsJ_AQ/original" />
 
 2. To organize the playback of these Animation Clips, we need to create an Animation Controller ([AnimatorController](/apis/core/#AnimatorController)) asset.
 
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*PxHwTrU58yAAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*PxHwTrU58yAAAAAAAAAAAAAADsJ_AQ/original" />
 
 3. The newly created Animation Controller has no data. We need to edit it, double-click the asset, and add an Animation State ([AnimatorState](/apis/core/#AnimatorState)) to it.
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*V0n1TJMquGYAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*V0n1TJMquGYAAAAAAAAAAAAADsJ_AQ/original" />
 
 4. Click AnimatorState to bind an [Animation Clip](/en/docs/animation/clip) ([AnimationClip](/apis/core/#AnimationClip)) to it.
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*xfPTRJg-hOMAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*xfPTRJg-hOMAAAAAAAAAAAAADsJ_AQ/original" />
 
 5. Bind the Animation Controller ([AnimatorController](/apis/core/#AnimatorController)) asset to the [Animation Control Component](/en/docs/animation/animator).
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Ds5TTosYiDYAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*Ds5TTosYiDYAAAAAAAAAAAAADsJ_AQ/original" />
 
 6. At this point, you can play the `Idle` animation in the exported project through `animator.play("New State")`.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,4 +37,4 @@ stateDiagram

		## Script Development

		<playground src="ui-Event.ts"></playground>
		<Playground href="/embed/ui-Event" />