====== Skill Cooldown ======
====UI Design ====
Create UI according to template (Note the arrangement)

* Should edit as desired after understanding how triggers work

**Step 1:** Create a “Common” image UI to contain the images created later

{{:developer_center:developer_editor:screenshot_1725800681.png?nolink|}}
{{:developer_center:developer_editor:void_night_ver.png?nolink&300|}}

**Step 2:** Create an additional “Black Screen” image UI as a subset of the “Main” image UI

{{:developer_center:developer_editor:screenshot_1725801019.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1725801059.png?nolink&350|}}

**Step 3:** Create an additional “Skill Name” text UI as a subset of the “General” image UI

{{:developer_center:developer_editor:screenshot_1725801234.png?nolink|}}

**Step 4:** Create an additional “Time” text UI as a subset of the “General” image UI

{{:developer_center:developer_editor:screenshot_17258012314.png?nolink|}}

**Step 5:** Create an additional “Image” button UI as a subset of the “Black Screen” image UI
{{:developer_center:developer_editor:screenshot_1725801481.png?nolink|}}

**Complete UI**	

{{:developer_center:developer_editor:screenshot_1725801537.png?nolink|}}

Note: When using the “Image” UI as an effect UI (see instructions below), do not arrange the “Skill Name” and “Time” text UIs as subsets of the “Black Screen” image UI or the “Image” button UI

For example, if you arrange The “Skill Name” and “Time” text UIs are subsets of the “Black Screen” image UI

=====Trigger=====
  * First Create a Private Variable "Timer type" 
{{:developer_center:developer_editor:screenshot_1725799482.png?nolink|}}
==== Trigger 1 ====

**Step 1:** Create an event related to the UI button
{{:developer_center:developer_editor:screenshot_1725799847.png?nolink|}}
**Step 2:** Add 'Play Unit Animation' in the action section
{{:developer_center:developer_editor:screenshot_1725872514.png?nolink|}}
**Step 3:** Set the UI component of the “Image” button to play the 'clockwise sweep' effect with a time of one: skill recovery time
{{:developer_center:developer_editor:screenshot_1725872591.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1725872643.png?nolink|}}
(Note: due to the game UI effect still having some errors, set the time to a short level so that the UI effect can achieve the desired effect)

**Finish**
{{:developer_center:developer_editor:screenshot_1725872670.png?nolink|}}
==== Trigger 2 (Continue from Trigger 1) ====

**Step 4:** Add 'Run countdown timer' in the action section, set the created “Time” timer.
{{:developer_center:developer_editor:screenshot_1725872756.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1725872828.png?nolink|}}


**Step 5:** Add 'Set text content' in the action section. Set the “Timer” text UI content to concatenate the conversion string from the number [timer] to “s”
{{:developer_center:developer_editor:screenshot_1726058323.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058470.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058510.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058540.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058573.png?nolink|}}
The “s” text can be customized as desired


**Step 6:** Add ‘Display unit’ in the action, the effect can be present or absent. Set the “Timer” text UI component to show
{{:developer_center:developer_editor:screenshot_1725872961.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058687.png?nolink|}}
**Step 7:** Add "Repeat... until" in the constraint with the timer time condition being zero
{{:developer_center:developer_editor:screenshot_1726058755.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058798.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058878.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726058901.png?nolink|}}
**Step 8:** (The waiting time can be added or not) and copy set the text block

{{:developer_center:developer_editor:screenshot_1726058988.png?nolink|}}


**Step 9:** Add ‘Set text content’ in the action item, set the time UI content to “0s”
{{:developer_center:developer_editor:screenshot_1726059028.png?nolink|}}
**Step 10:** Add ‘Hide unit’ in the action, the effect can be present or absent. Set the “Timer” text UI component to hide
{{:developer_center:developer_editor:screenshot_1726059066.png?nolink|}}
{{:developer_center:developer_editor:screenshot_1726059104.png?nolink|}}

----
If you have any questions about Developer Tools, feel free to join our official discord server
 [[https://discord.gg/NVRZHBChBt|Mini World Global DEV discord]]