ゴールを作って完成：アスレチックを通しテストする
黄色いゴール台へSurfaceGuiとTextLabelでGOAL表示を付け、スタートから最後まで通して遊べる最初のアスレチックを完成させよう。
前の記事までで、足場、溶岩、2つのチェックポイントが動くようになった。最後に黄色い仮ゴールを、ひと目で終点だと分かるGOALへ変えよう。仕上げたら、部分ごとの確認ではなく、スタートから最後まで1つにつないで通しテストする。
今回は新しいScriptを書かない。Partの表面へ文字を表示するSurfaceGuiとTextLabelを使う。
仮ゴールを黄色いゴール台にする
ExplorerでCourseを開き、TemporaryGoalを選んで名前をGoalPlatformへ変えよう。Propertiesは次の値を確認する。
- Size:
12, 1, 12 - Position:
0, 7, -99 - Anchored: オン
- Material:
Neon - Color: 黄色
前の記事までのコースを同じ数値で作っていれば、位置と大きさはほぼ変わらない。名前と色を整えるだけでも、緑のStage 3より先にある黄色い面が終点らしく見える。Playして落下する場合はAnchoredを確認しよう。
色は進行の手掛かりにもなる。水色は再開地点、オレンジは触れると失敗する場所、黄色は最後に目指す場所だ。同じ役割には同じ色を使い、違う役割は離れた色にすると、説明を読まなくても進む方向を判断しやすい。
SurfaceGuiを上面へ追加する
ExplorerでGoalPlatformへマウスを重ね、右に出る+を押そう。見えないときは右クリックして Insert Object を選ぶ。検索欄へSurfaceGuiと入力し、表示された項目を選ぶ。
追加されたSurfaceGuiの名前をGoalSignへ変える。Propertiesで次を設定しよう。
- Face:
Top - SizingMode:
PixelsPerStud - PixelsPerStud:
40 - LightInfluence:
0
UIは、プレイヤーへ文字や情報を見せる表示だ。SurfaceGuiは、Partの表面をUIの置き場所にする入れ物になる。公式のSurfaceGuiのFaceは、Partのどの面へ表示するかを決める。今回はゴール台を上から見るため、上面を表すTopにする。
Tip：ピクセルとは
ピクセルは、画面の文字や画像を作る小さな点だ。点を細かく並べるほど、文字の斜め線や曲線を滑らかに表せる。
PixelsPerStudを40にすると、1 studの長さを40ピクセルで描く。横幅12 studのゴール台なら、横方向に約480ピクセルを使ってGOALを表示することになる。
PixelsPerStudは、このように1 studあたり何ピクセルで表示するかを決める値だ。今回は40にすれば、ゴール台の文字を十分滑らかに描ける。LightInfluenceを0にすると、場所の明るさに左右されにくくなる。
ExplorerではGoalPlatformの左にある三角を開き、その内側にGoalSignがあることを確認しよう。SurfaceGuiをWorkspaceやCourseの直下へ入れると、どのPartの面へ表示するかが伝わらない。GoalPlatformの子にすることで、表示を付けたい台との組み合わせがExplorerだけでも分かる。ゴール台をあとで移動しても表示が一緒に付いてくる。
TextLabelへGOALを入れる
ExplorerでGoalSignへ+を押し、検索欄へTextLabelと入力して追加しよう。
名前をGoalTextへ変え、Propertiesを次のようにする。
- Size:
{1, 0}, {1, 0} - BackgroundTransparency:
1 - Text:
GOAL - TextScaled: オン
- Font:
GothamBlack - TextColor3: 濃い紺色
公式のUI labelsが説明するように、TextLabelが実際の文字を表示する部品だ。Sizeを縦横とも全面にすると、GoalSign全体を使える。BackgroundTransparencyを1にすると文字の後ろの四角が透明になり、黄色い台がそのまま見える。TextScaledをオンにすると、表示範囲へ収まる大きさに文字が調整される。
Sizeの{1, 0}, {1, 0}は、横も縦も親と同じ100%という意味だ。最初の1が割合、後ろの0が足し引きするピクセル数になる。今回は全面を使うため、両方とも「100%に0ピクセルを加える」設定だ。数値の書式を覚えなくても、PropertiesのSizeを開き、XとYのScaleをそれぞれ1、Offsetをそれぞれ0にすれば同じ結果になる。
Explorerの完成形は、GoalPlatform > GoalSign > GoalTextの3段だ。黄色い台、その表面の表示領域、その中の文字という順になっている。GoalTextをGoalPlatformの直下へ入れると文字は表示されないため、1段ずつ三角を開いて親子関係を確かめよう。
文字が横向きや裏返しに見える場合は、GoalSignのFaceがTopか確認する。文字が小さい場合はGoalTextのSizeとTextScaledを見直そう。黄色と似た文字色は読みにくいため、濃い色を選ぶ。
スタートからGOALまで通しテストする
作った直後の機能だけを確認する部分テストに対し、最初から最後まで主要な流れをつなげて確認することを通しテストという。Playを押し、次の順で進もう。
- StartIslandのSpawnLocationから始まる
- 青いStage 1を進み、Checkpoint1へ乗る
- 紫のStage 2を進み、Checkpoint2へ乗る
- 一度LavaFloorへ落ち、Checkpoint2から戻る
- 緑のStage 3を進み、黄色いGoalPlatformへ乗る
途中で失敗を1回入れるのは、完成後もチェックポイントが動いているかを確かめるためだ。最後まで成功する経路だけでは、古い機能が壊れていても見落とすことがある。公式のStudio testing modesのPlayは、SpawnLocation付近へキャラクターを出してゲーム全体を試せる。
通しテストでは、操作だけでなく見え方も確かめる。StartIslandから最初の青い足場が見えるか、各ステージの終わりから次の色が見えるか、緑の足場へ来たとき黄色いGOALを読めるかを順に見る。立ち止まってカメラを大きく回さないと進行方向が分からない場所は、足場の向きや位置を少し調整する候補だ。
GoalPlatformへ乗ったら、すぐStopせず2秒ほど止まろう。キャラクターが滑り落ちず、GOALの文字と黄色い面が同時に見えれば完了状態を目で確認できる。今回はクリア画面やタイマーを作らないため、この「黄色いGOALへ立てること」がゲームの終わりになる。
ゴールへ届きにくい場所があれば、いきなり足場を大きく変えず、失敗した1か所だけをStop後に調整しよう。隣の足場との距離、段差、進行方向から次の足場が見えるかを確認し、もう一度スタートから通す。Play中に動かしたPartはStopすると編集前へ戻るため、調整は編集画面で行う。
完成データをパソコンへ保存する
通しテストが終わったら Stop を押し、Studio左上の File > Save to File を選ぼう。保存画面で分かりやすい場所を選び、ファイル名をhajimete-no-obby.rbxlにして保存する。
.rbxlは、PartやScriptを含むplace全体をパソコンへ残すファイルだ。公式のPlace filesでも、Save to File でplaceのローカルコピーを.rbxlとして保存できると説明している。次に作業するときは、このファイルを開けば続きから始められる。
保存後に足場やScriptを直したときも、作業を終える前にもう一度保存しよう。
動かないときの確認順
GoalSignがGoalPlatformの子になっているか確認するGoalTextがGoalSignの子になっているか確認する- GoalSignのFaceが
Topか確認する - GoalTextのTextが半角大文字の
GOALか確認する - BackgroundTransparencyが
1、TextScaledがオンか確認する - WindowからOutputを開き、既存Scriptの赤いエラーがないか確認する
最初のアスレチック完成チェック
- 最初はStartIslandから始まる
- LavaFloorへ触れると倒れる
- 最後に通った水色のチェックポイントから再開する
- 緑のStage 3の先に黄色いGOALが見える
- GoalPlatformの上へ乗って停止できる
- Outputに新しい赤いエラーがない
hajimete-no-obby.rbxlをパソコンへ保存した
これで、Baseplateから作り始めた最初の3ステージアスレチックは完成だ。自分で遊べる小さなゲームになり、パソコンにも保存できた。次の記事では、この完成データをRobloxへPrivateのまま保存し、あとから開き直せるようにする。
前の記事: 途中から再開しよう：チェックポイントを作る
次の記事: ゲームをRobloxへ保存しよう：PrivateのままPublishする