Homebrew [Release] Homebrew Launcher with grid layout

  • Thread starter Thread starter mashers
  • Start date Start date
  • Views Views 672,143
  • Replies Replies 4,218
  • Likes Likes 139
About title selector: probably a side effect of moving icons to top screen, but not showing that kind of information in the title selector screen. If you put svdt in your 3ds folder and try to run it you should see the problem pretty easily.
 
Yesterday was a busy day. I spent hours rewriting the PNG->BIN utility in PHP. The JavaScript version was great, especially with @suloku's updates, but very large images like the font bitmap PNGs the browser would hang or produce a corrupt file. Once my PHP version is a bit more user friendly I will share the source and a link to a hosted version. For now it's functional and seems to be happy to convert files of pretty much any size.

This combined with my FNT to C struct conversion tool has allowed me to get my custom font rendering engine working. As you can see from the attached screenshot, it works! The "blargSNES" text on the top screen is displayed in Roboto, whereas the rest of the text is still in the original ctrulib built in font. Still to do on the font rendering:
  • There are some issues with alignment of certain characters, such as capital S which is a pixel too high (and there are many others). I'm going to try recreating the font using a different TTF conversion tool in case that is what is causing the problem. Otherwise I might have to manually fix the character definitions in the C structs (not ideal...)
  • The font bitmap PNG currently contains all four channels (RGBA). That means the text is drawn in whatever colour it is in the PNG. I need to modify my PNG to BIN conversion script to output only the alpha channel. Then I can simply create a full image in memory using any RGB values plus the alpha values from the BIN file as a transparency mask. Basically this means that the text can be drawn in any colour, and the bin file will be a quarter of the size.
Edit - attached screenshot.

image.jpeg
 
Last edited by mashers,
Just a quick update on what I've achieved today.
  • Font colouring now works, so the bitmap data is used as an alpha mask and my font drawing function takes RGB values and renders the text in the specified colour
  • I think the problem with the alignment of the fonts is due to Littera outputting incorrect YOffset values for the characters. For example, some characters which are clearly supposed to sit on the line are being given YOffset values which are either positive (pushing them below the line) or negative (making them float above it). I can't figure out why Littera is doing this, and I can't find any other tool which generates FNT+PNG files from TTF inputs. So I'm going to write a font test function which will show all the characters in the font on the 3DS screen. I can then load it in Citra and take a screenshot, and then manually calculate the correct YOffset values for any characters which are not in the correct position by zooming in to the screenshot and counting how many pixels they are out. I will then have to change the YOffset values for these characters in the C struct. I made this job a bit easier by adding an option in my custom font converter to force all of the YOffsets to zero. Since most characters sit on the line, I should only need to update a few characters (e.g. 'q', 'y', 'p', 'g' and 'j' which all have tails). This, however, will be a job for another day as I'm exhausted!
 
Just a quick update on what I've achieved today.
  • Font colouring now works, so the bitmap data is used as an alpha mask and my font drawing function takes RGB values and renders the text in the specified colour
  • I think the problem with the alignment of the fonts is due to Littera outputting incorrect YOffset values for the characters. For example, some characters which are clearly supposed to sit on the line are being given YOffset values which are either positive (pushing them below the line) or negative (making them float above it). I can't figure out why Littera is doing this, and I can't find any other tool which generates FNT+PNG files from TTF inputs. So I'm going to write a font test function which will show all the characters in the font on the 3DS screen. I can then load it in Citra and take a screenshot, and then manually calculate the correct YOffset values for any characters which are not in the correct position by zooming in to the screenshot and counting how many pixels they are out. I will then have to change the YOffset values for these characters in the C struct. I made this job a bit easier by adding an option in my custom font converter to force all of the YOffsets to zero. Since most characters sit on the line, I should only need to update a few characters (e.g. 'q', 'y', 'p', 'g' and 'j' which all have tails). This, however, will be a job for another day as I'm exhausted!
Good job man! I'm loving this!
 
Just a quick update on what I've achieved today.
  • Font colouring now works, so the bitmap data is used as an alpha mask and my font drawing function takes RGB values and renders the text in the specified colour
  • I think the problem with the alignment of the fonts is due to Littera outputting incorrect YOffset values for the characters. For example, some characters which are clearly supposed to sit on the line are being given YOffset values which are either positive (pushing them below the line) or negative (making them float above it). I can't figure out why Littera is doing this, and I can't find any other tool which generates FNT+PNG files from TTF inputs. So I'm going to write a font test function which will show all the characters in the font on the 3DS screen. I can then load it in Citra and take a screenshot, and then manually calculate the correct YOffset values for any characters which are not in the correct position by zooming in to the screenshot and counting how many pixels they are out. I will then have to change the YOffset values for these characters in the C struct. I made this job a bit easier by adding an option in my custom font converter to force all of the YOffsets to zero. Since most characters sit on the line, I should only need to update a few characters (e.g. 'q', 'y', 'p', 'g' and 'j' which all have tails). This, however, will be a job for another day as I'm exhausted!

