Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vsmode/pixel8
A collection of low-res primitives for creating art and games in React
https://github.com/vsmode/pixel8
gamedev pixel-art react reactjs
Last synced: 30 days ago
JSON representation
A collection of low-res primitives for creating art and games in React
- Host: GitHub
- URL: https://github.com/vsmode/pixel8
- Owner: vsmode
- Created: 2018-01-02T03:05:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:15:14.000Z (over 1 year ago)
- Last Synced: 2024-02-27T04:34:21.175Z (5 months ago)
- Topics: gamedev, pixel-art, react, reactjs
- Language: JavaScript
- Homepage: https://pixel8.vsmode.org/
- Size: 494 KB
- Stars: 1,761
- Watchers: 31
- Forks: 63
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - vsmode/pixel8 - A collection of low-res primitives for creating art and games in React (reactjs)
README
Pixel8
A collection of low-res primitives for creating art and games with React
[](https://www.npmjs.org/package/pixel8)
[](https://www.npmjs.org/package/pixel8)
[](https://discord.gg/VYeM6ZK)
## Why?
Pixel8 is my attempt to create a way for developers – beginners and experts alike – to create pixel art and games with a level of simplicity and freedom that I have yet to discover in any alternative. This library does not aim to be a a full game framework or fantasy console, but it can definitely be used as a building block for such apps.
## Goals
### Easy-to-use
HTML and Javascript are both incredibly popular languages, and if you know either (or both), [React](https://reactjs.org/) will make you feel at home. Pixel8 has been thoughtfully integrated with its own custom renderer. Because of this, primitives such as `` and `` are built-in and don't need to be imported. Furthermore, JSX makes it easy to describe relatively positioned elements, compose animations, and more. Not to mention, you can still use all of the tools and libraries you do in all your other projects, such as [Redux](https://redux.js.org), [GraphQL](http://graphql.org/), and [Webpack](https://webpack.js.org/).
### 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 `` `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 as `OffscreenCanvas`, `SharedArrayBuffer`, and `WebAssembly`.
### Customizable
As much as possible, Pixel8 doesn't make any assumptions about what you're going for. There are no limitations on color palettes, resolutions, memory/cpu usage, etc. You can make your canvas 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
```bash
yarn add pixel8
# or npm i -s pixel8
```
## Getting Started
Definitely check out the interactive documentation at [https://pixel8.vsmode.org/](https://pixel8.vsmode.org/). But if you're looking for a quick start, you probably want to do something like this:
```js
import React from 'react'
import { render } from 'react-dom'
import { Stage } from 'pixel8'
const App = () => (
{/*
* Insert your code here!
*/}
)
render(, document.getElementById('root'))
```
## Issues? Questions? Contributions?
Feel free to [create an issue](https://github.com/vsmode/pixel8/issues), jump into the [Discord](https://discord.gg/VYeM6ZK), or shoot me a message on [twitter](https://twitter.com/jozanza)