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

FAQ

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.

Tiled-Textfield-step1

Select the Shape – Rectangle tool (shortcut: R)

Tiled-Textfield-step2

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

Tiled-Textfield-step3

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

Tiled-Textfield-step4

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.

<3

And code-side…

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

var map; // Phaser.Tilemap;

var getObjectsByType = function(type, layerName) {
	var result = [];
	map.objects[layerName].forEach(function(element) {
		if (element.properties.type === type) {
			result.push(element);
		}
	}, this);
 
	return result;
};

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.

// Go through all labels
map.getObjectsByType('label', 'Labels').forEach(function(textfield) {
    
    // Instantiate the textfield with properties
    var myNewTextField = game.add.bitmapText(textfield.x + Number(textfield.properties.offsetX),
                                    textfield.y + Number(textfield.properties.offsetY),
                                    textfield.properties.font,
                                    textfield.properties.text,
                                    textfield.properties.size);

    // Actually this could also be a property    
    myNewTextField.fixedToCamera = true;
    
    // Set the text
    myNewTextField.text = textfield.properties.text;
    
    // Set the alignment
    if (textfield.properties.align == "center") {
        myNewTextField.x = Math.round((textfield.x + textfield.width/2) - myNewTextField.width/2);
    } else if (textfield.properties.align == "right") {
        // ...
    } else {
        // ...
    }
    
});



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!