【Unity】スマートフォン用のトースト機能を作ってみる

ユーザー通知の方法で下からメッセージが湧き出るトースト機能というのがある。

Windows用のトースト機能は公式に用意されているみたいだけど、Androidでよくあるトースト機能はなかった。

ないなら仕方ないので作ってみる。

作り方

UnityでToast機能を作るならImageとTextがあれば次の手順で簡単に作れそう。

１．まずCanvasを作成する

２．その下にImageを作成する

３．さらに下にTextを作成する

４．それぞれのプロパティを設定する

５．動かす（浮かして消す）

こんな考え方で作ってみた。

ソースコード

using System;
using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ToastUtil : MonoBehaviour {
  public static Color imgColor  = new Color(1.0f,0.5f,0.5f,0.9f);
  public static Color textColor = new Color(0.1f,0.1f,0.1f,0.9f);
  public static Vector2 startPos = new Vector2(0,-500); // 開始場所
  public static Vector2 endPos   = new Vector2(0,-300); // 終了場所
  public static int fontSize = 60;
  public static int moveFrame = 30; // 浮き上がりの時間(フレーム)
  public static int waitFrame = 30; // 浮き上がり後の時間(フレーム)
  public static int pad=100; // padding
  public static Sprite imgSprite;
  public static Font   textFont;

  public static void Toast<T>(MonoBehaviour mb,T m) {
    string msg=m.ToString();
    GameObject g = new GameObject("ToastCanbas");
    Canvas canvas = g.AddComponent<Canvas>();
    canvas.renderMode = RenderMode.ScreenSpaceOverlay;
    canvas.sortingOrder = 100; //最前
    g.AddComponent<CanvasScaler>();
    g.AddComponent<GraphicRaycaster>();

    GameObject g2 = new GameObject("Image");
    g2.transform.parent = g.transform;
    Image im = g2.AddComponent<Image>();
    if(imgSprite)im.sprite = imgSprite;
    im.color = imgColor;
    g2.GetComponent<RectTransform>().anchoredPosition=startPos;

    GameObject g3 = new GameObject("Text");
    g3.transform.parent = g2.transform;
    Text t = g3.AddComponent<Text>();
    g3.GetComponent<RectTransform>().anchoredPosition=new Vector2(0,0);

    t.alignment = TextAnchor.MiddleCenter;
    if(textFont)
      t.font = textFont;
    else
      t.font = (Font)Resources.GetBuiltinResource (typeof(Font), "Arial.ttf");
    t.fontSize = fontSize;
    t.text = msg;
    t.enabled = true;
    t.color = textColor;

    g3.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth    ,t.preferredHeight    );
    g3.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth    ,t.preferredHeight    );//2回必要
    g2.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth+pad,t.preferredHeight+pad);

    mb.StartCoroutine(
      DoToast(
        g2.GetComponent<RectTransform>(), (endPos-startPos)*(1f/moveFrame), g
      )
    );
  }
  static IEnumerator DoToast(RectTransform rec,Vector2 dif,GameObject g) {
    for (var i=1; i<=moveFrame; i++) { rec.anchoredPosition+=dif; yield return null; }
    for (var i=1; i<=waitFrame; i++) yield return null;
    Destroy(g);
  }
}

using System;

using System.Collections;

using UnityEngine;

using UnityEngine.UI;

