15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Unity C# 数字を画像で描画するScript

Last updated at Posted at 2015-10-14

始めに

  • Unityには、数字を画像で表示するためのコンポーネントは、ありません。
  • 数字を画像で表示するために、スクリプトと数字の画像が必要になります。
  • そのスクリプトと使い方を記述します。

Script

NumberImageRenderer.cs
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;
using System;

public class NumberImageRenderer : MonoBehaviour
{
    [System.Serializable]
    public struct TextNumRenderData
    {
        public TextNumRenderData(string fileName, Transform parentTrasform, Color color, float justification)
            : this()
        { 
            this.fileName = fileName;
            this.parentTrasform = parentTrasform;
            this.color = color;
            this.justification = justification;
        }

        public string fileName;
        public Transform parentTrasform;
        public Color color;

        /// <summary>
        /// 位置揃いする間隔
        /// </summary>
        public float justification;
    }

    struct CreateData
    {
        public RectTransform rectTrans;
        public Image image;
    }

    int digit = 0;
    int oldDigit = 0;

    Sprite[] sprites = null;
    List<CreateData> createList = new List<CreateData>();

    [SerializeField]
    TextNumRenderData data;

    CreateData Create(Sprite sprite)
    {
        var instance = new GameObject();
        instance.name = data.fileName + "_" + sprite.name;
        instance.transform.SetParent(data.parentTrasform);
        
        var rectTrans = instance.AddComponent<RectTransform>();
        instance.transform.localScale = Vector3.one;
        rectTrans.sizeDelta = data.parentTrasform.GetComponent<RectTransform>().sizeDelta;

        var image = instance.AddComponent<Image>();
        image.sprite = sprite;
        image.color = data.color;
        
        var createData = new CreateData() { rectTrans = rectTrans ,image = image};

        return createData;
    }

    void ResourcesLoad()
    {
        if (sprites == null)
        {
            createList.Clear();
            sprites = Resources.LoadAll<Sprite>(data.fileName);
        }
    }

    /// <summary>
    /// 描画処理
    /// </summary>
    /// <param name="text"></param>
    void Rendering(string text)
    {
        for (int i = 0; i < text.Length; i++)
        {
            var sprite = Array.Find(sprites,s => s.name == text[i].ToString());

            digit++;
            if (digit > oldDigit)
            {
                oldDigit = digit;
                var createData = Create(sprite);
                createData.rectTrans.anchoredPosition3D = 
                    new Vector3(i * (createData.rectTrans.sizeDelta.x - data.justification), 0, 0);
                createList.Add(createData);
            }
            else
            {
                var createData = createList[i];
                createData.image.sprite = sprite;
                createData.rectTrans.name = data.fileName + "_" + sprite.name;
            }
        }

        digit = 0;
    }

    /// <summary>
    /// 数字を画像で描画する関数
    /// </summary>
    public void Render(double score)
    {
        if (score <= -1) return;
        
        ResourcesLoad();

        Rendering(score.ToString("f2"));
    }

    /// <summary>
    /// 数字を画像で描画する関数
    /// </summary>
    public void Render(int score)
    {
        if (score <= -1) return;

        ResourcesLoad();

        Rendering(score.ToString());
    }

    /// <summary>
    /// 色をすべて変更する。
    /// </summary>
    /// <param name="color"></param>
    public void ChnageColor(Color color)
    {
        data.color = color;
        foreach (var list in createList)
        {
            list.image.color = data.color;
        }
    }

}


使用方法

Script

Sample.cs

public class Sample : MonoBehaviour {

    NumberImageRenderer numberImageRenderer = null;

	// Use this for initialization
	void Start () {
        numberImageRenderer = GetComponent<NumberImageRenderer>();
	}
	
	// Update is called once per frame
	void Update () {
        // 浮動小数点
        numberImageRenderer.Render(100.0);
        
        // 整数
        //numberImageRenderer.Render(100);
	}
}

Componentの設定

  • RectTransformがついてあるuGUIをHierarchyに配置してください。
  • 配置したUIにNumberImageRendrerer.csをコンポーネントしてください。
  • さらに、Sample.csもコンポーネントしてください。

NumberImageRendrererのInspector設定

  • FileName
    • Resourcesフォルダーにあるファイル名
  • ParentTrasform
    • 配置したUIをアタッチする。
  • Color
    • 色情報を設定
  • Justification
    • 間隔の広さ
    • 0が通常
    • 大きいほど、狭くなる。

これらの設定をして、うまく使用し、いい感じに作成してください。

Sprite

  • 0~9と.(小数点)の画像を用意しましょう。

  • 横並びで結構です。

    • 1マス : 100 x 100
    • 合計 : 1100 x 100
  • 例Sprite
    suuji.png

  • この背景は、黒ですが、実際は透明にしてください。

  • あと、なぜ、文字が白なのかというと、Unity側で色情報を自由に変更できるからです。

Unity側のSprite設定

d106f5207a0c82d17f2aba79d7110cc5.png

  • Spriteの設定は、上記のようにしてください。

SpriteEditor

0ac05566bebb88e19624095005520c35.png

  • Sliceの設定をこのようにしてください。
  • そうすれば、自動的に、PixelSizeでスライスしてくれます。
  • 最後に、スライスした一つ一つのSprite名を、数字にしてください。
  • 例えば、0なら、0 .なら、. にしてください。

以上です。

このように扱えば、誰でも、数字が画像で表示できます。
ぜひ、使ってみてはいかかでしょうか?

15
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?