Unityでソシャゲを作りたい#03 ロード画面を作る

ロード画面といえば動くだけ。animationを駆使すれば秒で作れます。

前回同様プレハブを作ります。

今回はパネルと内側にImageを二つ。あとで画像を差し替えればよりそれっぽくできるという魂胆ですね。

画像1

次にアニメーションを付けます。アニメーションウィンドウを開いてください。まだ出てなければ適当にアニメーションクリップを作成してダブルクリックすれば出ます。

画像2

こんなやつ。

そしたらさっき作ったプレハブの一番上のパネルを選択した状態でこのウィンドウのcreateを押します。

保存画面が出るので適当に保存して、AddPropetyからアニメーションさせる値を追加していきます。

画像3

今回はイメージ二つのスケールと背景を透過させたいのでcolorを追加しました。

適当に1週分キーフレーム打ってあげたらアニメーションは完成です。

画面で確認しながらキー打ちたい場合はプレハブ化する前にアニメーションつけるとこまでやりましょう。

あとは前回同様サイズを調整するスクリプトをつけます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Loading_script : MonoBehaviour
{
   void Start(){
       Debug.Log("やったぞ");
       Set_Loading();
   }
   public void Set_Loading(){
       GameObject main = GameObject.Find("LO_main");
       GameObject back = GameObject.Find("LO_back");
       float w = Screen.width;
       float h = Screen.height;
       main.GetComponent<RectTransform>().sizeDelta= new Vector2(w/8f,w/8f);
       back.GetComponent<RectTransform>().sizeDelta= new Vector2(w/8f,w/8f);
       main.GetComponent<RectTransform>().localPosition= new Vector2(0f,0f);
       back.GetComponent<RectTransform>().localPosition= new Vector2(0f,0f);
   }
   public void End_Loading(){
       Debug.Log("呼ばれた");
       Destroy(GameObject.Find("Loading(Clone)"));
   }
}

今回はStart()から呼び出す形にして、プレハブを差し込んだら自動で調整されるようになってます。

これで完成です。前回同様プレハブをキャンバスに呼び出せば動くロード画面が表示されます。

画像4

ただの四角なのでしょぼく見えますが、画像をハメればリゼロスのロード画面くらいにはなります。

画像作るのめんどいので今はやりませんが、これは動画制作歴10年近い私の勘がささやいているのできっとそうです。

他にもっといろいろやりたければアニメーションクリップの部分で何でもできます。頑張れば。

ついでに前回作ったTapToStartにもアニメーションを付けます。

呼び出し時用に適当なアニメーションを作って、何も移動しないdefault用のクリップも作成します。

こっちは最初だけ流すので、animationcontrollerを若干編集します。

画像5

何もないのがオレンジの方、アニメーションが灰色の方になるように矢印つないであげて、最初のやつを発動するためのトリガーを宣言しておきます。TTS_startってやつです。

画像8

AnyStateから灰色までの矢印クリックしてトリガー指定しときます。

遷移時間とかいい感じに設定しないと二回流れたりします。一回でやめる設定あった気がしますが、忘れたのでパワーでなんとかしました。

前回のスクリプトにちょっと追加して

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class TapToStart_script : MonoBehaviour{
   void Start(){
       //ロード画面同様呼び出しで自動設定できるようになる
       Set_TapToStart();
   }
   public void Set_TapToStart(){
       GameObject TTS_BT = GameObject.Find("TTS_BT");
       GameObject TTS_hikitsugi_BT = GameObject.Find("TTS_Hikitugi_BT");
       GameObject TTS_setting_BT = GameObject.Find("TTS_Setting_BT");
       float w = Screen.width;
       float h = Screen.height;
       TTS_BT.GetComponent<RectTransform>().sizeDelta=new Vector2(w/3f,(w/3f)/2f);
       TTS_BT.GetComponent<RectTransform>().localPosition=new Vector2(0f,-h/5f);
       TTS_hikitsugi_BT.GetComponent<RectTransform>().sizeDelta=new Vector2(w/6f,w/6f);
       TTS_hikitsugi_BT.GetComponent<RectTransform>().localPosition=new Vector2((w*0.9f/2f)-((w/6f)/2f),(h/3f));
       TTS_setting_BT.GetComponent<RectTransform>().sizeDelta=new Vector2(w/6f,w/6f);
       TTS_setting_BT.GetComponent<RectTransform>().localPosition=new Vector2((w*0.9f/2f)-((w/6f)/2f),(h/3f)-(w/6f));
       //追加
       GetComponent<Animator>().SetTrigger("TTS_start");
   }
   public void Tap(){
       Destroy(GameObject.Find("TapToStart_panel(Clone)"));
   }
}

こうすると、トリガーをセットしたときアニメーションが発動するので、呼び出したらふぁーんってなります。

画像7

起動から流れでいきましょう。

ロード処理未実装なので始まると同時にロード画面表示して、ロード終わったことにする赤ボタン押すとスタートが表示されてます。

画像7

今回も秒で終わりましたね。

明日会社に行ったら九連休なのでウキウキわくわくです。

よって今日はさっさと寝ます。

明日は何の仕事も振られないといいね、ハム太郎。


この記事が気に入ったらサポートをしてみませんか?