2回目の記事では、モグラ叩きゲームのタイトルシーンにおける背景と文字を作成をしていきます。
コーディングはしないので、この記事を読みつつやれば、５分もしないでサクサクできるはずですよ。
まずは見た目から入って、ゲームを作っていきましょう。ぜひ最後までご覧ください。
Table of Contents
モグラ叩きゲームタイトルシーンの目標はこんな感じ
今回の記事では、上記の写真のように、ひと目で「モグラ叩きゲームだな」って見てわかるようなビジュアルを作っていきますよ。
前回の記事で紹介したように、Unityのインストールやモグラや背景などのイラストのダウンロードはお済みですか？
もしできなければ、手順編を取り組んだ後に、また今回の記事に戻ってきてくださいね。
タイトルシーン作成の前にUnity画面比率を変更する
デフォルトの画面サイズは、作りたいゲームサイズと異なるため、変更しておきましょう。
シーンビューのタブに、ゲームビューがあるので、そちらを選択します。「Desplay１」の右隣に画面サイズを変更できるボタンがあるので、今回は、「Portrait」から「4：３」に変更してください。
モグラ叩きゲームタイトルの作り方①背景を設定する
次に、タイトルシーンの背景を設定していきます。まずは、ゲームビューからシーンビューに切り替えてください。
その後、ヒエラルキーの「create」ボタンのUI→Imageとクリックしていきましょう。そうすると、親オブジェクトのCanvasと子オブジェクトのImageが出てきます。Imageの名前を「BackGround」と名前をつけておきましょう。
その後、ヒエラルキーで「BackGround」を選択すると、インスペクターのImageコンポーネントにある「Source Image」に背景に使いたい画像をドラック＆ドロップします。
ドラック＆ドロップすると、シーンビューにある白い平面から草原の写真になりましたね。これでは小さいので、マウス操作で枠線に合うように大きくしましょう。
枠線に合わせるところまで画像を拡大したらゲームビューできちんと画面いっぱいに草原が広がっているかを確認してくださいね。ずれているようであれば、シーンビューに戻って微調整しておいてください。
コンポーネントとSet Native Sizeについて
ちなみにコンポーネントとは、ゲームオブジェクトに機能を追加するものです。ここでは、Image（画像）という性質を有する機能を持つImageコンポーネントに、画像をアタッチしています。
コンポーネントには、「ボタン機能」「物理演算機能」「衝突判定機能」「エフェクト機能」「オーディオ機能」など、様々な物があります。C#で書いたスクリプトもコンポーネントの１種です。
ちなみに、Imageコンポーネントには、「Set Native Size」ボタンがあります。このボタンを押すことで、この画像本来の大きさまで拡大してくれます。
参考書やプログラミング教材についてくる素材は、勉強用なのできちんと画像の大きさも考えられて作られています。
しかし、ゲームを自主制作する際は、フリー素材サイトからもってくることがほとんどなので、その際は、自分で大きさを設定する必要がありますよ。
モグラ叩きゲームタイトルの作り方②文字を表示させる
次に、「モグラたたき」という文字を背景の上に表示させましょう。CanvasボタンのUI→Textをクリックすると、シーンビュー上に小さな文字が出てきます。
ヒエラルキーのTextを「TitleText」に変えておいてください。その後、TextコンポーネントのTextに「New Text」とあるので「モグラたたき」と変更しましょう。その後、フォントサイズを変えます。
作る人の好みによりまずが、45あたりにしましょう。そうすると、画面から文字が消えてしまいます。これは、「Vertical Overflow」がtruncateにデフォルトでなっていて、テキストが垂直の端に到達したときに切り捨てられるようになっているからです。
なので、「Vertical Overflow」のtruncateをOverflowにしましょう。すると、垂直方向の描画領域を超えてもテキストが切り捨てられません。
モグラ叩きゲームタイトルの作り方③文字の強調と位置調整
フォントスタイルは、「Bold」と太字にして強調をかけておきましょう。文字の色は「Color」から設定します。適当な色にしておいてください。今回は緑色にします。
今度は、文字の位置を真ん中上らへんに調整したいですよね。文字の移動は、2つのやり方があります。1つ目のやり方はインスペクターから調整する方法です。ヒエラルキーで「TitleText」を選択して上で、「Rect Transform」のXやY座標を調整することで、シーンビュー上の文字を移動させることができます。
2つ目のやり方は、「Move Tool」を使って、シーンビュー上からマウス操作で調整する方法です。タイトルバーの左上に右手マークありますよね。左から２番目に「Move Tool」があるのでクリックします。
そうすると、赤い横軸と緑の縦軸が出てくるので、それをクリックしながら設置したい場所におきましょう。こちらのやり方の方が感覚的にできるので、細かい数値設定を気にしないのであればおすすめです。
まとめ
今回の記事では、モグラ叩きゲームのタイトルシーンにおける背景と文字の作り方をお伝えしました。
記事の所々で貼り付けた動画と本文を読み進めながら、Unityを使っていけば5分もしないで取り組めたはずです。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
ちなみに、「BackGround」と名前をつけましたが、自分がわかりやすければ、なんでも良いんです。