If you want, you can use the font routine I used in BreadBox, it's not perfect but reading your description it seems to work in a similar way.
 
  • Like
Reactions: kiwiis and SLiV3R
Hey guys,

After spending quite some time manually adjusting the character baselines for my converted fonts, I wasn't entirely happy with the result and realised I would need to repeat the process for every size of every font I wanted to use. I decided to find another way of converting the fonts, and then discovered that PHP can load a TTF font and draw text directly into an image. Not only that, it can also calculate the size of each character in pixels in any given font size. This was exactly what I needed, so I've written a PHP script which allows you to upload a TTF font file, specify the output sizes, and generate the PNG image bin file and the c header and structs to use the font. Best of all, unlike Literra, PHP seems to render the characters in the image with the correct baselines so there is no messing around with y offset values. PHP also seems to render the image data in much higher quality than Littera. I'm extremely happy with the results and will be ready to upload an update with new fonts soon.


The secondary upside of all this is that over the past few days I have devised a complete fonts solution for 3DS homebrew. This solution does not require any extra libraries - it works on plain ctrulib. My web based font converter will take a TTF file and generate all of the files needed to use the font with my custom text drawing functions. All the code is generated automatically - you just drop the files into your project, include the header for the font, and call the drawing function.

The font engine will be released separately once the fronted for the converter is a bit tidier.
 
Hey guys,

After spending quite some time manually adjusting the character baselines for my converted fonts, I wasn't entirely happy with the result and realised I would need to repeat the process for every size of every font I wanted to use. I decided to find another way of converting the fonts, and then discovered that PHP can load a TTF font and draw text directly into an image. Not only that, it can also calculate the size of each character in pixels in any given font size. This was exactly what I needed, so I've written a PHP script which allows you to upload a TTF font file, specify the output sizes, and generate the PNG image bin file and the c header and structs to use the font. Best of all, unlike Literra, PHP seems to render the characters in the image with the correct baselines so there is no messing around with y offset values. PHP also seems to render the image data in much higher quality than Littera. I'm extremely happy with the results and will be ready to upload an update with new fonts soon.


The secondary upside of all this is that over the past few days I have devised a complete fonts solution for 3DS homebrew. This solution does not require any extra libraries - it works on plain ctrulib. My web based font converter will take a TTF file and generate all of the files needed to use the font with my custom text drawing functions. All the code is generated automatically - you just drop the files into your project, include the header for the font, and call the drawing function.

The font engine will be released separately once the fronted for the converter is a bit tidier.
What font is it going to be? Because Roboto is bae. :)
 
It's supposed to be meant as before anything else
But then people use it nowadays as a way of slang for love.
Actually, it's Danish for poop, but the internet has made the word into love...
Poop is love? Poop is life? Internet, what have you done...
 
  • Like
Reactions: klear
Actually, it's Danish for poop, but the internet has made the word into love...
Poop is love? Poop is life? Internet, what have you done...
Well poop is a byproduct of metabolism which is essential to all life (on Earth, that we are aware of). Poop is also full of microbes and minerals that nourish other organisms. So yes, poop is life :p
 
Well poop is a byproduct of metabolism which is essential to all life (on Earth, that we are aware of). Poop is also full of microbes and minerals that nourish other organisms. So yes, poop is life :p
Aaaand now I have a sig.

Not only have you made a beautiful homebrew menu, you've made my sig beautiful too. Thank you.
 
  • Like
Reactions: bunny365
Can you make it so that the blue bar on the top of the bottom screen doesn't open the folder menu? Since there's a button for it already there anyway.
 
Aaaand now I have a sig.

Not only have you made a beautiful homebrew menu, you've made my sig beautiful too. Thank you.
Hah! I've never been someone's sig before :shy:

Can you make it so that the blue bar on the top of the bottom screen doesn't open the folder menu? Since there's a button for it already there anyway.
I can, but I don't see what harm it does that tapping on the folder bar opens the folders list. Or is it causing a problem using the toolbar buttons to the left and right?
 

Site & Scene News

Popular threads in this forum