Sosasees [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=42335 @zep i would like to change my username to lowercase <p><code>Sosasees</code> &rarr; <code>sosasees</code></p> https://www.lexaloffle.com/bbs/?tid=142898 https://www.lexaloffle.com/bbs/?tid=142898 Sat, 29 Jun 2024 11:13:14 UTC new profile picture 2024-01-16 <p>i made a <a href="https://gamejolt.com/p/new-profile-picture-2024-01-13-abstract-sosi-and-poppy-cs49ynvp">new profile picture</a> for my Game Jolt and itch profiles, so for Lexaloffle i made it again but in PICO-8:</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/sosasees-profile-picture-2024-01-16 p8_0.png" alt="" /> <p> <table><tr><td> <a href="/bbs/?pid=140222#p"> <img src="/bbs/thumbs/pico8_sosasees_pfp_jesotefizu-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=140222#p"> sosasees profile picture 2024-01-16</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=140222#p"> [Click to Play]</a> </td></tr></table> </p> <p>gradient effect is from this post:<br /> <a href="https://www.lexaloffle.com/bbs/?tid=38565"><br /> [New PICO-8 Feature] Enabling more than 16 colors on the screen</a> by <a href="https://www.lexaloffle.com/bbs/?uid=38130"> @BoneVolt</a></p> https://www.lexaloffle.com/bbs/?tid=139871 https://www.lexaloffle.com/bbs/?tid=139871 Tue, 16 Jan 2024 19:48:44 UTC P8SCII font template <p>based off <a href="https://www.lexaloffle.com/bbs/?tid=49075">'PICO-8 0.2.5'</a>, section 'Variable Width P8SCII Fonts', i changed the <code>#font_snippet</code> to the full default PICO-8 font:</p> <p> <table><tr><td> <a href="/bbs/?pid=126862#p"> <img src="/bbs/thumbs/pico8_font_template-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=126862#p"> font_template</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=126862#p"> [Click to Play]</a> </td></tr></table> </p> <p>i find this <code>#font_template</code> more useful than <a href="https://www.lexaloffle.com/bbs/?uid=1"> @zep</a>'s original <code>#font_snippet</code> because it has All P8SCII characters</p> https://www.lexaloffle.com/bbs/?tid=51939 https://www.lexaloffle.com/bbs/?tid=51939 Thu, 09 Mar 2023 19:42:26 UTC new profile picture 2023-01-01 <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/42_sosasees-profile-picture.png" alt="" /> <p>i made a new profile picture for myself, because</p> <ul> <li>i got the idea to draw a lavender-colored figure with a spiral on their belly as my profile picture <ul> <li>i found this idea too cute to not do</li> </ul></li> </ul> <p>because i use this website just for PICO-8, i wanted to make a profile picture that can be shown in PICO-8</p> <h2>tools</h2> <p>i did not use PICO-8 as my only tool.<br /> just like with most PICO-8 cartridges that i make,<br /> making and referencing mockups in <a href="https://orama-interactive.itch.io/pixelorama">Pixelorama</a> is really important to save hours of time</p> <h2>limitations</h2> <p>i could not find a color combination with the <a href="https://pico-8.fandom.com/wiki/Palette#The_system_palette">PICO-8 extended palette</a> that leaves the important details visible (according to my <a href="https://www.lexaloffle.com/bbs/?tid=50289">color contrast table</a>) that has the figure in lavender.<br /> so i changed the figure to purple &mdash; a color that is close enough to lavender that it still looks great</p> <h2>profile pictures</h2> <h3>default profile picture, that i had before</h3> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/pi31.png" alt="" /> <h3>new profile picture</h3> <p> <table><tr><td> <a href="/bbs/?pid=123390#p"> <img src="/bbs/thumbs/pico8_sosasees_pfp_seyegeyiwo-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=123390#p"> Sosasees profile picture 2022-01-01</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=123390#p"> [Click to Play]</a> </td></tr></table> </p> https://www.lexaloffle.com/bbs/?tid=50928 https://www.lexaloffle.com/bbs/?tid=50928 Sun, 01 Jan 2023 00:23:06 UTC touch keyboard design for pico-8 <p>the recent release of PICO-8 Education Edition proved that the PICO-8 editor can work on phones, but</p> <p>&gt; Sorry, touchscreen typing is not available ~ please plug in a keyboard!</p> <p>i know why PICO-8 doesn't support touchscreen typing:<br /> P8SCII is special, so it needs a special touch keyboard to work.</p> <p>the standard phone keyboard has no [ctrl] and [tab] keys, that are important for PICO-8 programming:</p> <ul> <li>[ctrl] is needed for shortcuts like [ctrl]+[s]=Save or [ctrl]+[g]=Grid</li> <li>[tab] is needed for code indentation<br /> (you can do this with spaces, but using tabs is the right way because you can change the tab width in Config)</li> </ul> <p>also, using [shift] in PICO-8 is much different than everywhere else:<br /> unless you choose to use Puny mode, [shift] switches the letters to glyphs instead of uppercase letters.<br /> so showing that on the keyboard really helps.</p> <h3>here is my PICO-8 touch keyboard draft</h3> <p>(in 1&times; scale, so that it can more easily be worked into an actual PICO-8 app)</p> <h4>default state of the keyboard</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_normal.png" alt="" /> <h4>default state of the keyboard; [ctrl] key activated</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_ctrl.png" alt="" /> <h4>default state of the keyboard; all keys pressed</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_normal_pressed.png" alt="" /> <h4>glyph keyboard ([shift] key activated)</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_shift.png" alt="" /> <h4>glyph keyboard; all keys pressed</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_shift_pressed.png" alt="" /> <h4>puny font keyboard</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/keyboard_puny.png" alt="" /> <h4>controller</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/controller_normal.png" alt="" /> <h4>controller; right arrow button pressed</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/controller_pressed_right.png" alt="" /> <h4>controller; all buttons pressed</h4> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/controller_pressed.png" alt="" /> <hr /> <p>this is just a visual draft, so we need testing to confirm that it's comfortable to use.</p> <p>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.<br /> if anything, the touch keyboard draft looks not crisp enough.</p> <p>we could use the pixelated keyboard for testing the form factor, because it's easier to edit than vectors.<br /> 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> https://www.lexaloffle.com/bbs/?tid=50920 https://www.lexaloffle.com/bbs/?tid=50920 Sat, 31 Dec 2022 12:22:44 UTC cartridge shell replacer <p>i want the shells of some of my cartridges to look different than usual:</p> <table> <thead> <tr> <th>cartridge</th> <th>source</th> </tr> </thead> <tbody> <tr> <td><img src="/media/42335/welcome_special-edition-2.p8.png" alt="pico-8 cartridge with a blue-green shell" /></td> <td>&quot;<a href="https://www.lexaloffle.com/bbs/?pid=72566#p">my less good cartridges</a>&quot;, section &quot;2022-11-21: Welcome! &mdash; special edition 2&quot;</td> </tr> </tbody> </table> <h3>more examples</h3> <p><div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <table> <thead> <tr> <th>cartridge</th> <th>source</th> </tr> </thead> <tbody> <tr> <td><img src="/media/42335/niji.special.p8.png" alt="pico-8 cartridge with a black shell" /></td> <td><a href="https://www.lexaloffle.com/bbs/?pid=121580#p">Niji-Famicart (comment)</a></td> </tr> <tr> <td><img src="/media/42335/shooting-star_special.p8.png" alt="pico-8 cartridge with full-bleed artwork" /></td> <td><a href="https://www.lexaloffle.com/bbs/?pid=121590#p">Shooting Star (comment)</a></td> </tr> <tr> <td><img src="/media/42335/one-off-character-creator.p8.png" alt="pico-8 cartridge with a blue shell" /></td> <td><a href="https://www.lexaloffle.com/bbs/?pid=121122#p">one-off character creator</a></td> </tr> <tr> <td><img src="https://www.lexaloffle.com/bbs/cposts/it/it_is_a_mystery-1.p8.png" alt="pico-8 cartridge with a white shell and a minimal label" /></td> <td><a href="https://www.lexaloffle.com/bbs/?tid=50790#p">it is a mystery (meme recreation)</a></td> </tr> </tbody> </table> <p></div></div></div></p> <p>so i created a GUI tool to replace shells of pico-8 cartridges</p> <h2>download &amp; source</h2> <ul> <li><a href="https://codeberg.org/sosasees/pico8-cartridge-shell-replacer/releases">Download</a></li> <li><a href="https://codeberg.org/sosasees/pico8-cartridge-shell-replacer">Source code</a></li> </ul> <p>every part of this program is licensed under one of these licenses:</p> <ul> <li><a href="https://codeberg.org/Sosasees/mit-license/raw/branch/2022/LICENSE">MIT License</a></li> <li><a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL v3</a></li> <li><a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a></li> </ul> <h2>how to use</h2> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/27_screenshot-1.png" alt="" /> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/28_screenshot-2.png" alt="" /> <p>the GUI has these steps:</p> <ol> <li>put the original cartridge into the 'original cartridge' field</li> <li>put the replacement shell in the 'edited shell' field</li> <li>save the edited cartridge</li> </ol> <p>after saving the new cartridge, you can load and run it in pico-8</p> <h2>limitations</h2> <h3>filetype limitations</h3> <p>this program acepts only PNG files</p> <h3>image limitations</h3> <ul> <li>you can't change the image size of the cartridge</li> <li>you can't move the 128&times;128px thumbnail that will be shown in splore and on the lexaloffle bbs <ul> <li>you also can't change the size of the thumbnail area</li> </ul></li> <li>if you use more than 16 colors from the <a href="https://pico-8.fandom.com/wiki/Palette#0..15:_Official_base_colors">pico-8 extended palette</a> in the 128&times;128px thumbnail area, the thumbnail will look unnatural and wrong in splore <ul> <li>if you use colors outside of the <a href="https://pico-8.fandom.com/wiki/Palette#0..15:_Official_base_colors">pico-8 extended palette</a> in the thumbnail area, the thumbnail will look even more unnatural and wrong in splore</li> </ul></li> </ul> <h2>early history</h2> <p>you can read about the pre-release history of this tool in '<a href="https://www.lexaloffle.com/bbs/?tid=36706">my less good cartridges</a>':</p> <ul> <li>section &quot;2022-11-20: Welcome! &mdash; special edition&quot;</li> <li>section &quot;2022-11-21: Welcome! &mdash; special edition 2&quot;</li> <li>section &quot;2022-11-25: the impossible cart&quot;</li> </ul> https://www.lexaloffle.com/bbs/?tid=50563 https://www.lexaloffle.com/bbs/?tid=50563 Wed, 28 Dec 2022 18:48:51 UTC it is a mystery (meme recreation) <p> <table><tr><td> <a href="/bbs/?pid=122917#p"> <img src="/bbs/thumbs/pico8_it_is_a_mystery-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=122917#p"> it is a mystery</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=122917#p"> [Click to Play]</a> </td></tr></table> </p> <h2>sources</h2> <ul> <li>original meme: <a href="https://www.youtube.com/watch?v=fq3abPnEEGE">'it is a mystery' by @PIFTSdotexe on YouTube (YouTube video)</a></li> <li>original song: <a href="https://www.youtube.com/watch?v=e-ET1gdq798">'Happy Happy Christmas' by DRAX (YouTube video)</a></li> <li>sheet music: <a href="https://musescore.com/user/2355491/scores/6035594">'there is no need to be upset' by parpul on MuseScore</a></li> </ul> <h2>development log</h2> <p>i started when i got a YouTube recommendation of <a href="https://m.youtube.com/watch?v=fq3abPnEEGE">the 'it is a mystery' meme</a>.<br /> it took me three attempts in 2 weeks (with breaks) to finish this cartridge</p> <p>most of the 2 weeks were forced breaks, because i had a lot of school work before winter holidays began.<br /> 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</p> <p>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> https://www.lexaloffle.com/bbs/?tid=50790 https://www.lexaloffle.com/bbs/?tid=50790 Sat, 24 Dec 2022 02:42:16 UTC spooky scene (with tile decoration generation) <p>i made a spooky scene to test if i could generate visual details procedurally &mdash; yes, i could</p> <p> <table><tr><td> <a href="/bbs/?pid=121947#p"> <img src="/bbs/thumbs/pico8_spooky_decogen_berodajuya-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=121947#p"> spooky scene (with tile decoration generation)</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=121947#p"> [Click to Play]</a> </td></tr></table> </p> <p>before i could create the full scene, i made a fake screenshot in a pixel art editor<br /> so i could look at the picture and imagine which commands i would need to add the details</p> <h2>behind the scenes</h2> <p>warning: long text</p> <p><div><div><input type="button" value=" Show " onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Hide '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Show '; }"></div><div><div style="display: none;"></p> <p>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.<br /> 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.</p> <p>the <code>decogen&hellip;draw()</code> (decoration generation draw) function checks every tile for if it's one of the special tiles, and then decorates if it is.<br /> each tile has distinct decorations, so they have very different approaches to being decorated:</p> <ul> <li>pillars are generated from the base (the only pillar sprite in the spritesheet).<br /> they check for a ledge above to know how long the pillar should be.<br /> when they hit it, the rest of the pillar is drawn from top to bottom, with three parts <ul> <li>the base sprite but mirrored, is the capital (the top)</li> <li>a dark line shades the capital</li> <li>a rectangle connects the base and the capital</li> </ul></li> <li>every brick wall tile on the map checks if it is below a ledge tile.<br /> if it is, it draws a shaded row of bricks below the ledge<br /> using a one-off character that i made in <a href="https://www.lexaloffle.com/bbs/?pid=121122#p">my one-off character creator</a></li> <li>the lamp's decoration has two parts <ul> <li>the pole is almost like a pillar, but in reverse:<br /> the lamp checks the tiles below the bulb (the only lamp sprite) until it hits the floor,<br /> then it draws the pole. it has four parts <ul> <li>mirrored base sprite as capital</li> <li>line that shades the capital</li> <li>rectangle that connects the pillar</li> <li>base sprite used as-is for the base</li> </ul></li> <li>the emission lines are just six lines that get drawn next to the bulb &mdash; no checks needed</li> </ul></li> <li>the door has only its bottom tile in the spritesheet.<br /> the part above gets generated &mdash; no checks needed.<br /> it has 4 parts <ul> <li>the top third of the door is another one-off character</li> <li>the row of bricks above is another one-off character, but only the bright pixels</li> <li>the single dark pixel of the brick row is drawn with <code>pset()</code></li> <li>i added a black outline to the left and right of the door<br /> using 2 lines</li> </ul></li> <li>the clock is also getting decorated with no checks. the decoration has 3 parts <ul> <li>a black filled circle for the clock face</li> <li>a bright hollow circle for the outline</li> <li>because the filled circle overdrawed the clock hands,<br /> the clock hands sprite gets replaced</li> </ul></li> <li>every cloud tile checks if it has an empty background tile to its left or right.<br /> if it has, it draws a line to complete the outline</li> </ul> <table> <thead> <tr> <th>before</th> <th>after</th> </tr> </thead> <tbody> <tr> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/before.png" alt="" /></td> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/after.png" alt="" /></td> </tr> </tbody> </table> <p></div></div></div></p> <h2>cost</h2> <p>this scene uses 18 out of 63 sprites from the first sprite page<br /> at the cost of 563 out of 8192 tokens.</p> <p>if i had drawn the decorations in the spritesheet, i would have saved all tokens &mdash; at the cost of 22 more sprites</p> <ul> <li>4 more pillar sprites <ul> <li>1 long connecting piece</li> <li>3 tile variations of the capital (the top of the pillar) <ul> <li>capital below light ledge</li> <li>capital below dark ledge</li> <li>capital below lamp</li> </ul></li> </ul></li> <li>6 sprites for the emission lines around the lamp</li> <li>1 sprite for the top part of the door</li> <li>9 sprites for the clock face and surrounding wall</li> <li>2 sprites to complete the outlines of the clouds</li> </ul> <p>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> https://www.lexaloffle.com/bbs/?tid=50523 https://www.lexaloffle.com/bbs/?tid=50523 Tue, 06 Dec 2022 22:14:05 UTC one-off character creator <p>i just realized that the market for one-off character editors is oversaturated, but i already made my version, so here it is:</p> <p> <table><tr><td> <a href="/bbs/?pid=121122#p"> <img src="/bbs/thumbs/pico8_one_off_character_create-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=121122#p"> one-off character creator</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=121122#p"> [Click to Play]</a> </td></tr></table> </p> <p>i got inspired by <a href="https://youtu.be/LHvupeKhBAc?t=3498">this π˜†ou𝘁ube video from 𝗹azy 𝗱evs</a> to make a character editor.<br /> i don't know how i will want to use one-off characters yet &mdash; i really just thought that making this program was good for practicing 𝗽𝗢𝗰𝗼-8 programming</p> <h2>controls</h2> <table> <thead> <tr> <th>buttons</th> <th>keys (on π—Ύπ˜„π—²π—Ώπ˜π˜‡ keyboard)</th> <th style="text-align: left;">action</th> </tr> </thead> <tbody> <tr> <td>d-pad</td> <td>arrow keys</td> <td style="text-align: left;">move the cursor</td> </tr> <tr> <td>π˜…</td> <td>π˜… / 𝗺</td> <td style="text-align: left;">paint or erase the pixel over the cursor</td> </tr> <tr> <td>𝗼</td> <td>𝗰 / 𝗻</td> <td style="text-align: left;">copy the character to the clipboard</td> </tr> </tbody> </table> <h2>my opinion</h2> <p>i just tried the other editors, and i find them not as nice as this one.</p> <p>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:</p> <ul> <li>edit the character</li> <li>copy the 𝗽8π˜€π—°π—Άπ—Ά character code</li> <li>visually balanced pixel grid</li> <li>realistic inline preview of the one-off character</li> <li>preview of the 𝗽8π˜€π—°π—Άπ—Ά character code</li> </ul> <p>or i like this editor better, only because i made it. please tell me your opinion</p> https://www.lexaloffle.com/bbs/?tid=50298 https://www.lexaloffle.com/bbs/?tid=50298 Sat, 03 Dec 2022 03:38:44 UTC color contrast table <p>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 <a href="https://webaim.org/resources/contrastchecker/">contrast checker</a>:</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/47_color-palette.webp" alt="" /> <p>you can find the contrast level between 2 colors in the table by doing this:</p> <ol> <li>start from one of the 'BG' fields, corresponding to the background color you want to try</li> <li>navigate straight up or down the color palette in the same column.<br /> every field shows the contrast level of the color if used as the foreground color on top of the column's 'BG' color</li> </ol> <p>the numbers from 0 to 3 are contrast levels. the higher the contrast level, the better the readability. the contrast levels mean:</p> <table> <thead> <tr> <th style="text-align: center;">contrast level</th> <th>description</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">0</td> <td>❌❌ nothing is readable. 𝗱on't use colors with contrast this poor unless you can't avoid it, or on elements that are just decoration</td> </tr> <tr> <td style="text-align: center;">1</td> <td>β­•βŒ graphical objects like icons and borders are readable. large text is also readable. normal-sized text is not readable</td> </tr> <tr> <td style="text-align: center;">2</td> <td>β­•βŒ large text is easily readable. normal-sized text is also readable</td> </tr> <tr> <td style="text-align: center;">3</td> <td>β­•β­• large and normal-sized text are easily readable</td> </tr> </tbody> </table> <h2>πŸ’‘ secret tip</h2> <p>the contrast between 2 colors is the same when you swap foreground and background color.<br /> 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:<br /> you can also use the 'BG' fields to pick a foreground color, and the rest of the column to pick a background color</p> <h2>ℹ️ information sources used</h2> <ul> <li>pico-8 color palette: <a href="https://pico-8.fandom.com/wiki/Palette#0..15:_Official_base_colors">https://pico-8.fandom.com/wiki/Palette#0..15:_Official_base_colors</a></li> <li>contrast checker: <a href="https://webaim.org/resources/contrastchecker/">https://webaim.org/resources/contrastchecker/</a></li> </ul> https://www.lexaloffle.com/bbs/?tid=50289 https://www.lexaloffle.com/bbs/?tid=50289 Wed, 23 Nov 2022 21:05:21 UTC feature request: dark Windows title bars <p>the current version of PICO-8 (0.2.5) for Windows has white window title bars:</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/pico8-windows.png" alt="" /> <p>the white title bar is distracting, no matter if app colors are set to light mode or dark mode in Windows settings.</p> <p>this mockup made in Microsoft Paint shows the Windows title bars in dark colors from the PICO-8 palette:</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/pico8-windows-mockup.png" alt="" /> <p>and here is a much more coarse hand-pixeled mockup of how the colors could look like:</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/4_pico8-window-title-bar-colors.png" alt="" /> <ul> <li>Inactive window's title bar (right) <ul> <li>background: PICO-8 color #0</li> <li>foreground: PICO-8 color #6</li> </ul></li> <li>Active window's title bar (left) <ul> <li>background: PICO-8 color #1</li> <li>foreground: PICO-8 color #7</li> </ul></li> </ul> https://www.lexaloffle.com/bbs/?tid=36707 https://www.lexaloffle.com/bbs/?tid=36707 Sun, 20 Nov 2022 14:47:53 UTC my less good cartridges <p>this is where i dump my less good cartridges</p> <p>i am doing this</p> <ul> <li>because i want to publish even my less good cartridges</li> <li>i also don't want to clutter the BBS, so i put them in the same thread</li> </ul> <h2>2022-11-17: Welcome!</h2> <p>i gave up on PICO-8 years ago when i buyed it since i got overwhelmed fast.<br /> now i rediscovered PICO-8 and wanted to try it again, so i did.<br /> this is my first PICO-8 cartridge i ever made.</p> <p> <table><tr><td> <a href="/bbs/?pid=72566#p"> <img src="/bbs/thumbs/pico8_welcome_tigayizadu-1.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=72566#p"> Welcome!</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=72566#p"> [Click to Play]</a> </td></tr></table> </p> <h2>2022-11-20: Welcome! &mdash; special edition</h2> <p> <table><tr><td> <a href="/bbs/?pid=72566#p"> <img src="/bbs/thumbs/pico8_welcome_special_edition_ayizu-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=72566#p"> Welcome! &mdash; special edition</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=72566#p"> [Click to Play]</a> </td></tr></table> </p> <p>i wanted to make this 'special edition' cartridge since i rediscovered PICO-8 with the making of 'Welcome!' (previous section), so this happened:</p> <p>when i watched <a href="https://youtu.be/87jfTIWosBw?t=624">this talk about PICO-8</a> that i found on the <a href="https://www.lexaloffle.com/pico-8.php?page=resources">lexaloffle.com PICO-8 resources</a> page, <a href="https://www.lexaloffle.com/bbs/?uid=1"> <a href="https://www.lexaloffle.com/bbs/?uid=1"> @zep</a></a> explained how data is stored in PICO-8 cartridges:</p> <p>&gt; all of the data is stored in the Red Green Blue data bits,<br /> &gt; it's encoded in the low bits of the RGBA channels</p> <p>so i made this cartridge by recoloring the original cartridge (previous section) with the paint bucket tool in <a href="https://orama-interactive.itch.io/pixelorama">Pixelorama</a>.<br /> since he didn't say how many of the low bits of the RGBA channels are used, i found out myself:</p> <p>in my first attempt, i recolored the cartridge while keeping only the lowest bit the same as before:</p> <table> <thead> <tr> <th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td>Recolored bits:</td> <td>βœ…βœ…βœ…βœ… βœ…βœ…βœ…β¬œ</td> </tr> <tr> <td>Unchanged bits:</td> <td>⬜⬜⬜⬜ β¬œβ¬œβ¬œβœ…</td> </tr> </tbody> </table> <p>i stopped halfway through to test if the cartridge would load in PICO-8, and the cart was corrupted.<br /> so glad that i saved it as 'welcome_special-edition.p8.png' and didn't overwrite the original 'welcome.p8.png' &mdash; although if i did overwrite that cart, i could redownload it from this post (previous section).</p> <p>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:</p> <table> <thead> <tr> <th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td>Recolored bits:</td> <td>βœ…βœ…βœ…βœ… βœ…βœ…β¬œβ¬œ</td> </tr> <tr> <td>Unchanged bits:</td> <td>⬜⬜⬜⬜ β¬œβ¬œβœ…βœ…</td> </tr> </tbody> </table> <p>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.</p> <p>to generate the color codes that i needed, i did this in each cycle of color-picking (as needed):</p> <ol> <li>copy-paste the 'target color' and 'original color' into a Notepad (plain text editor) window, converted from Hex to Binary (in an online converter)</li> <li>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'</li> <li>convert the new 'result color' back to Hex &mdash; also with an online converter &mdash; and use it with the paint bucket tool to replace the 'original color'</li> </ol> <p>here is a comparison of the original cartridge with the new 'special edition':</p> <table> <thead> <tr> <th>original</th> <th>special edition</th> </tr> </thead> <tbody> <tr> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/welcome.p8.png" alt="" /></td> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/welcome_special-edition.p8.png" alt="" /></td> </tr> </tbody> </table> <p>so it's the same cartridge as before, but with a blue-green shell.</p> <h2>2022-11-21: Welcome! &mdash; special edition 2</h2> <p> <table><tr><td> <a href="/bbs/?pid=72566#p"> <img src="/bbs/thumbs/pico8_welcome_special_edition_2_gayi-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=72566#p"> Welcome! &mdash; special edition 2</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=72566#p"> [Click to Play]</a> </td></tr></table> </p> <p>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.<br /> 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 &mdash; in the early testing phase after finishing the most basic version that works.</p> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/pico8-cartridge-special-editioner_testing-screenshot-1.png" alt="" /> <img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/pico8-cartridge-special-editioner_testing-screenshot-2.png" alt="" /> <p>this tool is a User Interface with these steps:</p> <ol> <li>upload the original Pico-8 cartridge</li> <li>upload the Special Edition artwork for the cartridge</li> <li>the program automatically combines the images in a similar way how i made my first 'special edition' cartridge manually (previous section).<br /> 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)</li> </ol> <p>here is a comparison of both special editions:</p> <table> <thead> <tr> <th style="text-align: center;">special edition 1 (special-editioned manually)</th> <th style="text-align: center;">special edition 2 (special-editioned with 'special editioner' tool)</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;"><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/welcome_special-edition.p8.png" alt="" /></td> <td style="text-align: center;"><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/welcome_special-edition-2.p8.png" alt="" /></td> </tr> </tbody> </table> <h2>2022-11-25: the impossible cart</h2> <p>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.<br /> i did this to test how the impossible cover image would look like in splore.</p> <p>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 <a href="https://www.lexaloffle.com/bbs/?uid=1"> <a href="https://www.lexaloffle.com/bbs/?uid=1"> @zep</a></a> for making PICO-8 in the first place):</p> <table> <thead> <tr> <th>cartridge</th> <th>shown in splore</th> </tr> </thead> <tbody> <tr> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/the-impossible-cart.p8.png" alt="" /></td> <td><img loading="lazy" style="margin-bottom:16px" border=0 src="/media/42335/the-impossible-cart_shown-in-splore.png" alt="" /></td> </tr> </tbody> </table> <p>fun fact: the gradient in the cart's program is the same gradient, but degraded in <a href="https://www.gimp.org/">GIMP</a> and then copied by hand into PICO-8 for roughly five hours including breaks:</p> <p> <table><tr><td> <a href="/bbs/?pid=72566#p"> <img src="/bbs/thumbs/pico8_impossible_fazadatefi-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=72566#p"> the impossible cart</a><br><br> by <a href="/bbs/?uid=42335"> Sosasees</a> <br><br><br> <a href="/bbs/?pid=72566#p"> [Click to Play]</a> </td></tr></table> </p> <h2>2022-12-26: Welcome! &mdash; WEBP cartridge</h2> <p>WEBP is a better image format than PNG and GIF, because it can store the same quality images in much smaller files.</p> <p>i found that PICO-8 can save and load WEBP cartridges, but without the label image, and not as BBS carts:</p> <p><img src="https://www.lexaloffle.com/media/42335/welcome.p8.webp" alt="this is the WEBP cartridge" /></p> <p>i hope that PICO-8 will soon support WEBP cartridges in the same way as PNG cartridges</p> https://www.lexaloffle.com/bbs/?tid=36706 https://www.lexaloffle.com/bbs/?tid=36706 Thu, 17 Nov 2022 21:23:24 UTC