How do I create a button with a font by code?

Question

I have written a code that would create background image as a button and then show a letter on that button. This should become a virtual keyboard.

I am experiencing weird drawing that looks like this:

I do not see what my mistake is.

The following is the code that I have placed on the canvas object:

To replicate the problem, do the following:

• The project requires a canvas, parented to the root.

• Add the script "VirtualKeyboard" to it which is stated in this post.

• Next, add an image to this canvas and name it "BackgroundImage". Set the image's anchor preset to "stretch / stretch". Set its color to red.

• Press Play

(Please note that in the code stated below I have removed most of the buttons to keep this post short):

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

public class VirtualKeyboard : MonoBehaviour
{
    public class vbutton : MonoBehaviour
    {
        public int index;
        public float left;
        public float top;
        public float width;
        public float height;
        public string caption;
    }
    private vbutton pMakeKey(int index, float left, float top, float width, float height, string caption)
    {
        vbutton newButton = new vbutton();
        newButton.index = index;
        newButton.left = left;
        newButton.top = top;
        newButton.width = width;
        newButton.height = height;
        newButton.caption = caption;
        return newButton;
    }

    public float screenWidth = Screen.width;
    public float screenHeight = Screen.height;
    public float referenceWidth = 1920f; // Replace with your reference width
    public float referenceHeight = 1080f; // Replace with your reference height

    public float ratioX;
    public float ratioY;

    void Start()
    {
        ratioX = screenWidth / referenceWidth;
        ratioY = screenHeight / referenceHeight;
        List<vbutton> keys = new List<vbutton>();

        keys.Add(pMakeKey(1038, 1028 * ratioX, 141 * ratioY, 57 * ratioX, 43 * ratioY, ""));
        keys.Add(pMakeKey(1040, 1028 * ratioX, 185 * ratioY, 57 * ratioX, 43 * ratioY, ""));

        // Get the canvas to use as parent for the keyboard keys
        Canvas canvas = GetComponent<Canvas>();

        for (int i = 0; i < keys.Count; i++)
        {
            // Create a new GameObject for the key
            GameObject key = new GameObject(keys[i].caption);

            RectTransform keyRectTransform = key.AddComponent<RectTransform>();
            keyRectTransform.SetParent(canvas.transform);
            keyRectTransform.SetParent(transform);
            keyRectTransform.anchoredPosition = new Vector2(keys[i].left, -keys[i].top);
            keyRectTransform.sizeDelta = new Vector2(keys[i].width, keys[i].height);

            // Add a Button component to the key
            Button button = key.AddComponent<Button>();

            // Add a Text component to the key and set its text to the current key string
            Text text = key.AddComponent<Text>();
            text.text = keys[i].caption;
            text.font = Resources.GetBuiltinResource<Font>("Arial.ttf"); // Set the font
            text.color = Color.black;
            text.fontSize = 24; // Set the font size
            text.alignment = TextAnchor.MiddleCenter; // Center the text

            // Add a callback function to the button click event
            button.onClick.AddListener(() => OnButtonClicked(keys[i].caption));
        }
    }
    void OnButtonClicked(string buttonCaption)
    {
        Debug.Log("Button " + buttonCaption + " was clicked!");
        // Do whatever you need to do when a button is clicked here
    }
}

This screenshot shows the properties of the "BackgroundImage" that I use as a background:

And this is what the gameview looks like as well as the Canvas properties:

Answer 1

The keyRectTransform.sizeDelta was simply too small to show the text. Once I made it bigger, the text would show up.