GameDev – How to Manage Textfields with Tiled

In my last post, I hinted at a way to manage textfields with Tiled. I also said to prepare yourself, because your pants would get blown away.

Well, did you remove them? ‘Cause they’re about to explode.

This post benefits from having read the previous one: Using Littera with Phaser


Q: Why would I want to manage textfields with one of the best map editors?
A: Because it’s awesome, easy, and you’ll save a LOT of time.

— End of FAQ —

How do I do that?

1- The first thing to do is create a new layer in Tiled, that we’ll call “Labels“. This is the layer that contains all the labels we’ll have in this map file.


Select the Shape – Rectangle tool (shortcut: R)


Make sure you selected the Labels layer, and draw a Rectangle.


Pro-tip: Pressing CTRL while drawing your rectangle will snap the size to the nearest tiles.

That’s the easy and boring part. We did it, we created an empty rectangle, devoid of anything pants-blowing. Let’s start the good stuff:

In the properties of your newly created rectangle shape, set the Name to “myAwesomeLabel


Now add these following custom properties:

  1. align: takes a string value, “left”, “right”, “center”
  2. color: not used yet
  3. font: the custom font you created earlier
  4. offsetX
  5. offsetY: both offsets will help us align the textfield to our liking
  6. size: the font size, of course
  7. text: the actual text to display in the textfield. Just add something.
  8. type: “label”, we’ll need this in the code

Do you see where this is going? With custom properties we can shape the textfield as we want. In truth, the power of Tiled resides in its ability to let us add custom properties to arbitrary shapes. We could probably do this with any other map editor, but Tiled holds a special place in my heart.

And code-side…

You’ll need this part, it’s a great way to find a certain object type on a specific layer.

[snippet id=”209″ title=”GetObjectsByType” height=”0″ line_numbers=”true”]

With that, you can get all label objects from your Label layer, and parse them to create the textfields you always wanted to create, deep down in your heart.

[snippet id=”198″ title=”Tiled – Adding Textfield support in your game” height=”0″ line_numbers=”true”]

That concludes our textfield-creating tut,

and I hope your learned stuff, and maybe I expanded your mind too. If you liked this, don’t forget to subscribe to miss nothing of my next tutorials, then follow me on Twitter for extra karma!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s