PIXI Setup with typescript and pixi-extra-filters

[Rojoss]

Hey guys, we're having trouble using the pixi-extra-filters module in our project.
Could someone check if this setup is wrong?

package.json: https://gist.github.com/Rojoss/ea1c4bf6d7fd823ab8999df295f672ed

We also use pixi-display and are unable to use static types for that.
So everywhere we wanna use DisplayGroup we have to use any.
We can still use new PIXI.DisplayGroup though and the game runs fine with it.

So it really is just a TS compile issue it seems so I assume we've set something up wrong.
It'd be great if someone could help us out or share their TS PIXI setup.

[dmko]

http://www.html5gamedevs.com/topic/30317-boilerplate-setup/

I didn't use pixi-extra-filters but did use pixi-sound, I'm guessing same structure applies

Sorry it's so verbose, but lots of it is kindof notes to my self (e.g. since posting that I've already made some changes due to stuff that broke when I copied it over to my real project)

[dmko]

Ignore the gazillion npm commands, if you take a look at the package.json you'll see the actual devDependencies are pretty tight, especially if you don't want all the karma/mocha stuff.

When using typescript, so far, I'm finding no need at all for all the babel stuff for example

(and in general - the less moving parts the easier it is to isolate where things go wonky)

Edited May 11, 2017 by dmko
clarified

[Rojoss]

1 hour ago, dmko said:

http://www.html5gamedevs.com/topic/30317-boilerplate-setup/

I didn't use pixi-extra-filters but did use pixi-sound, I'm guessing same structure applies

Sorry it's so verbose, but lots of it is kindof notes to my self (e.g. since posting that I've already made some changes due to stuff that broke when I copied it over to my real project)

Thanks for your reply and sharing that repo.
I've looked through the setup quickly and didn't really find big differences between the package.json file and such.
I'm unable to find any usage of pixi-sound in your repo, could you point me to some code that imports it and uses it?

1 hour ago, dmko said:

Ignore the gazillion npm commands, if you take a look at the package.json you'll see the actual devDependencies are pretty tight, especially if you don't want all the karma/mocha stuff.

When using typescript, so far, I'm finding no need at all for all the babel stuff for example

I think our dependencies are also pretty tight, most of them are loaders for webpack and a bunch of react dependencies because we use React for the UI instead of Pixi.

I'm not too experienced with NPM and TS but the thing I noticed is that not everything has types.
For example the pixi-extra-filters and pixi-display modules don't have any types which might be the reason it doesn't compile?

[dmko]

28 minutes ago, Rojoss said:

I'm unable to find any usage of pixi-sound in your repo, could you point me to some code that imports it and uses it?

 

28 minutes ago, Rojoss said:

For example the pixi-extra-filters and pixi-display modules don't have any types which might be the reason it doesn't compile?

In that example repo there's some different libs that work in different ways to test the different situations one may encounter.

1. External vanilla js with no types and loaded only through html

pixi-sound has no types, and is only loaded externally. For that reason it must be cast to any at runtime and treated as a vanilla js Object:

https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/layers/Worker/WorkerManager.ts#L10

https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/layers/Worker/WorkerManager.ts#L20

A similar example is the Modernizr build:

https://github.com/dakom/html5-boilerplate/blob/master/src/app/core/utils/Path.ts#L12

 

2. External js with loaded only through html, but with types available if it were imported to the bundle (which we don't want to do for whatever reason, like to decrease bundle size or rely on cdn etc.)

protobuf.js library is also loaded externally - but has typescript definitions with the codebase, so it needs to be imported for the sake of getting those definitions:

https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/assets/AssetManager.ts#L4

however, since it's loaded externally, we don't want webpack to bundle it, so it's added to the webpack config excludes (that's not a one-liner since I define it in the common.config stuff, but you get the idea: https://github.com/dakom/html5-boilerplate/blob/master/common.config.js#L97

 

3. Similar but with the @types package available so no need to import anything for tsc to pickup at all

PIXI.js - isn't imported, only loaded via html, yet all the types are made available during dev (due to @types package which tsc detects) and it compiles fine

 

4. Stuff with type definitions and imported into the actual bundle.

One example of that are the generated proto.js and proto.d.ts files

e.g. imported here: https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/GameController.ts#L9

and used here: https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/GameController.ts#L21 / https://github.com/dakom/html5-boilerplate/blob/master/src/app/game/GameController.ts#L31 etc.

 

I think those cover all the different types of usage. Did I miss something?

[dmko]

I updated the docs to reflect this

https://github.com/dakom/html5-boilerplate#external-libraries