WYSIWYG control code editor
Hey there!
Tired of manually writing that long, one-line print statement, filled with control codes in order to layout static text like in a title screen, painstakingly modifying \^j and \+ values to position the text just right, adjusting \^x and \^y values of solid-filled text to draw background elements instead of using rectfill to save precious tokens, and then deciphering all of that when you need to go back and edit something? ...no? just me?
Did you know that with P8SCII control codes, you can change things like text color, size, screen position and more? Meaning, for static (and relatively positioned – camera offsets will apply) text, you never really need more than 1 argument to print, and no more than one print per layout!
For example, print("hello",8,8,5); print("world",16,16) can be written as ?"\^j22\f5hello\^j44world", saving tokens and characters.
However, there's a lot to remember with P8SCII, several potential snags, and it can get pretty unwieldy pretty quickly. That's why I made this WYSIWYG tool!
tool usage
To load in immediate mode, run load #wysiwyg, or run the cart above.
Hopefully the UI is fairly intuitive. See a demo below:
Basic usage:
- Click the plus in the layers tab to add a new text box
- With a layer selected (by default new layers are selected, but you can also select by clicking on it in the preview or in the layers tab):
- click the edit icon (pencil icon) to edit it
- use arrow keys (when not in the editing tab) or drag it with your mouse to move it
- Press the tab key to show/hide the sidebar
- Scroll through the layers list
- Click on a selected background color again to set it to none
- Before clicking "load from clipboard", paste (ctrl-v)
Note that there is no undo, so be careful and save (copy, then paste somewhere) often!
features
Everything on the right half of the screens below was done using this editor, meaning that printing each layout is just 2 tokens (although quite a few characters)! The demo print commands are given below, which you can load into the editor to inspect the different layers and see how some of the effects were done.
--effects ?"⁶jf4⁵ih⁶hᶜ2²2⁶xo⁶ye \n ⁶jg4⁴j⁶h²1⁶xm⁶yc \n ⁶jf4⁵ji⁶h⁶xn⁶yd \n ⁶jg5³h⁶h²2⁶xl⁶yb \n ⁶jg8⁵ijᶜa⁶x4⁶y6 2 tokens ⁶jl7³i only⁶jg7³iᶜ7⁶-#text:⁶jg5⁵ihany static⁶jff⁵iiᶜ0heavy outline⁶jff⁵ihheavy outline⁶jff³iheavy outline⁶jff³hheavy outline⁶jffheavy outline⁶jff⁴hheavy outline⁶jff⁴iheavy outline⁶jff⁵hiheavy outline⁶jff⁵hhᶜ7heavy outline⁶jfh⁵hiᶜ0light outline⁶jfh⁵ijlight outline⁶jfh⁴jlight outline⁶jfi³hlight outline⁶jfh⁵hjᶜ7light outline⁶jfk⁵jiᶜ0basic shadow⁶jfk⁵jhᶜ7basic shadow⁶jem⁵ijᶜ9multi-color (y)⁶jem⁵ijᶜa⁶y2multi-color (y)⁶jep⁵ihᶜ1²d⁶y6multi-color (x)⁶jep⁵ihᶜ2⁶-#⁶x2m u l t i - c o l o r ( x )⁶jgsᶜ7²9⁶y8 ⁶jfs⁵jh⁶x4⁶y6 containers \0" --wysiwyg logo ?"⁶jif⁵ijᶜ1editor⁶jif⁵iiᶜdeditor⁶jhd⁵ijᶜ1ctrlcode⁶jhd⁵iiᶜdctrlcode⁶jia⁶tᶜ0wysiwyg\n⁶jia⁶=ᶜ8wysiwyg\n⁶jiaᶜ9⁶y4wysiwyg\n⁶jiaᶜa⁶y3wysiwyg\n⁶jiaᶜb⁶y2wysiwyg\n⁶jiaᶜc⁶y1wysiwyg\n\0" --age of ants title screen ?"⁶jd7⁴i⁶w⁶tᶜ0age ants\n⁶jf6⁴j⁶-w⁶-t⁶y7. ⁶x3 .⁶x2 .⁶jt8⁵ji⁶x4⁶y6.⁶jc7⁵jh⁶w⁶tᶜ7age ants\n⁶jt8⁵ih⁶-w⁶-t.⁶je6⁵ji⁶y7. ⁶x3 .⁶x2 .⁶jj8³jᶜ0⁶x4⁶y6⁶:0060123515120800⁶jj7⁵jjᶜ7⁶:0060123515120800⁶jm6⁵ihᶜ5⁶x2.⁶x3 ⁶x2.⁶jc6⁵ih.⁶x3 ⁶x2.⁶jgc⁵jjᶜ0⁶x4difficulty:⁶jgc⁵jiᶜcdifficulty:⁶jdj⁵hjᶜ0press ❎ to start⁶jdj⁵hiᶜ9press ❎ to start⁶jqt⁵ihᶜ0v1.7⁶jqt³iᶜ6v1.7⁶jct³iᶜ0eeooty⁶jcs⁵ijᶜ6eeooty⁶jdm⁵hjᶜ0pause for options⁶jdm⁵hiᶜapause for options⁶jkf⁴hᶜ6\0" |
Support for:
- Various control code effects from the UI (tall, wide, stripey, inverted, border, x-width, y-height, fg color, optional bg color)
- Text printed near the bottom of the screen (adds
\0to the end of the string so the console doesn't scroll) - Multi-line textboxes
- Maintains the first line's x-position for subsequent new lines using the cursor home control code
- Accounts for this tall mode quirk
- Newlines show up as ■ in the editor input
- As much character efficiency as sanely possible (will carry over as many effects as possible from textbox to textbox instead of resetting them each time)
- Easy 𝘱𝘶𝘯𝘺𝘧𝘰𝘯𝘵 insertion
- Note: pasting saved output containing punyfont into a pico-8 code editor won't retain punyfont, you will have to paste it into the p8 file from an external editor
- Saving (to a 2-token print command) and loading via clipboard
- Inline custom control codes via an "insert" menu
- Useful for one-off effects on characters within a textbox, e.g. the gif above shows using wide mode for just one character, but can also be useful to make a space a littler bigger or smaller using x-width
- Warning: This is an advanced feature! Subsequent text boxes may break if you don't "undo" the one-off effect (or not, test it yourself!)
- Warning: Constructing invalid control code sequences (even as you edit) can have unexpected results - save before trying stuff!
Wow, this is really fantastic. Great job, thanks for making this!
@pixelperfect
It's written using the devkit mode (you can learn more about that here if your not sure what it is. Scroll down to the section on Mouse and Keyboard) which is intended for tools like this. Unfortunately that does mean it will only work if you have a mouse and keyboard which is why it won't work on your phone.
[Please log in to post a comment]
