【Unity入門】2Dアクションを作ろう【タイトル作成】

前回までで、ゲームを製作する下準備をしました。現在の状態は↓のようになっているかと思います。とりあえずデフォルトのシーンの状態で、MainCameraに前回作成したScreenSettingをくっつけている状態です。ゲームビューに解像度も設定しましたね。

screen setting

前回との違いはシーンの名前をtitleにしてセーブしたところぐらいです。

この記事は本のように順を追って解説しています。この記事は途中のページになります。
この記事を見ていて、現在の状況がわからない場合や忘れてしまった事などが出てきたら↓のリンクから目次ページへ飛べますので立ち戻って見てください。

<Canvasを設定しよう>

とりあえず、UIを設置するためにCanvasをおきましょう。キャンバスって何?という人はキャンバスのリンク先を参照してください。

UIの使い方がわからない方は↓の記事を参考にしてください。

Canvasを設置したら、インスペクターのCanvasScalerという項目をみましょう。これはキャンバスの大きさを調整してくれるコンポーネントです。前回、解像度によって映るものがズレてしまう話はしましたが、キャンバスもズレます。そのため、ちゃんと画面内にUIが入るように設定してあげる必要があります。

scale with screen size

UI Scale Modeという項目をScale With Screen Sizeにしてください。これで、画面のサイズが変わってもその画面に合わせてUIを拡大縮小してくれるようになります。

<背景を設定しよう>

Imageの大きさを解像度に合わせよう

さて、タイトル画面で色々凝ってみるものいいですが、とりあえず最初は簡単なのを作りましょう。1枚絵の背景にしたいと思います。

Canvasの下にImageを作成し、WidthとHeightを前回決めた解像度と同じに変更しましょう。

set resolution width height

その後、適当にペイントでも何でもいいので↑の解像度と同じ大きさの画像を用意してください。
マジ適当で大丈夫です。

できたら、そのファイルをプロジェクトウィンドウにドラッグ&ドロップしましょう。自分はbackgroundという名前で保存しました。

整理できるようにフォルダを作ろう

プロジェクトウィンドウで右クリック>Create>Folderでテクスチャ用フォルダを作っておいてその中に入れておくと、後々便利になるかなと思います。

create folder

追加したテクスチャのタイプをSpriteにするのを忘れずに

change texture type sprite

下書きをImageに適用しよう

できたら、先ほど作ったImageにドラッグ&ドロップで背景を適応しましょう。

出来上がったら↓のようになります。これでタイトル画面の背景が出来上がりました。

make title

いくらなんでも背景適当すぎだろ!とツッコミたくなる気持ちはわかりますが、実は筆者はこれが正解かなと思っています。特に個人制作の場合は↑の状態が正解です。

よく、イラストレーターさんとか漫画家さんとかが「ラフ」と言って下書きのような物を書いてから本番を書いていますが、個人的にはゲーム製作もこれをした方がいいかなと思います。

と言うのも、ゲーム作りというのは基本的に全体像が見えにくいという欠点があります。

おろらく、最初ゲーム制作する時って気合いを入れて作り始めると思うんですよ。そして、タイトルに気合いを入れた結果、タイトル画面で疲れちゃうと言いますか、タイトルを作った後、描かなくちゃいけない素材とかの多さに辟易としちゃうと言いますか、とにかく計画性なく突っ走った結果しんどくなってやめちゃうということもあります。

また、素材は有料なりフリーなりの素材を使って作ることもよく出てくるかなと思うのですが、どのような素材がいくつ必要なのかを知っておくというのも大事になってきます。最初から素材を使っていくと、後で、何か作りたいときに統一性を持たせようとしたら素材が足りなかったなど色々イメージと違う事がよく起こります。

そのため、とりあえず全部ラフで作ってしまって、後から全部当てはめていく方が全体像が見えて、何がいくつ必要なのかが把握できるのでいいかなと思います。そのためにフォルダ分けするといいよと↑で言ったわけですね

まぁ、下書きなんてめんどくさいと言う人の気持ちも分かります。ですが、Unityは元のファイルに上書き保存できれば、様々な場所で使用していても一気に変更を適応できます。そんなにめんどくさくないのでオススメです。

<Unityでファイルを上書きする方法>

実はUnity上でファイルをプロジェクトウィンドウに持ってきて、同名のファイルを上書きしようとしても、ナンバリングされて上書きできないようになっています。↓のようになります。

same name file

では、どうするかと言うとエクスプローラー上もしくは、Finder上で上書き保存することでファイルを置き換える事ができます。

override same name file

ポイントはUnityの外で上書きしないといけないと言う点です。この方法で元のファイルを上書きすれば色々な場所でしようしていても一括で変更が適応されます。

テクスチャだったら、テクスチャのフォルダを作って、そこに仮画像を入れていけば、本番の内容作るときに何が、いくつ必要なのかを把握する事ができて便利かと思います。

<タイトルを置こう>

UIの順番

さて、今度はタイトルを置いてみましょう。今回はとりあえず、テキストでやってみようと思います。テキストだったら、後でタイトルを変更しようと思った時でもすぐに変更できるので便利です。

