「ゲームを始めたときに出る、かっこいいタイトル画面を作りたい」「パソコンではきれいなのに、スマホで見るとボタンがつぶれる」
ロブロックス(Roblox)スタジオでUI(画面に出るボタンや文字)を作る方法を、実際の画像付きで誰でも簡単に分かるように解説します。鬼ごっこの作り方のゲームに付けるつもりで、スマホでも崩れないタイトル画面を作ります。文字の縁取り、グラデーション、角の丸いボタン、形を保つ部品を1つずつ足し、最後にスタートを押すと画面がスライドして消えるようにします。
上級ステップ8/40 前の記事:ロブロックス(Roblox)の鬼ごっこの作り方 全体の順番を見る
使うもの:Roblox Studioが起動するパソコン、マウス、キーボード。ScreenGui・TextButton・Sizeの「割合」と「ピクセル」の考え方は、ボタンを作る方法で使ったものと同じです。
今回の完成状態:下の画像のように、テストを始めると紺色の画面に「鬼ごっこアリーナ」の文字とスタートボタンが出て、スタートを押すとタイトル画面が上へスライドして消えれば成功です(赤い枠)。

タイトル画面の部品
| 名前 | 種類 | 役目 |
|---|---|---|
| TitleGui | ScreenGui | 画面に出すUIをまとめる入れ物 |
| Background | Frame | 画面いっぱいの紺色の背景 |
| TitleText | TextLabel | 「鬼ごっこアリーナ」の文字 |
| UIStroke(文字) | UIStroke | 文字のまわりにこげ茶色の縁取りを付ける |
| UIGradient | UIGradient | 文字の色を、上は黄色、下はオレンジに変える |
| StartButton | TextButton | 押すとゲームが始まる「スタート」ボタン |
| UICorner | UICorner | ボタンの角を丸くする |
| UIStroke(ボタン) | UIStroke | ボタンのふちに白い線を付ける |
| UIAspectRatioConstraint | UIAspectRatioConstraint | 画面の形が変わっても、ボタンを横3:縦1の形に保つ |
| TitleScript | LocalScript | スタートを押したら、タイトル画面をスライドさせて消す |
UIStroke・UIGradient・UICorner・UIAspectRatioConstraintは、見た目や形を変えたい部品の中に入れて使います。入れた部品にだけ効くので、どの部品の中に入れるかを画像で確かめながら進めます。
1. タイトル画面の入れ物(ScreenGui)を作る
新しいBaseplateを開き、エクスプローラの「StarterGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。赤い枠は、次に押す場所です。

一覧の検索欄に「ScreenGui」と入れ、一覧の「ScreenGui」を押します(赤い枠)。

エクスプローラでScreenGuiを選んだままF2キーを押し、名前を「TitleGui」に変えます(赤い枠)。

エクスプローラでTitleGuiを選んだ状態で、プロパティの検索欄に「ResetOnSpawn」と入力します。ResetOnSpawnの四角を押して、チェックを外します(赤い枠)。ResetOnSpawnは、生き返るたびに画面のUIを作り直すかどうかを決めるプロパティです。チェックが入ったままだと、倒れて生き返るたびにタイトル画面がもう一度出てきます。

TitleGuiを選んだまま、プロパティの検索欄に「ScreenInsets」と入力します。ScreenInsetsの欄(最初は「CoreUISafeInsets」)を押し、出た一覧から「None」を選びます(赤い枠)。ScreenInsetsは、UIを置ける範囲を決めるプロパティです。Noneにすると、画面の左上のRobloxのボタンが並ぶ場所の下まで、背景を広げられます。

2. 画面いっぱいの背景(Frame)を作る
エクスプローラの「TitleGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「Frame」と入れ、一覧の「Frame」を押します(赤い枠)。

3D画面の左上に白い小さな四角が出ます。エクスプローラでFrameを選んだままF2キーを押し、名前を「Background」に変えます(赤い枠)。

Backgroundは、次の2つのプロパティを変えます。{ }の中の左の数は画面に対する割合、右の数はピクセル数です。
| プロパティ | 値 |
|---|---|
| Size | {1, 0},{1, 0} |
| BackgroundColor3 | 20, 24, 40(紺色) |
エクスプローラでBackgroundを選んだ状態で、プロパティの検索欄に「Size」と入力します。Sizeの欄を「{1, 0},{1, 0}」に書きかえて、Enterキーを押します(赤い枠)。{ }も一緒に入力します。横も縦も画面の100%(1)なので、3D画面が白い四角でうまります。

