Log In  
Follow
Sosasees
touch keyboard design for pico-8
by
one-off character creator
by
color contrast table
by

Sosasees
[ :: Read More :: ]

i made a new profile picture for my Game Jolt and itch profiles, so for Lexaloffle i made it again but in PICO-8:

Cart #sosasees_pfp_jesotefizu-0 | 2024-01-16 | Code ▽ | Embed ▽ | No License

gradient effect is from this post:

[New PICO-8 Feature] Enabling more than 16 colors on the screen by @BoneVolt

P#140222 2024-01-16 19:48 ( Edited 2024-01-16 19:52)


Sosasees
[ :: Read More :: ]

based off 'PICO-8 0.2.5', section 'Variable Width P8SCII Fonts', i changed the #font_snippet to the full default PICO-8 font:

Cart #font_template-0 | 2023-03-09 | Code ▽ | Embed ▽ | No License
1

i find this #font_template more useful than @zep's original #font_snippet because it has All P8SCII characters

P#126862 2023-03-09 19:42


Sosasees
[ :: Read More :: ]

i made a new profile picture for myself, because

  • i got the idea to draw a lavender-colored figure with a spiral on their belly as my profile picture
    • i found this idea too cute to not do

because i use this website just for PICO-8, i wanted to make a profile picture that can be shown in PICO-8

tools

i did not use PICO-8 as my only tool.
just like with most PICO-8 cartridges that i make,
making and referencing mockups in Pixelorama is really important to save hours of time

limitations

i could not find a color combination with the PICO-8 extended palette that leaves the important details visible (according to my color contrast table) that has the figure in lavender.
so i changed the figure to purple — a color that is close enough to lavender that it still looks great

profile pictures

default profile picture, that i had before

new profile picture

Cart #sosasees_pfp_seyegeyiwo-1 | 2022-12-31 | Code ▽ | Embed ▽ | No License
1

P#123390 2023-01-01 00:23 ( Edited 2023-01-01 00:31)


Sosasees
[ :: Read More :: ]

the recent release of PICO-8 Education Edition proved that the PICO-8 editor can work on phones, but

> Sorry, touchscreen typing is not available ~ please plug in a keyboard!

i know why PICO-8 doesn't support touchscreen typing:
P8SCII is special, so it needs a special touch keyboard to work.

the standard phone keyboard has no [ctrl] and [tab] keys, that are important for PICO-8 programming:

  • [ctrl] is needed for shortcuts like [ctrl]+[s]=Save or [ctrl]+[g]=Grid
  • [tab] is needed for code indentation
    (you can do this with spaces, but using tabs is the right way because you can change the tab width in Config)

also, using [shift] in PICO-8 is much different than everywhere else:
unless you choose to use Puny mode, [shift] switches the letters to glyphs instead of uppercase letters.
so showing that on the keyboard really helps.

here is my PICO-8 touch keyboard draft

(in 1× scale, so that it can more easily be worked into an actual PICO-8 app)

default state of the keyboard

default state of the keyboard; [ctrl] key activated

default state of the keyboard; all keys pressed

glyph keyboard ([shift] key activated)

glyph keyboard; all keys pressed

puny font keyboard

controller

controller; right arrow button pressed

controller; all buttons pressed

this is just a visual draft, so we need testing to confirm that it's comfortable to use.

also, the images are wider than PICO-8's screen width of 128px, which i think is okay because real keyboards of retro computers always looked more crisp than their screens.
if anything, the touch keyboard draft looks not crisp enough.

we could use the pixelated keyboard for testing the form factor, because it's easier to edit than vectors.
but once we know the final form factor, we can trace the pixel image in a vector program to get a realistically crisp keyboard.

P#123352 2022-12-31 12:22 ( Edited 2023-01-04 11:50)


Sosasees
[ :: Read More :: ]

i want the shells of some of my cartridges to look different than usual:

cartridge source
pico-8 cartridge with a blue-green shell "my less good cartridges", section "2022-11-21: Welcome! — special edition 2"

more examples

so i created a GUI tool to replace shells of pico-8 cartridges

download & source

every part of this program is licensed under one of these licenses:

how to use

the GUI has these steps:

  1. put the original cartridge into the 'original cartridge' field
  2. put the replacement shell in the 'edited shell' field
  3. save the edited cartridge

after saving the new cartridge, you can load and run it in pico-8