もちろんタイトルを絵で書いた方が豪華になるのですが、その辺りは皆さんの選択次第です。ちなみに絵でタイトルを作りたい場合は、もう一個Imageを作ってタイトルロゴをその中に突っ込めばできます。

テキストでやるにはとりあえず、Textを作成しヒエラルキー上でImageの下におきます。

change hierarchy order

ここで、ちょっと注意が必要です。UnityのUIシステムであるUGUIはヒエラルキーの順番で表示順を決定します。

change order ugui

↑のようにTextをImageより上に持っていってしまうと、テキストが背景に隠れてしまいます。このようにUGUIはヒエラルキーの順番で画面に映す順序を決めています。

テキストを大きくしよう

さて、では今のままだとテキストがちっちゃいと思うので少し、大きくしましょうか

そのままの状態でFont Sizeを大きくすると・・・

Increase the font size

このように途中で消えてしまいます。これはTextの表示領域より文字の大きさが大きくなってしまったせいです。これを回避するにはTextのWidthとHeightを大きくするか、表示領域を越えても表示されるように設定する必要があります。

今回はタイトルという事で、いちいち表示領域を上げ下げしていてはめんどくさいので、表示領域を越えても表示するように設定したいと思います。

Horizontal OverflowとVertical OverflowをOverflowに変更してください。

horizontal overflow vertical overflow

Horizontal Overflowは水平方向を制御するパラメータで、Wrapだと水平方向をオーバーした時改行されて表示されます。

Vertical Overflowは垂直方向を制御するパラメータで、Truncateははみ出した分を消してしまいます。

これらをOverflowにする事で画面に1行で表示する事ができます。

それと、Textの注意点として、ただFontSizeをでかくするとメモリを食うのでScaleとセットででかくしてちょうどいい感じにしてください。詳しくは↓の記事にて解説しています。

整えよう

後は文字をセンタリングして、色を変えてみましょうか。Alignmentのところの左側が横の並び、右側が縦の並びになります。両方真ん中を選択すれば縦横センタリングになります。Colorで色を変更すれば色が変わります。

alignment

これでセンタリングして色を変える事ができました。

これだけではいささか寂しいのでOutlineと言うものをつけてみたいと思います。

add outline

Add Componentのところでoutlineと入れて検索すると出てきます。

inspector outline

ちょっと立体的になったのではないかなと思います。
このOutlineというコンポーネントは文字の外枠を黒で塗ってくれるコンポーネントです。便利ですので覚えておくといいと思います。
↓の記事でOutlineの解説をしています。興味があったら見てみてください。

ちなみに、余談ですが、Outlineをうまく使うとちょっとかっこよくできます。

setting outline

まぁ。この辺の設定はお好みで。

<スタートボタンを作ろう>

今度はスタートボタンを作成しましょう。とりあえず、ボタンを作成してください。

create button

だだ被りですね。タイトルを少し上に、ボタンを少し下に置きましょう。そして、Scaleでボタンの大きさを大きくすると

set button

こんな感じになります。

あんまり透明なものを置きたくはないのですが、今回は別に重いわけではないのでボタンのImageを透明にしたいと思います。

Buttonと一緒に付いているImageのアルファ値を0にします。

button alpha zero

そして、Buttonの子オブジェクトにあるテキストをPress Startにして、テキストの大きさを調整すれば

press start

↑のようになります。

適当で大丈夫です。どーせ後で調整し直すので。

では今度はボタンを押した際の反応を書きましょう。

ボタンとスクリプトの関連付け方を忘れてしまった方は↓の記事を参考にしてください。


そしたら、↓のようなスクリプトを書いてください。名前を適当にtitleにしました。

method press start

ポイントとしては、bool型を使って、1回ボタンを押したら2度と押せないようになっている点です。firstPushがtrueになったらif文の中はもう通れないようになっています。

ボタンというのは連打されたり、同時押しされたりします。ボタンを押したら、次のシーンへ行きたいのですが、連打されると次のシーンへいく命令がなんども出されてバグってしまいます。そのため、1回しか通らないようにしているわけです。

↑の状態だとButtonの性質上、連打されたら反応だけはするのですが、処理は1度しか行わないので、今回は許容しようと思います。気になる方はButtonをGetComponentしてenabled=falseにしてください。

本来なら次のシーンへ行く命令を書きたいところなのですが、まだ、次のシーンができていないので次のシーンができたら、このスクリプトの中身を書いていきたいと思います。

<まとめ>

Point

・最初は仮画像で作ってしまおう!
・エディタ外で上書き保存すれば変更を一括で適応できるよ!
・ボタンは同時押しと連打に気をつけよう!

<わからない事、質問等があれば>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば

自分の Youtubeの動画にコメントで質問していただければ動画でお答えしようと思います。

文章同士のやり取りだと伝わりづらいし、ラリーに時間がかかりそうなので動画で回答します。

↓の動画が回答の一例になります。どの動画でもいいのでご遠慮なくコメントしてください

できたらチャンネル登録よろしくお願いします!




さて、次はキャラクターのアニメーションを作っていこうと思います。




タイトルとURLをコピーしました