Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs

Bitsy Game Maker

Make little games, worlds, and stories! · By Adam Le Doux

How to edit a .bitsyfont file?

A topic by masterminer176 created Aug 18, 2018 Views: 228 Replies: 11
Viewing posts 1 to 5

I want to try and make a custom font for my bitsy game, seeing as it's a new feature, but I can't figure out how? If someone who knows can help with this, I'd very much appreciate it!

(+1)

User bistyOracle wrote a small font guide on the Bitsy Discord, it's from a month ago so a bit hard to find now, below a rough copy paste, hope it helps...


A Font Guide in 2 parts:

Okay, so in a .bitsyfont file there is: - the first line, where you name your font/how it will appear in the little dropdown menu FONT <font_name_here>; using more-than-one-word names doesn't seem to break anything in editor, but idk if it breaks anything anywhere else - the second line, where you determine how big each individual character is in pixels SIZE <width> <height> - the rest of the fontdata, which are character definitions similar to how a tile/sprite is defined, with a name definition CHAR <#> at the top and then an array of 0s and 1s signifying empty/filled pixels

CHAR 81
000000
001100
010010
010010
011010
010110
001100
000010
000000

The number that a character is defined as matters!!!! It corresponds to that character's unicode value in decimal
e.g., CHAR 80 is always gonna be a P
If it helps anybody, this site exists: https://unicodelookup.com/

So, now the interesting bit:
Unless you're using the Old Bitsy Font (called "ASCII Small" on the dropdown), what using a font does is just tack on aaall the fontdata to the end of the gamedata (after VAR definitions)
The default Bitsy fonts in the dropdown contain..........a LOT of different characters. So many.
Which means......gamedata be big fam
BUT, from what I can tell, Bitsy still works perfectly fine if you decide to delete the CHAR definitions you don't want from the gamedata. Just make sure you're not deleting a character that you end up using because things'll get......weird
Also I'm not sure what the purpose of CHAR 0 is, but if experience has taught me anything, uhhh don't delete it(edited)

Unicode Lookup: convert special characters
Unicode Lookup is an online reference tool to lookup Unicode and HTML special characters, by name and number, and convert between their decimal, hexadecimal, and octal bases.

Tips about writing your own fonts: - DO NOT ADD ANY UNECESSARY LINE BREAKS IN YOUR .BITSYFONT FILE OR WHILE WORKING WITH FONTDATA IN THE GAMEDATA WINDOW because Bitsy DOES NOT LIKE that and possibly will delete large chunks of your fontdata - The custom font-upload-y-thingy in the editor seems to be a bit moody, so if you're planning on making tweaks to your fonts as you're developing, I suggest doing it directly in the gamedata instead of trying to upload a new .bitsyfont every time
- You can change the character size to anything you want. I don't know what the max limit is, but the letters in that Randy G. gif above are 30x30px and doing just that was.......tedious. The text box seems to adjust with the height of the letters, leaving enough space for two lines of dialogue to fit. (if there's a way to hack that, so maybe like, it only gets as tall as one line, I'd like to know, because that sounds like it'd be cool). Also, the number of characters that fit on a line depends on how wide the characters are
- also be careful that you 1-and-0 your letters correctly bc if it doesn't match the SIZE you defined, it won't display your letter

Thanks!

Have a look at this tool as well: https://seansleblanc.itch.io/fontsy

(3 edits)

has anyone actually managed to make some custom .bitsyfonts ? looking for a writerly/cursive font but not sure if I would want to make it myself. fontsy looks like the way to go though to do that, I wIsh that you could click and drag to draw pixels (like in Bitsy) though instead of having to click each one individually...

edit: actually you can just download the .bitsyfont.png from Fontsy, edit it in your preferred image editor, then reupload to Fontsy and convert it to plain .bitsyfont, so you can do all the clicking and dragging that you need to draw a font, so that works!

Is there any way to change the color of the font, i.e. so that it's not white?

(1 edit)

add {clr1}, {clr2}, {clr3}, etc. in your dialog box!

for example:
If you open a new project and change the cat's dialog to this:
"{clr1}I'{clr1}m a cat{br}{clr2}meow"

I'renders in the background's dark blue color because of the first {clr1}, then text afterward goes back to the default color because of the 2nd {clr1}
m a catrenders in sprite white, like default
meowrenders on a new line (because of {br} ) in wall tile light blue


(1 edit)

I guess that is a good enough way to do it. You have to put it in every dialogue box, but not sure if there would be a better way, maybe a way to change the default white to something else?

Also, any way to change the color of the white triangle that appears in the lower right corner of the dialogue box? (I already know from the FAQ the way to change the background color of the dialogue box)

(2 edits)
  • to change your game's default text color, look for:

var pxl = 4 * ( ((top+(y*text_scale)+sy) * (textboxInfo.width*scale)) + (left+(x*text_scale)+sx) );
                            textboxInfo.img.data[pxl+0] = char.color.r;
                            textboxInfo.img.data[pxl+1] = char.color.g;
                            textboxInfo.img.data[pxl+2] = char.color.b;

  • delete the char.color.x bits and replace them with RGB numbers like so:

var pxl = 4 * ( ((top+(y*text_scale)+sy) * (textboxInfo.width*scale)) + (left+(x*text_scale)+sx) );
                            textboxInfo.img.data[pxl+0] = 125;
                            textboxInfo.img.data[pxl+1] = 10;
                            textboxInfo.img.data[pxl+2] = 60;

/////////////////////////
/////////////////////////

  • to change the dialog box's little next arrow color, change these RGB numbers from 255 to something else:

var pxl = 4 * ( ((top+(y*scale)+sy) * (textboxInfo.width*scale)) + (left+(x*scale)+sx) );
                            textboxInfo.img.data[pxl+0] = 255;
                            textboxInfo.img.data[pxl+1] = 255;
                            textboxInfo.img.data[pxl+2] = 255;


(1 edit)

Thank you for all this! Should be noted that changing the text color like this will make ALL the text in your game that color, even text inside {clr} tags. Took me a bit of messing around and being confused to realize this. Will definitely be hacking the next arrow's color with this though

Deleted post
(+1)

oh dang! that's probably not the way you'd like it to work, huh? 😅 I'll look back through tomorrow and see if i can figure that one out, the "char.color.r/b/g" or whatever was probably there for a reason instead of just the numbers for white.


EDIT: I figured out the problem! We were changing the text color inside something that updates every frame, instead of somewhere it's set once and referenced to.
To change the default text color (and, importantly, have {clr1, 2, or 3} tags still work) look for this line:

this.color = { r:255, g:255, b:255, a:255 };

and change the RGB values here to whatever you want them to be! :- )

Fantastic, thanks for figuring that out