How many font styles are available for Game Lab in the drawing tools? I count 5 under the documentation explanation, but was wondering if there were more that were not listed or a way to get more. Students were wondering:)
I haven’t tried others, but at least that’s a bit of variety.
As @mwood said, you can use any web safe font. That’s because GameLab runs on your browser client.
There actually is a way of loading other fonts that you can download but it’s way harder than just typing your font as a string. I actually even used it in my snake game Code.org
As you can see the font “snake” was typed in isn’t a regular font: It’s another font called “Lexend” and it’s available on fonts.google.com
But now, how to use any other font you want?
- Download a ttf or otf font, you can download it from dafont or google fonts, your choice.
- Now, rename the extension of the font to .png so code.org allows it. (For example if the name of your font was
lexend.ttfyou need to rename it to
lexend.png). Windows will give you a warning that renaming the file may make it unusable, but just ignore that, since the data of the font is still in that file.
- Load the font using the code.org assets tool by clicking the settings icon in the editor and then pressing “Manage Assets”
- The next few parts are to do in your code. In the beginning of your code, type
yourFontVariable = loadFont("https://studio.code.org/v3/assets/channelid/filename.extension")where
channelidis the id of your project. You can find it by looking at the link of your project:
filename.extensionis the name of your file.
- Now, you can use this font by using p5.js’
textFont()function. You simply put
yourFontVariableas the only parameter in
textFont()(if the name of the variable you assigned is
yourFontVariable), like this:
There’s sadly a weird consequence to using this method: Sadly, there is a weird bug that happens when you try to switch to another font that’s not the one you loaded that makes you almost unable to change some of the other text properties like textSize and textAlign. However this will only happen in that case, so if your whole project uses only one font, you should be fine.
Oh and credits to @infinitestasis since he’s the one that came up with this method.