Unity×Codexでヴァンサバライクを作る【第5回】UIとエフェクトをAIで作る | Unity入門の森 ゲームの作り方

Unity×Codexでヴァンサバライクを作る【第5回】UIとエフェクトをAIで作る

Unity×Codexで2Dヴァンサバライクゲームを作る ~AIでプログラムもドット絵素材も制作しよう~

この記事は「【UnityでAIゲーム制作】2Dヴァンサバライクゲームを作る講座」の第5回です。プログラミングいらず・画像素材も含めて生成AIでゲームを完成させます。

前回は、ステージ、キャラクターと敵、武器・アイテム・スキルを、仮の図形からドット絵に置き換えました。

前回の記事:

Unity×Codexでヴァンサバライクを作る【第4回】キャラ・敵・武器のドット絵アセットを量産する
この記事は「【Unity×Codex】2Dヴァンサバライクゲームを作る講座」の第4回です。プログラミングいらず・画像素材も含めて生成AIでゲームを完成させます。前回は、アセット作りの準備としてAgent Sprite Forgeを入れて小さ...

今回は、残っていたUIとエフェクトを作ります。画面のボタンや表示を本番の見た目にして、敵を倒したときやレベルアップしたときの演出を足していきます。これで、音以外のアセットがすべてそろいます。

現場レベルのゲーム制作が、すべてここで学べます。

【永久会員チケット】

永久会員チケット|Unity入門の森

全講座を見放題で学ぶ

ソースコード・素材・プロジェクトすべて公開。
Unityの基礎から応用まで、一生使えるスキルを体系的に習得。

今回やることを確認しよう

今回の流れは次のとおりです。

  1. UIを作る(T-019)
  2. エフェクトを作る(T-020)
  3. 画面の大きさを調整する

前回と同じように、タスクを確認してもらってから「dododo」で作ってもらいます。

UIを作ろう

まずはUIです。

UIとは?

UIは、画面に出ている文字やボタン、ゲージなどの表示のことです。タイトル画面の「GAME START」ボタン、ゲーム中のHPゲージ、レベルアップで選ぶカードなどが全部UIです。


今のゲームでは、UIもプログラムが仮の四角を並べているだけです。これを、第2回で作った完成イメージのような、軍用の端末っぽい見た目に変えていきます。

タスクを確認してもらおう

UIを作る前に、決めておくことを整理してもらいました。

  • タイトル、キャラクター選択、ゲーム中、レベルアップ、ポーズ、リザルトの6画面を同じデザインにそろえる
  • 今は画面を開くたびにプログラムがUIを作り直しているので、部品(プレハブ)として保存する形に変える
  • 武器や能力のアイコンは、前回作ったものをそのまま使う
  • HPと経験値はゲージにして、持っている武器を最大5つまで常に見えるようにする
  • キーボードとゲームパッドのどちらでも操作できるようにする
  • 日本語が表示できるフォントを、ライセンスを確認してから使う

いちばん大きな変更は、UIの作り方そのものを変える部分です。ここまでは「絵を差し替える」作業でしたが、UIは表示する仕組みから作り直すことになります。

 2回目追試におけるUIまわりのやりとり


↑2回目追試時は前提考察が入らなかったのでこのように上記内容を直接指示しました。

作ってもらおう

内容に問題がなかったので作ってもらいました。

まず画像生成で、ゲームロゴ、タイトル画面の背景、キャラクター選択画面の背景の3枚を作ってもらいました。



ロゴの文字は、画像生成でくずれやすいところです。今回は正しく「MECHANOID RESISTANCE」と出ていたので、そのまま採用されました。

背景には文字を入れず、文字やボタンはUnity側で表示するようにしています。こうしておくと、あとから文字だけ直したいときに画像を作り直さなくてすみます。

そのあと、フォントを2種類用意してもらいました。

  • 英語の見出し用:Oxanium
  • 日本語の本文用:Noto Sans JP

どちらも無料で使えるフォントで、ライセンスのファイルもプロジェクトの中に一緒に置いてくれています。

フォントのライセンスに気をつけよう

