[Solved] How to move dialogs around for interactive tutorial?

Unity Engine
1

This is what I’m trying to do for an interactive tutorial:

572×727 3.63 KB

The first thing the tutorial will show is a dialog message in the center of the game area (top). When the player clicks on the button, the button activates a button action I registered with the script that moves the dialog to the next position (bottom), along with new dialog text messages.

This is the first step I would like to do before I expand with more dialogs and text messages.

This is my current incomplete code (note the comments):

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

namespace Tutorial {
    public class TutorialDialog : MonoBehaviour {
        public RectTransform dialogTransform;
        public GameObject textComponent;
        public GameObject mainDialog;
        public List<string> dialogueTexts;
        public List<RectTransform> dialogPositions;
        public int stringIterator;

        void Start() {
            if (this.textComponent == null) {
                Debug.LogError("Text: Something is wrong.");
            }
            if (this.mainDialog == null) {
                Debug.LogError("Dialog: Something is wrong.");
            }
            this.dialogTransform = this.mainDialog.GetComponent<RectTransform>();
            this.dialogueTexts = new List<string>();
            this.dialogPositions = new List<RectTransform>();
            StringInitialize();
            DialogPositionInitialize();
            this.stringIterator = 0;
            SetText();
            SetPosition();
        }

        void OnGUI() {

        }

        public void OnTutorialButtonClick() {
            if (this.stringIterator < this.dialogueTexts.Count) {
                this.stringIterator++;
                SetText();
                SetPosition();
            }
        }

        private void StringInitialize() {
            this.dialogueTexts.Add("Hello world.");
            this.dialogueTexts.Add("Goodbye world.");
            this.dialogueTexts.Add("Test.");
            this.dialogueTexts.Add("Test 1.");
            this.dialogueTexts.Add("Complete.");
        }

        private void DialogPositionInitialize() {
            //Should be easy enough to do. Correct me if I'm wrong:
            /*
           
            1. Copy the values in the Rect Transform of the dialog placed at where I wanted it to be in the Editor.
            2. Paste the values here.
            3. Add new Rect Transforms to the list.
            4. Repeat.
           
            */
        }

        private void SetText() {
            if (this.stringIterator < this.dialogueTexts.Count) {
                Text text = this.textComponent.GetComponent<Text>();
                text.text = this.dialogueTexts[this.stringIterator];
            }
        }

        private void SetPosition() {
            //Completely not sure how to "set" dialog position from Rect Transform (list) to Rect Transform (dialog).
            if (this.stringIterator < this.dialogPositions.Count) {
                this.dialogTransform = this.dialogPositions[this.stringIterator];
            }
        }
    }
}

Because I’m so used to using GameObject.transform.position, the first time using the UI system is like a whole new Unity feature I was never exposed to before.

  • Does anyone know how to set the dialog positions?
  • Do I need to use OnGUI() for this? I included it in the code, but I’m not sure if I need to.

Thanks in advance.

2

I was told about “anchoredPosition” and “anchoredPosition3D” via PM, which is used similarly to Transform.position. It now works as intended. Here’s the code:

        private void SetPosition() {
            //Completely not sure how to "set" dialog position from Rect Transform (list) to Rect Transform (dialog).
            if (this.stringIterator < this.dialogPositions.Count) {
                this.mainDialog.GetComponent<RectTransform>().anchoredPosition = this.dialogPositions[this.stringIterator];
            }
        }

        private void DialogPositionInitialize() {
            //Should be easy enough to do:
            /*
          
            1. Copy the values in the Rect Transform of the dialog placed at where I wanted it to be.
            2. Paste the values here.
            3. Add new Rect Transforms to the list.
            4. Repeat.
          
            */
            this.dialogPositions.Add(new Vector2(461.5f, -267));
            this.dialogPositions.Add(new Vector2(700.8f, -115.5f));
        }

Therefore, this is solved.

1 Like
3

To answer your second question, OnGUI() is the legacy GUI system and has nothing to do with uGUI. You don’t need the method at all if it’s empty.

4

Okay, thanks for pointing it out. I’ll go ahead and remove the OnGUI().