Posted on 2/13/2022
After defining the PCEImage specification
, I wanted to create a great code editor that can color each character in the image.
Try out the editor in your browser
or read on for more details.
I was inspired by the PuzzleScript editor
(mentioned in my post about PuzzleScript
), especially how sprites are defined and styled. Whereas PuzzleScript sprites use indexed color
, PCEImage can use almost any ASCII character as a pixel so I couldn't just reuse the same editor.
I could reuse the same foundations, though! PuzzleScript's editor is built using CodeMirror
CodeMirror is super customizable and I was able to add the coloring support I needed by writing a parser
and making some changes to codemirror.js
I also added support to the editor to automatically generate PNGs and, to add a little fun, wobbling GIFs.
For the wobble effect, I was inspired by Wobblepaint
(mentioned in my PICO-8 post
) and did my best to try to capture the same organic and charming wobble zep
I also included some "Color Utilites" on the editor page: a simple color picker, a button to invoke your system color picker, and some example palettes (including PICO-8's). Check out Lospec's Palette List
for even more ideas.
If you create any cool PCEImages, I hope you'll consider submitting a pull request
to add your example! I'll find some way to credit the submitters on the page if I get any!