自作ゲーム開発記 Mother Planets #8　いっきに「惑星」っぽくなってきました！

今日は医者いってきました。
シルバーウイーク中、実は不調を抱えてきたのでお薬調整です。
持病なので、付き合っていくしかないですね。

前回は、Twitchチャットで !join と入力するとUnity上に自分の惑星が1個生成されるところまで進みました。

ただし、その時点では本当にただの灰色のSphere。名前もなく、動きもなく、見た目だけなら「Unityで球を置いただけ」に近い状態でした。今回はここから、少しずつMother Planetsの「惑星」らしい見た目と動きを付けていきました。

いつもと作業量は変わらなかったり、むしろ減ってるまであるのに、見た目の変化が大きいとめっちゃ進んだ気になりますね。不思議です。

まずは配信ゲームとして大事な設定をひとつ修正

作業を始める前に気になっていたのが、Twitchで!joinを送っても、Unityのウィンドウをクリックしてアクティブにしないと画面へ反映されないことでした。

原因はUnityの Run In Background 設定。これを有効にすることで、ChromeやOBSなど別のウィンドウを操作している間もUnity側の処理が止まらず、Twitchからのコメントがすぐゲームへ反映されるようになりました。

視聴者参加型ゲームなので、配信中にUnityをずっと最前面にしておくわけにはいきません。地味ですが、実際に配信で動かすことを考えるとかなり重要な修正でした。

惑星の上に「jyori」と名前を表示

最初に追加したのは、誰の惑星なのか分かる名前表示です。

Planet Prefabの中にTextMeshProを使ったNameLabelを追加し、PlanetViewが持っているPlanetState.DisplayNameを表示するようにしました。これでTwitchから!joinすると、生成された惑星の上に実際のユーザー名「jyori」が表示されます。

途中、TextMeshProの名前空間が見つからないというコンパイルエラーも出ました。Mother PlanetsではAssembly Definitionでレイヤーを分けているため、Presentation側からUnity.TextMeshProへの参照を追加して解決しました。

また、惑星はこれから動いたり回転したりするので、文字まで一緒に裏返ると困ります。そのためBillboardという処理も追加し、名前が常にカメラの方向を向くようにしています。

最初は文字がかなり小さく、背景と同化して「表示されてる……よね？」という状態でしたが、サイズや太さ、黒い縁取りなどを調整して、ひとまず読める状態まで持っていきました。

PlanetStateの情報を使って、本当に公転するようになりました

次はかなり楽しみにしていた公転です。

ゲーム内部のPlanetStateにはすでにOrbitStateという公転情報があり、そこには軌道半径、現在角度、1周にかかる時間が保存されています。今回は新しくOrbitViewを作り、その情報をUnity上の座標へ変換して実際に惑星を動かしました。

ようやくここで、事前準備していた公転情報のプログラムが役に立ちました！

現在は仮設定で、軌道半径5、1周60秒です。まだ中央に恒星はありませんが、ゲーム画面の原点を中心に、!joinで生まれた惑星がゆっくり円を描いて動くようになりました。

これまでは内部に存在していただけのOrbitStateが、初めて画面上の動きとして見えるようになった瞬間です。

属性によって惑星の色も変わるように

続いて、PlanetStateが持っている属性を見た目に反映しました。

現在のUnity版では属性IDとしてMars / Jupiter / Uranus / Mercuryの4種類があります。今回はPlanetVisualControllerを作り、それぞれの属性に応じて惑星の色を変えられるようにしました。

まだTwitchから参加した惑星の属性は仮でMars固定なので、今回は灰色だった惑星が赤茶色へ変化しました。

現時点の色は確認用の仮設定です。属性の正式な表示名や色については今後整理する予定ですが、「PlanetStateの属性によって見た目が変わる」という仕組みそのものはこれで動き始めました。

表面に模様を付けて、ただの色付きSphereから一歩前進

ここまで来ると自転も付けたくなるのですが、単色のSphereを回しても、見た目では回転しているのか全く分かりません。

そこで先に、惑星用のPlanetBase Materialを作成し、表面に確認用Textureを貼りました。今回は自転が分かりやすいように、あえて濃淡や大きな模様がはっきりしたテスト用画像を使っています。

UnityのShaderについても少し勉強しました。

Meshが「形」、Materialが「その物体の見た目」、Shaderが「そのMaterialを画面上でどう描画するか」、Textureが「表面の模様」という役割です。今回はまずUnity標準のUniversal Render Pipeline/Litを使い、光や影を受ける普通の3D惑星として表示しています。

これだけでも、赤一色だったSphereからかなり惑星らしい雰囲気になりました。

そして、自転しながら公転するようになりました

表面模様ができたので、最後にPlanetRotationViewを追加しました。

今は確認しやすいように1秒あたり20度、約18秒で1回転する仮設定です。実際に動かしてみると、表面の大きな模様が横へ移動していくので、自転していることがはっきり分かります。

さらに公転も同時に動いているため、

Twitchで!join
→ jyoriの惑星が生成
→ 名前が表示
→ 属性色が付く
→ 表面模様が付く
→ 原点の周囲を公転
→ 惑星自身も自転

というところまで一気につながりました。

前回の記事では「まだ灰色のただの球」と書いていましたが、わずか1日でずいぶん惑星らしくなりました。

↓↓↓実行からアカウント接続、!join、惑星生成、自転公転の様子（動画）

裏側の仕組みと見た目が、少しずつつながってきた

今回特に面白かったのは、単純にUnityでアニメーションを付けているわけではないところです。

名前はPlanetState.DisplayName、色はPlanetState.Element、公転はPlanetState.Orbitというように、これまで作ってきたゲーム内部のデータが少しずつUnity上の見た目へ反映されています。

まだ仮のTextureや仮の色も多いですが、ゲームの内部データと画面上の惑星が対応し始めたことで、「ただの表示テスト」から少しずつゲーム本体になってきた感覚があります。

今後の予定

次は、惑星にHPバーを付ける予定です。

名前とHPが表示されれば、惑星が単なる背景オブジェクトではなく、「ダメージを受け、生き残るプレイヤーキャラクター」としてかなり分かりやすくなります。その後は恒星、軌道線、本番用の惑星表現なども少しずつ進めていきたいです。

前回は、!joinした結果として灰色の球が1個出ただけでした。

今日はその球が、自分の名前を持ち、色と表面を持ち、公転しながら自転するところまで来ました。

少しずつですが、ちゃんとMother Planetsの世界が画面の中にでき始めています。