How do you make text follow a curved path?

0 favourites
From the Asset Store
Change delay, create new lines, "backspace" the text
  • Pretty straight forward, how would you make a text follow a curved path?

    On another note, is this something relevant for you? I would post this on the ideas page, but then I'd be spending my votes, so I'm using here as a testing ground for the appeal of the idea.

    Tagged:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hi, should it be animated or just staying in place? There might be a way but it will require multiple text objects

  • just staying in place would be enough, but it wouldn't hurt being able to animate it at some point.

  • Here it is! drive.google.com/file/d/1Im8s0qiEo9NRlHyUQ6GqclVhtyBFFB40/view

    This example uses two methods, one creates the texts on a single tick with a trigger, the text can't move afterward, and the second allows you to move the sprites and change curve position with drag and drop, I detailed most of it in the file;

    Just know that it uses interpolation expressions (lerp, qarp, cubic) that can be hard to understand if you haven't learned how to use it yet, if so I recommend you to read about it to fully understand this example method ~

    This is how it looks : i.ibb.co/7v61Gcy/Curved-Text.gif

  • So did it work as you intended?

  • nicely done! :)

  • I intended to investigate further before commenting, and here it goes.

    Your tool is good, very good, but you can see how the text behaves weirdly because of the font spaces since every letter is an object (right?).

    I also don't think it is even possible to make something better than you did, so thank you for your effort, but I believe that for it to look properly good, the text should've been continuous because of letter-spacing and therefore impossible with the tools we currently have.

    I'll probably post this tool in the ideas page.

    Again, thank you a bunch!

  • Hello, glad that you like it, do you have an example of the result you'd like to have? I can investigate a little further more

  • He probably wants the text spaced proportionally based on the width of individual characters, and then an option to left, right or center justify the text on the curve. I was thinking of taking a crack at it but don't have time today...

  • that's great Tomycase!

  • Thanks!

    Actually it's possible to do so, but I'd like to see an example of the result wanted before working on it

  • I used Inkscape tool "Text => Put on Path". I'm aware there are similar tools in Photoshop, Illustrator, Corel, etc for you to take a look, but Inkscape is free and open source, so I'd love if you could take a look there.

    This is a video showing how the tool works if you're interested. See how letter spacing works differently, like the text still works naturally, but curved on the path.

    Every font has a specific kerning setting which is virtually impossible to replicate if each symbol is its own object, unless you are able to read the kerning value between symbols, which is waaaaay above my skills. That's why I said what you did is probably the best solution possible.

    But either way, hope I added something to the conversation with this.

  • I actually know about Inkscape, but I'm afraid that atm it is out of my Construct knowledge scope indeed, but I hope you'll still find some use to this demo!

  • Cool example. I thought I'd try my hand at preserving the horizontal letter spacing when on the curve.

    There is a text.textwidth expression that is useful for measuring the text, but it only gives a value after the text is drawn. Anyways, for example if you have a word like "Hi" I was first positioning the "i" after the width of "H", but found it worked better by positioning "i" after the width of "Hi" minus the width of "i". That way it indirectly got the horizonal kernal too.

    The second part is to position the letters a certain distance along a path. basically it involves converting the curve to a polyline so we can measure distances.

    Made in c2 but should work the same in c3.

    dropbox.com/s/b4xskuisrxkies8/text_on_path.capx

  • Impressive as always (and as always too complex for me to understand haha)

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