Need help with showing text string / text blitter in a dynamic decorative frame box

**goldeng** · 3rd February 2023, 09:04 PM

Hi everyone,

I didn't find info about this in the forum. In case it was discussed please kindly direct me to the appropriate thread.

I'm aware that working with text and fonts is not very intuitive in Clickteam Fusion, and that this is the main reason of why developers tend to use custom text blitter method to present dialogues and such in their applications, as it has much wider range of appearance and possibilities.

I'm trying to design a way to present text to the player, either in regular string object using simple fonts and also with text blitter method, but I wish the text to be presented inside a dynamic box with decorative frame (like 'point & click' adventure games tend to) and that the box size will change in width and height according to the amount of text shown, while the surrounding decorative graphic parts will instantly stick to the text boundaries; so basically only the middle part of the frame box should be scaled up and down.

I made this simple setup of 9 objects which build up the decorative frame for the text, if placed one next to each other (4 corner objects and 1 for top, down, left, right and middle). I managed to scale the middle object using the Set X Scale and Set Y Scale, but I'm still trying to figuring out how to create a text object (or blittered block of text) at the center of this middle object, which will then be scaled to the boundaries of the block of text presented to the player.

Attached a MFA file of a simple decorative text frame box. You can scale it up and down vertically using the scroll wheel and horizontally holding right-click when scrolling. The string object in it is just informative for how to resize the decorative frame box; I did not create the actual object(s) to showing the dynamic text as I'm open for suggestions.

Application 1.zip

What would be the right way to achieving this?

Thanks

**Vaxx** · 10th February 2023, 09:54 PM

If you have your text formatted somewhere you could check the lenght of one line and therefore know the width of the box. If you use the text blitter object you know how many pixels each character has and then resize the frame. The height of the box could be determined by the number of lines that your text has. This way you will know the exact size of the text block.

Another idea: create an invisible 1px object where the text starts then blit the text. After that create another 1px object when text is done. Coordinates of those two objects define the rectangle. This only works if the last line is the longest otherwise define your own new line and remember the x position.

**goldeng** · 11th February 2023, 01:22 PM

Originally Posted by Vaxx

If you have your text formatted somewhere you could check the lenght of one line and therefore know the width of the box. If you use the text blitter object you know how many pixels each character has and then resize the frame. The height of the box could be determined by the number of lines that your text has. This way you will know the exact size of the text block.

Another idea: create an invisible 1px object where the text starts then blit the text. After that create another 1px object when text is done. Coordinates of those two objects define the rectangle. This only works if the last line is the longest otherwise define your own new line and remember the x position.

Thanks for the reply! I ended up with another solution though - if anyone is instersted or have feedback on this method to perhaps make it better I'd love to hear:

1. I used an Active System Box object for the text string, as it gives much more control on how it looks and what you can do with it, and I set it to be at the size of the frame so it will show in the middle of the screen no matter the amount of text I set it to show.

Custom Text Box Frame Screenshot 1.png
In this example I gave the text a yellow background to show that the object is set at the size of the entire screen. It is positioned at 0 on both X and Y axis.

2. I added the Calculate Text Rect object which lets you calculate the actual width and height of the Active System Box object (I suppose it works on other string objects too) while disregarding all the empty space around the text which fills the entire screen.

Custom Text Box Frame Screenshot 2.png
This screenshot shows how the Calculate Text Rect object affects the Active System Box object, which behaves like cropping the empty bounding box area around the text of the Active System Box object.

3. I made 4 corner piece objects for the custom frame that I wish to surround the text with, and set an always event to position them around the Active System Box object, which with the help of the Calculate Text Rect object aligns them to be around the actual text and not around the entire bounding box of the Active System Box object which would have been off-screen in this case.

Custom Text Box Frame Screenshot 3.png
The custom frame object pieces I used in this example are quite simple - just 8x8 object pieces with a black line and white background to give some space for the text from the edges of the frame.

