pixel8 is a minimal JavaScript library for creating pixel art and games.
-
Easy-to-use: Simply use JSX to add/update/remove interactive shapes and sprites. With this library, you can create low-res UIs using the same techniques you would in any other application. And since it's just like any other JavaScript app, you can continue to use all of the tools and libraries you do in all your other projects.
-
Performant: Under the hood, pixel8 avoids Canvas's stateful/mutable API and relies primarily on
ArrayBuffer
s to render bytes representing pixels directly to a<canvas>
2dContext
. This low-level architecture gives pixel8 a proper "8-bit" aesthetic, solid performance, and lets future development easily take advantage of new and experimental browser APIs such asOffscreenCanvas
,SharedArrayBuffer
, andWebAssembly
. -
Customizable: There are no limitations on color palettes, resolutions, memory/cpu usage, etc. You can make your app look like it was created on a ZX Spectrum or a Game Boy. It's entirely up to you. And it's up to the community to develop an ecosystem of tools and libraries that can enforce tasteful constraints for those who wish to opt-in to them.
Installation
Install with yarn
or npm
yarn add pixel8
Usage
You should definitely check out the interactive documentation...but if you're looking for a quick start...
Option 1 - Vanilla
pixel8 comes with it's own tiny vdom implementation, so it works out-of-the-box without any external libraries like React. If you want to take this approach, here's what it looks like:
import { h, render } from 'pixel8'
// @jsx h
const App = ({ frame }) => {
return (
<stage fps={30} width={64} height={64} scale={6} background="#000">
{/*
* You can use the following components:
* <rect>, <circ>, <pixel>, <text>, <sprite>, <transition>, <animation> and <buffer>
* Read the API documentation at https://pixel8.vsmode.org/#drawing-shapes
*/}
</stage>
)
}
// the #root element should be a HTMLCanvasElement
render(App, document.getElementById('root'))
Option 2 - React
If you want to use pixel8 with React, that's cool too! The general idea is that you want to start off with something like this:
import React from 'react'
import { render } from 'react-dom'
import { Stage } from 'pixel8'
const App = () => (
<Stage fps={30} width={64} height={64} scale={6} background="#000">
{/*
* You can use the following components:
* <rect>, <circ>, <pixel>, <text>, <sprite>, <transition>, <animation> and <buffer>
* Read the API documentation at https://pixel8.vsmode.org/#drawing-shapes
*/}
</Stage>
)
render(<App />, document.getElementById('root'))
But seriously, check out the docs. They are very detailed + easy to understand ;)
Examples
In addition to the examples in the docs, here are a couple more
- Handling User Input
- Simple Pixel Editor
- More coming soon...
Handling User Input
Simple Pixel Editor
Community
You can join the pixel8 community online in several places:
Issues? Questions? Contributions?
If you find a bug, have a cool idea for a feature, want to see some specific code examples/tutorials, or just want to say hello, please get in touch! Feel free to create an issue, jump into the gitter channel, or shoot me a message on twitter
License
pixel8 is MIT licensed. See LICENSE.