Backgroundを選んだまま、プロパティの検索欄に「BackgroundColor3」と入力します。BackgroundColor3の欄の数字を「20, 24, 40」に書きかえて、Enterキーを押します(赤い枠)。画面が紺色になります。

3. タイトルの文字(TextLabel)を置く
エクスプローラの「Background」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「TextLabel」と入れ、一覧の「TextLabel」を押します(赤い枠)。

3D画面の左上に「Label」と書かれた白い四角が出ます。エクスプローラでTextLabelを選んだままF2キーを押し、名前を「TitleText」に変えます(赤い枠)。

TitleTextは、次の7つのプロパティを変えます。1つずつ手順を書きます。
| プロパティ | 値 | 意味 |
|---|---|---|
| AnchorPoint | 0.5, 0.5 | 四角の真ん中を基準にする |
| Position | {0.5, 0},{0.35, 0} | 基準を、横は真ん中、縦は上から35%に置く |
| Size | {0.8, 0},{0.2, 0} | 画面の横80%、縦20% |
| BackgroundTransparency | 1 | 四角の背景を透明にする |
| Text | 鬼ごっこアリーナ | 出す文字 |
| TextScaled | チェックを入れる | 四角に合わせて文字の大きさを変える |
| TextColor3 | 255, 255, 255(白) | 文字の色 |
エクスプローラでTitleTextを選んだ状態で、プロパティの検索欄に「AnchorPoint」と入力します。AnchorPointの欄を「0.5, 0.5」に書きかえて、Enterキーを押します(赤い枠)。AnchorPointは、四角のどこを位置の基準にするかを決めるプロパティです。0.5, 0.5にすると、文字の四角の真ん中が基準になります。

TitleTextを選んだまま、プロパティの検索欄に「Position」と入力します。Positionの欄を「{0.5, 0},{0.35, 0}」に書きかえて、Enterキーを押します(赤い枠)。四角が、横は真ん中、縦は上から35%のところへ動きます。

TitleTextを選んだまま、プロパティの検索欄に「Size」と入力します。Sizeの欄を「{0.8, 0},{0.2, 0}」に書きかえて、Enterキーを押します(赤い枠)。画面の横80%、縦20%の大きさになります。

TitleTextを選んだまま、プロパティの検索欄に「BackgroundTransparency」と入力します。BackgroundTransparencyの欄を「1」に書きかえて、Enterキーを押します(赤い枠)。四角の白い背景が透明になり、紺色の背景が見えます。

TitleTextを選んだまま、プロパティの検索欄に「Text」と入力します。Textの欄を「鬼ごっこアリーナ」に書きかえて、Enterキーを押します(赤い枠)。この時点では文字が黒く小さいので、3D画面ではほとんど見えません。ゲームの名前に合わせて、好きな文字にしてかまいません。

TitleTextを選んだまま、プロパティの検索欄に「TextScaled」と入力し、TextScaledの四角を押してチェックを入れます(赤い枠)。四角の大きさに合わせて、文字が大きくなります。

TitleTextを選んだまま、プロパティの検索欄に「TextColor3」と入力します。TextColor3の欄の数字を「255, 255, 255」に書きかえて、Enterキーを押します(赤い枠)。文字が白になります。

PositionとSizeを「割合」({ }の中の左の数)だけで決めているので、画面の大きさが変わっても、文字は画面の同じ場所に同じ割合で出ます。
4. 文字に縁取り(UIStroke)を付ける
エクスプローラの「TitleText」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「UIStroke」と入れ、一覧の「UIStroke」を押します(赤い枠)。

TitleTextの中にUIStrokeが入り、選ばれた状態になります。UIStrokeは、入れた部品の文字やふちに線を付ける部品です。
UIStrokeを選んだまま、プロパティの検索欄に「Thickness」と入力します。Thicknessの欄を「4」に書きかえて、Enterキーを押します(赤い枠)。文字のまわりの線の太さが4ピクセルになり、黒い縁取りが付きます。

UIStrokeを選んだまま、プロパティの検索欄に「Color」と入力します。Colorの欄の数字を「60, 20, 0」に書きかえて、Enterキーを押します(赤い枠)。線がこげ茶色になります。

5. 文字にグラデーション(UIGradient)を付ける
エクスプローラの「TitleText」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「UIGradient」と入れ、一覧の「UIGradient」を押します(赤い枠)。

TitleTextの中にUIGradientが入り、選ばれた状態になります。UIGradientは、入れた部品の色をグラデーション(少しずつ変わる色)にする部品です。
UIGradientを選んだまま、プロパティの検索欄に「Color」と入力し、Colorの欄を押します(赤い枠)。欄の右はしに「…」のボタンが出るので、それを押します。

色の帯を決める窓が開きます。帯の下の左の三角(画像の1)が左はしの色、右の三角が右はしの色です。左の三角が選ばれた状態で、「色」の四角(画像の2)を押します。

色を選ぶ窓で、「HTML」の欄を「#ffe650」に書きかえ(画像の1)、「OK」を押します(画像の2)。

帯の左が黄色になりました。次に、帯の下の右の三角を押します(赤い枠)。

右の三角が選ばれたら、「色」の四角を押します(赤い枠)。

色を選ぶ窓で、「HTML」の欄を「#ff7800」に書きかえ(画像の1)、「OK」を押します(画像の2)。

帯が左の黄色から右のオレンジに変わり、3D画面の文字も同じ色になりました。「閉じる」を押します(赤い枠)。

今は左から右へ色が変わっています。エクスプローラでUIGradientを選んだ状態で、プロパティの検索欄に「Rotation」と入力します。Rotationの欄を「90」に書きかえて、Enterキーを押します(赤い枠)。帯が90度回り、文字の色が上は黄色、下はオレンジになります。

TitleTextのTextColor3を「255, 255, 255」(白)にしておいたので、グラデーションで決めた黄色とオレンジが、そのまま文字の色として出ています。
6. スタートボタン(TextButton)を置く
エクスプローラの「Background」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「TextButton」と入れ、一覧の「TextButton」を押します(赤い枠)。

3D画面の左上に「Button」と書かれた白い四角が出ます。エクスプローラでTextButtonを選んだままF2キーを押し、名前を「StartButton」に変えます(赤い枠)。

StartButtonは、次の7つのプロパティを変えます。1つずつ手順を書きます。
| プロパティ | 値 | 意味 |
|---|---|---|
| AnchorPoint | 0.5, 0.5 | 四角の真ん中を基準にする |
| Position | {0.5, 0},{0.65, 0} | 基準を、横は真ん中、縦は上から65%に置く |
| Size | {0.3, 0},{0.12, 0} | 画面の横30%、縦12% |
| BackgroundColor3 | 255, 170, 0(オレンジ) | ボタンの色 |
| Text | スタート | ボタンの文字 |
| TextScaled | チェックを入れる | 四角に合わせて文字の大きさを変える |
| TextColor3 | 255, 255, 255(白) | 文字の色 |
エクスプローラでStartButtonを選んだ状態で、プロパティの検索欄に「AnchorPoint」と入力します。AnchorPointの欄を「0.5, 0.5」に書きかえて、Enterキーを押します(赤い枠)。

StartButtonを選んだまま、プロパティの検索欄に「Position」と入力します。Positionの欄を「{0.5, 0},{0.65, 0}」に書きかえて、Enterキーを押します(赤い枠)。ボタンが、文字の下へ動きます。

StartButtonを選んだまま、プロパティの検索欄に「Size」と入力します。Sizeの欄を「{0.3, 0},{0.12, 0}」に書きかえて、Enterキーを押します(赤い枠)。画面の横30%、縦12%の大きさになります。

StartButtonを選んだまま、プロパティの検索欄に「BackgroundColor3」と入力します。BackgroundColor3の欄の数字を「255, 170, 0」に書きかえて、Enterキーを押します(赤い枠)。ボタンがオレンジになります。

StartButtonを選んだまま、プロパティの検索欄に「Text」と入力します。Textの欄を「スタート」に書きかえて、Enterキーを押します(赤い枠)。

StartButtonを選んだまま、プロパティの検索欄に「TextScaled」と入力し、TextScaledの四角を押してチェックを入れます(赤い枠)。ボタンの文字が大きくなります。

StartButtonを選んだまま、プロパティの検索欄に「TextColor3」と入力します。TextColor3の欄の数字を「255, 255, 255」に書きかえて、Enterキーを押します(赤い枠)。ボタンの文字が白になります。

7. ボタンの角を丸くして、白い線を付ける
エクスプローラの「StartButton」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「UICorner」と入れ、一覧の「UICorner」を押します(赤い枠)。

StartButtonの中にUICornerが入り、選ばれた状態になります。UICornerは、入れた部品の角を丸くする部品です。
UICornerを選んだまま、プロパティの検索欄に「CornerRadius」と入力します。CornerRadiusの欄を「0.3, 0」に書きかえて、Enterキーを押します(赤い枠)。左の数(割合)で決めると、ボタンが大きくなっても小さくなっても、同じ丸さになります。

もう一度、エクスプローラの「StartButton」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「UIStroke」と入れ、一覧の「UIStroke」を押します(赤い枠)。

StartButtonの中にUIStrokeが入り、選ばれた状態になります。文字の入った部品に入れたUIStrokeは、そのままでは文字のまわりに線を付けます。今回は、ボタンのふちに線を付けます。
UIStrokeを選んだまま、プロパティの検索欄に「ApplyStrokeMode」と入力します。ApplyStrokeModeの欄を押し、出た一覧から「Border」を選びます(赤い枠)。Borderにすると、文字ではなくボタンのふちに線が付きます。

UIStrokeを選んだまま、プロパティの検索欄に「Thickness」と入力します。Thicknessの欄を「3」に書きかえて、Enterキーを押します(赤い枠)。ボタンのふちに黒い線が付きます。

UIStrokeを選んだまま、プロパティの検索欄に「Color」と入力します。Colorの欄の数字を「255, 255, 255」に書きかえて、Enterキーを押します(赤い枠)。ボタンのふちの線が白になります。

8. 画面の形が変わってもボタンの形を保つ
ボタンのSizeを割合で決めたので、横長の画面ではボタンも横に長く伸びます。形を保つ部品を入れます。エクスプローラの「StartButton」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「UIAspectRatioConstraint」と入れ、一覧の「UIAspectRatioConstraint」を押します(赤い枠)。

StartButtonの中にUIAspectRatioConstraintが入り、選ばれた状態になります。UIAspectRatioConstraintは、入れた部品の横と縦の比を決まった形に保つ部品です。
UIAspectRatioConstraintを選んだまま、プロパティの検索欄に「AspectRatio」と入力します。AspectRatioの欄を「3」に書きかえて、Enterキーを押します(赤い枠)。ボタンが、横3:縦1の形に縮みます。

AspectRatioは「横÷縦」の数です。3なら横が縦の3倍、1なら正方形になります。
9. スタートを押したら画面を消すスクリプトを入れる
ボタンが押されたときの動きは、LocalScript(遊ぶ人のパソコンで動くスクリプト)に書きます。エクスプローラの「TitleGui」にマウスを乗せて、右に出る「+」を押します(赤い枠)。

一覧の検索欄に「LocalScript」と入れ、一覧の「LocalScript」を押します(赤い枠)。

LocalScriptが入り、中身の画面が開きます。エクスプローラで「LocalScript」を押して選び、F2キーを押して名前を「TitleScript」に変えます(赤い枠)。

