【UEFN】ビルボードにスコアを表示させてみる

## はじめに
UEFN界隈を盛り上げるためにアドベントカレンダー建てました。(自力で25日間埋めていくことになるので温かい目でご覧ください😊)本日は記念すべき1日目の記事となります。

## 余談
この度UEFN/Verseに関するオープンコミュニティサーバーを建ち上げました。ちょっとでも興味があれば奮ってご参加くださいませ。

https://discord.gg/cK4daQyD

## 今回やる事
ビルボードデバイスを利用してフィールド上にスコアが表示されたテキストを配置していきます！

最終イメージ↓
<iframe width="560" height="315" src="https://www.youtube.com/embed/ulydnNx_eM4?si=7dr2Ez_wuUG12zMd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## テキストを表示させるビルボードデバイスのコードを見てみる
```
    # Used to display custom text messages on a billboard.
    billboard_device<public> := class<concrete><final>(creative_device_base):
        # Shows the billboard text.
        ShowText<public>():void = external {}

        # Hides the billboard text.
        HideText<public>():void = external {}

        # Updates the device display to show the current *Text*.
        UpdateDisplay<public>():void = external {}

        # Sets the visibility of the device border mesh. This also determines whether the device collision is enabled.
        SetShowBorder<public>(Show:logic):void = external {}

        # Returns `true` if the device border is enabled.
        GetShowBorder<public>()<transacts>:logic = external {}

        # Sets the device *Text*.
        SetText<public>(Text:message):void = external {}

        # Sets the *Text Size* of the device *Text*. Clamped to range [8, 24].
        SetTextSize<public>(Size:int):void = external {}

        # Returns the *Text Size* of the device *Text*.
        GetTextSize<public>()<transacts>:int = external {}
```
インスペクターで設定する機能のほぼ全てをコード上でいじれそうですね。
今回利用するのは'SetText'だけになります。

```
 # Sets the device *Text*.
        SetText<public>(Text:message):void = external {}
```

## 実装
コンテンツドロワーからスコアマネージャーとbillboardデバイスを配置する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692976/d453d8f1-73cd-2af2-dd13-ef7aede4376f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692976/447c305b-4752-ba96-6e31-ee7112ca1417.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692976/ae3c447b-0450-b85a-77f9-5fb1f9170b8f.png)


以下が全体コードになります。
```
using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/Diagnostics }

score_trigger_device := class(creative_device):

    @editable
    Trigger:trigger_device=trigger_device{}
    @editable
    ScoreManager:score_manager_device=score_manager_device{}
    @editable
    ScoreText:billboard_device=billboard_device{}
    @editable
    EventText:int=10

    ScoreMessage<localizes>(msg:string):message="{msg}"

    OnBegin<override>()<suspends>:void=
        SetTriggerText(0)
        ScoreManager.SetScoreAward(10)
        Trigger.TriggeredEvent.Subscribe(OnInitial)
    
    OnInitial(QAgent:?agent):void=
        if (Agnet:=QAgent?):
            ScoreManager.Activate(Agnet)
            score := ScoreManager.GetCurrentScore(Agnet)
            SetTriggerText(score)

    SetTriggerText(value:int):void=
        ScoreText.SetText(ScoreMessage("Now Socre : {value}"))
```
### コードの流れ
- OnBeginで初期スコアの表示
- トリガーを押したときに取得できるスコアの設定
- トリガーが押されることを監視(押されたときにSubscribeで指定されたメソッドが発火)

### SetTextを見てみる
```
ScoreMessage<localizes>(msg:string):message="{msg}"

SetTriggerText(value:int):void=
        ScoreText.SetText(ScoreMessage("Now Socre : {value}"))
```
SetTextの引数は`message型`になっているので

`message型`のメンバを作成してその中に指定の文字を入れていく感じになりそう。

## まとめ
SetTextには`message型`を入れるとだけ覚えておけばよさそう。`message型`も深ぼると面白そうなことができそうなのでまたの時に。