1. First, build a UI casually. This UI contains a slider and a text.
We named it UIHP. and export the UI.
2. Create a new script ~ called HPBar
<span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-typescript">
<span style="color:#66d9ef">import</span> UIHP_Generate <span style="color:#66d9ef">from</span> <span style="color:#a6e22e">"./ui-generate /UIHP_generate"</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">@</span><span style="color:#e6db74">Core</span><span style="color:#f8f8f2">.</span>Class
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#66d9ef">class</span> <span style="color:#e6db74">HPBar</span> <span style="color:#66d9ef">extends</span> <span style="color:#e6db74">Core</span><span style= "color:#f8f8f2">.</span>Script <span style="color:#f8f8f2">{</span>
<span style="color:#f8f8f2">@</span><span style="color:#e6db74">Core</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">Property</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">{</span> replicated<span style ="color:#f8f8f2">:</span> <span style="color:#ae81ff">true</span><span style="color:#f8f8f2">,</span> onChanged<span style= "color:#f8f8f2">:</span> <span style="color:#a6e22e">"onHpChange"</span> <span style="color:#f8f8f2">}</span><span style= "color:#f8f8f2">)</span>
<span style="color:#66d9ef">public</span> maxHp<span style="color:#f8f8f2">:</span> <span style="color:#a6e22e">number</span> < span style="color:#f8f8f2">=</span> <span style="color:#ae81ff">0</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">@</span><span style="color:#e6db74">Core</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">Property</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">{</span> replicated<span style ="color:#f8f8f2">:</span> <span style="color:#ae81ff">true</span><span style="color:#f8f8f2">,</span> onChanged<span style= "color:#f8f8f2">:</span> <span style="color:#a6e22e">"onHpChange"</span> <span style="color:#f8f8f2">}</span><span style= "color:#f8f8f2">)</span>
<span style="color:#66d9ef">public</span> hp<span style="color:#f8f8f2">:</span> <span style="color:#a6e22e">number</span> < span style="color:#f8f8f2">=</span> <span style="color:#ae81ff">0</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">private</span> _hpBarUI<span style="color:#f8f8f2">:</span> UIHP_Generate<span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">private</span> _hpBarWidget<span style="color:#f8f8f2">:</span> Gameplay<span style="color:#f8f8f2">.</span> UIWidget<span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">private</span> _isInit <span style="color:#f8f8f2">=</span> <span style="color:#ae81ff">false</span>< span style="color:#f8f8f2">;</span>
<span style="color:#8292a2">/** When the script is instantiated, this function will be called before the first frame is updated */</span>
<span style="color:#66d9ef">protected</span> <span style="color:#e6db74">onStart</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">:</span> <span style="color:#66d9ef">void</span> <span style= "color:#f8f8f2">{</span>
<span style="color:#66d9ef">if</span> <span style="color:#f8f8f2">(</span>SystemUtil<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">isClient</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style ="color:#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
<span style="color:#a6e22e">console</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">log</span><span style="color:#f8f8f2">(</span><span style="color:#a6e22e">"qwq"</span><span style="color:#f8f8f2">)</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">init</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#66d9ef">private</span> <span style="color:#66d9ef">async</span> <span style="color:#e6db74">init</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarUI <span style="color:#f8f8f2">=</span> < span style="color:#f92672">UI</span><span style="color:#f8f8f2">.</span>UIManager<span style="color:#f8f8f2">.</span>instance< span style="color:#f8f8f2">.</span><span style="color:#e6db74">create</span><span style="color:#f8f8f2">(</span>UIHP_Generate<span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget <span style="color:#f8f8f2">=</span> < span style="color:#66d9ef">await</span> Gameplay<span style="color:#f8f8f2">.</span>GameObject<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">asyncSpawn</span><span style="color:#e6db74"><span style="color:#f8f8f2"><</span>Gameplay<span style="color: #f8f8f2">.</span>UIWidget<span style="color:#f8f8f2">></span></span><span style="color:#f8f8f2">(</span><span style= "color:#f8f8f2">{</span> guid<span style="color:#f8f8f2">:</span> <span style="color:#a6e22e">"UIWidget"</span><span style ="color:#f8f8f2">,</span> replicates<span style="color:#f8f8f2">:</span> <span style="color:#ae81ff">false</span> <span style= "color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">setTargetUIWidget</span><span style="color:#f8f8f2">(</span><span style="color:#66d9ef">this</span><span style ="color:#f8f8f2">.</span>_hpBarUI<span style="color:#f8f8f2">.</span>uiWidgetBase<span style="color:#f8f8f2">)</span><span style ="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget<span style="color:#f8f8f2">.</span>widgetSpace <span style="color:#f8f8f2">=</span> Gameplay<span style="color:#f8f8f2">.</span>WidgetSpaceMode<span style="color:#f8f8f2">.</span> OverheadUI<span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">let</span> character <span style="color:#f8f8f2">=</span> <span style="color:#66d9ef">this</span>< span style="color:#f8f8f2">.</span>gameObject <span style="color:#66d9ef">as</span> Gameplay<span style="color:#f8f8f2">.</span>CharacterBase <span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">attachToGameObject</span><span style="color:#f8f8f2">(</span>character<span style="color:#f8f8f2">.</span><span style="color:#e6db74">getHeadUIWidget</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style= "color:#f8f8f2">)</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget<span style="color:#f8f8f2">.</span>relativeLocation <span style="color:#f8f8f2">=</span> Vector<span style="color:#f8f8f2">.</span>up<span style="color:#f8f8f2">.</span> <span style="color:#e6db74">multiply</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">-</span><span style="color:#ae81ff">10</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_isInit <span style="color:#f8f8f2">=</span> < span style="color:#ae81ff">true</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">onHpChange</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#66d9ef">private</span> <span style="color:#e6db74">onHpChange</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">if</span> <span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">!</span><span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_isInit<span style="color:#f8f8f2">)</span> <span style ="color:#f8f8f2">{</span>
<span style="color:#66d9ef">return</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarUI<span style="color:#f8f8f2">.</span>mScollHP <span style="color:#f8f8f2">.</span>percent <span style="color:#f8f8f2">=</span> <span style="color:#66d9ef">this</span>< span style="color:#f8f8f2">.</span>hp <span style="color:#f8f8f2">/</span> <span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>maxHp<span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarUI<span style="color:#f8f8f2">.</span>mTextHPNum <span style="color:#f8f8f2">.</span>text <span style="color:#f8f8f2">=</span> <span style="color:#a6e22e">`</span>< span style="color:#f8f8f2">${</span><span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>hp< span style="color:#f8f8f2">}</span><span style="color:#a6e22e">/</span><span style="color:#f8f8f2">${</span><span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>maxHp<span style="color:#f8f8f2">}</span><span style ="color:#a6e22e">`</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#66d9ef">protected</span> <span style="color:#e6db74">onDestroy</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">:</span> <span style="color:#66d9ef">void</span> <span style= "color:#f8f8f2">{</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarUI<span style="color:#f8f8f2">?.</span> <span style="color:#e6db74">destroy</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpBarWidget<span style="color:#f8f8f2">?.</span> <span style="color:#e6db74">destroy</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#f8f8f2">}</span>
</code></span></span>
TypeScript
complex
Create a new script called GameLauncher to test this script
<span style="background-color:#272822"><span style="color:#f8f8f2"><code class="language-typescript">
<span style="color:#66d9ef">import</span> HPBar <span style="color:#66d9ef">from</span> <span style="color:#a6e22e">"./HPBar"< /span>
<span style="color:#f8f8f2">@</span><span style="color:#e6db74">Core</span><span style="color:#f8f8f2">.</span>Class
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#66d9ef">class</span> <span style="color:#e6db74">GameLauncher</span> <span style="color:#66d9ef">extends</span> <span style="color:#e6db74">Core</span><span style= "color:#f8f8f2">.</span>Script <span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">private</span> _hpbarMap<span style="color:#f8f8f2">:</span> Map<span style="color:#f8f8f2"><</span> <span style="color:#a6e22e">number</span><span style="color:#f8f8f2">,</span> HPBar<span style="color:#f8f8f2">></span> < span style="color:#f8f8f2">=</span> <span style="color:#66d9ef">new</span> <span style="color:#e6db74">Map</span><span style ="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#8292a2">/** When the script is instantiated, this function will be called before the first frame is updated */</span>
<span style="color:#66d9ef">protected</span> <span style="color:#e6db74">onStart</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">:</span> <span style="color:#66d9ef">void</span> <span style= "color:#f8f8f2">{</span>
<span style="color:#66d9ef">if</span> <span style="color:#f8f8f2">(</span>SystemUtil<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">isServer</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style ="color:#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
Events<span style="color:#f8f8f2">.</span><span style="color:#e6db74">addPlayerJoinedListener</span><span style="color:#f8f8f2">(</span>< span style="color:#66d9ef">async</span> <span style="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">:</span> Gameplay< span style="color:#f8f8f2">.</span>Player<span style="color:#f8f8f2">)</span> <span style="color:#f8f8f2">=></span> < span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">let</span> hpbar <span style="color:#f8f8f2">=</span> <span style="color:#66d9ef">await</span> Gameplay <span style="color:#f8f8f2">.</span>Script<span style="color:#f8f8f2">.</span><span style="color:#e6db74">spawnScript</span>< span style="color:#f8f8f2">(</span>HPBar<span style="color:#f8f8f2">,</span> <span style="color:#ae81ff">true</span><span style="color:#f8f8f2">,</span> player<span style="color:#f8f8f2">.</span>character<span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
hpbar<span style="color:#f8f8f2">.</span>maxHp <span style="color:#f8f8f2">=</span> <span style="color:#ae81ff">100</span> <span style="color:#f8f8f2">;</span>
hpbar<span style="color:#f8f8f2">.</span>hp <span style="color:#f8f8f2">=</span> <span style="color:#ae81ff">80</span> <span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpbarMap<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">set</span><span style="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">.</span><span style="color:#e6db74">getPlayerID</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style= "color:#f8f8f2">,</span> hpbar<span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span>
Events<span style="color:#f8f8f2">.</span><span style="color:#e6db74">addPlayerLeftListener</span><span style="color:#f8f8f2">(</span>< span style="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">:</span> Gameplay<span style="color:#f8f8f2">.</span>Player <span style="color:#f8f8f2">)</span> <span style="color:#f8f8f2">=></span> <span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">if</span> <span style="color:#f8f8f2">(</span><span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpbarMap<span style="color:#f8f8f2">.</span><span style="color:#e6db74">has</span><span style ="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">.</span><span style="color:#e6db74">getPlayerID</span><span style= "color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">)</span><span style="color :#f8f8f2">)</span> <span style="color:#f8f8f2">{</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpbarMap<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">get</span><span style="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">.</span><span style="color:#e6db74">getPlayerID</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style= "color:#f8f8f2">)</span><span style="color:#f8f8f2">.</span><span style="color:#e6db74">destroy</span><span style="color :#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#66d9ef">this</span><span style="color:#f8f8f2">.</span>_hpbarMap<span style="color:#f8f8f2">.</span>< span style="color:#e6db74">delete</span><span style="color:#f8f8f2">(</span>player<span style="color:#f8f8f2">.</span><span style="color:#e6db74">getPlayerID</span><span style="color:#f8f8f2">(</span><span style="color:#f8f8f2">)</span><span style= "color:#f8f8f2">)</span><span style="color:#f8f8f2">;</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#f8f8f2">}</span><span style="color:#f8f8f2">)</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#f8f8f2">}</span>
<span style="color:#f8f8f2">}</span>
</code></span></span>
TypeScript
copy
Drag GameLauncher into the scene and we can see the effect. In actual combat, the effect can be achieved by going to the server to modify the hp value and mhp of the corresponding scripts.