# How to create curved text?

**URL:** <https://phaser.discourse.group/t/how-to-create-curved-text/10284>\
**Category:** Phaser 3\
**Created:** [September 20, 2021, 8:29pm UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284 "2021-09-20T20:29:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [September 20, 2021, 8:29pm UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284/1 "2021-09-20T20:29:12Z")

</div>

I don’t know if there’s a property or function for doing this and I couldn’t find something related (that wasn’t css or so). Is there a way to do it directly on Phaser?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 21, 2021, 2:31pm UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284/2 "2021-09-21T14:31:46Z")

</div>

I don’t think so.

---

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [September 24, 2021, 3:03pm UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284/3 "2021-09-24T15:03:33Z")

</div>

I found out that you can use pipelines to add some effects to game objects, I tried doing [this](https://labs.phaser.io/edit.html?src=src/renderer/bend%20pipeline.js&v=3.55.2) example with text and it actually works!  
But now my question is:  
Is there any pipeline that could help me achieve the effect of curved text? I have zero experience with them, so I don’t know how to make a custom one or which one could I use.

---

<div class="post-metadata">

**Author:** ![StinOfSin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stinofsin/32/5625_2.png) [@StinOfSin](https://phaser.discourse.group/u/StinOfSin)\
**Post date:** [September 25, 2021, 11:31am UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284/4 "2021-09-25T11:31:11Z")

</div>

Not sure if this is what you’re talking about, but do you mean text that follows a curved path? I found [a codepen that achieves this in Phaser 2](https://codepen.io/devilb/pen/aOeOEe), seems like it could be updated to work in Phaser 3, but it’s written pretty much from scratch - not using a built-in Phaser method.

A slightly more native method that might not take as much coding would be running text along an actual Phaser.Curves.Path object. There’s [A Phaser 3 example in bitmaptext/dynamic that animates this idea](https://phaser.io/examples/v3/view/game-objects/bitmaptext/dynamic/text-follow-path#), but it might be generic enough for you to pull what you need from there. You could angle the letters appropriately using the Path method getTangent. Still might be a bit more work than you were hoping for… but you’d be able to put text on any wildly-shaped path that you’d like!

If you mean distorting the text into a curved shape, then playing around with that bend pipeline might be your best bet.

---

<div class="post-metadata">

**Author:** ![Mastertaco](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mastertaco/32/5290_2.png) [@Mastertaco](https://phaser.discourse.group/u/Mastertaco)\
**Post date:** [September 28, 2021, 5:55pm UTC](https://phaser.discourse.group/t/how-to-create-curved-text/10284/5 "2021-09-28T17:55:14Z")

</div>

Great, thank you!  
At the end I was forced to use html text boxes for other reasons, but the second option you’re describing is what I needed, thank you!