public class ToastUtil : MonoBehaviour {

public static Color imgColor = new Color(1.0f,0.5f,0.5f,0.9f);

public static Color textColor = new Color(0.1f,0.1f,0.1f,0.9f);

public static Vector2 startPos = new Vector2(0,-500); // 開始場所

public static Vector2 endPos = new Vector2(0,-300); // 終了場所

public static int fontSize = 60;

public static int moveFrame = 30; // 浮き上がりの時間(フレーム)

public static int waitFrame = 30; // 浮き上がり後の時間(フレーム)

public static int pad=100; // padding

public static Sprite imgSprite;

public static Font textFont;

public static void Toast<T>(MonoBehaviour mb,T m) {

string msg=m.ToString();

GameObject g = new GameObject("ToastCanbas");

Canvas canvas = g.AddComponent<Canvas>();

canvas.renderMode = RenderMode.ScreenSpaceOverlay;

canvas.sortingOrder = 100; //最前

g.AddComponent<CanvasScaler>();

g.AddComponent<GraphicRaycaster>();

GameObject g2 = new GameObject("Image");

g2.transform.parent = g.transform;

Image im = g2.AddComponent<Image>();

if(imgSprite)im.sprite = imgSprite;

im.color = imgColor;

g2.GetComponent<RectTransform>().anchoredPosition=startPos;

GameObject g3 = new GameObject("Text");

g3.transform.parent = g2.transform;

Text t = g3.AddComponent<Text>();

g3.GetComponent<RectTransform>().anchoredPosition=new Vector2(0,0);

t.alignment = TextAnchor.MiddleCenter;

if(textFont)

t.font = textFont;

else

t.font = (Font)Resources.GetBuiltinResource (typeof(Font), "Arial.ttf");

t.fontSize = fontSize;

t.text = msg;

t.enabled = true;

t.color = textColor;

g3.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth ,t.preferredHeight );

g3.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth ,t.preferredHeight );//2回必要

g2.GetComponent<RectTransform>().sizeDelta = new Vector2(t.preferredWidth+pad,t.preferredHeight+pad);

mb.StartCoroutine(

DoToast(

g2.GetComponent<RectTransform>(), (endPos-startPos)*(1f/moveFrame), g

)

);

}

static IEnumerator DoToast(RectTransform rec,Vector2 dif,GameObject g) {

for (var i=1; i<=moveFrame; i++) { rec.anchoredPosition+=dif; yield return null; }

for (var i=1; i<=waitFrame; i++) yield return null;

Destroy(g);

}

設定は全部使う側から直接指定できるようにしといた。

使用例

そのまま使う

ToastUtil.Toast(this,"...TOAST...");

1	ToastUtil.Toast(this,"...TOAST...");

真四角のトーストっていかにも手抜き感がある。

まぁ何かを伝える目的は達している。

画像とフォントを指定して使う

ToastUtil.textFont  = Resources.Load("font/Makinas",typeof(Font)) as Font;
ToastUtil.imgSprite = Resources.Load("image/toast",typeof(Sprite)) as Sprite;
ToastUtil.Toast(this,"...TOAST...");

ToastUtil.textFont = Resources.Load("font/Makinas",typeof(Font)) as Font;

ToastUtil.imgSprite = Resources.Load("image/toast",typeof(Sprite)) as Sprite;

ToastUtil.Toast(this,"...TOAST...");

こうすると多少はそれっぽい気がする。

けどなんとなく滑らかさが足りない気もする。

移動する方向を変える

ToastUtil.startPos = new Vector2( 700,0);
ToastUtil.endPos   = new Vector2(-700,0);
ToastUtil.imgColor = new Color(0,0,0,0);
ToastUtil.moveFrame= 200;
ToastUtil.Toast(this,"...TOAST..."+count);

ToastUtil.startPos = new Vector2( 700,0);

ToastUtil.endPos = new Vector2(-700,0);

ToastUtil.imgColor = new Color(0,0,0,0);

ToastUtil.moveFrame= 200;

ToastUtil.Toast(this,"...TOAST..."+count);

なんとか動画みたいになる。

雑感

こういう汎用的なものを実装するとき、また使うときに使いやすいようにユーティリティ化することが多いけど使う機会があまりない。

これに至っては作ったけど採用しなかったから０回使用。

今度からは２回目必要になったときに１回目のを叩き直す感じで作るか。

でもそれも二度手間な気がする…。

そもそもよく使われるようなものはググれば大概出てくるから、特殊用途だと割り切ってその場限りのコードでいいかもしれない。

作り方

使用例

そのまま使う

画像とフォントを指定して使う

移動する方向を変える

雑感

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル