AIにたのんで、ゲームの見た目を良くしよう

連載「AIといっしょにゲームを作ろう」の、コインあつめゲームの5回めです。前の回（クリアタイムとやり直し）を読む

前の回で、コインあつめゲームが完成しました。でも、見た目はまだ、ただの青い足場と黄色いコインです。

今回は、ゲームの見た目をChatGPTにたのんで、良くしてもらいます。ここで大事なのは、動きは変えないことです。

今回作るもの

• 空と明るさ：やさしい色の空にして、うすい霧を足す
• 足場：5つの足場の色を、順番に変える
• コイン：金色にして、まわりをほんのり光らせる
• ゴール：現れたとき、まわりにキラキラした粒を出す

ChatGPTにたのむ

前の回までの作品を、スタジオで開いたまま、ChatGPTに次の文を送ります。

さっき作った「コインあつめダッシュ」の、見た目を良くしてください。
今回は、見た目だけを変えます。ゲームの動きやルールは、変えないでください。

【作るもの】
1. 空と明るさ：夕焼けのような、やさしい色の空にする。霧も少し足して、遠くがふんわり見えるようにする。
2. 足場：5つの足場を、順番に色がかわる（青から紫へ、など）ようにする。素材は、つるっとした感じにする。
3. コイン：金色にして、まわりがほんのり光るようにする。
4. ゴール：緑色の台のまわりに、キラキラした粒が出るようにする。

【ルール】
- スクリプト（動きや、スコア、ゴールの判定）は、変えないでください。
- 外から画像や音を持ってこないで、スタジオにもともとある部品と設定だけで作ってください。
- 名前は、分かりやすくしてください。
- 小学生が読めるように、スクリプトを作った場合は日本語のコメントをつけてください。
- 音や、新しい面は、まだ作らないでください。

【最後にお願い】
作り終わったら、次の3つを、やさしい言葉で教えてください。
- 何を変えたか
- 空の色は、どこで変えているか
- 元の見た目にもどしたいときは、どうすればいいか

今回の工夫は、2つあります。

• 「動きは変えない」と、はっきり書く：見た目をかざるついでに、ルールまで変わってしまうのを防ぎます
• 「元にもどす方法」を聞く：見た目は、好みがあります。気に入らなかったときに、もどせるようにしておきます

できあがりを見る

約1分43秒で、ChatGPTから次の返事が来ました。

返事を読むと、次のことがわかります。

• 変えた見た目：空をやさしい夕焼け色にして、うすい霧を足しました。足場は青から紫へ順番に変えて、つるっとした素材にしました。コインは金色にして、ほんのり光らせました。ゴールが現れると、まわりにキラキラが出ます
• 空の色を変える場所：エクスプローラーのLightingです。ClockTimeで夕方にして、中のAtmosphereで空の色と霧を調整しています
• 元にもどす方法：元の設定を、ServerStorageのAppearanceBackupに残しました。プレイを停止して、スタジオの「コマンドバー」で、返事にある1行を実行すると、今回の見た目だけを、元にもどせます

「ゲームの動きやルールのスクリプトは変えていません」とも、書いてあります。

変わった見た目を見る

変える前と変えたあとを、くらべてみましょう。

まず、変える前です。前の回までの見た目です。

次に、変えたあとです。

足場は、手前の青から、奥の紫へ、順番に色が変わりました。コインは、金色になっています。

ただ、夕焼けとは少しちがいます。 空が暗くなって、月が出ています。夕方というより、夜に近い見た目です。そのせいで、コインも、金色というより、くすんだオレンジに見えます。

もうひとつ、気になるところがあります。たのんだのは、コインがほんのり光ることでしたが、画面を見ると、光っているようには見えません。ChatGPTは、コインのなかにPointLight（ポイントライト）という、まわりを照らす部品を入れていました。でも、その明るさの数字は、0.65と小さめです。コインの色や素材（金属）も、光って見える作りではありません。部品は入っているのに、見た目には、ほとんど出ていないのです。

AIは、思ったとおりに作ってくれないこともあります。そんなときは、直してもらいましょう。直してもらうのは、動きを確かめたあとです。

動きが変わっていないか、遊んで確かめる

見た目を変えたら、動きが変わっていないかを、遊んで確かめましょう。

1. 画面の上の「▶（プレイ）」を押します
2. コインを5つ取って、ゴールまで行きます
3. ゴールにさわって、クリアタイムと「もう一度あそぶ」ボタンが出るかを見ます

ゴールが現れると、まわりにキラキラした粒が出ます。

クリアタイムも「もう一度あそぶ」ボタンも、前の回のとおりに出ました。動きは変わっていません。

直してもらう

見つけた2つの気になるところは、そのままChatGPTに伝えます。次の文を送ります。

空が暗くて、月が出ています。もう少し明るい、夕焼けの空にしてください。また、コインが光っているように見えません。もっとはっきり光らせてください。ほかのところは、変えないでください。

直したあとの画面です。

空が明るくなって、月も消えました。 コインも、黄色く光って見えるようになりました。

スタジオで、直す前と直したあとの数字を見くらべてみました。

ChatGPTは、時こくを少し早めて、全体の明るさも上げました。コインは、自分から光る素材（Neon）に変えて、まわりを照らす光も、強く、広くしました。「光っているように見えない」という気づきが、どの数字を変えればいいかのヒントになったことがわかります。

どこを変えたか見てみる

「■（停止）」を押して編集の画面にもどり、右のエクスプローラーを見てみましょう。見た目は、スクリプトではなく、部品の設定（プロパティ）で変えているものが、ほとんどです。

• Lightingの中のAtmosphere：空と霧の色
• CoinCollectDashの中のPlatform1〜5：足場の色と素材
• Coin1〜5の中のCoinGlow：コインのまわりの光（PointLightという部品）
• WorkspaceのGoalの中のGoalSparkleAttachment：ゴールのキラキラ（ParticleEmitterという部品）
• ServerStorageのAppearanceBackup：元の設定を、とっておく場所

ServerStorageのCoinTemplates（前の回のコインの見本）の中にも、同じCoinGlowが入っています。「もう一度あそぶ」で、コインがもどったあとも、同じ見た目になるようにしてあります。

スクリプトを読んでみる

今回は、見た目のほとんどが設定で変わるので、スクリプトはひとつだけです。ゴールのキラキラを出すGoalEffectsScriptです。StarterPlayerのStarterPlayerScriptsの中にあります。

-- ゴールの見た目だけをかざる係だよ。ルールは変えないよ。
local goal = workspace:WaitForChild("Goal")
local sparkles = goal:WaitForChild("GoalSparkleAttachment"):WaitForChild("GoalSparkles")
local function updateSparkles()
    -- 台が見えるときだけ、キラキラを出すよ。
    sparkles.Enabled = goal.Transparency < 1
    if not sparkles.Enabled then
        -- やり直して台が消えたら、残っている粒も消すよ。
        sparkles:Clear()
    end
end
goal:GetPropertyChangedSignal("Transparency"):Connect(updateSparkles)
updateSparkles()

• local sparkles = ...GoalSparkles：ゴールについている、キラキラを出す部品（ParticleEmitter）を、sparkles という名前でおぼえます
• sparkles.Enabled = goal.Transparency < 1：ゴールのTransparency（とうめい度）が 1 より小さい（見えている）ときだけ、キラキラを出します（Enabledがtrue）。前の回で、ゴールは、とうめい度が 1 から 0 に変わって現れました。その変化を使っています
• sparkles:Clear()：ゴールが消えたときに、空中にのこっている粒を全部消します
• goal:GetPropertyChangedSignal("Transparency"):Connect(updateSparkles)：ゴールのとうめい度が変わるたびに、updateSparkles を動かします。前の回の、GetAttributeChangedSignal と、よく似ています。属性の変化ではなく、部品の設定（プロパティ）の変化を見ています

ルールを決めるスクリプトは、さわっていません。見た目の係は、見た目だけを動かしています。

元にもどすには

ChatGPTの返事にあった、元にもどすための1行の中身も、見てみましょう。AppearanceBackupの中のRestoreAppearanceです。

-- とっておいた設定で、元の見た目にもどす係だよ。
return function()
    local backup = script.Parent
    for _, entry in backup.OriginalSettings:GetChildren() do
        -- （中略：とっておいた設定を、ひとつずつ元にもどす）
    end
    -- あとから足した光や粒のかざりを取りのぞくよ。
    for _, ref in backup.AddedItems:GetChildren() do
        if ref.Value then
            ref.Value:Destroy()
        end
    end
    backup:Destroy()
    return "元の見た目にもどしました。"
end

「元の設定をとっておく」のと、「あとから足したものを、おぼえておく」のが、セットになっています。元にもどすときは、とっておいた設定をもどして、足したものを消す、という流れです。最後の backup:Destroy() で、とっておいた設定も消えるので、一度もどすと、もう一度、元にもどすことはできません。

ためしに、数字を変えてみましょう

空の明るさは、LightingのClockTime（時こく）で決まります。直したあとは、16.8（午後5時ごろ）になっています。この数字を、もっと小さくしてみましょう。

1. 「■（停止）」を押して、編集の画面にもどります
2. エクスプローラーで、Lightingをクリックします
3. 右下のプロパティで、ClockTimeを探します
4. 今の数字を、12に書きかえて、Enterキーを押します
5. 「▶（プレイ）」を押して、空を見ます

昼間の、明るい空になるはずです。 ClockTimeは、0 から 24 までの、1日の時こくです。数字を小さくすると、昼に近づきます。

気に入った明るさが見つかったら、そのまま使ってかまいません。もとの空にもどすなら、16.8 に書きかえます。

読めれば、直せます。 AIにたのまなくても、設定の場所さえわかれば、見た目を自分で変えられます。

もっといい、たのみ方

• 見た目は、好みなので、具体的に言う：「夕焼け」だけでなく、「明るい夕焼け」「オレンジ色の空」のように、色や明るさも書きます
• 「動きは変えない」と、はっきり書く：見た目のついでに、ルールが変わるのを防ぎます
• 「元にもどす方法」を、先に聞く：気に入らなくても、すぐもどせると、安心して試せます
• 気になるところは、そのまま伝えて直してもらう：今回は、「空が暗い」「コインが光って見えない」を、そのまま伝えました
• 遊んで、動きが変わっていないか確かめる：今回は、コインを取って、ゴールして、「もう一度あそぶ」まで、前と同じかを見ました

つぎは

これで、コインあつめゲームの見た目も整いました。次の回からは、2つめのゲームに進みます。