limitations

filetype limitations

this program acepts only PNG files

image limitations

  • you can't change the image size of the cartridge
  • you can't move the 128×128px thumbnail that will be shown in splore and on the lexaloffle bbs
    • you also can't change the size of the thumbnail area
  • if you use more than 16 colors from the pico-8 extended palette in the 128×128px thumbnail area, the thumbnail will look unnatural and wrong in splore
    • if you use colors outside of the pico-8 extended palette in the thumbnail area, the thumbnail will look even more unnatural and wrong in splore

early history

you can read about the pre-release history of this tool in 'my less good cartridges':

  • section "2022-11-20: Welcome! — special edition"
  • section "2022-11-21: Welcome! — special edition 2"
  • section "2022-11-25: the impossible cart"
P#122051 2022-12-28 18:48 ( Edited 2023-03-04 06:56)


Sosasees
[ :: Read More :: ]

Cart #it_is_a_mystery-1 | 2022-12-24 | Code ▽ | Embed ▽ | No License
3

sources

development log

i started when i got a YouTube recommendation of the 'it is a mystery' meme.
it took me three attempts in 2 weeks (with breaks) to finish this cartridge

most of the 2 weeks were forced breaks, because i had a lot of school work before winter holidays began.
so i have done one-third of the work (the whole last attempt of transcribing the song) today, because the holidays let me find more free time

the other 2 attempts sounded bad and not like music, because i did not know anything about how to read sheet music. i deleted them after i finished the good cartridge

P#122917 2022-12-24 02:42 ( Edited 2022-12-24 10:53)


Sosasees
[ :: Read More :: ]

i made a spooky scene to test if i could generate visual details procedurally — yes, i could

Cart #spooky_decogen_berodajuya-0 | 2022-12-06 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
2

before i could create the full scene, i made a fake screenshot in a pixel art editor
so i could look at the picture and imagine which commands i would need to add the details

behind the scenes

warning: long text

i added details by selecting tiles that should have added details, storing the tile numbers as variables on a code page (the 2nd one), then programming on the next (3rd) codepage how the tiles should be decorated.
the last (4th) code page has only the main loop, and the first one has no code because it's for a bit of extra documentation.

the decogen…draw() (decoration generation draw) function checks every tile for if it's one of the special tiles, and then decorates if it is.
each tile has distinct decorations, so they have very different approaches to being decorated:

  • pillars are generated from the base (the only pillar sprite in the spritesheet).
    they check for a ledge above to know how long the pillar should be.
    when they hit it, the rest of the pillar is drawn from top to bottom, with three parts
    • the base sprite but mirrored, is the capital (the top)
    • a dark line shades the capital
    • a rectangle connects the base and the capital
  • every brick wall tile on the map checks if it is below a ledge tile.
    if it is, it draws a shaded row of bricks below the ledge
    using a one-off character that i made in my one-off character creator
  • the lamp's decoration has two parts
    • the pole is almost like a pillar, but in reverse:
      the lamp checks the tiles below the bulb (the only lamp sprite) until it hits the floor,
      then it draws the pole. it has four parts
      • mirrored base sprite as capital
      • line that shades the capital
      • rectangle that connects the pillar
      • base sprite used as-is for the base
    • the emission lines are just six lines that get drawn next to the bulb — no checks needed
  • the door has only its bottom tile in the spritesheet.
    the part above gets generated — no checks needed.
    it has 4 parts
    • the top third of the door is another one-off character
    • the row of bricks above is another one-off character, but only the bright pixels
    • the single dark pixel of the brick row is drawn with pset()
    • i added a black outline to the left and right of the door
      using 2 lines
  • the clock is also getting decorated with no checks. the decoration has 3 parts
    • a black filled circle for the clock face
    • a bright hollow circle for the outline
    • because the filled circle overdrawed the clock hands,
      the clock hands sprite gets replaced
  • every cloud tile checks if it has an empty background tile to its left or right.
    if it has, it draws a line to complete the outline
before after

cost

this scene uses 18 out of 63 sprites from the first sprite page
at the cost of 563 out of 8192 tokens.

if i had drawn the decorations in the spritesheet, i would have saved all tokens — at the cost of 22 more sprites

  • 4 more pillar sprites
    • 1 long connecting piece
    • 3 tile variations of the capital (the top of the pillar)
      • capital below light ledge
      • capital below dark ledge
      • capital below lamp
  • 6 sprites for the emission lines around the lamp
  • 1 sprite for the top part of the door
  • 9 sprites for the clock face and surrounding wall
  • 2 sprites to complete the outlines of the clouds

