How to make a textbox like they have in pokemon

Questions & Answers
1

How do you make a text box like they have in pokemon? I managed to make something similar with the following code:

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

public class DialogController : MonoBehaviour
{
    private Text _textComponent;
    private string _textToDraw = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum eros ultricies tristique tincidunt. Nulla tristique rhoncus elit vel fringilla. Nunc egestas bibendum risus eget accumsan. Integer mauris";

    void Start()
    {
        _textComponent = gameObject.FindInChildren("Text").GetComponent<Text>();
        _textComponent.text = string.Empty;
        StartRollingText(_textToDraw,0.1f);
    }

    public void StartRollingText(string text, float time)
    {
        StartCoroutine(DrawText(text,time));
    }

    IEnumerator DrawText(string text,float time) //Keeps adding more characters to the Text component text
    {
        foreach (char c in text)
        {
            _textComponent.text += c;
            yield return new WaitForSeconds(time);
        }
    }
}

I should probably use something like substring to boost performance but just to test this out its fine.

There is however a issue with this code. Sometimes when its at the end of a line it can suddenly make the word jump to the next line while its typing it because it gets too long. Now i can probably think of some hacky way to fix this but whats the best practice for this?

2

It’s easier to determine if a word needs a new line if the font has fixed width characters, because then you can just check if the word exceeds the character limit on a line. This isn’t the case though, so what this snippet does is:

  • makes a backup of the current visible text, and stores the text component’s height,
  • add the next word to the text component, and check the components height, compare it to the previous height calculation.
  • if they are different than add a new line character to the visible text.
  • set the textcomponent back to the visible text and add each character in the next word.

This is probably not the best, or cleanest solution, but I think it’s on the right track:

IEnumerator DrawText(string text,float time) //Keeps adding more characters to the Text component text
{
	string[] words = text.Split(' ');
	for (int i = 0; i < words.Length; i++)
	{
		string word = words*;*

  •   	// add a space for words except for the last*

  •   	if (i != words.Length - 1) word += " ";	*

  •   	string previousText = _textComponent.text;*

  •   	// determine if next word needs to be on new line*

  •   	float lastHeight = _textComponent.preferredHeight;*

  •   	_textComponent.text += word;*

  •   	if (_textComponent.preferredHeight > lastHeight)*

  •   	{*

  •   		previousText += System.Environment.NewLine;*

  •   	}*

  •   	for (int j = 0; j < word.Length; j++)*

  •   	{*

  •   		_textComponent.text = previousText + word.Substring(0, j+1);*

  •   		yield return new WaitForSeconds(time);*

  •   	}*

  •   }*

  • }*