開いているTitleScriptの画面で、中身を全部消して、次のコードを貼り付けます。
local TweenService = game:GetService("TweenService")
local gui = script.Parent
local background = gui:WaitForChild("Background")
local startButton = background:WaitForChild("StartButton")
local started = false
-- スタートを押したら、タイトル画面を上へスライドさせて消す
startButton.Activated:Connect(function()
if started then
return
end
started = true
local info = TweenInfo.new(0.6, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
local tween = TweenService:Create(background, info, { Position = UDim2.new(0, 0, -1, 0) })
tween:Play()
tween.Completed:Wait()
gui.Enabled = false
end)
貼り付けたら、エクスプローラのTitleGuiの中に「TitleScript」と「Background」が並んでいるかを確かめます(赤い枠)。

| コードの部分 | していること |
|---|---|
| startButton.Activated | スタートボタンが押されたら、中の処理を始める |
| started | 2回押しても、1回目の動きだけにする |
| TweenService | 位置や色などを、少しずつなめらかに変えるしかけ |
| TweenInfo.new(0.6, …) | 最初の数で決めた0.6秒かけて動かす。Quad・Inは、ゆっくり動き出して速くなる動き方 |
| TweenService:Create(…) | Backgroundの位置を、画面のちょうど1つ分上({0, 0},{-1, 0})へ動かす |
| tween.Completed:Wait() | 動き終わるまで待つ |
| gui.Enabled = false | タイトル画面を出さないようにする |
背景の中に文字とボタンを入れてあるので、Backgroundを動かすだけで、文字もボタンも一緒にスライドしていきます。
10. テストでタイトル画面を確かめる
3D画面の上の作品のタブ「Place1」を押して3D画面に戻り、F5キーでテストを始めます(タブの名前はパソコンによって違います)。
下の画像は、テストを始めた画面です。紺色のタイトル画面が出て、左上のRobloxのボタンの下まで背景が広がっています。右上の名前の欄はモザイクにしています。「スタート」を押します(赤い枠)。

下の画像は、「スタート」を押したあとのテストの画面です。タイトル画面が上へスライドして消え、スポーン地点に立つアバターが見えます。

テストを続けたまま、生き返ったときにタイトル画面が出ないかも確かめます。Escキーを押すと、メニューが出ます。メニューの下に並ぶボタンのうち、真ん中の「リスポーン」を押します(赤い枠)。アバターと名前はモザイクにしています。

「キャラクターをリスポーンしてよろしいですか?」と確かめる画面が出ます。もう一度「リスポーン」を押します(赤い枠)。

下の画像は、リスポーンしたあとのテストの画面です。スポーン地点で生き返っても、タイトル画面は出てきません。TitleGuiのResetOnSpawnのチェックを外したからです。

確かめたら、Shift + F5キーでテストを停止します。
11. スマホの画面で崩れないか確かめる
Device Simulator(デバイスシミュレータ)は、Studioの3D画面をスマホやタブレットの画面の形にして、UIの見え方を確かめる道具です。テストを停止した状態で、3D画面の右上の歯車のアイコンを押し、開いた一覧の「GUI」の中の「デバイスシミュレーション」にチェックを入れます(赤い枠)。新しいBaseplateでは、最初からチェックが入っていることがあります。そのときは押さずにそのままにします(押すとチェックが外れて、3D画面の上の「現在のデバイス」の欄が消えます)。

3D画面の左上に「現在のデバイス」と出てスマホの形にならないときは、欄の左のスマホのアイコンを押します(赤い枠)。マウスを乗せると「スマートフォンに切り替えます」と出ます。下の画像はボタンを作る方法の記事で撮ったものです。

3D画面がスマホの形に変わり、左上に機種の名前(ここでは「iPhone 17 Pro」)が出ます。テストを始めなくても、置いたUIの見え方が分かります。スタートボタンは、横3:縦1の形のままです(赤い枠)。

形を保つ部品がないとどうなるかも見てみます。エクスプローラでStartButtonの中の「UIAspectRatioConstraint」を押して選びます(赤い枠)。

UIAspectRatioConstraintを選んだ状態で、Deleteキーを押して消します。StartButtonの中はUICornerとUIStrokeだけになり(画像の1)、スタートボタンが横に長く伸びます(画像の2)。

確かめたら、3D画面を一度押してからCtrl + Zキーを押します。消したUIAspectRatioConstraintがStartButtonの中に戻り(画像の1)、ボタンも横3:縦1の形に戻ります(画像の2)。

ボタンが画面の上で実際に何ピクセルになったかは、AbsoluteSizeというプロパティで分かります。エクスプローラでStartButtonを選んだ状態で、プロパティの検索欄に「AbsoluteSize」と入力すると、「横, 縦」のピクセル数が出ます。機種は、3D画面の左上の機種の名前を押すと出る一覧から変えられます。
以下は、アソビシフト編集部が2026年10月19日に、Roblox StudioのDevice Simulatorで機種を変えながらStartButtonのAbsoluteSizeを読んだ結果です。画面の大きさは、同じようにBackgroundのAbsoluteSizeを読んだ数です。
| 機種(Device Simulator) | 画面の大きさ | UIAspectRatioConstraintなし | あり |
|---|---|---|---|
| iPhone 16 | 851×391 | 255×46 | 140×46 |
| iPhone 17 Pro | 874×401 | 262×48 | 144×48 |
| iPhone XR | 895×413 | 268×49 | 148×49 |
| iPad(第10世代) | 1179×819 | 353×98 | 294×98 |
iPhone 16とiPhone XRは、この記事と同じ設定で作った試しの作品で測りました。
なしのときは、どのスマホでもボタンの横が縦の5倍以上に伸びています。ありのときは、どの機種でも横が縦の3倍で、iPadでは縦98ピクセルの大きなボタンになりました。形を保つ部品を入れておくと、パソコンで作ったときの見た目のまま、スマホにも出せます。
Device Simulatorを使い終わったら、元の3D画面に戻します。3D画面の左上の機種の名前のすぐ右にある、パソコンの形のボタンを押します(赤い枠)。3D画面がスマホの形から元の形に戻り、左上の表示が「現在のデバイス」になります。

見た目を変えたいとき
表の「直す部品とプロパティ」が「〇〇の△△」の形のものは、エクスプローラで〇〇を押して選び、プロパティの検索欄に△△と入力して、右の欄を変えます。たとえば「BackgroundのBackgroundColor3」なら、エクスプローラで「Background」を押して選び、検索欄に「BackgroundColor3」と入力します。最後のTitleScriptだけはコードの中の数字なので、ダブルクリックして開いて書き換えます。
| 変えたいこと | 直す部品とプロパティ | 例 |
|---|---|---|
| 背景の色 | BackgroundのBackgroundColor3 | 0, 60, 30(深い緑) |
| 文字の縁取りを太く | TitleTextの中のUIStrokeのThickness | 6 |
| グラデーションの向き | UIGradientのRotation | 0で左から右、90で上から下 |
| ボタンの丸さ | UICornerのCornerRadius | 0.5, 0 |
| 消えるまでの速さ | TitleScriptの TweenInfo.new の最初の数 | 1(1秒) |
UIがうまく出ないときの確かめ方
| 症状 | 見るところ | 直し方 |
|---|---|---|
| テストでタイトル画面が出ない | TitleGuiの置き場所 | StarterGuiの中にあるか。Enabledにチェックが入っているか |
| ボタンの線が文字のまわりに付く | ボタンの中のUIStrokeのApplyStrokeMode | Borderにする |
| スタートを押しても消えない | TitleScriptの置き場所と名前 | TitleGuiのすぐ下にあるか。Background・StartButtonの名前が同じか |
| 生き返るとまたタイトル画面が出る | TitleGuiのResetOnSpawn | チェックを外す |
| スマホでボタンが横に伸びる | StartButtonの中 | UIAspectRatioConstraintが入っているか |
AIに相談するときの伝え方
Roblox Studioでタイトル画面を作っています。
StarterGuiのScreenGui「TitleGui」の中に、画面いっぱいのFrame「Background」があり、その中にTextLabel「TitleText」とTextButton「StartButton」があります。
TitleGuiの中のLocalScript「TitleScript」で、StartButtonを押すとTweenServiceでBackgroundを上へ動かして消しています。
タイトル画面が出ている間、BGMを流して、スタートを押したら止めたいです。
よくある質問
Offset(ピクセル)で作るのはだめ?
Sizeの右の数(ピクセル)で決めると、どの画面でも同じピクセル数になります。小さなスマホでは画面からはみ出し、大きなiPadでは小さく見えます。この記事のように左の数(割合)で決めて、形はUIAspectRatioConstraintで保つと、画面に合わせて大きさが変わります。アソビシフト編集部がDevice Simulatorで測ったときは、スタートボタンがiPhone 17 Proで144×48ピクセル、iPad(第10世代)で294×98ピクセルになり、どちらも横3:縦1の形のままでした。
鬼ごっこのゲームに付けるには?
鬼ごっこの作り方で作った作品のStarterGuiに、この記事の手順1〜9と同じ手順でTitleGuiを作ると、参加したときにタイトル画面が出ます。
次は、勝った回数を保存して、上位を看板に出すランキングを作ります。次のステップ(上級 9/40)
次に知りたいことを選ぶ
- 次のステップ:勝った回数を保存して、上位を看板に出すランキングを作ります → ロブロックス(Roblox)スタジオでランキングを作る方法
- 押すと開く「遊び方」の画面を作りたい → ロブロックス(Roblox)スタジオでボタンを作る方法
- 看板や頭の上に文字を出したい → ロブロックス(Roblox)スタジオで文字を出す方法
- ラウンド制の鬼ごっこを作りたい → ロブロックス(Roblox)の鬼ごっこの作り方