Processing

The PICO-8 is a fantasy computer for making, playing and sharing tiny games and demos.

There are built-in tools for development: code, sprites, maps, sound editors and the command line, which is enough to create a mini retro game. At the exit you will get a cartridge file, which can be stored and played on the website.

Also, the game can be packed into a player that works on all popular platforms and distribute as you wish. To make a retro styled game the whole process of creation takes place under some technical limitations: 128x128 pixels display, 16 color palette, 256 8x8 color sprites and 4 channel sound

Setting up

The PICO-8 fantasy computer is an all-in-one creation and execution platform.

Unfortunately, the PICO-8 is a commercial package and should be purchased before you can get started.

You can go to https://lexaloffle.itch.io/pico-8 to purchase and then download the package for your platform of choice (Windows, OSX and even Raspberry Pi).

Getting started

PICO-8 programs are coded using the Lua scripting language.

The main function used for updating the screen (and called either 30 or 60 times a second) is the _DRAW() function, so this function is also a requirement for doing anything with graphics.

Most animated effects will also need to use some kind of a timer, so you are likely to also use the built-in time() function or keep track of your time (t) yourself as well. So a minimal setup would look something like this:

T=0 FUNCTION _DRAW()
-- your effect code
T=T+1
END

Here is a single-image PICO-8 Cheat sheet to get you started.

• 

Video display

The PICO-8 has a 128x128 pixel display with 16 colors which can be accessed via a wide range of graphics functions.

Built-in Draw functions

Here are a couple of built-in drawing functions you can use:

CLS(color=0)
PSET(x,y,color) 
color=PGET(x,y)
CIRC(x,y,r,color)
CIRCFILL(x,y,r,color)
RECT(x,y,w,h,color)
RECTFILL(x,y,w,h,color)
LINE(x0,y0,x1,y1,color)
PRINT(text,[x,y,color]) / ?text,x,y,color

COLOR(color) - Set default color
PAL(destindex,sourceindex) - Replace dest colorindex with color from sourceindex
FILLP(mask) -- Set fill pattern for circ, circfill, rect, rectfill, pset, and line

Getting something on screen

Here is a bit of code to get you started:

T=0FUNCTION _DRAW() 
FOR Y=0,128 DO FOR X=0,128 DO
PSET(X,Y,X~Y+T)
END END
T=T+1
END

Which will display an animated XOR pattern.

Color Handling

Default colormode for using primitive draws in processing is a grayscale value 0..255, usually passed via the fill(grayvalue) call. You can set a different colormode (RGB or HSV for example) for primitive drawing using the colorMode call ( https://processing.org/reference/colorMode_.html )

Sound

Processing allows for sound output using the PICO-8 does not allow you to poke the sound registers directly, but instead works with the SFX(effectindex) command to generate sounds. However we are allowed to poke the piece of memory that holds the sound effect data, like so:

POKE(12869+offset,value)SFX(1)

More recently, the PICO-8's secret 5512Hz 8-bit digital audio out API at port 0x808 has been discovered. More information about this port can be found here: https://www.lexaloffle.com/bbs/?tid=41991

Optimisation Tricks

Here are a few tricks you can use to optimize your PICO-8 code, using a plasma-effect as an example:

• Step 1: Use label/goto instead of the FUNCTION _DRAW

::F::
FOR Y=0,127 DO FOR X=0,127 DO
PSET(X,Y,SIN(X>>7)+SIN(Y>>7)+T())
END END
FLIP()GOTO F

• Step 2: For pixel effects, you can skip the FLIP() command for Monte-Carlo style updating

::F::
X=RND()Y=RND()
PSET(X<<7,Y<<7,SIN(X)+SIN(Y)+T())
GOTO F

• Step 3: Use the PRINT/? command to draw characters instead of pixels to save a few characters

::F::
X=RND()Y=RND()
?0,X<<7,Y<<7,SIN(X)+SIN(Y)+T()
GOTO F

• Step 4: If it is possible to write the entire code on a single line, you can use the WHILE(1) code-construct, for example

WHILE(1)X=RND()Y=RND()?0,X<<7,Y<<7,SIN(X)+SIN(Y)+T()

Final optimisations and PDE File Release

When you are happy with your intro and want to get it ready for release, it becomes time to look at squeezing those last bytes.

Final optimisations can be done by stringing as much code together on single lines and removing any extra spaces and whitelines. Here are a couple of other tips and tricks that help you squeeze those final bytes:

• In some cases java-code might be smaller than javascript/p5.js depending on your code.
• specific integer casting is possible with ~~varianble or expression.

PDE file release

The PDE file is just a raw dump of your java/javascript code. Unfortunately, that means that using an eval with the code 'packed' as unicode characters (as is used with codetweets for example), does nothing for decreasing your file size.

Also, the Processing editor doesn't show character count, so you'll have to keep track of your filesize manually. Once you have your PDE file wihtin the designated target size, make sure to add a screenshot and readme.txt / file_id.diz to your production and create a ZIP file for the PDE, screenshot and readme.

Additional Resources

Sizecoding using Processing is still in its infancy, but luckily there is already plenty of information to get you started!

• Processing API Reference https://processing.org/reference/
• p5.js API Reference https://p5js.org/reference/