Text questions
Monkey Forums/Monkey Programming/Text questions
| ||
| Hi there! I have some philosofical questions regarding how to display text in the best possible way. How do you people manage your text in your applications with respect to text wrapping, text size etc? Let me give some examples to clarify what I'm after: * I have tried out AngelFont and it's working fine. I have manage to generate my own bitmap font by using BMFont and then display it in my application using the AngelFont classes. However, the text is wrapping inside the SimpleTextBox. Sure, I have supplied a width for the text box, so the box has a fixed width. The problem is that the box does not have a fixed height, so if I send too much text too it, the height of the entire text mass might become too large. Okay, there is (Matrix) scaling too, but since I don't know what the final height will be of the text box, I don't know how much to scale down. It becomes a catch-22 scenario. * I was then thinking that I instead could pre-generate bitmaps (in en external tool) of all text for my application. Then I would be in total control of the text wrapping and text size. Drawback is of course that I would need around 5-7 MB of bitmap data just for the text. * I was also thinking of building my of text box class, so that I in some way could control both width and height of it, and the text would scale automatically. The problem then is that the text could appear in different sizes, in different boxes, depening on amount of text in each box. That would turn out a bit ugly. I'm not sure I managed to present my problem clearly, but I would really appreciate some insight in this matter. Would be great to hear how others manage their text. Thanks! |
| ||
| I use Ignition so I can't really help with other font libraries and tools, but I'm sure Diddy/FantomEngine have some bitmap font support so might be worth a look at those? A little tip - I'm not sure if it's the same for you with BMFont but when I generate my bitmap fonts with the tool that comes with Ignition, the bitmap files are 1mb+ in size for whatever reason. I load them into Photoshop, simply re-save them and they save at 11k-13k in size - big difference! |
| ||
| Thank you rIKmAN for your reply. My bitmap fonts coming out of BMFont were tiny (~15kB), so that was all good. |
| ||
| As i produce apps, where the user can change texts, I often cannot use pre-rendered texts. But if you render all texts with 60fps by angelfont, this will cost a lot of performance. So I render a new word or line or text once in the app and grab it into an image. This will cost a lot of performance in the first moment, but will save performance during the game. A lot of text, like manuals, etc... I combine with the possibility of scrolling the image up/down. Fixed width and height, but the height can be bigger than the screen. |
| ||
| FontMachine covers this very nicely too, and it's very quick rendering wrapped text. This is a very old demo of JungleGui using FontMachine to render multiline wrapped text (select the TextBox demo) http://www.jungleide.com/samples/junglegui06/MonkeyGame.html |
| ||
| So I render a new word or line or text once in the app and grab it into an image. @Midimaster: How to accomplish that? How to grab your text into an image? I mean, I know how to grab an image of the screen, or parts or it, but if you grab a word or some text, you will also grab its background, I guess. So I guess then that you only can reuse that grabbed word/text on the same type of background as it was grabbed? Side question: Is there a way to render something outside the screen and grab that into an image? @ziggy: I will have a look at FontMachine. Thanks! |
| ||
| I grab the text rectangle with a white text on a black background. A screen pixel returns RGB. The R value become the Alpha value of the image, the RGB value always becomes 255,255,255. A screen pixel equal to 0 becomes Alpha 0 and RGB is not relevant. Example Screen RGB 255,255,255 -> ARGB 255,255,255,255 Example Screen RGB 123,123,123 -> ARGB 123,255,255,255 Example Screen RGB 0,0,0 -> ARGB 0,0,0,0 You can render something in OnRender(), then grab it, then CLS and exit OnRender(): The user will see a black screen. Or render first the text, then grab it, then CLS, then render the normal game screen then exit OnRender(): The User will see only the game. |
| ||
| @Midimaster: I grab the text rectangle with a white text on a black background. A screen pixel returns RGB. The R value become the Alpha value of the image, the RGB value always becomes 255,255,255. A screen pixel equal to 0 becomes Alpha 0 and RGB is not relevant. Example Screen RGB 255,255,255 -> ARGB 255,255,255,255 Example Screen RGB 123,123,123 -> ARGB 123,255,255,255 Example Screen RGB 0,0,0 -> ARGB 0,0,0,0 Wow, this is a lot of good information! Thanks! I am not exactly following you, but I will re-read and digest the information. You can render something in OnRender(), then grab it, then CLS and exit OnRender(): The user will see a black screen. Or render first the text, then grab it, then CLS, then render the normal game screen then exit OnRender(): The User will see only the game. This makes perfect sense. Thanks a lot for this tip. |
   |