pixijs-ts-boilerplate
Just another PixiJS Typescript Boilerplate
Getting Started
Another boilerplate to speed up project setup for developing typescript apps with PixiJS. Ready to compile code for dev and production env. Provides a helper class (PixiAppWrapper) to manage resizing (full size, keeping aspect ratio or no resize at all), device orientation, alignment of the stage within the canvas view, toggle fullscreen, display some media info and a fps-meter, and some classes to assist with assets loading.
Versions:
- Typescript 2.9.2
- Webpack 3.10.0
- PixiJS 4.8.1
Note: Starting from v2 non-dev dependencies are kept inside the src/scripts/vendor folder (impl) and src/types (definitions). This means that those deps will have to be manually managed. Some companies do not want to heavily rely on npm repos. Going back to npm dependencies should be fairly simple.
Included PixiJS plugins
- pixi-layers (former pixi-display : 59999bc9b4a4fe9ed739f6d7b17ba4c69068204f - Apr 11, 2018
- pixi-particles 3.0.0
- pixi-filters 2.6.1
- pixi-spine 1.5.16 ***
*** PLEASE NOTE THAT IN ORDER TO USE THE SPINE RUNTIME YOU MUST OWN A VALID SPINE LICENSE.
Other 3rd party libs
- screenfull 3.3.2
- fpsmeter 0.3.1
- eventemitter3 3.1.0
- gsap 2.0.1
- howler.js 2.0.12
- typescript-collections 3758b3bea35f17d2c86c56b9110666d7b80609f2
Prerequisites
Install Node & NPM from here or using NVM
Installing
Choose one of the following options:
- Export the project with svn
svn export https://github.com/dacaher/pixijs-ts-boilerplate/trunk/
-
Download it as ZIP
-
Clone the git repo —
git clone https://github.com/dacaher/pixijs-ts-boilerplate.gitand checkout the tagged release you'd like to use.
Edit package.json to change project details.
Install NPM dependencies by running.
npm install
Initial Steps
- Test it by running and browsing to localhost:9000
npm run build && npm run serve
You should see a sample app with a fps-meter and a div containing some display info.
- See src/scripts/app for a showcase.
- Edit src/html/index.html, src/scripts/index.ts and src/styles/style.css as desired. Index.ts is the entry point for bundling the application.
- Instantiate App with parameters width, height, align, resize and a canvas view container if desired.
- Optionally add/remove custom linter rules from tslint.json.
- Finally remove folder src/scripts/app and assets/gfx/* when not needed.
Note that pixi.js is kept as a external dependency and it is not bundled within the application.
NPM scripts
- clean - removes dev, dist and doc dirs
- build - compiles and copy all the assets to dev dir
- build:release - compiles and uglifies to dist dir
- rebuild:all - cleans and rebuilds dev, dist and doc.
- serve - serves (0.0.0.0:9000) dev dir with Hot Module Replacement enabled through webpack-dev-server
- serve:release - serves (0.0.0.0:9999) dist dir through http-server to test production bundle
- test - does nothing right now
- doc - generate app doc with typedoc
- start - runs build & serve
Contributing
As a fairly new developer with Typescript (and javascript ecosystems in general) any suggestion, bug report or improvement submitted would be very much appreciated.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- David C. - Initial work - dacaher
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE file for details.