前回の記事に引き続き、モグラ叩きゲームのタイトルシーンの作成をしていきます。
今回の記事では、ボタンとモグラやハンマーなどのイラストを表示させていきますよ。
最後まで読み切れば、タイトルシーンが完成しますので、頑張ってみてください。
Table of Contents
筆者はテックアカデミー でUnityを勉強しました！
この記事をご覧になっている方の中には、プログラミング初心者でUnityについてよくわからないという方が多いのではないでしょうか？
筆者は、元々医療関係の仕事をしており、Unityどころかプログラミング自体が初めてでした。
しかし、プログラミングスクール「テックアカデミー 」を受講することによって、Unityの基礎を学ぶことができました。
現在は、こうして記事を通してゲームの作り方を発信できています。独学では些細なことでつまづいてしまい、それが積み重なると疲れ切ってしまうもの。
筆者がプログラミングスクール「テックアカデミー 」を受講するに至った経緯や受講した感想を詳しく紹介していますので、ぜひこちらの記事もご覧になってください。
モグラ叩きゲームタイトルの作り方①空っぽのゲームオブジェクトを作る
では、ハンマーから設置していきましょう。Canvasの子要素に、「Create Empty」というものがありますので、それをクリックします。
すると、「 GameObject」という名前になっているので、Renameして「Hammer」とわかりやすい名前に変更しましょう。
この「Hammer」というゲームオブジェクトは、何も中身がない空っぽの状態です。それは、インスペクターを見ればわかると思います。
次に、ハンマーの画像を貼り付けるために、Imageコンポーネントを取得しましょう。
モグラ叩きゲームタイトルの作り方②Imageコンポーネントを取得する
ヒエラルキー「Hammer」を選択すると、インスペクターが出てきます。インスペクターの中に、「Add Componet」というボタンがありますので、それをクリックしましょう。
検索ボックスに、「Image」と入力してクリックします。すると、シーンビュー上に白い四角形が出てきたかと思います。
これで、空っぽのゲームオブジェクトにImageという要素（コンポーネント）が入ったということになります。あとは、ハンマーの画像をImageコンポーネントに入れていくだけですね。
モグラ叩きゲームタイトルの作り方③ハンマーの画像をアタッチする
ハンマーのインスペクターのなかに、「Source Image」というものがありますので、ここにプロジェクトビューにあるハンマーの画像をドラッグ＆ドロップをしましょう。
すると、シーンビュー上の白い四角形がハンマーの画像になります。「Set Native Size」を押して、画像本来の大きさにします。
今回は、ちょうど良い大きさなので、大きさは変更せずこのままで。シーンビュー上からマウス操作で、「モグラたたき」の文字の右隣りに移動させておきましょう。
「クリックしてもハンマーを動かせない！」と焦ったときは、シーンビューではなくゲームビューで動かそうとしている可能性が高いですよ。見た目は似ているので確認してみてくださいね。
モグラ叩きゲームタイトルの作り方④穴の画像を設置する
今度は、穴の画像を設置していきますよ。ハンマーを設置したときのように、「Create Empty」→「Add Component」→「 Source Image」に画像アタッチというやり方でも良いです。
でも、せっかくハンマーを作ったのですから、コピペして再利用しましょう。まずは、ヒエラルキーのハンマーを選択した状態で、「Duplicate」を押すと、同じゲームオブジェクトが生成されます。
いちいち一から作る必要がないので、ぜひ覚えておきたいUnityの機能の一つですよ。
「Hammer（１）」をRenameして「Hole」と名前をつけておきます。そして、インスペクターの「 Source Image」に穴の画像をアタッチします。そしたら、穴の画像を左下らへんにマウス操作で移動しましょう。
モグラ叩きゲームタイトルの作り方⑤モグラと草の画像を設置する
では、モグラと草の画像も同じようコピペして作っていきましょう。動画を再生しながら取り組めばできるはずですよ。
ヒエラルキーの「Hole」を選択して、「Duplicate」で複製。名前をそれぞれモグラのゲームオブジェクトは「Mole」、草のゲームオブジェクトは「Glass」と変更します。
そして、シーンビューで大きさを変更します。
モグラ叩きゲームタイトルの作り方⑥オブジェクトの並び順について
現在、ヒエラルキーのゲームオブジェクトは、上から「Hole」、「Mole」、「Glass」の順番で並んでいますよね。上にある方から奥に画像が配置されるようになっているんです。
ヒエラルキーで「Hole」、「Mole」、「Glass」の順番を試しに変えてみたらよくわかります。例えば、「Hole」を一番したにドラックして移動させてみましょう。
そうすると、「Hole（穴）」の画像が一番手前にきてしまいます。このように、穴、モグラ、草という具合に複数の画像を重ねるときは、ヒエラルキーのゲームオブジェクトの位置に気をつけておいてくださいね。
モグラ叩きゲームタイトルの作り方⑦ボタンの設置について
次に、ボタンの設置をしていきましょう。Buttonは、CanvasのUIの中にあります。わかりやすいように、Buttonを「StartButton」に、Buttonの子要素のTextをStartTextにRenameして変更しましょう。
ヒエラルキーの「Start Button」を選択した状態でシーンビューを開き、マウス操作で直接適当な大きさにします。そのあと、「Start Button」を選択した状態で、インスペクターのTextの中身を変更します。
元々は「Button」と記載されていますが、これを「スタート」に変更します。文字は小さいので、フォントサイズを30~45あたりに。文字に強調をかけるために、字体「Bold」にします。
さらに、「Start Button」におけるインスペクターのImageコンポーネントの中に、「Color」という要素があります。これは最初は白色ですが、好きな色に変更しておきましょう。白い部分を押すと、色を変更できる画面が開きますよ。今回は、オレンジ色にしました。
モグラ叩きゲームタイトルの作り方⑧ボタンの複製
もう一つ、結果に飛んでいくボタンを作りましょう。スタートボタンをDuplicateで複製します。ボタンとテキストをそれぞれ、「Result Button」と「Result Text」に変更しましょう。
ヒエラルキー「Result Button」を選択した状態で、シーンビューで位置を調整します。そのあと、「Result Text」を選択した状態で、テキストを「スタート」→「結果」に変えます。
ボタン自体の色も変えておきたいですよね。「Result Button」を選択した状態で、ImageコンポーネントのColorを変更しておきましょう。今回は緑色にしておきました。
これで、タイトルシーンは完成しました。ここまで取り組んだ読者さんお疲れ様でした！
まとめ
前回と今回の記事で、モグラ叩きゲームのタイトルシーンの作成を紹介してきました。Unity自体を使ったことがないと、何からてをつけて良いのかわからないものですよね。
全くUnityをやったことがない人でも、この記事に書いてある手順通りにやっていけば必ず、できますので、根気よく取り組んでいきましょう。
次回は、実際のゲームシーンを作成していきますので、ぜひ取り組んでみてください。最後まで読んでいただきありがとうございました。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
もしかして、穴、モグラ、草の位置関係がうまくいかないことはありませんか？
それは、ヒエラルキーのオブジェクトの並び順が影響しているんですよ。
次の見出しで紹介しますね。