/pixijs-ts-boilerplate

Just another PixiJS Typescript Boilerplate with some basic functionalities

Primary LanguageTypeScriptMIT LicenseMIT

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 (PixiApp) to manage resizing (full size, keeping aspect ratio or no resize at all), alignment of the stage within the canvas view, toggle fullscreen, display some media info and a fps-meter.

Versions:

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

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/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 src/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. Not really sure if I should bundle it as well.

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

TODO List

  • Add some ts testing framework.
  • Replace npm with yarn?
  • Bundle (s)css styles within the app.
  • Remove webpack-dashboard plugin to cut some dependencies. (Not really used anyways)
  • Display some device info (cpu, ram, etc.) through the Media Info Viewer if possible.
  • Try to avoid relative paths for importing modules (../../..) if possible.
  • Extract global declarations from the index file to its own file.

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.md file for details.