React PICO-8

    

Run PICO-8 game cartridges using a cusomtizable React component.

Live Demo

Note: This project is community made and not endorsed by Lexaloffle or the offical PICO-8 Fantasy Console.

!img

Installation

Yarn

yarn add react-pico-8

npm

npm install react-pico-8

Usage

``jsx
import React from 'react'
import Pico8 from 'react-pico-8'
import { Controls,
Reset,
Pause,
Sound,
Carts,
Fullscreen } from 'react-pico-8/buttons'
import 'react-pico-8/styles.css'

const App = () => (
autoPlay={true}
legacyButtons={false}
hideCursor={false}
center={true}
blockKeys={false}
usePointer={true}
unpauseOnReset={true}
placeholder="placeholder.png"
>







)
`

Simply add the game widget to the React application using JSX.

Be sure to include the .js src of the game cartridge generated from PICO-8's web export.

If no buttons are nested in the component then the default PICO-8 buttons will be used.

Props

$3

Source of the game cartridge. Required

This can be obtained from PICO-8 by loading a game cart, then typing the command export index.html.

PICO-8 produces two files: the cartridge index.js and the player index.html.

Since react-pico-8 already has the game player embeded, only the .js file needs to be provided as the src.

$3

autoPlay indicates if the game canvas should attempt to auto-play on page-load. Default: true

$3

legacyButtons is used to select the type of buttons. Default: false

$3

hideCusor indicates if the cursor is hidden over the game canvas when the game is playing. Default: false

$3

center indicates if the game is centred outside of fullscreen mode. Default: true

$3

If blockKeys is set keys which are used to interact with the game are blocked from scrolling when the game is running.

If un-set keys will only be blocked when the canvas is focused. Default: false

$3

If usePointer is set the pointer hand will be used on buttons.

If un-set a normal cursor will be used on all buttons which do not lead to a new page. Default: true

$3

If unpauseOnReset is set hitting the reset button when paused will instantly reset the game.

If un-set the game will need to be resumed before it resets. Default: true

$3

The image to be used as a placeholder prior to starting the game. If un-set, a black background will be used. Default: ''`