Search Unity

  1. Unity Asset Manager is now available in public beta. Try it out now and join the conversation here in the forums.
    Dismiss Notice

[Solved] Best practice - displaying multiple lines with unity tiny

Discussion in 'Project Tiny' started by boringName, Apr 26, 2019.

  1. boringName

    boringName

    Joined:
    Jul 20, 2016
    Posts:
    8
    I wish to display a paragraph of text. If this paragraph is too long to display in one line, I'd like to display it across multiple lines.

    Currently, I can't find any documented way to make a UI Text component wrap over multiple lines. In all the sample tiny projects, multiple lines of text are displayed using multiple entities each with a UI Text component that contains a portion of the full sentence.

    Is there currently support for UI text wrapping over multiple lines, such that I can toss a longish paragraph in a single UI text component?

    If there isn't its alright, as a simple System that cuts a long string into multiple sentences should be able to mimic the functionality I want, I just want to make sure I'm not missing a simpler method.

    Thanks in advance for any advice!
     
  2. reallyhexln

    reallyhexln

    Joined:
    Jun 18, 2018
    Posts:
    69
    Hi!

    As I know, Tiny is not supported multiline fields yet (https://docs.google.com/presentatio...HVlP5/pub?start=false&loop=false&delayms=3000 , see slide #10), and the only one way to achieve displaying of text paragraph, is using multiple text fields.

    It's not a problem for me, because I use small predefined set of text replies, so I just hardcoding them and their font size.

    If you will intensively use multiline text, I think, it's better to implement some algorithm that will separate text to specified count of text lines.

    I'm not sure, it's easy to achive, but I don't know another way.
     
    boringName likes this.
  3. boringName

    boringName

    Joined:
    Jul 20, 2016
    Posts:
    8
    Thanks for your advice! In the end, I got the code working.

    I'm putting my code here to be helpful to anyone else attempting to do what I did. My solution is rather inelegant as this is the first time I've ever written in project tiny, or typescript for that matter, but hopefully it will be helpful to someone else attempting to do something similar!

    Code (JavaScript):
    1.  
    2. namespace game {
    3.  
    4.     /** New System */
    5.     export class TextSystem extends ut.ComponentSystem {
    6.        
    7.         OnUpdate():void {
    8.  
    9.             var toDisplay : String;
    10.             toDisplay = "";
    11.             this.world.forEach([ut.Entity, ut.HitBox2D.HitBoxOverlapResults, game.IsPlayer, ut.Core2D.Sprite2DRenderer],
    12.                 (entity, hit, gameOverLine, sprite) => {
    13.                     var firstChoice = hit.overlaps[0];
    14.                     if(this.world.hasComponent(firstChoice.otherEntity, game.IsTextBox))
    15.                     {
    16.                         var textBox = this.world.getComponentData(firstChoice.otherEntity, game.IsTextBox);
    17.                         toDisplay = textBox.text;
    18.                     }
    19.  
    20.                     //this.world.removeComponent(entity, game.GameOverLine);
    21.                 });
    22.  
    23.             //okay so now we have the string to display. So lets display! Maybe. We might have to (dun dun dun) split the string into multiple lines so that it fits.
    24.             var finalDisplay : string[];
    25.             finalDisplay = [];
    26.             var length = toDisplay.length;
    27.             var numLines = 1 + (length - 1) % 48; //50 arbitary number of characters to max out line.
    28.  
    29.             for(var i = 0; i < Math.min(4,numLines);i++)
    30.             {
    31.                 finalDisplay.push(toDisplay.substring(i * 48,(i + 1) * 48));
    32.             }
    33.             var finalLength = finalDisplay.length;
    34.  
    35.  
    36.             this.world.forEach([ut.Entity,game.DisplayText,ut.Text.Text2DRenderer],
    37.                 (entity,tag,textRenderer) => {
    38.                     var x = tag.Index;  //what line of text should this text renderer display?
    39.                     if(x < finalLength && x >= 0)
    40.                     {
    41.                         textRenderer.text = finalDisplay[x];
    42.                     }
    43.             });
    44.         }
    45.     }
    46. }
     
    Rallix and reallyhexln like this.