4. Then I needed 4 additional frame piece objects to fill the gap between the corner pieces and close the frame. The scale size of these objects should be dynamic, which will scale up or down depending on the amount of text that makes the overall size of the entire block of text. So I then made 4 additional frame piece objects which are Left, Right, Top and Bottom. I positioned the Top and Bottom pieces to the right edge of the Top Left Corner piece, and the Left and Right pieces to the bottom of the Top Left Corner Piece; I set their hot spots to their opposite side as I wish the scale operation to occur from their opposite direction.

Custom Text Box Frame Screenshot 4.png
In this screenshot the 4 additional frame piece objects are paint in red so you could see and distinguish them.

5. And lastly, I used @almightyzentaco's "360 Laser Tutorial for Clickteam Fusion 2.5" fast loop method (https://www.youtube.com/watch?v=RA_cWwTh3q8) to make the Top, Bottom, Left and Right frame piece objects increase their size until they collide with the opposite frame corner object piece which breaks the fast loop; the Top and Bottom pieces has their own fast loop and the Left and Right pieces has their own as well.

Custom Text Box Frame Screenshot 5.png
This is how the scale operation looks.

The end result looks like this (forgot to remove the yellow background):
Custom Text Box Frame Screenshot 6.png

And you can of course change the decoration of the frame pieces to whatever you like and change the amount of text freely and the frame objects will be relative to the overall size of the block of text:
Custom Text Box Frame Screenshot 7.png

Custom Text Box Frame Screenshot 8.png

**VBEinc** · 12th February 2023, 03:25 PM

Originally Posted by goldeng

Hi everyone,

I didn't find info about this in the forum. In case it was discussed please kindly direct me to the appropriate thread.

I'm aware that working with text and fonts is not very intuitive in Clickteam Fusion, and that this is the main reason of why developers tend to use custom text blitter method to present dialogues and such in their applications, as it has much wider range of appearance and possibilities.

I'm trying to design a way to present text to the player, either in regular string object using simple fonts and also with text blitter method, but I wish the text to be presented inside a dynamic box with decorative frame (like 'point & click' adventure games tend to) and that the box size will change in width and height according to the amount of text shown, while the surrounding decorative graphic parts will instantly stick to the text boundaries; so basically only the middle part of the frame box should be scaled up and down.

I made this simple setup of 9 objects which build up the decorative frame for the text, if placed one next to each other (4 corner objects and 1 for top, down, left, right and middle). I managed to scale the middle object using the Set X Scale and Set Y Scale, but I'm still trying to figuring out how to create a text object (or blittered block of text) at the center of this middle object, which will then be scaled to the boundaries of the block of text presented to the player.

Attached a MFA file of a simple decorative text frame box. You can scale it up and down vertically using the scroll wheel and horizontally holding right-click when scrolling. The string object in it is just informative for how to resize the decorative frame box; I did not create the actual object(s) to showing the dynamic text as I'm open for suggestions.

Application 1.zip

What would be the right way to achieving this?

Thanks

Not exactly what you created, but this .MFA I made is only 3 lines of code using a counter, a Object and a String.

TEXT ZOOM.png

LINK: https://drive.google.com/file/d/10X-...usp=share_link

It would be nice though, if the String had a size option. I.E. Width / Height!

**goldeng** · 13th February 2023, 01:11 PM

Originally Posted by VBEinc

Not exactly what you created, but this .MFA I made is only 3 lines of code using a counter, a Object and a String.

TEXT ZOOM.png

LINK: https://drive.google.com/file/d/10X-...usp=share_link

It would be nice though, if the String had a size option. I.E. Width / Height!

Thanks! Nice and simple. My goal however was to have the size of the bounding box (frame) of the text just about around the text letters and that its size will change depending on the amount of text the string has. In addition to that, I wanted to have the frame customization more flexible, so one could have different artwork graphic for each of the frame corners and for each of the straight edges.