DrawText with MCPL and Icon support

Started by Yellownakji, January 27, 2019, 02:38:05

Previous topic - Next topic

Yellownakji

This thread is more of a showcase than a question.   This is the NG/BMX section, so i figured it would be okay to post it here.

Anyways, i've made a little function called 'DrawText2', which utilizes the standard 'DrawText' function, but adds the ability to display icons (any image..  icons for controller buttons or whatever you please) and MCPL (Multiple Colors Per Line).  See the screenshot below.

Just wanted to share this basic version with everyone; I'll integrate something similar in my 'FMX bitmapfont' tools soon.  Also, it should support the 'ImageFont' related functions that go in hand with 'DrawText' as well, though i haven't tested myself.

Bye.

Yellownakji

Also, '&&z' is the rainbow color index, for those curious.  It uses 'MS-DOS/CMD' 0-F colors for a base with G-Z being free for customs.

Qube

Cool ;D - I do a similar thing with my WriteText function in AGK but my syntax is :


WriteText( 1, 10, 10, "This is my icon ##" + Str( image ) + " it's awesome" + " and this is %%255000000 red text")


Font number, x, y, text

I figured I'd never need to print ## or %%  together so thought they were safe symbols to act as actions.

Does your routine account for font kerning?. The app I use to create bitmap fonts can output the kerning settings in a text file but I'm not fully convinced it's entirely accurate. Either that or my code is duff :P. Tends to work fine in higher res than lower res so would that be more of a TTF issue?, I dunno.

I notice the vertical alignment of the icons is not centred. Is that because the height of the icons you used is not trimmed to match the dimensions? or for any other reason?.

Great to see some behind the scenes routines in action :)
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

Yellownakji

#3
Quote from: Qube on January 27, 2019, 04:06:25
Cool ;D - I do a similar thing with my WriteText function in AGK but my syntax is :


WriteText( 1, 10, 10, "This is my icon ##" + Str( image ) + " it's awesome" + " and this is %%255000000 red text")


Font number, x, y, text

I figured I'd never need to print ## or %%  together so thought they were safe symbols to act as actions.

Does your routine account for font kerning?. The app I use to create bitmap fonts can output the kerning settings in a text file but I'm not fully convinced it's entirely accurate. Either that or my code is duff :P. Tends to work fine in higher res than lower res so would that be more of a TTF issue?, I dunno.

I notice the vertical alignment of the icons is not centred. Is that because the height of the icons you used is not trimmed to match the dimensions? or for any other reason?.

Great to see some behind the scenes routines in action :)


Neat, Qube.  I was actually thinking of doing &^ for a "RRRgggBBB" RGB identifier, in case someone just wanted to write it manually and not remember what ID they stored a custom
color in OR if they ran out of IDs.   I create my bitmaps with the BLide Font Machine tool, as i use BLide for my IDE.  However, i export as a MOJO output and i don't put the glyphs into a sheet.  Each glyph is it's own PNG, and the PNG is it's ASC() id + ".PNG".   Only the Mojo output let's you do this, and i pick this method because exporting for blitzmax creates an "FMF" file which is bulky, ugly and ridden with useless data..  not to mention is a ram whore... (pardon my french).  The issue you're having is well, because the smaller the number, the harder it is to kern properly.  Pixel by Pixel, so decimal pixels don't exist, so i think it just rounds.

I created a binary called "FMX", which stands for Font Machine X.   It takes the Mojo output, including unicode, and stores all the glyphs in a single ".FMX" file, which is then loaded by
my functions.   Currently, "FMX1" let's you load multiple fonts as it's just a "TFontMachineX" and you can store as many of those variables as you need.  Along with that, you can also
manipulate rotation, scale, edit X and Y padding (kerning) etc.  BUT, it does not support the Multi-Color per line like this does, nor icons unless you wanted to make some of the glyphs icons, which is dumb.   Although, and this is a side note, since i export as mojo, i do have access to all the glyph images and can edit / cut down file size for each one... therefore, that's totally possible.  I'm never translating into Greek so i could definitely use up those symbols however, this is not optimal.   Eitherway, you can't edit FMFs without retarded reverse engineering, which i've painstakingly done.  It's a really stupid format and it's way too heavy.   That's why i made FMX;  It's light, can let apps still pull 60fps even on a pentium 3 processor with 3D / 2D heavy titles (tested) and overall has better functionality.  I'm definitely going to be adding these things to FMX, soon.  I just need to re-write some things and then perhaps i'll create my own repository page and release it with a "mention credit" license.

The icons can be any dimension/size..  They will always be drawn with their (Y - (imageheight /2)) to center them roughly.  It's not perfect and it does not currently abide by scale.   I don't manipulate the handles here at all, although, the user could definitely do that.  You just have to go into the icon index and get rid of the (Y - (imageheight /2)) clause, then when you load your image, mod the handle to your liking.   Functions are
editable so it can always be changed, of course.   You could also make it so some images have a handle and some use (Y - (imageheight /2)).

I'm not sure what the default font is... 12x12?  Most of these icons are 20x20.

Qube

Thanks for the info, it's great to hear how others approach these things.

QuoteNeat, Qube.  I was actually thinking of doing &^ for a "RRRgggBBB" RGB identifier
It's a handy feature to have and aids in for / next routines when it comes to creating fading / coloured text.
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.