edwinwebb / pixi-seed Goto Github PK

View Code? Open in Web Editor NEW

151.0 6.0 23.0 3.4 MB

Pixi.js project seed with ES6 and webpack

License: MIT License

JavaScript 92.90% HTML 4.44% GLSL 2.66%

pixi javascript pixijs popmotion webgl webpack

pixi-seed's Introduction

Pixi Seed

Demo

This project is designed to bootstrap your Pixi.js development with modern tooling, technology and project organisation. Use as boilerplate for your next project.

Webpack with ES6 provides a more class based approach to Pixi.js development and allows you to include assets within your JS. Reactman enables you to quickly add code to your project and the using Redux Stores helps keep your data in one place.

The project comes with Render and Animation stores and a ScaledContainer to help work across multiple devices with a ‘best-fit’ rendering methodology. The code contains demos for TweenJS and renderer update loops.

V3 Updates

Change stores to REDUX /w ducks
Update to Webpack V2
Update to Pixi V4.6
Added a loader screen
Added a custom glsl filter example
PopMotion with minor examples
Animation loop examples
HTML forms to Redux/Pixi.js examples

TODO

Move loader to REDUX
Script to redo package.json on new project
Add a screen manager

Getting started

Clone the project, remove the git repository and install to get going:

git clone --depth=1 https://github.com/edwinwebb/pixi-seed.git my-project
cd my-project
rm -rf .git
npm install
npm start

Then visit http://localhost:8080

Strapped Files

You can configure your canvas size in the AppConstants.js file.

export const canvasWidth = 1920;
export const canvasHeight = 1080;

The ScaledObjectContainer will try a best fit approach. Used in Logo and Background to auto scale.

RedLine.js gives a Popmotion example

Thingie.js gives an animation loop update example.

npm scripts

npm start - Build and start the app in development mode at http://localhost:8080
npm run build - Run a production build, outputs to ./build/
npm run lint - Lint your code
npm run reactman - Generate code for a DisplayObject or Store from command prompt. See here.

Static assets

import asset files from within your JavaScript component files. To add more filetypes, look at the webpack.config.js and add a file loader.

// Filename: app.js
import assetURL from './logo.png';

License

MIT (http://opensource.org/licenses/MIT)

pixi-seed's People

Contributors

Stargazers

Watchers

pixi-seed's Issues

Doesn't work with PIXI v4+

I found the following reference to change postLoaders for v4 but that didn't work out too.
https://gist.github.com/mjackson/ecd3914ebee934f4daf4#gistcomment-1842689

In v4.1.0, webpack gives this warning:

./~/pixi.js/bin/pixi.min.js
Critical dependencies:
8:412-419 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/pixi.js/bin/pixi.min.js 8:412-419

How do you load a texture map using a json file?

loader.add('images/index.json')
  .load(setup);

shows a 404 from entry.js even if I have an images dir with an index.json and a texture map png.

I think I have to import the json and png with an import statement but I can't quite figure out how.

I feel like the answer is around https://github.com/edwinwebb/pixi-seed/blob/master/app/displayobjects/Background/Background.js , where I see an image imported and used... but I'm not sure how to import the json definition and associated texture map.

Thanks for any help!

loadl sprite sheets from json atlas

Hello ! i cloned your repo , thanks , it is rather good starter. But i have some problem, how can i load sprite sheets.
i uploaded json atlas in Load.js file
Load.js--
dng.json // json of sprites
dng.png
Code:

import LOGO from './[email protected]';
import ScaledContainer from '../ScaledContainer/ScaledContainer';
import dngJSON from './dng.json'

export default class Logo extends ScaledContainer {
  constructor() {
    super();
    this.loader = new Loader()
    this.loader.add('dng',dngJSON)
    this.loader.load(()=>{
      console.log("ok")
      const texture = Texture.from('blob_1.png');
      //   const sprite = new Sprite(texture);
      //   this.addChild(sprite);
    })
    // sprite.anchor.x = 0.5;
    // sprite.anchor.y = 0.5;
    // sprite.position.set(1920 / 2, 1080 / 2);
  }
} ```

but this code shows error 

uncaught promise error // when i wrote ``` const texture = Texture.from('blob_1.png'); ````

So how can load sprite sheets with json atlas ?

There should be an option to use Hexi (library bundle for Pixi)

Hexi is a library bundle for Pixi. It'd be great if this could be an option:
https://github.com/kittykatattack/hexi

The suggested webpack and webpack-cli versions are wrong

TypeError: Cannot read property 'properties' of undefined

I found a similar issue and a fix:

"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",

Error with AppConstants

hey there, I just found out your project, and it's really good, It's helping me a lot,
I have just one comment about the AppConstants

import { ANIMATE } from '../constants/AppConstants';
for me this variable is undefined

checking the way you declared the constants I had to use this way to work

import { constants } from '../constants/AppConstants';
constants.ANIMATE;

Loader not working

The loading Indicator (Loader) does not work.

I tracked down the problem.

  onUpdate(ldr) {
    this.progress = ldr.progress / 100;
  }

does not trigger a dispatch so

this.unsubscribe = Store.subscribe(() => {
      this.ease += (this.progress - this.ease) * 0.03;
      this.bar.scale.x = this.ease;
    });

cant update. By using the AnimationStore you have it updated and therefore the loader will work