spritejs

by spritejs

spritejs / spritejs

A cross platform high-performance graphics system.

4.1K Stars 268 Forks Last release: 6 months ago (v3.6.0) MIT License 1.6K Commits 77 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

spritejs logo

spritejs.org

npm status build status dependency status Package Quality Maintainability License

Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.

SpritejsNext is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

Manipulate the sprites in canvas as you do with the DOM elements.

Features

  • Manipulate the sprites element as you do with the DOM elements.
  • Rendering by WebGL2 context.
  • Multiple layers.
  • DOM Events.
  • Object Oriented Programmed Development with ES6+.
  • OffscreenCanvas and Web Worker.
  • Work with d3.
  • Server-side rendering.
  • Vue.

Quick Start

SpriteJS - spritejs.org

Learn more at spritejs.org

Usage

In browser:


With Node.js:

npm install spritejs --save
import * as spritejs from 'spritejs';

3D

SpriteJSNext can render 3D elements through 3D extension library.


Or from NPM

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

Examples

Basic

With D3

Compatible with d3.js.

3D Extension

Q-Charts

A visulization library based on spritejs.

Ecosystem & Extensions

| Project | Description | | ------------------------------- | ----------------------------------- | | sprite-vue| SpriteJS for Vue.js. | | sprite-react| Rendering spritejs elements with React. | | q-charts | A visulization library based on spritejs | | cat-charts-vue| A visulization library based on spritejs , qcharts and Vue. |

Architecture

SpritejsNext provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.

ζžΆζž„ε›Ύ

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

V2

SpriteJS v2.0

Compatibility

Compatible for most modern browsers.

You should import babel-polyfill for early browers(i.e. iOS 8).

Contributors

Thanks goes to these wonderful people (emoji key):

| | | | | | | | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | |
betseyliu

πŸ’» πŸ“– |
Shero0311

πŸ“– |
ζœ‰ι©¬

πŸ“– πŸ’»|
ζ–‡θ”Ί

πŸ’» πŸ› |
蔑斯杰

πŸ’» πŸ“– |
Shaofei Cheng

πŸ’» πŸ“– |
摇ε€ͺ阳

πŸ“–
|
公子

πŸ’» |
justemit

πŸ’» πŸ“– πŸ› |
Welefen Lee

πŸ’» |
YUPENG12138

πŸ“–|
xinde

πŸ›|
ggvswild

πŸ›|
liulinboyi

πŸ’»| |
Lulzx

πŸ’» |
asidar

πŸ’» |
alphatr

πŸ’» |
W-Qing

πŸ“– |

Credits and Acknowledgements

  • svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).

  • extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.

  • triangulate-contours Triangulates a series of contours using Tess2.js.

  • OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.