the original 18 sprites with these 22 more sprites would be 40 sprites. this would leave only 23 more sprites on the first sprite page

P#121947 2022-12-06 22:14


Sosasees
[ :: Read More :: ]

i just realized that the market for one-off character editors is oversaturated, but i already made my version, so here it is:

Cart #one_off_character_create-0 | 2022-12-03 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
8

i got inspired by this π˜†ou𝘁ube video from 𝗹azy 𝗱evs to make a character editor.
i don't know how i will want to use one-off characters yet — i really just thought that making this program was good for practicing 𝗽𝗢𝗰𝗼-8 programming

controls

buttons keys (on π—Ύπ˜„π—²π—Ώπ˜π˜‡ keyboard) action
d-pad arrow keys move the cursor
π˜… π˜… / 𝗺 paint or erase the pixel over the cursor
𝗼 𝗰 / 𝗻 copy the character to the clipboard

my opinion

i just tried the other editors, and i find them not as nice as this one.

i like this editor better than the other editors because of the minimal design with the carefully-chosen colors, and because it has no features except the ones that i know i need:

  • edit the character
  • copy the 𝗽8π˜€π—°π—Άπ—Ά character code
  • visually balanced pixel grid
  • realistic inline preview of the one-off character
  • preview of the 𝗽8π˜€π—°π—Άπ—Ά character code

or i like this editor better, only because i made it. please tell me your opinion

P#121122 2022-12-03 03:38


Sosasees
[ :: Read More :: ]

i will need to check the color contrast often when picking colors from the 𝗽ico-8 palette for future projects. so i made a color contrast table to make it faster than using the contrast checker:

you can find the contrast level between 2 colors in the table by doing this:

  1. start from one of the 'BG' fields, corresponding to the background color you want to try
  2. navigate straight up or down the color palette in the same column.
    every field shows the contrast level of the color if used as the foreground color on top of the column's 'BG' color

the numbers from 0 to 3 are contrast levels. the higher the contrast level, the better the readability. the contrast levels mean:

contrast level description
0 ❌❌ nothing is readable. 𝗱on't use colors with contrast this poor unless you can't avoid it, or on elements that are just decoration
1 β­•βŒ graphical objects like icons and borders are readable. large text is also readable. normal-sized text is not readable
2 β­•βŒ large text is easily readable. normal-sized text is also readable
3 β­•β­• large and normal-sized text are easily readable

πŸ’‘ secret tip

the contrast between 2 colors is the same when you swap foreground and background color.
so you can not only use the 'BG' fields to pick a background color and the rest of the column to pick a foreground color:
you can also use the 'BG' fields to pick a foreground color, and the rest of the column to pick a background color

ℹ️ information sources used

P#121063 2022-11-23 21:05 ( Edited 2023-01-02 17:26)


Sosasees
[ :: Read More :: ]

the current version of PICO-8 (0.2.5) for Windows has white window title bars:

the white title bar is distracting, no matter if app colors are set to light mode or dark mode in Windows settings.

this mockup made in Microsoft Paint shows the Windows title bars in dark colors from the PICO-8 palette:

and here is a much more coarse hand-pixeled mockup of how the colors could look like:

  • Inactive window's title bar (right)
    • background: PICO-8 color #0
    • foreground: PICO-8 color #6
  • Active window's title bar (left)
    • background: PICO-8 color #1
    • foreground: PICO-8 color #7
P#72567 2022-11-20 14:47


Sosasees
[ :: Read More :: ]

this is where i dump my less good cartridges

i am doing this

  • because i want to publish even my less good cartridges
  • i also don't want to clutter the BBS, so i put them in the same thread

2022-11-17: Welcome!

i gave up on PICO-8 years ago when i buyed it since i got overwhelmed fast.
now i rediscovered PICO-8 and wanted to try it again, so i did.
this is my first PICO-8 cartridge i ever made.

Cart #welcome_tigayizadu-1 | 2022-11-17 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
4

2022-11-20: Welcome! — special edition

Cart #welcome_special_edition_ayizu-0 | 2022-11-21 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
4

i wanted to make this 'special edition' cartridge since i rediscovered PICO-8 with the making of 'Welcome!' (previous section), so this happened:

