Roblox Studioでコインカウンターを画面に表示する方法

画面上にコイン: 0と表示し、コインを拾うと3、コインを追加すると103、ショップで10を使うと93のように、現在のScoreへすぐ追従するカウンターを作る。完成までの目安は6分だ。Robux、外部素材、Publishは必要ない。

この記事は、コインを拾ってScoreを増やす記事を完了した人向けだ。10コインのショップもあると、増加と消費の両方を確認できる。Developer Productは必須ではなく、実Robuxを使う操作もしない。

1. ScreenGuiとTextLabelを作る

Stopした編集画面で、StarterGuiの右にある＋からScreenGuiを追加し、名前をCoinCounterGuiへ変える。さらにその右の＋からTextLabelを追加し、名前をCoinCounterへ変えよう。

StarterGui
└─ CoinCounterGui (ScreenGui)
   └─ CoinCounter (TextLabel)

Tip — ScreenGuiは画面UIの入れ物

ScreenGuiは、ゲーム画面の上へ表示するUIをまとめる入れ物だ。StarterGuiに置くと、参加した各プレイヤーの画面へコピーされる。3D空間のPartではなく、カメラと一緒に動く表示になる。

CoinCounterを選び、Propertiesを次の値にする。数値を入力しにくいときは、項目左の三角を開いてXとYを別々に入力しよう。

Property	値
AnchorPoint	0.5, 0
Position	{0.5, 0}, {0, 20}
Size	{0, 220}, {0, 56}
Text	コイン: 0
TextScaled	オン
FontFace	GothamBold
BackgroundColor3	濃い紺色
TextColor3	黄色

親のCoinCounterGuiも選び、ResetOnSpawnをオフにしよう。アスレチックで溶岩へ触れて再出現しても、同じ画面UIを作り直さずに使える。Scoreが再出現中もPlayer内へ残るゲームなら、表示もその値のまま続く。

AnchorPointのXを0.5にし、PositionのX Scaleも0.5にすると、画面幅が変わっても上部中央へ置きやすい。角を丸めたい場合はCoinCounterへUICornerを追加し、CornerRadiusを0, 14にしてよい。見た目を変えても、次の更新処理は同じだ。

Tip — TextLabelは文字を表示するUI

TextLabelは、プレイヤーが入力する欄ではなく、ゲームから文字を見せる部品だ。今回はScoreの数値を文字列へつなぎ、コイン: 3のように表示する。

2. Scoreの変化を監視する

CoinCounterの右の＋からLocalScriptを追加し、名前をUpdateCounterへ変える。中身を次のコードへ置き換えよう。

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local counter = script.Parent
local score = player
	:WaitForChild("leaderstats")
	:WaitForChild("Score")

local function updateCounter()
	counter.Text = "コイン: " .. score.Value
end

updateCounter()
score.Changed:Connect(updateCounter)

画面UIはプレイヤーごとに表示するため、ここではLocalScriptを使う。LocalPlayerが自分のScoreを取得し、updateCounter()が現在値をTextへ入れる。

最初のupdateCounter()は、参加した直後の値を表示するために必要だ。その後はscore.Changedへ同じ関数をつなぎ、コイン取得でもショップ消費でも、Scoreが変わるたびに表示を更新する。増やした理由ごとに別のUIコードを書く必要はない。

"コイン: " .. score.Valueの..は、左の文字と右の数値をつなぐ記号だ。Scoreが3ならTextはコイン: 3になる。counterはscript.Parent、つまりLocalScriptの親であるCoinCounterを指すため、Explorerの置き場所もコードの一部だ。LocalScriptをCoinCounterGuiの直下へ置くと親がScreenGuiになり、Textを変更できない。

Roblox公式のUI解説でも、画面上のUIはStarterGuiへ置き、各プレイヤーのPlayerGuiへ表示する構成が案内されている。カウンターは表示だけを担当し、Scoreを増減する判断はこれまでどおりサーバーに任せよう。

Tip — WaitForChildは作成を待つ

leaderstatsとScoreはサーバーScriptが参加後に作るため、LocalScriptの開始時にはまだ見つからない場合がある。WaitForChild()なら、対象が作られるまで待ってから次へ進める。

3. 更新経路を1本に保つ

コインを拾うScript、Developer Productの処理、ショップの処理は、いずれもサーバー側のScore.Valueだけを変更する。カウンター側は変更理由を受け取らず、現在値だけを見る。この分け方なら、後から宝箱やゴール報酬を追加しても、新しい処理がScoreを正しく変えるだけでカウンターも追従する。

反対に、LocalScriptで見た目だけ103へ変えると、サーバーのScoreは3のままで食い違う。プレイヤーが自分の画面を書き換えてもコインを増やせないよう、増減の正本はサーバー、表示はLocalScriptという役割を保とう。

4. 0から増えることを確かめる

Playを押そう。参加直後に画面上部へコイン: 0と表示されれば、初期値を読めている。

次に、コインを作る記事の3枚を順番に拾う。プレイヤー一覧のScoreと画面上の表示がどちらも3になれば、取得への追従は成功だ。

ここで表示が変わるまで再参加やボタン操作は必要ない。Score.Valueが変わった瞬間にChangedが呼ばれる。

画面幅を狭くしてもカウンターが上部中央に残ることも見ておこう。左右へずれる場合は、PositionのX Offsetへ大きな固定値を入れていないか確認する。横方向はScaleの0.5、上からの間隔だけOffsetの20を使う。

5. 追加と消費にも追従するか確かめる

Developer Productの記事をすでに完了している場合は、Studioの無課金テスト経路で100コインを追加しよう。3から103へ変われば、取得方法が違っても同じScoreを表示できている。Developer Productを作っていない場合、この確認は飛ばしてよい。

最後に、10コインのショップで20コインからLightStickを買う。Scoreとカウンターがどちらも10になり、ホットバーへToolが出れば、消費にも追従している。

カウンターのLocalScriptは価格や商品の名前を知らない。サーバーがScoreを20から10へ変えた結果だけを受け取るため、別のコインの使い道を追加しても表示処理を直さずに済む。

ショップがない場合も、取得した3がその場で表示されればカウンター自体は完成だ。消費の確認まで行いたい場合は、先にショップ記事を完了してからこの節へ戻ろう。任意のDeveloper Product確認を飛ばしても、記事の完成条件と費用は変わらない。

Stopして新しくPlayしたときも、参加直後のScoreが自動表示されるか確認しよう。保存済みScoreがあるゲームなら0ではなく復元値から始まるが、それが正しい。カウンターは固定の初期値ではなく、毎回そのプレイヤーの現在値を読む。

うまく動かないとき

• UIが表示されない: CoinCounterGuiがStarterGuiにあり、Enabledがオンか確認する
• ずっとコイン0のまま: UpdateCounterが通常のScriptではなくLocalScriptで、CoinCounterの直下にあるか確認する
• 無限に待つ警告が出る: サーバー側でleaderstatsとScoreを同じ大文字小文字で作っているか確認する
• 画面の左へずれる: AnchorPoint = 0.5, 0と、PositionのX Scaleが0.5になっているか確認する
• UIで増減させたい: 表示用LocalScriptからScoreを直接変更しない。コイン取得や購入の判定はサーバー側へ残す

完成

これで、参加直後の0、コイン取得、追加、ショップ消費のすべてへ、再参加なしで追従する画面カウンターが完成した。次のガイドはまだ公開していないため、ここでは存在しないURLへは進めない。

公式リファレンス

• User interface
• Text and image labels
• ScreenGui
• TextLabel