How can i display some text information in the middle of the screen in a box?

Question

Something nice to display text.

What i did so far: When the player is pointing with the camera on "Interactable" object it's showing on the object a description text. Then when the player is making left mouse click it will display more information about the object.

The problem is that it's showing the clicked text under the already exist text and not in the middle of the screen in a nice box.

This script is attached to the Player. I'm using two bool variables to check when to display the information: hasDescription and clickForDescription.

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

public class DetectInteractable : MonoBehaviour
{
    public Camera cam;
    public float distanceToSee;
    public string objectHit;
    public Image image;
    public bool interactableObject = false;
    public Canvas canvas;
    public Text interactableText;
    public ItemInformation iteminformation;

    private RaycastHit whatObjectHit;
    private RotateObject rotateobj;
    private bool hasDescription = false;
    private bool clickForDescription = false;
    private int layerMask = 1 << 8;

    private void Start()
    {
        rotateobj = GetComponent<RotateObject>();
    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            clickForDescription = true;
        }

        Debug.DrawRay(cam.transform.position, cam.transform.forward * distanceToSee, Color.magenta);

        if (rotateobj.rotating == false)
        {
            if (Physics.Raycast(cam.transform.position, cam.transform.forward, out whatObjectHit, distanceToSee, layerMask))
            {
                image.color = Color.red;
                objectHit = whatObjectHit.collider.gameObject.name;
                interactableObject = true;
                interactableText.gameObject.SetActive(true);
                interactableText.text = whatObjectHit.collider.gameObject.name;
                print("Hit ! " + whatObjectHit.collider.gameObject.name);
                hasDescription = true;
            }
            else
            {
                image.color = Color.white;
                interactableText.gameObject.SetActive(false);
                hasDescription = false;
                clickForDescription = false;
                print("Not Hit !");
            }
        }
    }

    private void OnGUI()
    {
        if (hasDescription == true && clickForDescription == true)
        {
            var centeredStyle = GUI.skin.GetStyle("Label");
            centeredStyle.alignment = TextAnchor.UpperCenter;
            GUI.Label(new Rect(Screen.width / 2 - 50, Screen.height / 2 - 25, 100, 50), iteminformation.description, centeredStyle);
        }
    }

    public class ViewableObject : MonoBehaviour
    {
        public string displayText;
        public bool isInteractable;
    }
}

The second script is attached to each "Interactable" gameobject and i'm writing for each object some information. This is the text i want to display in the middle of the screen or in some position on the screen to display mroe information about the item/object.

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

public class ItemInformation : MonoBehaviour
{
    [TextArea]
    public string description;
}

In this screenshot it's when i'm pointing with the camera on "Interactable" object the pointer is turning red and the text description is in white. This is fine and working good:

And this is when pointing on "Interactable" object and then clicking on the mouse left button: What i want is to display the new text information in a nice big box in the middle of the screen with some bigger size of the fonts like in adventure games when you click on item and it's giving you description.

The first white short description should be stay on the object/item the text in ItmeInformation script should be in the middle of the screen like in adventure/quest games.

Answer 1

You could serialize a GUIStyle on your inspector, it should be on an object that stays on scene (maybe the same interactable).

using UnityEngine;
using UnityEditor;

public class ExampleClass : MonoBehaviour
{
    [SerializeField] private GUIStyle boxStyle;  /// <summary>Your box's style.</summary

}

Once serialized, you can explicitly configurate its attributes defined on GUIStyle's API.

Or, you could play with Unity Engine's UI elements, and enable UI panels when you have an interactable on sight. UI elements have a RectTransform, which inherits from Transform, and has additional properties like anchors and pivot definitions, for you to position that UI on the interactable's position, relative to the UI's anchor.

Use Camera.ScreenToViewportPoint to convert the interactable's position to a viewport's (a normalized space)

using UnityEngine;
using UnityEngine.UI;
using UnityEditor;

public class ExampleUI : MonoBehaviour
{
    private RectTransform recttransform;

    void Awake()
    {
        recttransform = GetComponent<RectTransform>();
    }

    public void EnableDescriptionBox(Vector3 interactablePosition)
    {
        recttransform.gameObject.SetActive(true);
        recttransform.position = Camera.ScreenToViewportPoint(interactablePosition);
    }

}