前回の記事では、モグラ叩きゲームのタイトルシーンの見た目を作ることができましたね。
今度は、実際のモグラ叩きのメインシーンを作っていきましょう。
メインシーンを作成することで、ヒエラルキーの階層についてイメージが湧きますよ。
さらにテキストをたくさん編集するので、Unityエディターの操作もより慣れてくるに違いありません。では、頑張っていきましょう！
Table of Contents
筆者はテックアカデミー でUnityを勉強しました！
この記事をご覧になっている方の中には、プログラミング初心者でUnityがまだまだわからないという方が多いのではないでしょうか？
筆者は、元々ITとは無縁の仕事をしており、Unityどころかプログラミング自体が初めてでした。
独学で頑張っていましたが、些細なことでつまづいてしまい…。それが、積み重なり疲れ切ってしまいました。
そして、悩んだ末にプログラミングスクール「テックアカデミー 」を受講することにしました。
テックアカデミー で、Unityの基礎を習得できたので、現在ゲームの作り方やUnityに関する情報を発信できています。
もし、「テックアカデミー って実際どうなんだろう？」と気になっている方がいれば、ぜひこちらの記事もご覧になってください。
筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や受講した感想を詳しく紹介しています。
メインシーンを作る①背景を設定する
まずは、メインシーンを作るところから始めていきます。最初は背景となる芝生を作成します。
タイトルシーンとは別のシーンを作成する
まずは、ヒエラルキーを選択した上で、シーンをCreateしましょう。コントロールキー＋右クリックで、シーン作成するボタンが登場します。
UI→Imageで背景を設定する
次に、①プロジェクトにあるSceneを「Main」に変更します。そして、②Create→UI→Imageを選択。③名前は「BackGround」に変更しておきましょう。
次に、④シーンビューで、白いImageを選択し右端までマウス操作で拡大します。ちなみに、インスペクターのRect Transformでも変更できますよ。
Imageに芝生の画像をつける
筆者自作ヒエラルキーでBackGroundを選択すると、インスペクターにImageコンポーネントが出てきます。
①Source Imageにプロジェクトにある芝生の画像をドラック＆ドロップをしましょう。
そのあとは、②マウスで画像を拡大しましょう。ゲームニューでの見え方も確認してください。
メインシーンを作る②モグラの穴を作る
芝生を設定したところで、モグラが出入りする穴を設置しましょう。
穴と草の画像を設置する。
①U→Imageを2つ作ります。それぞれ、「Hole」と「Glass」に名前を変更。それぞれのImageコンポーネントに穴の画像と草の画像をドラック＆ドロップします。
インスペクタに「Set Native Size」があるので、それを押すと、穴と草の本来の画像の大きさまで大きくしてくれます。
その後、画像の大きさを適度な大きさに調整しましょう。
次に、②「Area1」という空のゲームオブジェクトを作成します。これを作る理由は、穴と草の画像をひとまとめにして、あとで複製しやすくするためです。
Create→Create Emptyを選択し、名前を「Area1」へ。そして、③④⑤Area1の位置は、全然違う位置にあることが多いので、穴と草の近くまで移動させておきましょう。
Area1の中に穴と草の要素をいれる
穴を複製するために、まず①②Area1をCanvasの子要素のなかに入れてさらに、HoleとGlassを中に入れましょう。
階層としてはCanvas→Area1→HoleとGlass、といったイメージです。
これで、穴と草の画像を一つの画像のように扱うことができます。PowerPointでいう「グループ化」という機能に近いです。
そして、このArea1を選択し、③「Duplicate」で複製します。
穴をもう2つ作って、配置する
Area1を2つ複製したら、①それぞれ名前を「Area2」と「Area3」に変更しておきます。
②マウス操作で、Area2とArea3の位置を画像のように適当な箇所に配置しましょう。
ちなみに、Areaの子要素はHoleの下にGlassの順番になっていますが、実はこの順番が大切です。
Unityでは、上から順番に奥から配置されるような仕組みになっています、試しに、HoleとGlassの順番を変えたら、穴の画像が手前に来るはずですよ。
メインシーンを作る③テキストを配置する
背景が完成したところで、今度は残り時間や得点を配置していきましょう。
残り時間のテキストを配置する
まずは、①Create→Game Object生成。名前を「Status View」に変更します。この時に、Canvasの子要素に入れるようにしましょう。
②Status Viewを選択した状態で、UI→Textを選択、名前は「LeftTimeText」へ。
③インスペクタで「残り時間：20秒」と書いておきます。④テキストのスタイルはBlodで太文字、サイズは50へしましょう。
⑤文字の配列は中心へ。⑥文字の表示仕方は、Overflowにすることでシーンビュー上にテキストが見えてくるはず。⑦マウス操作で、テキストを右上まで移動させましょう。
得点のテキストを配置する
今度は、点数のテキストを配置しましょう。①LeftTimeTextを複製して、「ScoreText」へ名前変更。
インスペクタからテキストを「得点：0点」と変更しておきます。そして、マウス操作でテキストを左上に移動させます。
メインシーンを作る④パネルで結果を表示する
次に、得点結果とリスタートボタンを配置するためのPanel（パネル）を用意します。
パネルを作る
Status View→UI→Panelを選択。名前を「ResultPanel」に変更しましょう。
パネルの色を変更する
Panelの最初の色は、透明で表示されていてもわかりにくいので、①Panelを選択した上で②インスペクタのColorで色の調整をしましょう。
パネルにテキストを表示させる
①ResultPanel→UI→Textを選択し、名前を「FanaScoreText」へ変更します。②テキストはインスペクタから、「得点：100点」へ。
③スタイルはBoldの太文字でサイズは64。④配列は中心へ移動させ、⑤Overflowに変更します。そして、⑥マウス操作で得点のテキストを、真ん中へ移動させます。
パネルにボタンを設置する
次に、リスタートするためのボタンを作成しましょう。得点が出たら、「もう一回」「タイトルへ」の2種類のボタンを作ることにします。
①ResultPanel→UI→Buttonを2つ作って、それぞれ名前を「RetryButton」「RetryText」と「ToTitleButton」「ToTitleText」で作っておきます。
画像では、省略されていますが、テキストの入力と太文字、サイズ、配置を設定しておいてください。
②マウス操作で二つのボタンを画面中央まで移動させましょう。
最後に、パネルのチェックを外して非表示する
最後に、①ResultPanelを選択して②インスペクタの一番左上のチェックボックスのチェックを外しましょう。これで表示されなくなります。
いずれ、ゲームが終わった直後に、結果を表示するためのパネルなので、これは別の記事で記事で紹介します。
まとめ：これでメインシーンの見た目が完成！
今回の記事では、モグラ叩きゲームのメインシーンの作成のやり方について解説しました。
内容的にコーディングはなかったですが、だいぶUnityエディターの使い方をなんとなくわかってきたはずです。ただし、Unityエディターは細かいタグが多く、字も小さめなので見逃しやすいです。
「見ているキーが実はシーンビューではなくゲームビューだった…」や「ヒエラルキーを選択してなくてインスペクターが表示されていなかった…」ということが初心者ではよくあるので、確認してみてください。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
コメントを残す