Formalize the pixi abstraction

demo/css/main.css

@@ -59,6 +59,9 @@ textarea {
 .w1-pixel-stage {
   width: 100%;
   height: 100vh;
+  background-image: url(https://unsplash.it/640/360);
+  background-position: center center;
+  background-size: cover;
 }
 
 

src/inc/pixel.js

@@ -1,4 +1,4 @@
-import { Graphics } from '@pixi/graphics';
+import * as PIXI from './../pixi.js';
 
 /**
  * An object with some default parameters.
@@ -9,7 +9,7 @@ const pixelDefaults = {
 	color: 0xFFFFFF,
 }
 
-export default class W1Pixel extends Graphics {
+export default class W1Pixel extends PIXI.Graphics {
 
 	/**
 	 * Class constructor.

src/index.js

@@ -1,20 +1,14 @@
 // Import external dependencies.
-import { Application } from '@pixi/app';
-import { Container } from '@pixi/display';
-import { Renderer, BatchRenderer } from '@pixi/core';
-Renderer.registerPlugin( 'batch', BatchRenderer );
-
-import { TickerPlugin } from '@pixi/ticker';
-Application.registerPlugin(TickerPlugin);
+import * as PIXI from './pixi.js';
 
 // Import internal dependencies.
-import W1Pixel from './inc/pixel'
+import W1Pixel from './inc/pixel';
 
 // Parse or setup some options.
 // This should ideally be externalised and be modified by a window object.
 const options = {
 	selectorClassName: 'w1-pixel-stage',
-	pixelSize: 100, // The default size of one pixel.
+	pixelSize: 20, // The default size of one pixel.
 	overflow: false, // If we want to draw pixel over the edge of the stage.
 	vAlign: 'center', // top, center, bottom
 	hAlign: 'center', // left, center, right
@@ -25,13 +19,14 @@ window.addEventListener( 'load', function( event ) {
 	const elements = document.getElementsByClassName( options.selectorClassName );
 	Array.from( elements ).forEach( ( element ) => {
 		// Generate the PIXI app and add it to the DOMElement.
-		const app = new Application( {
-			resizeTo: element
+		const app = new PIXI.Application( {
+			resizeTo: element,
+			backgroundAlpha: 0,
 		} );
 		element.appendChild( app.view );
 
 		// Generate a pixi container to draw in.
-		const container = new Container();
+		const container = new PIXI.Container();
 		app.stage.addChild(container);
 
 		// how many pixel can we stuff on the x axis?

src/pixi.js

@@ -0,0 +1,21 @@
+export * from '@pixi/constants';
+export * from '@pixi/math';
+export * from '@pixi/runner';
+export * from '@pixi/settings';
+export * from '@pixi/ticker';
+import * as utils from '@pixi/utils';
+export { utils };
+export * from '@pixi/display';
+export * from '@pixi/core';
+export * from '@pixi/app';
+export * from '@pixi/graphics';
+
+// Renderer plugins
+import { Renderer } from '@pixi/core';
+import { BatchRenderer } from '@pixi/core';
+Renderer.registerPlugin('batch', BatchRenderer);
+
+// Application plugins
+import { Application } from '@pixi/app';
+import { TickerPlugin } from '@pixi/ticker';
+Application.registerPlugin(TickerPlugin);