【連載 Unity初心者向け】歴史学習アプリを作る(2 ユーザー登録パネルの作成)

試験的連載モノ[初心者がUnityで学習アプリを作る] 2

初心者だけど少しでもそれっぽいデザインも加えてゲームを作りたい・至極単純なサンプルではなく実際に使えそうな実装をしてみたい方向けに、初心者の私が学習アプリを作る過程を記事にします。

↓本記事ではこの登録画面を作っていきます。

前回の記事はコチラ↓

matsrikagraphic.hatenablog.com

アイコンの回転とかパーティクルとかの説明をしています。

ユーザー登録の実装を考える

今回は外部サービスのニフクラmobilebackendを使用します。

登録は無料、月に100万回のアクセス以内であれば実用するのも無料です。

mbaas.nifcloud.com

どんなサービスなの？

アプリでよく使うユーザー管理機能、ランキング機能、プッシュ通知をクラウド上で管理できる様にするアプリです。

ユーザーが何人登録していて、いつログインしたのか、どのくらいスコアを伸ばしているか、などの管理がネット上でできるようになります。

今回は学習アプリなのであまり使用用途はありませんが、アクションゲームのランキング機能、RPGのギルド機能などでは良く使う機能が網羅されてると思います。

似た様なサービスでmicrosoftが提供しているPlayfabもありますが、日本語のテキストが少ないので、公式テキストが豊富なこちらのほうが初心者にはおすすめです。

登録方法、アプリの登録については公式サイトで十分理解できると思いますので割愛します。本記事では、Unityと紐づけるところからやっていきます。

Unityとニフクラを紐づける

まず、ニフクラが提供しているUnitySDKをPackageManagerからインポートします。

PackageManagerを開き、GithubのURLからDLするように選択します。

左上にある"+"をクリックして下記の通り選んでください。

下記のようにURLを入力する画面が開きます。

下記のURLをそのままコピペしてください。

https://github.com/NIFCLOUD-mbaas/ncmb_unity.git?path=ncmb_unity/Assets

Addボタンを押すと、下記の画面が表示されると思います。

インポートに成功すると、ProjectWindowのPackagesに"NCMB Unity SDK"が追加されているはずです。

この中に"Prefabs"があるので開いてください。

この"NCMBSettings"をHierarchyに追加します。

Inspectorで"NCMB Settings(Script)"がアタッチされてるのが確認できます。

この二つの項目に、NCMBで登録されたKeyを入力します。

※NCMBのアプリ登録を済ませていない方は、公式サイトを参考してください。

この記事では割愛します。

これでNCMBの機能が使える様になりました。

ユーザー登録UIを配置する

まず、スタートボタンを押したらユーザー名とパスワードを入力するパネルを表示するところまで作ります。

今まで作ったpanelとは別に、Canvas直下にpanelを新規作成します。

これを"SignUpPanel"と名付けます。

ちなみに、パネルの位置やサイズ設定のこの画面ですが、

この画面のときにmacならOptionキーを押すと、

このように表示が変わって、任意の方向の画角いっぱいに広げてくれます。

色々いじって変わり方を試してみてください。

私は以下の通りの設定にしています。

このPanelには角が丸い四角形の真っ白なsprite画像をあてこんでいます。

白い塗りつぶしの画像素材は色々と使えるのでいくつか持っていると便利です。

いくつかお試し用としてDLできるようにしました。→DLする

下のような画像を各アイコン毎にpngでDLできるように保存してあります。

これは超単純なものなので自由に使用してくださって結構です。

今回の記事で使ったのは、DLフォルダ中のicons18.png(上記の左下のアイコン)です。

白い塗りつぶし画像が便利なのはなんで？

色を自由にUnity側で設定できるからです。このシルエットだけを用いて、色はUnity側で自由に設定が可能になります。これが真っ黒なシルエットの画像だと色は直接変えられません。

このicons18.pngをあてこみ、色と透明度を画像の様にしました。

細長くしても角の丸を綺麗に維持するために設定を行う

このimageをそのまま引き伸ばすと、角丸も一緒に伸びて比率が変わり汚くなってしまいます。これを、比率を綺麗に維持する様に設定をしておきます。

Projectで画像データそのもの（DLした方は"icons18.png"）をクリックすると、Inspector上に画像データの設定項目が現れます。

このInspector上で"SpriteEditor"をクリックして、四隅の間隔を維持する様に設定しておきます。この設定は他の解説サイトでも良く出てるので、詳細の解説はしません。

画像だけ載せておきます。これは"SpriteEditor"内のウィンドウ画面です。

こんな感じで緑の線が、四隅のカーブの内側にきていればOKです。

パネルをよりくっきり見せるためにOutlineを追加する

背景画像との境界をくっきりさせるために、Outlineコンポーネントも追加しています。

若干、黒い線が周りにできているのがわかるでしょうか。

細かいところですが、こういうところは簡単にできて且つユーザーにとっても見やすくなるポイントだと思います。

ですが、あまり入門書には書いていないので、ぜひ試してみてほしいポイントです。

パネル内にInputfieldとtextを配置する

特筆すべきところは無いので、画像だけのせておきます。

このような感じで配置します。

"NAME :"と"PASS :"も字間を15に設定して広げています。

OKボタンのSpriteも、パネルと同じicons18.pngの角丸のspriteです。

これで素材の配置は完了です。

コードでStartButtonを押したら表示させるようにする

これはものすごく簡単です。

まず、Scene内に"TitleManager"という空のGameObjectと、

同じく"TitleManager.cs"というスクリプトを新規作成してアタッチします。

TitleManager.csの中身は下記のコードを記述します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TitleManager : MonoBehaviour
{
    [SerializeField]
    public GameObject SignupPanel;

    void Start()
    {
        SignupPanel.SetActive(false);
    }

    void Update()
    {

    }

    public void OnStartClick()
    {
        SignupPanel.SetActive(true);
    }
}

コードはひとまず、これだけです。

このGameObjectであるTitleManagerをInspectorで確認し、

"Signup Panel"となっているところへ、先ほど作成したSignUpPanelをあてこみます。