みなさんこんにちは〜！
ファミレスの全メニューを吸収したいお年頃のまかろんです☆*
さてさて、今年も夏が来たわけですが、
めっちゃ暑いし何より虫にモテてつらい！！！！
この前ばかでかいキリギリスが胸元に飛び込んできました〜
情勢的には夏祭りなど未だ開催が厳しそうな雰囲気が続いていますね…
外に出なくてもせめて夏を感じられたら…………
ということで！！当社のゲーム制作グループ(非公認)の活動の一環として
夏を感じられる遊びを作ってみました〜〜〜！！導入が強引！！
※ちなみにゲーム制作グループは私1人しかいません
まず夏の遊びといえば金魚すくい、射的、ヨーヨー釣り…など色々と出てきますが、
どれも処理を想像したら頭が爆発しそうになったので今回はシンプルなスマートボールを作っていくことにしました！
夏の遊びかと言われると怪しいところはありますが良いですよねスマートボール…懐かしい感じがして…まあやったこと無いんですけどね。
ゲーム制作超初心者の私ではありますが、
0から始めたい方に向けた解説もしていきますのでどうぞお楽しみ下さい〜！！
まずは完成品から。
こちら実はチュートリアルなどに頼らず0から作った初めてのゲームになります！！！！
なのでバグか仕様かわからない挙動が頻発しますがお許しを。
何がやりたかったかだけ感じていただければ…
★操作方法
スペースキー(押し込み離し) ー ボールの押し出し
R ー ボール1個追加(ボールが詰まったときや無くなった時用)
★ゲーム説明
クリアなどは存在しません、満足するまで遊びましょう！
画面がボールで埋め尽くされたら終わりです…
ではここから実際の作り方の解説パートになりますっ！！
作るのも説明するのも初心者なので至らない点がかなりあると思われますがご了承下さい！
もしわからないことがあればコメントへお願いします！
自前でプログラミングなどもしていく必要はあるのですが、
初心者向けということでその辺りは全部コピペで作っていけるので安心してください〜！！
逆にちょっと慣れている方はお好きにアレンジしてもらった方が良いものができると思います！！
※所要時間は全体で2時間くらい
1.プロジェクト作成と画面説明
まずはゲーム制作の環境作りから。
今回のゲーム制作ツールに関して、
ゲームエンジンはUnity(2021 Personal, Unity Hubから起動)で作り、
エディタはVisual Studio Codeを使用しています。
エディタは何でも良いのですが、Unityのインストールがまだという方は
済ませておいて下さい(丸投げ)
Unityの起動準備が整ったらプロジェクトを作成しましょう！
私と同じUnity Hubの場合、Projects>右上のNew Projectから
使用するテンプレートは「3D」で、名前はご自由に。
Createを押してしばらく待つと、このような画面が表示されると思います。
あちこちにボタンとかあってうわ〜〜〜〜！！！ってなるかもしれませんが安心して下さい！！私もほとんど説明できません！！！
ただざっくりほんわかと各パーツの機能がわかればよいのです(よいのか？)
せめて名前だけでも…覚えていただければと…
Hierarchy ヒエラルキー
左上のウィンドウです。ここではゲーム画面に存在するオブジェクト(例:メインカメラ)を追加したり管理したりできます。絶対に使います。
Scene シーンビュー
画面真ん中の実際のゲームのオブジェクトが表示される領域です。ちなみにScene右のGameタブに切り替えると実際のゲーム画面も確認可能です。シーンビューではある程度ゲームによくあるような視点移動(WASDとか)も可能です。操作方法は調べてみてください！！
Inspector インスペクター
画面左のウィンドウで、こちらにはゲームのオブジェクトの詳細情報などが表示されます。試しにヒエラルキーのMain Cameraなどをクリックしてみて下さい。いきなり膨大な情報量に殴られることになります。
オブジェクトに何か効果をつけたりする際はこの辺をいじります！
Project プロジェクト
画面下のフォルダのアイコンが見えているウィンドウです。見た目通りゲームを構成する素材などがここで確認できます。今回は「Assets」フォルダのみ使うので左側はそこまで気にしなくてOK。ちなみにProject右のConsoleタブにはプログラムのエラーだったりデバッグ用のテキストなど表示されます。エラーが起きないように…祈ろうね！
画面説明は概ね以上になります！
2.本体を作ろう！
では早速になりますがスマートボールの本体を作っていきます！
釘の場所など細かい所は置いておいて、まずは今回作る本体のイメージがこちら！
なんか…すみません………
Macのマウスでフリーハンド作図は無理があった…
気を取り直して文字で補足しますと、赤い矢印がボールの流れで青い部分が透明(もしくは半透明)のガラス部分になります！
上層のガラスを流れて手前側の斜めガラスに貯められたボールが、
押し出す部分に落とされて、下層のフィールドに飛んでいく形です。
完成品のゲームを触っていただくと大体伝わるかと…！
まずは土台から作っていきましょう！
ヒエラルキー左上の＋を左クリックorヒエラルキー上で右クリック>3D Object>Cubeを選択して下さい。
すると画面上にかわいい豆腐が…!
自前でオブジェクトを作る際はこの様な流れで追加していきます！
わかりやすく名前も変えておきましょう。
ヒエラルキー上でCubeをクリックした後Enterキー or インスペクターの最上部から名前変更が可能です。命名は自由ですが私はBaseにしておきました。
次に形です。土台はなるべく合わせておきたいので、超絶細かいですが完成版のインスペクターの情報を記すのでこれを丸々土台オブジェクトのTransformに貼り付けて下さい〜！(今後数個のオブジェクトで同じ様な作業があります)
| Position | X: -1.235923 | Y: 1.95 | Z: -1.76 |
| Rotation | X: -23.777 | Y: 0 | Z: 0 |
| Scale | X: 9.952967 | Y: 0.314516 | Z: 12.85648 |
単語の通りですがPositionは位置、Rotationは回転、Scaleはサイズになります！
今回はインスペクターから細かく指定していますがシーンビューの左側の矢印のついたボタンから視覚的な変更も可能です！(後でちょっと使います)
貼り付けると引き伸ばされた豆腐になると思います！
シーンビュー上で右クリを押しながらWASDで視点移動ができるので見渡してみましょう〜
このままでは土台として分かりづらいので色をつけます！
感覚的にはインスペクターから色を変更できそうな感じですが、この状態では直接変更はできません。ではどうするかというと、オブジェクトに色を付与する素材(マテリアル)を作る必要があります。
素材と言えばプロジェクトウィンドウ！！Assetsフォルダを開いた状態で左上の＋マーク左クリック>Material or Assetsフォルダ内の空白右クリック>Create>Material でマテリアルを作成しましょう。名前はBaseMaterialとしました。(※違う名前をつけても壊れることはないです)
作成されたBaseMaterialのインスペクターを表示すると、いかにも色が選べそうなAlbedoという欄があります！色の枠をクリックすると色を変更することができます。土台感のある色に変更しましょう〜！！他にもMetallicやSmoothnessをいじるといい感じにリッチな土台感を醸し出せます。
そうして作ったマテリアルを土台オブジェクトに適用します。プロジェクト上のマテリアルをヒエラルキーのオブジェクト名にドラッグ&ドロップ(この操作はUnityではアタッチと呼ばれます！超重要！！)すると土台の色が変わりました！！
同じ色にしたい場合はこのマテリアルを使いまわしても良いですが、別の色を使う場合などはマテリアルの新規作成からの流れが必要になります！
次にアウトコースのオブジェクトを作成します。フィールドからボールを落としっぱなしではあまりよろしくないので、奈落代わりのボールを消すための受け皿を作っておくことで軽量化を図ります。
土台と同じくヒエラルキーからCubeを作成しましょう！今回はOutCourceと名付けました。同様にこちらの数値をTransformに貼り付けてください。(さすがにかなり下の小数点はあまり影響ないかも…)
| Position | X: -1.25 | Y: -1.66 | Z: -8.95 |
| Rotation | X: 0 | Y: 0 | Z: 0 |
| Scale | X: 10.43075 | Y: 0.50622 | Z: 2.7599 |
今回は傾きをかけていないので横長のはんぺんができましたね！
ただこの色では奈落感が無いし視認性もないので色をつけておきます。
Assetsにマテリアルを作成(私はOutMaterialと命名)し、黒色などにしてアタッチしましょう。これにてお手頃な奈落の完成です。
次は両側の壁です！土台にめり込まない程度に横にくっつける形にします。
まずはヒエラルキーに左壁となるCubeを作成(私はLeftWallと命名)します。
作成する際に位置がおかしい場合があるのでPositionを一旦X0,Y0,Z0に戻しておきましょう。
今回はインスペクターではなくシーンビューから直感的に形を作ってみます。
まずは左壁のオブジェクトをヒエラルキーで選択するとオブジェクトから矢印が生えてくると思います。(生えていない場合はシーンビュー左側の上から2つ目のボタンを押すと出ます)
赤い矢印をドラッグして土台の左側に見えるあたりまでぐーっと持ってきましょう！
持ってきたらシーンビューで土台の真横に回り込んで(右クリ+WASD)左側の上から4番目のボタンに切り替えます。すると生えている矢印が四角になるはずです！こちらがScaleを司るボタンになります。
この四角をぐりぐりとドラッグすると手軽にScaleを変えられるのでいい感じに整えてみましょう。赤、緑、青の四角はそれぞれX,Y,ZのScaleに対応していますが、中心の四角をいじると比率を保ったまま全体的なサイズ変更ができます。
一応完成品のScaleを置いておきます。
| Scale | X: 0.37359 | Y: 9.551182 | Z: 17.51889 |
いい感じのサイズにしたらシーンビュー左側の上から2つ目のボタンをクリックして矢印に戻し、土台左側にぴったりくっつけます。
ボールが飛び出すことを防げればよいため、画像あたりの位置にあれば問題ないです！
続いて右壁も作っていきます。左壁が既にあるので複製をして置いていきます。
ヒエラルキー上で左壁オブジェクトを選択し右クリック>Duplicate or Ctrl+D で複製ができます。名前が左壁のままなので変えておきましょう。(私はRightWallと命名)
右壁ということで一旦右側に持っていきます。赤矢印だけをドラッグするといい感じの位置に持っていけると思います！
ここで一つポイントなのですが、右側はボールを弾き出す関係上ボールが壁を突き抜ける可能性があるので(作りが甘いせいでもあるのですが)、
ScaleのXを1.0(以上でも可)にして太くしておきましょう。
太くしたら右側にくっつけて左右の壁は完成です！
結構長くて大変かと思いますが、続いてガラスなど透明な面を実装していきます！
まずは土台の上層にあるメインのガラスを作成していきます。
ヒエラルキーで土台オブジェクトを複製し、名前を変えます。(今回はGlassとしました)
そしたら以下の数値を上書きしてみてください！
| Position | Y: 5.52 | Z: 0.46 |
| Scale | Z: 18.08649 |
ちょっと長めで土台に並行な形になればOKです！ですがこのままではゲーム的に何も見えない状態になってしまうので透明なマテリアルを作成していきます！
Project>Assetsにマテリアル作成をして名前をつけます。(GlassMaterialなど)
透明なマテリアルにするには一つポイントがあり、Albedoの上にあるRendering ModeをFadeにしておく必要があります。
その後Albedoの色の枠をクリックし、RGBAのA(alpha)値を0にすると完全に透明なマテリアルができるはずです！！早速ガラスのオブジェクトにアタッチしてみてください。見た目的に完全に消えるので作っている間は不便かもしれませんが…
続いてガラスオブジェクト第二弾として手前にある手持ちボールのホルダーを作成していきます！おなじみのヒエラルキー>Cubeを新規作成して名前をつけます。(Holderなど)
このオブジェクトも微調整が大変な部類なのでTransformを置いておきます。コピペして配置を完了させましょう！
| Position | X: -1.96 | Y: 1.38 | Z: -8.884 |
| Rotation | X: 0 | Y: 0 | Z: -10.586 |
| Scale | X: 9.109874 | Y: 0.15585 | Z: 2.290007 |
今回はZ軸に回転をかけているので横斜めのはんぺんができたかと思います！
このままガラスのマテリアルを付けたいところですが、手前が透明だとボールの動きがわからないため、半透明ぐらいにしておきましょう！
先程作ったガラスの透明なマテリアルを複製し、名前を変えましょう。(HolderMaterialなど適当で)
半透明にしたいので、AlbedoのA値を50,色を水色っぽくしておきましょう！先にマテリアルをホルダーのオブジェクトにアタッチしてから色を調節してもわかりやすいかと思います！
だいぶ作りましたね…ここまで大丈夫でしょうか…
連続して作るのは一旦次でラストです！！
ホルダーより手前にボールが落ちてこないようにフロントガラスを作っておきましょう。ヒエラルキーから新規Cubeで名前をFrontGlassとしました。
ボールをまだ作っていないのでイメージし辛いかもしれませんが、
ホルダーや奈落からボールが手前に抜けないようにすればよいので、
シーンビューで大雑把に作ってもOKです〜！
でも心配なので一応Transformも置いておきます！
| Position | X: -2.7 | Y: 2.6 | Z: -10.69 |
| Rotation | X: 0 | Y: 0 | Z: 0 |
| Scale | X: 15.36749 | Y: 14.86726 | Z: 1.788848 |
過保護なくらいの分厚さですが、どうせ透明になるのでOKです！
できたら完全に透明な方のガラスのマテリアルをアタッチしましょう〜
ここまでの状態はこんな形ですね。
メインとなる土台のBase、落ちた先のOutCource、両脇の壁LeftWall、RightWall、本体の上層にあるGlass、手前のボールを貯めるHolder、手前飛び出し防止のFrontGlass…
これらの要素があればOKです！操作などまだ慣れないかもしれませんが少しずつ慣れていきましょう〜〜〜！！(というか自分が慣れていない)
次は作った本体を流れるボールを作っていきましょう！ついにオブジェクトが動き出します────
3.ボールを落としてみよう！
では今回の主役となるボールを作っていきましょう！とは言っても先程の本体に比べたらかなり一瞬でできます！！
・ボールを召喚する
ヒエラルキーから3DオブジェクトのCubeではなく「Sphere」を作成してみてください。名前はそのままでOKです！一旦できたオブジェクトを位置調整で見える位置に持ってくるか名前をダブルクリックしてズームしてみましょう。
はい。もうボールが完成しました！！！
怪しいくらいにあっさりですが、実際形自体は完成で、マテリアルをはじめとする「ボールらしさ」を加えていく必要はあります！
まずはマテリアルから。これも同じくSphereMaterial的な名前でマテリアルを作成し、ボールっぽい色にしましょう。スマートボール的には青か緑なイメージがあります(適当) そのままでは安っぽいので、Albedo下のMetallicを1、Smoothnessを0.8あたりにしてちょっと物体感を出してみます。マテリアルが完成したらヒエラルキーのSphereにアタッチです。
ボールっぽい物体も出来たので動作検証しましょう！作成した本体にめり込まないような上のあたりにボールを置いて、斜めのガラスに落としてみましょう。
検証するにあたってカメラの位置が明後日の方向を向いていると思うので、ヒエラルキーでMain Cameraを選択してシーンビュー上で位置調整、回転あたりを使って本体やボールが映るようにしましょう。シーンビュー右下にプレビューが表示されていると思うのでそれを確認しつつ調整します。(※シーンビューの右のGameタブからも実際のゲーム画面が確認可能です！)
ボールの配置とカメラのアングル調整が完了したら、シーンビュー上の真ん中あたりにある再生ボタンをポチッと押してみましょう！！
…あれれ？？？動かない…
というのも当然です！！騙してすみません…
理由としては単純でこのボールには重力が働いていないためです。
というわけで、今から重力を与えてこのボールを落としてやりましょう！
※テストプレイをやめる時は一時停止ボタンではなく再生ボタンをもう一度押しましょう！
・ボールに物理法則を与える
では重力を一瞬で実装します！Sphereのインスペクターを下にスクロールすると、Add Componentというボタンがあるかと思います。ここから重力のコンポーネントを追加します。ボタンをクリックすると検索欄が出るかと思うのでrigidbodyと入力しましょう。そこで出てきたRigidbodyをクリックして追加できます！もしくは検索しなくともPhysics>Rigidbodyで追加出来ます。
追加されたRigidbodyを見ていきましょう！Mass、Drag…あたりの数値はいじらなくてOKです。(質量と空気抵抗あたりの数値なはず)
Use Gravityにチェックが入っていることを確認しましょう！入っていればもうこのボールは落ちること不可避です。
ついでにIs Kinematicの下にある2つのタブ、InterpolateをInterpolateに、Collision DetectionをContinuous Dynamicに設定しましょう。詳しく説明するのは難しいのですが、衝突の判定が連続的に取れたりボールの挙動がスムーズになったりする…はずです。一応。
ではもう一度再生ボタンを押してみましょう！いかがでしょうか！ボールがガラス面に落ちて、手前のホルダーを滑って行ったでしょうか！？今まで作ったオブジェクトが活きているのを見るとちょっと感動しますね…(感動のハードル低め)
これは本当に一応なのですが重力に加えてPhysic Material(物理マテリアル)も追加しておきましょう。ボールに摩擦をつけてくれたり、今回は使いませんがバウンドさせたい場合などこちらを使います。
追加の方法なのですが、Rigidbodyと同様コンポーネントから追加と思いきや、こちらはマテリアルになるため、Materialと同様にProjectウィンドウから作ります！Materialのだいぶ下の方にPhysic Materialがあると思うのでそれを作成します。一種類だけあればいいので名前はそのままPhysic MaterialでOKです。
インスペクタ上で見るとDynamic Friction、Static Frictionとありますがこちらが摩擦力になります。ボールにはスイスイ動いてほしいので、どちらも0にしてアタッチしましょう。(この辺はお好みでアレンジしてもらってもOKです)
これでボールが物理的にも完全体になりました！割と回り道になってしまいましたがあとはちょっとした仕上げをします！
・ボールをプレハブ化する
最後に、今後のためにボールをPrefab(プレハブ)化する工程をします！
スマートボールにおいて、ボールは大量に生成されうるオブジェクトです。
生成するにあたって一個一個再び物理法則を加えたりなど手作りしていったらキリがありません。
ブループリントなどという単語を聞いたことがあるでしょうか。簡単に言えば設計図です。プレハブ化はそれに近い概念で、今まで作ってきたボールを一つの設計図にすることで、簡単に複製できるようになるイメージです！！
ではやっていきましょう！
いつものマテリアルをオブジェクトにアタッチするのと逆で、ヒエラルキーのSphereをAssetsフォルダの空白にドラッグ&ドロップしましょう。
…Assetsフォルダの中にSphereが追加されたでしょうか？
これでプレハブ化は完了です！おわり！
試しにプレハブ化したAssets側のSphereをヒエラルキーにドラッグ&ドロップしてみて下さい。これで好きなタイミングで好きなだけボールを呼び出すことが可能になりました！(Assetsにプレハブ化されたSphereがある限り、ヒエラルキー上のSphereはいくらでも作って消しても構いません)
最後にプレハブ化したSphereにもう一仕上げ！今後スクリプト上でこのオブジェクトをボールとして認識させる必要があるので、自分はボールであるという身分証明を与えましょう。プレハブSphereのインスペクター上で、Transformの上にTagというタブがあると思います。
デフォルトはUntaggedとなっているかと思うのでそこをクリック、一番下のAdd Tag…からタグを追加します。するとタグのタブ(紛らわしい)が開くと思うので、Tagsの+ボタンを押してsphereと名付けてSaveします。小文字なのはなんとなくですが、今後スクリプトで使うのでここは一字一句間違えずお願いします！
戻ってSphereのタグをsphereにするのをお忘れなく！
これで完全にボールの完成です！おつかれさまでした。
次は個人的に難関だったボールの押し出し部分を作っていきましょう〜
今までの色んな要素を使っていく上、ついにスクリプトも登場します！
ではでは後編でお会いいたしましょう〜☆*
後編へ続く…
written by まかろん
コメント