0 Favourites

[TextBox]Typewriter effect + Justify text align

  • (my english is not perfect sorry).

    Hello hello,

    I'm currently working on a visual novel project. Nice little story, with painting, music, few visual effects. Very simple.

    Everything worked fine since last week. I have a problem with the text display and can't find a solution.

    Exemple (work with Chrome, not firefox).

    Capx

    • I display the text with a Typewriter effect using Ashley's method.
    • For Destination Text, I use a TextBox object so I can add some CSS. I want my text align to be "justify". Didn't find proper solution with simple Text object. (work with Chrome and Node-Kit).

    My problem is that the CSS wait the text to be displayed to apply the "text-align : justify" and it make this ugly wraping/jumping effect.

    Do you have any idea how to correct that ?

    -If I apply "text-align : Justify" to SourceText ? Can I ask to DestinationText to "clone" exactly the same display before adding typewriter effect ?

    -Can I apply opacity to each letter or only for the full textbox ? My idea is to set the text to opacity 0% and then the typewriter effect won't add text but simply change opacity letter by letter.

    -I was thinking of using a simple sprite black object to mask the text and make it move from left to right to make a fake typewritter effect, but only work on a black (or other color) textbox and if possible I want my textbox to be transparent, on top of very precise and detailed painting :

    If you have any idea, please help me, I'm just a nooby graphist who start Construct fews weeks ago

  • Seems like the approach to use would be to have the full text in there, already justified and then make separate characters visible. Otherwise it will jump as the amount of text changes, that seems inevitable.

  • I don't think it's possible to have both "text-align: justify" and perfect word wrapping while doing a typewriter effect. At best, you can programmatically insert "newlines" at key points inside your sourceText so that no weird wrapping occurs.

  • Seems like the approach to use would be to have the full text in there, already justified and then make separate characters visible.

    You're probably right, I'm actually searching for this kind of solution if any of you have idea please tell me

  • Hi, I have insert "newlines" and it works (example is Dutch text)

    Text .... Typing Type ..."Pim is een muis. Die muis zoekt kaas."&newline&"Zij gaat naar de kast. In de kast is een doos."&newline&"In de doos ziet zij de kaas. Die is geel."&newline&"Pim eet de kaas op. Haar buik is nu dik."&newline&"Zij heeft pijn. Pim loopt naar het hol."&newline&"Zij ligt op haar bed. Ik eet niet meer zo veel." ...at 1 letter per 0.1 sec

  • A workaround, although it's a terrible one, would be using the spritefont-plugin on a layer with force own texture and overlay it with a black box with blendmode.

    While using the spritefont it's possible to know the width of every letter and adjust the black box's position or width accordingly.

    The more I think about it, the more I dislike the idea, actually.. haha..

  • thanks for help !

    I will try both your method and see if I can make my perfect text engine

  • ...why not simply?

    capx:

  • how to make a typewriter with raises by word ? pls help...

  • Nalsa ..simple word by word typing...

    capx>

  • Thank you very much. This is very helpful....

  • how to make the text change when the button is pressed, then start again featuring typewriter word by word? I experienced this problem.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Like this?

    capx>

  • Nalsa ..simple word by word typing...

    capx>

    Hy guys, I know this last post but the link was broken. Can you reupload again, please? I need it and really helped my work. Sorry my bad english. Thanks...

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)