1.首先先随手搭建一个UI,这个UI包含了一个滑动条和一个文本
我们将它起名为UIHP。并导出UI。
2.新建一个脚本~叫做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">/** 当脚本被实例后,会在第一帧更新前调用此函数 */</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
复
再新建一个脚本,叫做GameLauncher来测试这个脚本
再新建一个脚本,叫做GameLauncher来测试这个脚本
<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">/** 当脚本被实例后,会在第一帧更新前调用此函数 */</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
复制
把GameLauncher拖入到场景中,我们就可以看到效果了。在实战中去服务器修改对应scripts的hp值和mhp就可以达到效果了。