when i watched this talk about PICO-8 that i found on the lexaloffle.com PICO-8 resources page, @zep explained how data is stored in PICO-8 cartridges:

> all of the data is stored in the Red Green Blue data bits,
> it's encoded in the low bits of the RGBA channels

so i made this cartridge by recoloring the original cartridge (previous section) with the paint bucket tool in Pixelorama.
since he didn't say how many of the low bits of the RGBA channels are used, i found out myself:

in my first attempt, i recolored the cartridge while keeping only the lowest bit the same as before:

 
Recolored bits: βœ…βœ…βœ…βœ… βœ…βœ…βœ…β¬œ
Unchanged bits: ⬜⬜⬜⬜ β¬œβ¬œβ¬œβœ…

i stopped halfway through to test if the cartridge would load in PICO-8, and the cart was corrupted.
so glad that i saved it as 'welcome_special-edition.p8.png' and didn't overwrite the original 'welcome.p8.png' — although if i did overwrite that cart, i could redownload it from this post (previous section).

in my second attempt, i tested loading and running the 'special edition' cart in PICO-8 very often, and i changed to leaving the lowest Two bits unchanged:

 
Recolored bits: βœ…βœ…βœ…βœ… βœ…βœ…β¬œβ¬œ
Unchanged bits: ⬜⬜⬜⬜ β¬œβ¬œβœ…βœ…

this time, even the finished version of the 'special edition' cart has unchanged PICO-8 data, but a different-looking shell. with roughly 1 to 2 hours of work in each of the 2 attempts, i did it.

to generate the color codes that i needed, i did this in each cycle of color-picking (as needed):

  1. copy-paste the 'target color' and 'original color' into a Notepad (plain text editor) window, converted from Hex to Binary (in an online converter)
  2. copy-paste the Binary 'target color' in a third column, but change the low bits of each byte of the RGBA channels to the same-position bits of the 'original color'
  3. convert the new 'result color' back to Hex — also with an online converter — and use it with the paint bucket tool to replace the 'original color'

here is a comparison of the original cartridge with the new 'special edition':

original special edition

so it's the same cartridge as before, but with a blue-green shell.

2022-11-21: Welcome! — special edition 2

Cart #welcome_special_edition_2_gayi-0 | 2022-11-21 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
4

since making the special edition cartridge from before (previous section), i realized that i want to make more special edition cartridges soon. but i don't want to make them manually again because doing this manually is tedious.
so i am making a tool named 'Pico-8 cartridge special editioner'. i don't want to publish it yet since it's still too unstable — in the early testing phase after finishing the most basic version that works.

this tool is a User Interface with these steps:

  1. upload the original Pico-8 cartridge
  2. upload the Special Edition artwork for the cartridge
  3. the program automatically combines the images in a similar way how i made my first 'special edition' cartridge manually (previous section).
    but because the computer is doing it for me, it's easy and instant (at least in comparison. i still have to make my custom shell for the cart, but now the 'special editioner' tool makes sure the final cart works, so i don't have to)

here is a comparison of both special editions:

special edition 1 (special-editioned manually) special edition 2 (special-editioned with 'special editioner' tool)

2022-11-25: the impossible cart

i used GIMP to overlay a gradient with too many colors on a cart's artwork. then i used my special editioner tool (explained in previous section) to make a working cart with it.
i did this to test how the impossible cover image would look like in splore.

the cover image degrades nicely, so thank you to whoever made sure that it's not possible to break PICO-8 with an overly colorful cartridge (and also @zep for making PICO-8 in the first place):

cartridge shown in splore

fun fact: the gradient in the cart's program is the same gradient, but degraded in GIMP and then copied by hand into PICO-8 for roughly five hours including breaks:

Cart #impossible_fazadatefi-0 | 2022-11-25 | Code ▽ | Embed ▽ | License: CC4-BY-NC-SA
4

2022-12-26: Welcome! — WEBP cartridge

WEBP is a better image format than PNG and GIF, because it can store the same quality images in much smaller files.

i found that PICO-8 can save and load WEBP cartridges, but without the label image, and not as BBS carts:

this is the WEBP cartridge

i hope that PICO-8 will soon support WEBP cartridges in the same way as PNG cartridges

P#72566 2022-11-17 21:23 ( Edited 2022-12-28 20:56)