Bootstrapped with DCollage (Digital Collage Boilerplate w/ PIXIJS)

DCollage is a lightly opinionated PIXIJS based digital collage boilerplate with game dev aspirations and a component driven paradigm written in TypeScript. The goal of DCollage is to facilitate the creation of multi-layered, interactive, collages similar to those I created back in the days of Flash. Surprise it works for simple games too!

Getting Started

DCollage is meant to get you up and running with a PIXI app in minutes. While there are a lot of nuances that can be tweaked and you are not forced to follow the patterns this boilerplate includes it should be a matter of clone, install, run.

See the wiki for more documentation:

• wiki
• Patterns and Cookbook page
• Check out the branch simple-game for a good starting point for a game project

Clone or Template

• Clone or spin up a new repo using https://github.com/JRVisuals/dcollage-pixijs-boilerplate

Install and Run

• Run yarn at the project root to install all of the node_modules
• Run yarn dev to begin developing locally http://localhost:10001/

Basic Setup

• Set the APP_HEIGHT and APP_WIDTH in constants/index.ts
• Edit core.ts to add or remove components from the main container
• Set up any screens that you need
• There is a components/library included to help you get started (please contribute yours back to the repo and namespace their directory E.g. components/library/yourGithubUsername)
• Put your assets in ./src/assets and add anything you want to preload to the preloader component and at the bottom of core.ts
• Use any of the components/library components, or make your own

Build Scripts

• yarn dev to go into development mode with live reload
• yarn clean to clean the /dist directory
• yarn build to create a distributable bundle in /dist
• yarn docs to generate markdown documentation in /docs
• yarn nwjs-start to open latest /dist in nwjs
• yarn nwjs-dist to build executables in /dist-nwjs
  • check package.json for target options
  • possible values: win-x86,win-x64,linux-x86,linux-x64,mac-x64
• yarn all-the-things to clean, build and nwjs-dist

Demo Branches

• Check out the branch simple-game for a good starting poit for a game project
• Will be adding other starting branches as we go

Dev Tools for PIXI

• Pixi.js devtools Chrome Extension shows up in your Chrome Dev Tools Panel and can be super helpful - this is why we will usually name our containers w/ container.name='foo'

Libraries Used

• DCollage Boilerplate https://github.com/jrod-disco/dcollage-pixijs-boilerplate
• PIXIJS - WebGL renderer with Canvas fallback and so much more https://github.com/pixijs/pixi.js
• GSAP - tween animation library https://greensock.com/docs/v2/Plugins/PixiPlugin
• pixi-filters - Collection of community-authored custom display filters for PixiJS https://github.com/pixijs/pixi-filters Currently yarn linked to a local version of the repo in order to use the as of yet un-merged changes to the godray filter which add alpha functionality.
• NW.JS - Builds executables for Mac, PC, and Linux https://nwjs.io/
  • https://docs.nwjs.io/en/latest/References/Manifest%20Format/
  • https://github.com/evshiron/nwjs-builder-phoenix
  • https://github.com/djmisterjon/nw-parcel-pixi
  • https://medium.com/@wouter.hisschemoller/javascript-desktop-programs-with-nw-js-23cc0d2e1cef

Tools Used

• Visual Studio Code
• Sublime Text
• Aesprite
• Audacity
• Reason
• bmGlyph How to Use for PIXI

The Stack

• Pixi.JS
• TypeScript
• Prettier
• Rollup
• TSDoc / TypeDoc
• NW.JS