フォントには、使ってよい範囲を決めたライセンスがあります。ゲームに入れて配ってよいかどうかは、フォントごとに違います。

今回選んでもらった2つは「SIL Open Font License」という、ゲームに入れて配っても大丈夫なライセンスのフォントです。AIに選んでもらうときも、ライセンスを確認してから使うように頼んでおくと安心です。

できあがったUIを確認しよう

6つの画面ができたあとは、実際にゲームを動かして1画面ずつ確認してもらいました。


タイトル画面です。ロゴと背景が入り、ボタンは濃い紺色のパネルにシアンの枠という、軍用の端末っぽい見た目になりました。


ゲーム中の画面です。左上にHPと経験値のゲージ、上に残り時間、右上に倒した数、左下に固有能力、右下に持っている武器が並びます。ゲーム画面をかくしすぎないように、小さくまとめてあります。


レベルアップ画面です。前回作ったアイコンがカードに表示され、選んでいるカードだけが光ります。


リザルト画面です。使ったキャラクターのポートレートと、生き残った時間、レベル、倒した数が表示されます。

Codexからは、次のような報告がありました。

  • 6画面を軍用端末風のデザインに統一した
  • HPと経験値のゲージ、固有能力、最大5つの武器、キャラクターの能力値を表示した
  • マウス、キーボード、ゲームパッドのどれでも操作できるようにした
  • UIを作り直す仕組みをやめて、画面ごとに保存する形に変えた
  • 2つのフォントを入れて、ライセンスのファイルも一緒に置いた
  • 全画面を実際に動かして、エラーがないことを確認した
 2回目の追試時の結果について

講座執筆時とほぼ同様に遊べるゲームが出来上がってきました。

↑ここまでくるとかなりゲームとしての形ができてきますね。
ここまでプログラミングも素材づくりも全てAIに依頼していますがかなり良い形になってきたのではないでしょうか?


↑作業内容に問題がないことを確認したのでコミットしておきましょう。

エフェクトを作ろう

次はエフェクトです。

エフェクトとは?

エフェクトは、敵を倒したときの爆発や、レベルアップしたときの光のような、演出用の絵や動きのことです。ゲームの進み方そのものは変わりませんが、「今なにが起きたか」が見て分かるようになります。

タスクを確認してもらおう

続きを読む
このコンテンツはパスワードで保護されています。 コンテンツを読みたい方はUnity入門の森ショップ(https://unityforest.shop/)で講座閲覧権を取得してね。

今回のまとめ

今回はUIとエフェクトを作りました。

UI作成ではロゴと背景を画像生成で作ってもらい、フォントもライセンスごと用意してもらって、6つの画面を軍用端末風にそろえました。表示の仕組みもプログラムが作り直す形から画面ごとに保存する形に変わりました。

エフェクト作成では既にあるものと足すものを分けて整理してから、数多くのエフェクトを作って組み込みました。最後に長時間のテストまでやってもらい、重くならないことも確認できました。

最後に画面の大きさを見直しました。画面いっぱいに広げると3倍でドット絵が大きくなりすぎたので、カメラの倍率を2倍にして見やすさと見える範囲のバランスをとりました。

これで音以外のアセットはすべてそろいました。

次回はゲームにBGMや効果音を付けていきます。

次の記事:

Unity×Codexでヴァンサバライクを作る【第6回】BGM・効果音の素材集めと音量設定
この記事は「【UnityでAIゲーム制作】2Dヴァンサバライクゲームを作る講座」の第6回です。プログラミングいらず・画像素材も含めて生成AIでゲームを完成させます。前回はUIとエフェクトを作って音以外のアセットを全てそろえました。前回の記事...

【ゲームの作り方講座もプレゼント中!】

現場レベルのゲーム制作が、すべてここで学べます。

【永久会員チケット】

永久会員チケット|Unity入門の森

全講座を見放題で学ぶ

ソースコード・素材・プロジェクトすべて公開。
Unityの基礎から応用まで、一生使えるスキルを体系的に習得。

コメント

タイトルとURLをコピーしました