dacaher / pixijs-ts-boilerplate

Just another PixiJS Typescript Boilerplate with some basic functionalities

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.git and 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.