【口袋方舟】如何制作一个血条

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来测试这个脚本

 
<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就可以达到效果了。
 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值