【連載 Unity初心者向け】歴史学習アプリを作る(1 titleUI作成)
試験的連載モノ[初心者がUnityで学習アプリを作る] 1
初心者だけど少しでもそれっぽいデザインも加えてゲームを作りたい・至極単純なサンプルではなく実際に使えそうな実装をしてみたい方向けに、初心者の私が学習アプリを作る過程を記事にします。
↓本記事ではこのタイトル画面を作っていきます
前記事はこちら↓
matsrikagraphic.hatenablog.com
画像の用意
3つの画像を用意します。
・背景
・タイトルロゴ(透過png推奨)
・回るアイコン(透過png推奨)
画像の用意が難しい方は公開せず練習用のみの使用に限り記事と同じものをDLしてくださって結構です→ DLする
なぜタイトルロゴも画像で用意するの？
例えばPCに元々入ってるようなフォントやAdobeフォント、googleフォントは組込NGですが、画像として使用するのであればOKの場合が多いです。
タイトルは特にデザインにはこだわりたいと思います。お好きなフォントを使用して、画像として使用するようにしたいところです。入門者向けのUnity解説だとテキストで作る場合が多いので、本記事は画像で用意します。
画像をspriteで使える様にする
Resourcesにフォルダを二つ作りました。
img_UI は、今後UIで良く使いそうな画像を保存する予定
TitleAssets は、タイトル画面のみで使う素材（画像に限らず)を保存する予定
※さきほど素材をDLした方は、Shuriken.pngのみをimg_UIに、残り二つはTitleAssetsに入れておいてください。
3Dprojectの場合、UIとして画像を使うようにするには一つ設定をします。
画像をdrag&dropしただけだと、下記のような表示になってると思います。
通常2Dprojectだとこうなってるはずです。
▶︎マークがないですよね。
入れた画像を全て選択して、Inspectorを確認してください。
一番上の"Texture Type" が "Default"になってると思います。
これを、"Sprite (2D and UI)"に変えます。
Spriteを配置していく
前記事ではCanvasまで作成ができてると思います。
そのCanvas直下にPanelを追加します。このPanelのImageはRemoveしてしまいます。(この辺りはお好みだと思います。私はイラレのガイドと同じ感覚で使っています)
透明なパネルができました。
この直下にimageを追加します。
そして新規作成したimageに背景画像(TitleBG)を当てます。
"Set Native Size"を選択すると、アタッチした画像の原寸サイズに戻してくれます。
TitleBGは二倍の大きさになってると思うので、調節して好きな範囲を画角に入れてください。
私はこんな感じにしました。
これは誰ですか？ 大谷刑部さんです。私が描きました。
同じ様にimageを新規作成して配置、タイトルロゴを配置してください。
こんな感じ。
お好みではありますが、背景が強すぎると思ったので私はここで真っ黒なimageを透過させて配置し、背景を暗くしました。後にパーティクルを入れるので暗めが良いと思います。
StartButtonの配置
Buttonを新規作成して配置、その横にアイコンも配置します。
Buttonのテキストがなんだかしっくりこない理由
(1)タイトルロゴとフォントデザインが違いすぎるとちぐはぐになります。
(2)普通にテキストを配置すると、ボタンなどで使うには字間が狭すぎて窮屈に見えます。
今までは字間はコードで設定しなければなりませんでしたが、2021Verだと字間がInspectorで簡単に設定できるようになりました！！積極的に調整しましょう！
違いをみるとわかるはずです。
左は窮屈ですよね。右が字間を広げた後です。
パーティクルを実装する
戦火をイメージしてパーティクルを降らせたいので、パーティクルを追加しましょう。
パーティクルが出てきましたが、戦火のキラキラにはほど遠いです。
画面いっぱいに横から飛ばしたいです。
まず、画像の上に出てくるように設定しましょう。
Inspectorをみるとたくさんの設定が出てきますが、一番下の"Renderer"をクリックして開いてみてください。下記の画面が出ます。
下から3段目、Order in Layer が 0 になっています。ここを1以上にすると手前に出てくれます。
とりあえず10にしました。Gameviewをみると、白いチリがきちんと出ています。
しかしこれでは全くかっこよくありません。できるだけ簡単に設定していきます。
Inspectorから"Shape"を探してクリックしてください。
この中の、Scaleを試しに以下のようにしてみてください。
そうすると画面いっぱいに広がります。
最終的には、こんな感じの数値にしてみてください。
また、一番上の"Particle"をクリックして、画像のような設定項目を開いてください。
下から5番目、"Max Particles"が1000になってると思います。
お好みですが、私はこれを20にしました。
また上から5番目、"Start Speed"を30にしました。
これで完成です。
起動すると、冒頭のようなパーティクルになると思います。
アイコンを回転させるコードを実装する
Scriptsフォルダを作成してなかったら作ってください。
そこにNew Scriptとして"RtateiconController.cs"を作成します。
これをアイコンにアタッチして、下記のコードを書きます。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class RotateiconController : MonoBehaviour
{
RectTransform mytransform;
// Start is called before the first frame update
void Start()
{
mytransform = GetComponent<RectTransform>();
}
// Update is called once per frame
void Update()
{
mytransform.Rotate(0, 0, 0.2f);
}
}これだけで回転し続けてくれます。
起動してみると、UIが完成できたと思います。
本記事は以上です。
いかがでしたでしょうか。
一工夫でなんとなくそれっぽいUIができました。
次記事ではボタンを押すとユーザー登録ができるパネルを表示させたいと思います。
