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


Sosasees → sosasees

0 comments




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

0 comments




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
2

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

2
0 comments




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

[ Continue Reading.. ]

1
1 comment




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)

[ Continue Reading.. ]

11
38 comments




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

[ Continue Reading.. ]

17
12 comments




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.

[ Continue Reading.. ]

3
0 comments




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

[ Continue Reading.. ]

2
4 comments




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
14

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

[ Continue Reading.. ]

14
13 comments




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

2
5 comments




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
1
4 comments




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
5

2022-11-20: Welcome! — special edition

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

[ Continue Reading.. ]

5
11 comments