Welcome to my Text Box Generator. Lemme tell you all about how this thing works, anything that's COMPLEX will be marked in red (like this) to make what you have to worry about more clear.
Complex Mode gives you more customizability, however it isn't as clean, and might not play well on devices like phones. Anything that uses more than one of each "element" should probably be done in complex mode.
There's a few basic settings, such as the width and height of the generated image, and if you want a margin around the image. If checked, before anything is generated, the image will be filled with black, including a 6px border. This will remove transparency however, so don't turn this on if you want your final image to be see through!
You can also pick the Style of the image, which'll set up a bunch of other stuff. You can pick from the built in presets, or import your own from a file of the ctbt format. More on creating those later.
The order in which each element renders is boxes, portraits, text, and overlays, and within those groups, higher elements are rendered first.
One last note, at the top is an Import option, where you can put a ctbt file to add the elements within without removing the current ones, which could be handy!
Each box will have these settings.
To begin, you'll notice the Import Character field. This allows you to upload ctbc files , which contain a character and their expressions. More on that in the Character Editor though!
The settings for each portrait is as follows.
Text is what you've come here to make, so of course it's got options AND commands!
The text itself is... the text itself, duh. You write letters in. However, it has a few commands you can insert mid text!
Overlays are the last element type, going above everything else.
In complex mode, you'll see there can be multiple of each type. In simple mode, you only see the highest element of each type, but here you see them all. You'll also have a button that will add a new element of said type, appended to the bottom.
In addition, every element has the name setting.This property is purely cosmetic, and used for specifying the purpose of the element within the style.
Alongside that, every element has three buttons at their bottom. In order, the ^ button will move it up by one (rendered before any lower elements of the same type), the x button will remove the element entirely, and the v button will move the element down by one (rendered after any higher elements of the same type.)
Generating the box is as simple as clicking the button! Just know, it won't update until you click, and it could take a few clicks if everything doesn't render out!
You can stack boxes into one image! Click Add to Stack to append the currently generated box to the stack. Each box will be added without a margin, though it cannot re-add transparency!
Refresh Stack will regenerate the stack image, and Clear Stack removes all the boxes.
Each box has three buttons next to it. In order, the ^ button will move the box up one, the x button removes it from the stack, and the v button will move the box down one.
Boxes are put into the stack from the top most box to the bottom most, and in reading order (ie, go left to right, then down one, repeat). The amount of times it'll go right before going down one and to the left is determined by the Stack Width.
If the boxes aren't all the same size, it'll do it's best to center them in their spots. If the margin's on, there'll be a 6px black margin between each box (alongside the 6px border for the whole image).
To save a custom style, just click the Save Custom Box button next to the Generate Box button, and it'll make a ctbt file with all your settings (aside from portrait contents and the such).
If it saves with a .txt, because some browsers are annoying, just remove that bit!