メインコンテンツへスキップ
見出し画像

【プロジェクト:Neith】育成パートUI開発中〜みんなで作るゲーム制作【4/20(月)4日目】

    ■トランザクション(アイキャッチ)実装


    ■育成メニュー画面UI作成(8割完了)

    画像

    ■募集中のアイディア

    ・「古代エジプト編」で発生しそうなイベントを考えてください!
    (例:ピラミッドでの修行、ナイル川でのハプニングなど)
    (期限:なし。皆さんの自由な発想をお待ちしています!)


    こんばんは、「まる。」です!


    今日で開発4日目。


    皆さんの応援のおかげで、
    ネイトちゃんはどうにか「3日坊主」の壁を乗り越えることが出来たようです😎


    そして今日からは、いよいよ本作の要の一つとなる「自作メニュー画面」の作成に挑みます。


    果たして、ネイトちゃんは今夜の作業も無事に乗り切ることが出来るのか…!?


    激闘の4日目、スタートです!


    二人の茶番

    🎧いつもの

    アンゴラたちの踊り/作(編)曲 : まんぼう二等兵
    • DOVA-SYNDROME公式 作曲者 まんぼう二等兵


    画像
    ポマイラ(自称ネイトの使い魔)

    「よお、おまえら!
    オレ…」


    画像
    ネイト(幻の星の精霊)

    「こんばんは!みんな!
    寝る前に温かいココアは飲んだかしら?」


    画像
    ポマイラ(自称ネイトの使い魔)

    「おい!ネイト!オレ様のイカした挨拶取るんじゃねぇ!
    …てか、今日もなんかすごぶる元気そうじゃねぇか。」


    画像
    ネイト(幻の星の精霊)

    「今日の私は一味も二味も違うわよ!ねぇ、ポマイラ。

    良いニュースと、とっても良いニュースがあるんだけど、どれから聞きたい?」


    画像
    ポマイラ(自称ネイトの使い魔)

    「…じゃあ、良いニュースを」


    画像
    ネイト(幻の星の精霊)

    「ふふ…良いニュースが聞きたいのね!

    それは…なんと!私たちの記事が、
    先週『#ゲーム』の中で一番スキを集めた記事だったらしいのよ!!!」

    画像
    画像
    ポマイラ(自称ネイトの使い魔)

    「そいつはめでてぇじゃねぇか!!!

    『#ゲーム』って結構記事数もあるだろ?
    その中のテッペンって…
    やっぱり、オレ様の魅力にみんな気付き始めたってことか。」

    画像
    ネイト(幻の星の精霊)

    「まぁ、ポマイラが魅力的かどうかはともかく…」

    画像
    ポマイラ(自称ネイトの使い魔)

    「おい流すな!
    ……で、それよりすごい『とっても良いニュース』ってのは何なんだ?」


    画像
    ネイト(幻の星の精霊)

    「聞いて驚かないでね!
    フォロワー様から、とても素敵な無料アセットをたくさん紹介してもらったの!」

    画像
    ポマイラ(自称ネイトの使い魔)

    「おっ!
    この方もUnityで個人ゲーム開発をしているクリエイターじゃねぇか!」

    画像
    ネイト(幻の星の精霊)

    「そうよ!
    孤独な狼と猫さんは、個人開発ながらUnityで大作のRPGを開発されているとっても凄い方なの!

    今は新作で、可愛い猫ちゃんたちが冒険するRPGを制作されているから皆さんも是非見てみて!
    本当に凄いんだから!」

    ■ねこねこネットワークRevelation


    ■ハクスラ系大作RPG『Rebel Infernal Path(R.I.P)』リリース中!


    画像
    ポマイラ(自称ネイトの使い魔)

    「それで、教えてもらった無料のアセットとやらは使えそうなのか?」

    画像
    ネイト(幻の星の精霊)

    「頂いたのは3Dマップのアセットやモデルだったのだけど、これがかなり使えそうなのよ!
    私、3D作成するのってとっても苦手だから凄く有難かったわ。
    あと、ちゃんと今回の世界観に合わせて見繕ってくれたの!
    本当、有難いわよね」

    画像
    ポマイラ(自称ネイトの使い魔)

    「そいつは最高じゃねぇか! で、どうやって使う予定だ?」

    画像
    ネイト(幻の星の精霊)

    「戦闘のマップで使えたらなと考えてるわ。

    俯瞰から映して使ったり… 場合によっては2Dと3Dを合わせて、
    オクトパストラベラーみたいに『HD-2D』の真似事みたいなのも出来ないか検討中よ。
    こっちは技術や素材的な問題が付きまとうから、
    本当に出来たらだけどね。」


    画像
    ポマイラ(自称ネイトの使い魔)

    「なるほどな!
    頂いた分、しっかりと面白いゲームに仕上げて行こうぜ!」

    画像
    ネイト(幻の星の精霊)

    「もちろん!アセット、大事に使わせてもらうわ。
    ありがとうね、孤独な狼と猫さん!」




    ちょっとした提案


    画像
    ネイト(幻の星の精霊)

    「あとね、今回からちょっとこの企画のルールについて、
    1つだけ見直したいことがあるの。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「ルールについてのブラッシュアップか…
    もう開始から4日も経つもんな。
    何か見えてきたものがあるのか?」

    画像
    ネイト(幻の星の精霊)

    「うん。今の自分が『どの作業にどれくらいの時間をかけているか』が見えてきたの。
    その中でね、私が気になったのは『文章の執筆』と『素材集め』にかかる時間よ。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「…まぁ、この辺りはどうしても時間が掛かってしまう部分ではあるな。」

    画像
    ネイト(幻の星の精霊)

    「そうなの。
    このままだと、恐らく作業時間の3分の1以上を素材集めや執筆に使うことになっちゃう。
    そうなるとなかなか進まなくて、
    1ヶ月でみんなが楽しく遊べるゲームを完成させるのは難しいと思うの。」

    画像
    ネイト(幻の星の精霊)

    「そこで、以下のルールで今後進めさせて頂きたいわ!」

    ■ネイトのこそこそ練習ルール
    1.
    ゲームで使用する素材集めや作成は、作業時間外で行う。
    2.サブイベント(場合によってはメインも)の執筆も、
    作業時間外に行う。


    画像
    ポマイラ(自称ネイトの使い魔)

    「ルール1は良いとして…このサブイベントの下りは何なんだ?」

    画像
    ネイト(幻の星の精霊)

    「今、コメントボードで『古代エジプトで起こるイベント』のアイデアを募集してるじゃない?
    もちろん全部目を通しているのだけど、みんなの素敵なアイデアを見ていたら、私、思ったの。」

    画像
    ネイト(幻の星の精霊)

    「…出来ることならこの中のアイディア全部をゲームに乗せたいなって。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「ぜ…全部ぅ!?
    無理無理!何個イベント作るんだよ!」

    画像
    ネイト(幻の星の精霊)

    「もちろん、簡単じゃないのは分かってるわ!

    だから、出来るだけコンパクトにまとめたり、アイデア同士を合体させたり工夫しようとは考えてるの。 」

    画像
    ネイト(幻の星の精霊)

    「でも、やっぱり文章は真剣に考えたいから、どうしても時間が必要なの。

    だから、みんなからもらったアイデアは、
    私のスキマ時間にじっくり書かせてほしいの。」


    画像
    ポマイラ(自称ネイトの使い魔)

    「そんなの、生成AIに丸投げしてパパッと書いてもらえばいいじゃんか。」

    画像
    ネイト(幻の星の精霊)

    「ポマイラ、それはね『自分で運転してドライブを楽しみたい人に、タクシーに乗ればいいじゃないか』って言うのと同じよ。

    みんなが考えてくれた大切なアイデアなんだから、
    私が頭の中で情景を思い浮かべて、ワクワクしながら自分の言葉で書きたいの!」

    画像
    ポマイラ(自称ネイトの使い魔)

    「……へいへい、わかったよ。
    ったく、コイツは一度言い出したらテコでも動かねぇからな……。」




    今日やること(シーンチェンジ素材の配布)

    画像
    ポマイラ(自称ネイトの使い魔)

    「それで?今日は何をやるんだ?」

    画像
    ネイト(幻の星の精霊)

    「今日はね、事前に用意しておいたこれらの素材を使って、
    いよいよ育成メニューの画面を組み立てていくわ!」


    ■使用素材

    画像

    ■下太フォント


    ■シーンチェンジ(ご自由にお使いください)

    画像
    ポマイラ(自称ネイトの使い魔)

    「おっ、フォント以外は全部ネイトが自作したのか?」

    画像
    ネイト(幻の星の精霊)

    「まぁ、イラストはGemini先生だけど、シーンチェンジ素材はAviUtlを使って自作したわ!
    これは、画面切り替えのアイキャッチとして使えるんだけど、スキマ時間で作ったにしては中々いい出来になったと思ってるの!

    mp4ファイルでみんなが使いやすいようにしてあるから、
    気になった人はぜひダウンロードして使ってみてね!」

    画像
    ポマイラ(自称ネイトの使い魔)

    「太っ腹だな。利用報告とかクレジット表記はどうするんだ?」

    画像
    ネイト(幻の星の精霊)

    「そんなの別にいらないわ。
    減るものでもないしね。
    みんなの創作活動の役に立てれば、それで十分嬉しいの!」


    昨日の微修正(20:00-20:05)

    画像
    ネイト(幻の星の精霊)

    「…さて、報告で長くなってしまってごめんなさいね。
    それじゃあ、早速開発を進めていくわ。」


    トランザクションを流す(20:00-20:02)

    画像
    ポマイラ(自称ネイトの使い魔)

    「早速、シーンチェンジの素材を使っていく訳か。」

    画像
    ネイト(幻の星の精霊)

    「そうよ。
    一応補足しておくと、これから流すアイキャッチは私のゲーム用に加工したものなの。
    みんなにプレゼントしたmp4ファイルの方には私が映っていないから、そこだけ注意してね。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「動画の流し方は分かるのか?」

    画像
    ネイト(幻の星の精霊)

    「その辺りはもう予習済み!
    テキパキ行くわよ!」

    ■動画の再生

    画像

    ■実行

    画像
    ポマイラ(自称ネイトの使い魔)

    「へぇ!朝と夜の二種類あるのか。」

    画像
    ネイト(幻の星の精霊)

    「そうなの!
    これで一気にノベルゲームっぽくなったんじゃないかしら?」


    テキストにアウトラインを追加する(20:02-20:05)

    画像
    ネイト(幻の星の精霊)

    「次に、今回追加した『下太フォント』が画面でどう見えるかを確認してみるわ。
    ついでに、背景に負けないようにテキストにアウトライン(縁取り)を追加して、表示のテストもしておくわね。」

    画像
    画像
    ネイト(幻の星の精霊)

    「うん、文字がくっきりして中々良いんじゃないかしら!
    この設定を使って、後半はいよいよ『育成パート』のUI作りに突入していくわよ。」


    メインストーリー執筆

    古代エジプトについて調べる(20:05-20:20)

    画像
    ネイト(幻の星の精霊)

    「次はメインストーリーの執筆ね。
    その前に、次に書く内容をプロットで確認してみるわ。」

    画像
    画像
    ポマイラ(自称ネイトの使い魔)

    「ついに、仲間が加入するイベントか!
    で、どのアルカステラにするのかは決めているのか?」

    画像
    ネイト(幻の星の精霊)

    「…実は、まだなの。

    だから、今回のパートの舞台になる『古代エジプト』の時代背景をしっかりと調べて、それに合いそうな子を見繕うわ。」



    ーーー15分後。



    画像
    ネイト(幻の星の精霊)

    「決まったわ!
    時代背景も何となくつかめたし、最初の仲間はこの子にするわね」

    ■アルカステラ「ベンヌ」

    画像
    画像
    ポマイラ(自称ネイトの使い魔)

    「ネイトは金星ヴィーナスの衛星だろ?
    ヴィーナスにしないのか?」

    画像
    ネイト(幻の星の精霊)

    「ヴィーナスはどちらかというと、
    ライバルサイドに置きたいと考えてるわ。
    それに…彼女は『HorizonNotes』本編で大活躍するアルカステラだしね。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「なるほどな。
    まぁ、ネイトのことだから、この『ベンヌ』を選んだ何かしらの理由もあるんだろうな。」


    執筆開始(20:20-21:03)

    画像
    ネイト(幻の星の精霊)

    「21時まではメインストーリーの執筆よ。
    今回は、さっき調べたばかりの古代エジプトの背景を意識しながら書かないといけないから大変だわ…!」

    ――古代エジプト。
    紀元前2150年ごろ。
    かつて天を突くピラミッドを建造し、
    栄華を極めた「古王国時代」が崩壊した直後の、混沌と無秩序の時代。

    長引く気候変動によって雨は途絶え、
    母なるナイル川の水位は恐ろしいほどに低下していた。

    深刻な干ばつと飢饉が大地から豊かな緑を奪い去り、
    荒廃した土地には無法者が跋扈する。
    ここは、ひと握りの水と食料を巡って容易に命が散る、
    弱肉強食の過酷な世界だ。

    乾いた風が吹き抜け、足元で砂埃が舞う。
    「しかし、古代エジプトって思ってたより気温は高くないんだな」
     ポマイラが照りつける太陽を見上げながら、辺りをキョロキョロと見回した。
    「昔のエジプトは今に比べて気温が低くて、今より乾燥した気候だったのよ。だから、現代の茹だるような暑さに比べたら幾分か涼しく感じるわね」
     ネイトは吹きすさぶ風に髪を揺らしながら冷静に答える。
    「ところで、ネイトさんや。オレ様はそろそろ、喉が渇いてきたんだが」
    「あー、この時代の水はとても貴重よ? 降水量も少なくて滅多に雨が降らないし、今は特に干ばつが酷い時期だから」
    「え? そりゃ、一大事だぜ! このままだと干からびちまうよ!」
    「それなら、今日はナイル川の方を目指しましょうか。水源の確保は確かに最優先だわ」

    荒涼とした大地を二人が歩いていると、砂だまりの中で倒れ伏す一つの小さな影を見つけた。
     赤い羽根を生やしたその星の精霊(アルカステラ)は、今にも"あぼーん"してしまいそうなほど衰弱しきっていた。

    "(※あぼーん:星の精霊アルカステラたちにとって、死よりも恐ろしいこと。
    ぽかぽかのお布団を取り上げられるよりも、お菓子が食べられなくなることよりも、何よりも恐ろしい状態を指す!)"

    「……大分参ってるみたいだな」
     ポマイラが顔をしかめて覗き込む。
    「……のどが渇いたッスー、ひもじいッスよー」
     かすれた声でうわ言のように呟くアルカステラ。
    「ありゃ、もうダメそうだな。あいつはこのWCSの厳しい環境には付いていけない……」
    「……大丈夫? 良かったら、このお水を飲んで」
     ネイトは荷物から水筒を取り出し、そっと彼女の口元へと運んだ。
    「って、おい! 持ってるじゃねぇか! 水!」
     ポマイラのツッコミをよそに、彼女はネイトから水筒を受け取ると、コクコクと喉を鳴らして勢いよく水を飲み干した。
     すると、萎れていた赤い羽根にふわりと力が戻り、たちまち元気を取り戻す。

    「……ぷはぁー! ありがとうッス! 生き返ったッスよ!」
    「どういたしまして。大会期間中は、アルカステラも人間と同じように空腹や喉の渇きを感じる……全く、なんて過酷なルールなのかしらね」
    「本当、こんなに辛いなんて。人間はとっても大変なんスねー」
     彼女はうんうんと大きく頷いた。
    「あたし、ベンヌッス! あなたの名前は?」
    「ネイトよ。よろしくね、ベンヌ。ところで、ベンヌはどうしてこんな場所で倒れてたの?」
     ネイトが優しく問いかけると、ベンヌはハッとして羽をばたつかせた。
    「あ、そうそう! それがさ、酷いんスよ! お水と食べ物、悪い奴らに取られちゃったんス!」
     それを聞いたポマイラは、声を荒らげて言った。
    「何? こんな弱っちそうなアルカステラから強盗するなんて、ふてぇ野郎だ。なぁ! ネイト!」
    「無理もないわ。この時代……紀元前2150年ごろは、古王国時代という栄華を極めた時代が終わったばかりの、混沌とした時代なのよ」
     ネイトの瞳が、ひび割れた乾いた大地を見つめる。
    「気候変動でナイルの恵みは減り、飢饉が起きて治安も最悪。そんな中、水と食料を持っているか弱い女の子を見たら……」
    「それに、大切なレックス君も奪われちゃったんス……!」
     ベンヌの大きな瞳にいっぱいの涙が浮かび、ポロポロと乾いた砂の上にこぼれ落ちた。

    「……良かったら、私と一緒にその悪い人たちを懲らしめにいく?」
     ネイトはにこりと不敵に笑う。
    「え、いいんスか?」
    「えぇ」
     ポマイラがネイトに耳打ちする。
    「……おいおい、ネイトさんよ。そんな厄介ごとに付き合って、もしあぼーんしたらどうするんだよ」
    「いいのよ。……悪い人たちには、私のウォーミングアップに付き合ってもらうわ」
    「ひゅー……悪い顔だぜ、ネイト」
    「本当に手伝ってくれるんスか? だったら、あたしが案内するッスよ! あいつらはこっちの方に行ったッス!」

    画像
    ネイト(幻の星の精霊)

    「…めちゃくちゃ疲れたわ。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「お疲れ様だぜ、ネイト。」

    画像
    ネイト(幻の星の精霊)

    「ただ、一気に書いたから、このままだと導入部分のやり取りとかに矛盾が出ちゃってるわね。
    これはまた手が空いた時に直すとするわ。」


    育成メニュー作成(21:03-22:00)

    画像
    ネイト(幻の星の精霊)

    「さて、ここからは後半戦…一気に駆け抜けるわよ! ポマイラ!」

    画像
    ポマイラ(自称ネイトの使い魔)

    「いつもここからが本当の地獄だもんな! 気張れよ、ネイト!」


    ボタンの作成

    画像
    画像
    ネイト(幻の星の精霊)

    「まずは、コマンドとなるボタンを配置していくわ。」

    画像
    画像
    ネイト(幻の星の精霊)

    「ボタンを複製して、テキストの内容とフォントを変えていくの。

    一応補足すると、親のパネル(オブジェクト)に『Vertical Layout Group』というコンポーネントを追加すれば、
    こうやって手動で調整しなくても縦に綺麗に並ぶからお勧めよ!」

    画像
    画像
    ネイト(幻の星の精霊)

    「文字をより可愛く、視認性を高くするために、グラデーションをかけてみるわ。
    TextMeshProのインスペクターで、『Color Gradient』にチェックを入れて、好みの色を設定すればOK!」


    日数表示(画面上部)

    画像
    ネイト(幻の星の精霊)

    「次に、画面上部に表示する残りターン数などのUIを作っていくわ。

    パネルを配置して、その中にテキストを詰めていくのだけど……
    今回みたいに『画面の上』や『画面の下』って配置場所がキッチリ決まっているなら、アンカーを使うことをお勧めするわ!」


    画像
    ポマイラ(自称ネイトの使い魔)

    「アンカー? 船の錨(いかり)のことか?」


    画像
    ネイト(幻の星の精霊)

    「UIを画面の特定の位置にピタッと繋ぎ止めておく機能のことよ。

    画像


    こんな風に、アンカーを『画面左上』にセットして、位置(Rect Transform)のXやYの値を0にするの。」

    画像
    ネイト(幻の星の精霊)

    「こうすることで、アンカーを起点としてオブジェクトが配置されるから、
    遊ぶ人の画面サイズが変わってもUIのレイアウトが崩れにくくなるわ。」

    画像
    画像
    ネイト(幻の星の精霊)

    「これで、画面上部も作成完了よ。」


    画面下部(パラメーター)

    画像
    ネイト(幻の星の精霊)

    「最後に、画面下部に体力などのパラメーターを表示するメニュー欄を作成していくわ。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「おっ、いよいよUIも大詰めだな! どんなアイコンが入るんだ?」

    画像
    ネイト(幻の星の精霊)

    「……実は、アイコンの素材を作り忘れてしまったの。
    だから今回は、今回使ってる素材でごまかしながら……
    ゲフンゲフン、上手く代用していくわ!」


    画像
    画像
    ネイト(幻の星の精霊)

    「今回は、UIの要素を横に綺麗に並べたいから、
    『Horizontal Layout Group』というコンポーネントを追加するわ。
    これはさっき使ったやつの『横一列バージョン』ね。」


    画像
    ネイト(幻の星の精霊)

    「よーし、これでUIの配置は一通り完了よ! 一度実行して画面を見てみるわね。」


    実行(21:50-22:00)

    画像
    画像
    ポマイラ(自称ネイトの使い魔)

    「おい、画面のアイコンのサイズがめちゃくちゃだぞ。」

    画像
    ネイト(幻の星の精霊)

    「あーっ! Canvasの設定をすっかり忘れていたわ。
    ここにある『Canvas Scaler』のUIスケールモードを
    『画面サイズに拡大』に変更するわね。」

    画像


    画像
    画像
    ポマイラ(自称ネイトの使い魔)

    「……おい! 今度はアイコンがめちゃくちゃデカくなったぞ!?」

    画像
    ネイト(幻の星の精霊)

    「慌てないの!
    基準になる画面サイズを変えたんだから当然よ。
    ここからは微調整!
    手作業で綺麗に直していくわよ。
    ……ついでに、明日の作業がスムーズになるように、
    体力ゲージ用の『Slider』もサクッと追加しておきましょう!」

    画像


    画像
    画像
    ネイト(幻の星の精霊)

    「ふぅ…とりあえず、今日はこんな所かしら。」

    画像
    ポマイラ(自称ネイトの使い魔)

    「おおっ!
    最初はどうなることかと思ったが、立派な育成画面になったじゃねぇか!
    このレイアウト、何か参考にしたのか?」


    画像
    ネイト(幻の星の精霊)

    「ふふん、色々な名作を研究しているわよ?
    例えば『パワプロ』とかね。
    みんなもよく知っている名作ゲームのエッセンスが、
    あちこちに隠れているかもしれないわよ!」


    最後

    かくして、「育成パートのUI作成」という大きな試練に立ち向かったネイト。


    温かい声援と多くのアイデアに見守られながら、
    どうにかゲームの土台となるその入り口までたどり着くことが出来た。


    果たして明日はどんな作業が待ち受けているのか?


    激闘の開発4日目、これにて完結!

    次回も、乞うご期待!

    #プロジェクトNeith #HorizonNotes #ゲーム制作 #個人開発 #Unity #開発日記 #読者参加型 #毎日note

     
     
    読者参加型でゲームを作っている、まる。です。 UE5でオリジナルのカードゲームRPG『HorizonNotes』を開発してます 育成SRPG『ネイト育成計画』体験版、無料公開中です! ■公式サイト https://horizonnotes.netlify.app/

    あなたへのおすすめ