Forum rules - please read before posting.

Multiple fonts and text color in the same text

pulpaulaapulpaulaa
edited November 2024 in Technical Q&A

Hi, I'm trying to make the dialogue in my game look like this (it's a prototype I made in Photoshop), I already managed to implement the UI for the main textbox, speaker text and conversation options (using Unity UI), but now I need to implement the fonts and text color, which is really important for my game because it's supposed to represent that they're talking in another language. So, there's 3 fonts that sometimes are used in the same box as they mean 1. that they're talking in english, 2. that they're talking in this other language and the protagonist understands 3. That they're talking in this other language but the protagonist doesn't understand, so it shows as scribbles (which are also a font). Case 1 has a darker gray color and cases 2 and 3 have a lighter gray color. I want to be able to make these font and color decisions as I implement the dialogue, willl any of this be possible? It's the most important part of my game and I haven't really seen much information about having multiple text styles in the same text.

Comments

  • ChrisIceBoxChrisIceBox

    You'd need to make use of custom scripting to alter the appearance of the Menu based on the dialogue options involved.

    Is it just the Conversation menu to affect?

  • pulpaulaapulpaulaa
    edited November 2024

    It would be the conversation menu and the subtitles one, as this is all over the dialogues.
    I was thinking maybe tokens could work? But I'm not sure how to go about that, I'm still a bit new and I'm not a programmer

  • pulpaulaapulpaulaa

    Also about this same dialogue, I was trying to add portraits and expressions, but AC is not letting me add my sprites as the portrait texture, I have a spritesheet of expressions for each character and it only lets me add the spritesheet itself, not drag the individual sliced sprites (here's the images of the problem).

  • ChrisIceBoxChrisIceBox

    It would be the conversation menu and the subtitles one, as this is all over the dialogues.

    Sounds like style sheets would be your best bet. If you switch to TextMesh Pro, you can define different styles and then use the "style" tag inside your speech text / option labels to alter their appreance.

    A tutorial on this can be found here.

    To convert a single Menu to use TextMesh Pro, open up its Unity UI Canvas prefab, and replace its Text components with TextMesh Pro U GUI components. Then check Use TMPro components? in the Menu's properties.

    Alternatively, to convert all of your existing Menus to TextMesh Pro, import TextMesh Pro as a package, and then run the New Game Wizard. Choose Modify existing, and then install the TextMesh Pro menus template.

    I was trying to add portraits and expressions, but AC is not letting me add my sprites as the portrait texture

    You need to assign the texture file, as you've done, and then check Animate? underneath. Additional fields for the number of rows/columns etc will then appear, which you can configure to have AC slice the texture automatically into individual frames.

  • pulpaulaapulpaulaa

    Thank you! The style sheets worked perfectly for what I wanted to achieve!

    I’m not sure if the portrait solution is what I’m looking for, I’m not trying to animate them, they’re static portraits, 1 for each expression. I realized later that this happened to me as well with the hotspot icon, which are the only 2 places I think I’m using AC’s UI instead of Unity’s (I’m not sure if there’s a way to use Unity’s in these cases). For now I imported the expressions and icons as individual sprites, although I’d prefer to use spritesheets, at least it works.

    I have an extra followup question related to these dialogues if you can help me. The thing is I’m trying to add an indicator (the arrow icon in the bottom middle choice) in the conversation menu. This indicator shows the player that if they choose that option, something will happen. So, this indicator will only be added in 1 of the conversation alternatives, and only in some conversations, not all. Here’s an image of the conversation menu (without the indicator for now, because I’m not sure the best way to add it yet, as the menu’s elements are a list, and the position of the indicator would have to adapt to the length of the list as well). Here’s an example image of a dialogue and conversation actionlist (I’m using the one-off action to streamline the writing process). So, my question is, what do you think would be the best way to implement this? I had some ideas like making an int variable and using it to indicate the position of the indicator (which option it belongs to) (and using another number to indicate there’s none), running an actionlist at the start of the conversation to check it, but then I wasn’t sure where to change that variable before it gets checked. And also, again, I’m not sure how to add the indicator’s sprite in the menu, basing its position on the length of the dialoguelist and at the same time hiding or showing them so that there’s only the intended one. I hope I’m explaining myself clearly enough, and again, thank you so much for your help.

  • ChrisIceBoxChrisIceBox

    If you want to show an icon over specific dialogue options, you'll need to use a bit of custom scripting - including a component that you can use to denote which option from a Conversation to highlight this way.

    Because of this, you'll need to switch over to the regular Dialogue: Start Conversation Action, where you can assign a specific Conversation GameObject.

    To this Conversation, you can then attach a custom script that lets you mark which option to highlight:

    using UnityEngine;
using AC;

public class DialogueOptionHighlight : MonoBehaviour
{
    public int optionIDToHighlight = -1;
}

    Set the "Option ID To Highlight" value to the ID of the option, or leave it as -1 if nothing to show.

    Next, go to your Conversation UI prefab, and add the icon to each of the options. Rather than repositioning a single icon, it's easier to have multiple icons, and then attach a script that just keeps one enabled.

    Does your Conversation menu support scrolling through options if it has more than 3 available? That will affect the script that needs to be written.

    I’m not sure if the portrait solution is what I’m looking for, I’m not trying to animate them, they’re static portraits, 1 for each expression.

    Thanks for the details. A tutorial on using expressions can be found here.

  • pulpaulaapulpaulaa

    Hi, thanks for the reply.
    I have a question, how do I tell the script to change that variable before the conversation appears on screen? So that the icon appears at the same time as the conversation.

    Next, go to your Conversation UI prefab, and add the icon to each of the options. Rather than repositioning a single icon, it's easier to have multiple icons, and then attach a script that just keeps one enabled.

    Yeah that's what I thought as well, but the conversation menu can have from 1 to 3 choices, and they align to the center, so the position of the icon would be different in these 3 cases.

    Does your Conversation menu support scrolling through options if it has more than 3 available? That will affect the script that needs to be written.

    No, 3 is the maximum for now.

    As for the expressions, yeah I read the tutorials, thanks, but at least I haven't really read there anything about using spritesheets in static expressions or using unity ui for them, like I said earlier, everything works alright, it's just that it only lets me add individual sprites as textures and not the spritesheet sprites.

  • ChrisIceBoxChrisIceBox

    I have a question, how do I tell the script to change that variable before the conversation appears on screen? So that the icon appears at the same time as the conversation.

    Use the Dialogue Option Highlight component to set the ID of the option you want to mark with an icon while in Edit mode. You then need a separate script (below) to read this value and show/hide icons as needed.

    Yeah that's what I thought as well, but the conversation menu can have from 1 to 3 choices, and they align to the center, so the position of the icon would be different in these 3 cases.

    You need to add a copy of the icon to each Button in your UI prefab - so that they're already positioned correctly, and you hide/show them rather than just have one and reposition it.

    To do this, attach this script to the same object as the icon's Image, and fill in its Inspector:

    using UnityEngine;
using UnityEngine.UI;
using AC;

public class DialogueOptionIcon : MonoBehaviour
{

    public Canvas canvas;
    public Image icon;
    public int slotIndex;

    void OnEnable ()
    {
        var conversation = KickStarter.playerInput.activeConversation;
        if (conversation == null)
        {
            Hide ();
            return;
        }

        var dialogueOptionHighlight = conversation.GetComponent<DialogueOptionHighlight> ();
        if (dialogueOptionHighlight == null)
        {
            Hide ();
            return;
        }

        Menu menu = KickStarter.playerMenus.GetMenuWithCanvas (canvas);
        var element = menu.GetElementWithGameObject (gameObject) as MenuDialogList;
        var dialogOption = element.GetDialogueOption (slotIndex);

        if (dialogOption.ID == dialogueOptionHighlight.optionIDToHighlight)
        {
            Show ();
        }
        else
        {
            Hide ();
        }
    }

    void Show ()
    {
        icon.enabled = true;
    }

    void Hide ()
    {
        icon.enabled = false;
    }

}
  • pulpaulaapulpaulaa

    Thank you Chris! I managed to make it work, I ended up changing the line:
    var element = menu.GetElementWithGameObject (gameObject) as MenuDialogList;
    for the line:
    var element = menu.GetElementWithName ("DialogueList") as MenuDialogList;
    because it was giving me an error, and with that it worked! Again, thank you so much for your help and patience, I've learned so much.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

Welcome to the official forum for Adventure Creator.