A collection of typescript‑based micro‑libraries in the shape of a monorepo. Most of these are centered around building 2.5D games, demos and website(effect)s, with three.js and @react-three/fiber. Some of them are already quite stable, others are still experimental.
What are the goals of this project ?
- Make the creation of 2.5D games, demos and website(effect)s as easy and satisfying as possible
- Super easy import and use of gamedev assets and 2D resources from the internet
- First-class pixel-art support and responsive-design awareness
What are the (planned*) core features ?
- Creation, management and efficient display of 2.5D sprites/particles
- texture-atlas support
- sprite-sheet animations
- billboards!
- Creation, management and efficient display of 2.5D maps
- Import of common texture atlas formats (TexturePacker) and 2.5D-maps* (tiled, LDtk)
- Advanced api for extending and customizing sprite features and 2.5D-map renderers
As a front-end developer how can i use this in my own projects ?
For all developers who want to just use the featureset easily in their own projects, the @spearwolf/picimo package is intended:
- picimo is a typescript library that provides react components and hooks
- is open source, licensed under the MIT license
- offers a ready-to-use npm package:
npm i @spearwolf/picimo
⚠️ However, there are currently no detailed tutorials or comprehensive documentation available - instead, there are a number of examples that illustrate the respective features and usage of the api
Packages inside this monorepo
three.js
@spearwolf/vertex‑objects
- provides an object based abstraction over instanced buffer geometries. build them with your own api
- create, update and delete instances with ease
-
✔️ api is stable and ready to use
@spearwolf/display3
- cosy boilerplate for creating a three.js <canvas> element and dealing with the init, resize and frame event‑loop
- nice starting point for your three.js demos
- there is no other dependency than the three.js package itself
-
✔️ api is stable and ready to use
@spearwolf/stage25
- create responsive three.js scenes by describing a projection
- supports orthogonal and parallax (aka perspective) projections (more to come)
-
✔️ api is stable and ready to use
@spearwolf/textured‑sprites
- create and render textured 2D sprites
- load texture atlases
- animations
- render as billboards (optional)
- based on @spearwolf/vertex‑objects
-
✔️ 🚀 ready to use but the api is still in progress
@spearwolf/tiled‑maps
- create and render visual tiled maps which are laid out in a 2D spatial grid map data structure
- based on @spearwolf/vertex‑objects
-
⚠️ work in progress
@react-three/fiber
@spearwolf/picimo
- provides most of the previous libraries as react components and hooks
- hooks that simplify the lifecycle of stateful and frame-based components and their interaction with react components
-
✔️ 🚀 ready to use but the api is still in progress
Examples
Almost all of these examples serve to show individual aspects and usage of the respective api. Therefore, don't expect any visual masterpieces at this point. This is given to the user of the libraries as an exercise
-
examples/vanilla
- vanilla three.js examples (no build step required)
- start with:
$ yarn examples:vanilla
-
examples/r3f
- examples for the use of picimo components and hooks and the other libraries in a react context
- start with:
$ yarn examples:r3f
Getting involved
Everyone is welcome to contribute to this project, no matter if it's just bug-fixes, new features, ideas or documentation or graphics!
Development Setup
this repository is structured as a monorepo; based on yarn workspaces
1. Install dependencies
you need a current node v16+ and yarn for it
$ yarn
2. Build and test everything
$ yarn cbt # => yarn clean && yarn build && yarn test
3. Run examples
Start the examples that can be found under examples/
$ yarn examples:vanilla # or 'examples:r3f'