@tawaship/pixim.js

"pixim.js" is a little useful "pixi.js" wrapper framework.

Setup

NPM

npm install --save pixi.js @tawaship/pixim.js

import * as PIXI from 'pixi.js';
import * as Pixim from '@tawaship/pixim.js';

Browser

git clone https://github.com/tawaship/Pixim.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.2/pixi.min.js"></script>
<script src="/path/to/dist/Pixim.min.js"></script>

Usage

Basic

1. Create content

Pixim.Content.create('test');
const Test = Pixim.Content.get('test');

or

const Test = Pixim.Content.create();

2. Define content settings and libraries

Test.setConfig({
	width: 300,
	height: 300
});

Test.defineLibraries({
	root: class Root extends Pixim.Container {
		constructor($) {
			super();
			
			this.addChild(new PIXI.Graphics())
				.beginFill(0xFFEEEE, 1)
				.drawRect(0, 0, $.width, $.height);
			
			this.addChild(new $.lib.main($))
		}
	},
	
	main: class Root extends Pixim.Container {
		constructor($) {
			super();
			
			this.addChild(new PIXI.Graphics())
				.beginFill(0xFFFFFF, 1)
				.drawRect(0, 0, 100, 100);
		}
	}
});

3. Create application

const app = new Pixim.Application({width: 300, height: 300});

4. Attach content to application and run application

app.attachAsync(new Test())
	.then(() => {
		app.play();
	});

Image assets to preload

Asset provided by this feature are instance of "PIXI.Texture", or dictionary of instance of "PIXI.Texture".

for class

1. Define assets

Test.defineImages({
	image_1: 'img/image_1.png'
});

Test.defineSpritesheets({
	ss_1: 'img/ss_1.json'
});

2. Use assets

// in content library

this.addChild(new PIXI.Sprite($.resources.images.image_1));
this.addChild(new PIXI.Sprite($.resources.spritesheets.ss_1.ss_1_1)).y = 105;
this.addChild(new PIXI.Sprite($.resources.spritesheets.ss_1.ss_1_2)).x = 105;

for instance

1. Define assets

const test = new Test();

test.addImages({
	image_2: 'img/image_2.png'
});

test.addSpritesheets({
	ss_2: 'img/ss_2.json'
});

2. Use assets

// in content library

this.addChild(new PIXI.Sprite($.resources.images.image_2));
this.addChild(new PIXI.Sprite($.resources.spritesheets.ss_2.ss_2_1)).y = 105;
this.addChild(new PIXI.Sprite($.resources.spritesheets.ss_2.ss_2_2)).x = 105;

Sound assets to preload

Load "howler.js".

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js"></script>

Asset provided by this feature are instance of "Howl".

for class

1. Define assets

Test.defineSounds({
	a: 'sound/a.mp3'
});

2. Use assets

// in content library

$.resources.sounds.a.play();

for instance

1. Define assets

const test = new Test();

test.addSounds({
	b: 'sound/b.mp3'
});

2. Use assets

// in content library

$.resources.sounds.b.play();

Task processing

If the library class inherits Pixim.Container, you can use tasks that are executed for each ticker process of the application.

// in content library

this.task.add([
	e => {
		this.x += e.delta;
		
		if (this.x > 100) {
			this.task.next();
		}
	},
	e => {
		this.y += e.delta;
		
		if (this.y > 100) {
			this.task.reset();
		}
	}
]);