Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Text Box 2 beta

Discussion in 'Works In Progress - Archive' started by Jasper-Flick, Mar 5, 2014.

  1. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    Text Box 2 Beta is now available on the Asset Store!

    Over two years ago, I put Text Box on the asset store, and it is still making people happy with its great features. But now it is time to make people even happier! I am working on Text Box 2! This version will bring the box into the Unity 4 era and introduce powerful new features.
    • multiple fonts
    • multiple materials
    • custom styles
    • clipping and scrolling
    • in-game text editing, with cursor and all
    • all the familiar features from version 1
    • who knows what else?
    $bloody-time-scene.png $bloody-time-inspector.png

    I will provide more detail in future posts, as development continues.

    $flowing-text.png $double-contours.png $text-renderers.png



    This update will be free for everyone who already bought Text Box! So you can get version 1 right now and immediately upgrade when version 2 is released.
     
    Last edited: Jun 2, 2014
    GarBenjamin likes this.
  2. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    @Jasper,

    Very Kool, Awesome, Glad to see this package Growing and Making itself the Premier Text Solution Again.

    Long Live TextBox !

    Cheers.
     
  3. Myhijim

    Myhijim

    Joined:
    Jun 15, 2012
    Posts:
    1,148


    I am very interested in something like this.......
     
  4. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Feature requests:

    1. How about being able to Add Animations to individual Letters, Word and Sentences ? Something like TextFX on the asset store.
     
  5. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    Definitely high on my list of wants, too.

    Some other examples of text animations I think are great:

    http://kpulv.com/219/Dev_Log__Otter_Rich_Text/ and http://kpulv.com/220/Otter_Updates__Rich_Text/
    https://vine.co/v/Ma3PuzYFwtp (not the best quality video but you get the idea)

    Basically these are less extreme than TextFX in that they're smaller local animations, but they still can add a lot of life to the text.

    Also there are other things I'd like to see addressed if possible:

    - Would like to see a better drop shadow option that duplicates the actual quads instead of just using a shader effect. The shader effect works to a small degree, but doesn't work well for larger distances since it clips to the quads. Right now I've just wrapped two TextBox objects with a wrapper object that assigns the same string to both, thus letting me offset one as the drop shadow. Would be nice to have that built in.
    - Modifying the text string when the GameObject is disabled generates some errors, I think because it's modifying the Mesh that doesn't exist while the GameObject is disabled.

    Definitely enjoying using TextBox on our current game and will be interested to see all the stuff you put into version 2.
     
  6. JaimeAriz12

    JaimeAriz12

    Joined:
    Mar 6, 2014
    Posts:
    28
    will text box be offered at a reduced price?
     
  7. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    Fit into Daikon Forge or NGUI?
     
  8. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki @nickgravelyn: I have decoupled the layout and rendering parts of the text box. I'm now focusing on layout, with a simple renderer. Once that's done I'll focus on rendering, which includes animation as well. The nice thing of decoupling both systems is that you'll be able to substitute renderers. Like adding a shadow mesh, or using individual 2D sprites, or 3D objects.

    @URMOM1: I'm not doing a price drop. Instead, I increase its value.

    @imtrobin: My primary focus is Text Box as a stand-alone product, but after that's done I'll look into integration with other UI packages.
     
  9. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    This screenshot shows the lorum ipsum text being cut off due to a new maximum height property.

    $maximum-height.png

    But where is the overflowing text supposed to go?
     
  10. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    Awesome! Would that also allow for integrating button images in the text layout/rendering? Like if I want to say "Press [A] to Start" and then replace the [A] with the image of an A button? That'd make my day (when it comes out). :)

    If possible you could add a property for text offset that would let the user nicely scroll the text up/down while maintaining the clip region. Could be great for scrolling dialog or credits or whatnot.
     
  11. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    To answer my own question, the overflowing text goes wherever you want! You are no longer limited to a single rectangle.

    $flowing-text.png

    @nickgravelyn: Yes it will be possible to use your own buttons. Kinda like using a texture atlas instead of a font.

    Clipping and scrolling will be managed by a wrapper for the text boxes. I'll use a shader-based approach that leaves the text topology unchanged while scrolling.
     
  12. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Last edited: Mar 10, 2014
  13. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    Awesome and awesome. This is shaping up to be a really amazing update. Can't wait to see more.
     
  14. mundomono

    mundomono

    Joined:
    Mar 16, 2012
    Posts:
    6
    Hi Jasper, thanks for the great work. Also, is there a way of getting the local or global position of a character?
    Thanks
    Dan
     
  15. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki: I'm now working on flexible left and right margins. I won't do exclusions in the middle of the text though. Besides being a pain to program, they're also very bad practice as they break up the text flow. I always get confused by such layout. But with flexible sides you could wrap two columns around a middle shape, keeping text flow clear.

    @nickgravelyn: I'm on it!

    @mundomono: Yes, you can get the layout position and vertex data of characters.
     
  16. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    I just got custom contour shapes somewhat functional on the right side of the box, enough to make a screenshot.

    $right-contour.png
     
  17. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Unreal, Totally Wicked Stuff.

    Can't believe you're pulling this off. Text Magician.
     
  18. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    Dang that's neat. How are the points specified? Wondering how easy it would be to use that to clip text around, say, a 3D character by projecting some vertices from the character onto the text box.
     
  19. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki: Magic is messy! I'll have quite some code cleaning to do once I have it all working.

    @nickgravelyn: The points are in a Vector2 array. They represent points in the 2D layout space, relative to the top right corner for the right contour. So if the box is axis-aligned, it would be simple to project arbitrary vertices onto it. The trickiest part is that the points need to be consecutive from top to bottom, not doubling-back. So you'd need part of a sorted convect hull.
     
  20. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    That sounds reasonable enough for specifying the points. For non-aligned boxes one could probably use raycasts or some other projection to figure out the points, as long as the TextBox has some helper methods to convert into layout space.
     
  21. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Can the shapes be defined during run-time? In one of my projects, I am using a spline to specify 2D shapes at run time. It would be great to be able to feed to TextBox the spline's array of points.
     
  22. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki: Yes, that is certainly possible. I suggest not to use it with realtime animating splines, as the resulting dancing text would drive people nuts.
     
  23. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Haha. hey, that's actually a great idea for a Psychedelic type of game.
     
  24. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    The text is now flanked by fully functional contours!

    $double-contours.png

    The contours push the text further into the box, but they won't pull it out.
     
  25. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Krazy good stuff.

    Double squeezer.
     
  26. Alahmnat

    Alahmnat

    Joined:
    Feb 1, 2008
    Posts:
    65
    Is there a way to detect if the text has hit the overflow point, and spawn another container to overflow into rather than scrolling? I think this would be a great tool for creating language-independent in-game books with multiple pages, but I'd need to have a way to know how many pages/containers to create for the current text. I'm also loving the possibility to reflow text in a notebook around a doodle using the contour tools.
     
  27. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @Alahmnat: Yes, you're able to detect overflow and know where it happened. You can also walk through a flow chain and figure out which boxes are used and which are empty.
     
  28. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    I've frozen the layout functionality for now. I can add more stuff, but I'm now looking into the next part, which is rendering.

    Text Box used to have modifiers which allowed you to apply various effects to the text. They're back.

    $text-renderers.png

    Actually, they're no longer mere modifiers, but entire renderers. You can stick to tweaking the default mesh, but you can also completely replace it with something else. Like individual 2D sprites, or 3D character models, or whatever you can imagine. And you can use multiple different ones in a single box.
     
  29. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Wow, Awesome.

    How to apply the effects to the text ? Can we do it by using a kind of Html tags ? Like <wave> this is wavy text </wave> ?
     
  30. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    I love this so much. Text Box is working great for us and I can't wait to have even more ability to make great text easily.

    And I just read that this is a free update? Insanity. I was ready to throw more money at you when you got this done.
     
  31. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki: Yes, like that. You'll define a style that uses the wiggle renderer, and then you can activate it with a tag.

    @nickgravelyn: I really appreciate you already threw money at me. You can help me spread the word instead of throwing more. :)
     
  32. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    I'm now working on clipping and scrolling. Here's a soft clip of a text page.

    $text-soft-clipping.png
     
  33. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Cool !

    By coincidence, I've been wrestling with DaikonForge clipping scrollview performance on IOS. Evidently they are using a CPU approach so it runs at 9fps on a iphone 4. NGUI on the other hand uses the GPU for their clipping scrollview and it's 29-30 fps solid. Only problem is that NGUI cannot yet handle nesting of scrollview. They are looking into using another technique that involves using the new graphics masking/ cutout feature.

    As you are making this clipping scrollable box, I'm wondering how the performance would be on IOS. Also can this be nested.
     
  34. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @rocki: Conceptually all I'm doing is passing a clipping rect to the clipper's content. It's up to the content what to do with it. My basic renderer uses the rect to set a shader parameter which results in soft rectangular clipping using alpha blending on the GPU. This works great on iOS, but other techniques are possible.

    Clippers can be nested without problem, they basically perform a rectangle intersection and pass the result to their content. In the below example the large yellow text is in a nested clip box.

    $nested-clipping.png

    The limitation is that the renderers don't know that they're nested, all they have is the final rectangle. This works fine when performing rectangular clipping only. If you use a different visualization like a circle or with rounded corners, the nested clipping will look odd.
     
  35. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    I got a crude scrollbar working. It works in 3D. Here I dropped a slab with scrolling text onto some geometry. You can even drag the scrollbar while the slab's still falling. It's a little hard to aim, but I made it easier by inflating the scroller's collider once you get a hold of it.

    $scrolling-in-3d.png

    I uploaded a video as well so you can see it in motion.

     
    Last edited: Mar 24, 2014
  36. tayl0r

    tayl0r

    Joined:
    Jan 6, 2012
    Posts:
    85
    Text Box is a great plugin but my biggest complaint was that it was far too difficult to tweak the shader values to create and tune the drop shadows outlines. The only way I would use Text Box in a new project is if there was a better interface for creating drop shadows and outlines.

    Also, more documentation about the little tool that creates the distance map texture. It was just trial and error there for me. A list of common situations and their values would be good there.

    I'm a huge fan of your work (your tutorials and Text Box) and I *was* a big user of Text Box so I hope you take my criticism seriously =)
     
  37. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Looks really cool with the scrolling in 3D.
    Nice work.
     
  38. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @tayl0r: I sure take you seriously! Shaders will become a lot easier. I'm going for a modular uber-shader that should be easy to use and modify. The distance map tool will also be modernized.

    @rocki: Thanks. I'm trying to make it so scrollers and draggers should be easy to integrate in any project. This is very important, as everyone has their own unique input and UI approach.
     
  39. kellygravelyn

    kellygravelyn

    Joined:
    Jan 22, 2009
    Posts:
    143
    Hooray for the distance map tool getting love. With distance maps and a set of different materials I've gotten a lot of mileage out of a single font atlas. It's really quite amazing.

    I'm glad to hear this, too. I, for example, don't use any of the big name GUI assets so it's important to me that TextBox keeps being nice and neutral in how it approaches these concepts so I can easily handle scrolling in my way.

    In other words just keep doing what you're doing. :D
     
  40. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @nickgravelyn: Okay, I will! :)

    Here's some more scrolling and dragging madness, showing that you can hook up as many as you like.

     
  41. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    The latest addition to the clipbox is overshoot and rebound. I used an obvious wiggle in the video, but it's a configurable animation curve so you can use any style you want.

     
  42. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Nice, the bouncing effect is similar to IOS's kind of interaction.
     
  43. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    The next step is adding a cursor and allowing text entry. It's still very crude, but the main point right now is to get the minimal functionality in there.



    @rocki: Indeed it is! But you can turn it off as well if you don't like it.
     
  44. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Just watched it. Awesome. Text input is very much needed.
     
  45. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    Minimal text editing functionality also includes automatic scrolling to keep the cursor in view and to follow the text flow between boxes, as demonstrated in this video.



    Text editing is now nearly feature complete, I just need to improve some awkward navigation behavior.
     
  46. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    How about unicode?
     
  47. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Awesome work, you are powering along at hyperwarp speed.
     
  48. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    @imtrobin: Like version 1, the text box handles all left-to-right unicode characters in the Basic Multilingual Plane. You do need to create your own bitmap font that contains all characters that you require.

    @rocki: Now that the cursor is behaving acceptable, Text Box 2.0 is basically feature-complete. Now I'll have to clean up some very dirty code, make the API usable, and tune for efficiency. So it might feel like it'll slow down from this point.
     
  49. imtrobin

    imtrobin

    Joined:
    Nov 30, 2009
    Posts:
    1,548
    That is very big texture to generate the bitmap font in advance, no?
     
  50. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Is there a chance that it would support dynamic text.