@spearwolf/textured-sprites

textured 2d sprites for three.js


Keywords
creative-coding, javascript, particles, sprites, threejs, typescript, webgl
License
MIT
Install
npm install @spearwolf/textured-sprites@0.1.0

Documentation

@spearwolf/three-vertex-objects cover

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

picimo tech stack

⚠️ 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

npm version

  • 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

npm version

  • 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

npm version

  • 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

npm version

  • 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

@react-three/fiber

@spearwolf/picimo

npm version

  • 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'