nokiajam-pico8-template

A template + instructions for using the PICO-8 game engine for the Nokia 3310 game jam

PICO-8 doesn't support changing the resolution or color palette, but this guide will show how to do it anyway (in HTML exports)

features

• nokia3310 color palette
• 84x48 resolution
• 15 FPS
• classic nokia font
  • note: the classic 3310 font on the jam resources page has some small mistakes, e.g. "M" "W" "S". They're fixed here.
• 12-key keypad (QWEASD etc)
• low token-count (~400)

HOW TO MAKE YOUR GAME

• edit game.p8
• the first tab has a bare-bones game with an _update() and _draw() function as usual
• draw your game between 0,0 and 83,47 (inclusive)
• you can use keypad(n) and keypadp(n) to read the 12-button keyboard. see the code comments for the button mapping
• the last tab is "engine code" that does all the magic. you shouldn't need to edit this tab

HOW TO EXPORT

1. intial setup
   • open PICO-8
   • run folder config -- this will open a folder in your OS
   • navigate to the plates subfolder
   • download plates/nokia3310.html and save it in this folder
2. exporting
   • inside PICO-8, run export -p nokia3310 -f mycoolgame.html
3. setting the label image
   • manually create an 84x48 image with the correct colors
   • convert the image to base64
   • open mycoolgame_html/index.html in a text editor
   • search for .p8_start_button{ and replace the background:url section with your base64 image-string
4. replace palette
   • option 1 (manual)
     • open mycoolgame_html/mycoolgame.js in a text editor
     • find this string...:
       • 29,43,83,126,37,83,0,135,81,171,82,54,95,87,79,194,195,199,255,241,232,255,0,77,255,163,0,255,236,39,0,228,54,41,173,255,131,118,156,255,119,168,255,204,170
       • ...and replace it with this string:
       • 67,82,61,67,82,61,67,82,61,67,82,61,67,82,61,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216,199,240,216
       • (it's in there twice, replace both of them)
   • option 2 (automatic)
     • for commmandline folks: edit the change-palette.sh shell script (you'll need to change a path) and then run it

palette

• the exporting process (described above) replaces the colors 1-15 with the nokia3310 colors #43523d and #c7f0d8, like this:

Color 0 will remain black -- don't use color 0 (black) in your game. Use colors 1 (dark) and 7 (light) (or any combination of dark+light from the table)

pause menu

camera() has been modified to make drawing happen in the center of the screen. this lets the player see the pause menu.

however, the pause menu uses black pixels which I don't know how to re-color, so the pause menu is semi-removed. players can still pause by holding down p/enter for 1 second

license / credits

• MIT license
• it's not required, but if you'd like to credit me I'd appreciate it; this took hours to nail down all the specifics. something like "nokia3310 html template by pancelor". up to you!
• thanks to Tobias V. Langhoff and PaloBlancoGames for initial work figuring out the palette-swapping!

---

TODO

• custom pause menu example
  • nevermind, the screen is centered on the pause menu now. but the color palette is a big issue -- the pause menu is black
  • one possibility might be shaders, instead of editing the palette
• sfx example
  • instr 3 (green) seems decent?
  • custom instruments / waveform instruments?