Viewer library, help with translation from KineticJS

[jovination]

I have been using KineticJS for some time now, but recently it has fallen into decline and it has enough issues (well more like weaknesses) that if it does fall into obscurity I would want to avoid having switch my library later.

 

So I found Pixi and seen it supports 2D webgl, perfect! exactly what I was looking for and what KineticJS currently lacks.

 

Anyway the library is here https://github.com/jovination/viewer

It is the first library I have actively tried to create a presence on Github with, so the readme might be a little confusing.

NOTE: I have been actively fixing it up for the next version, at least 90% of it is redone atm but not committed (API has changed little though).

 

Its purpose is to use many images and layer them similar to how you might see in SVGs. Here is some examples of what its trying to be able to do.

 

http://www.sp-studio.de/

http://southpark.cc.com/avatar

http://generalzoi.deviantart.com/art/Pony-Creator-Full-Version-254295904

 

It currently uses KineticJS and its API is amazing for it, but its main focus is to structure loaded image objects to apply to canvas layers, so this can be applied to pretty much any library as long as the way it handles images is similar.

 

Ok so what KineticJS can do that I have not been able to see yet from Pixi is changing the color of every pixel on a single layer to an RBG or hex value (KineticJS does this through a filter). This library can set colors to "flat" layers (images containing only color), allowing color sliders and stuff (in the case of the examples, body colors and such).

 

So finally for the real question, how would this be done? Also saturation/brightness and all that? I have tried to look through the docs but there is so much and no clear direction for where to look for it (I am used to KineticJS and never went much into flash, so I just don't know where to look).

[xerver]

Have you tried using the Sprite's `tint` property? That should change the colors appropriately.

[msha]

Also saturation/brightness and all that?

Use a library like this one - https://github.com/bgrins/TinyColor

[jovination]

Use a library like this one - https://github.com/bgrins/TinyColor

 

That looks very promising! KineticJS does a lot of that by default but this takes it a step beyond, if its missing from Pixi then I am sure I would add that library as a dependency.

 

Also I am unsure if tint is exactly what I am looking for, I mean to completely change every pixel in an image from one color, completely to another, not "shade over it" (although I could be misreading). Its more of a fill then a tint.

[msha]

That looks very promising! KineticJS does a lot of that by default but this takes it a step beyond, if its missing from Pixi then I am sure I would add that library as a dependency.

 

Also I am unsure if tint is exactly what I am looking for, I mean to completely change every pixel in an image from one color, completely to another, not "shade over it" (although I could be misreading). Its more of a fill then a tint.

You can use ColorMatrixFilter for that.

[jovination]

You can use ColorMatrixFilter for that.

 

Thanks, I think that gets me to a point to give it a shot and see where it goes.

 

However one more question is, is there any resource for the structure of Pixi? I see some limited examples and vague docs that help a little, but not enough for a larger application reliant on a lot of moving parts. I am not really expecting an answer to this, but if there is some great resource I have not seen it would be a great help (something not listed in the Pixi js resource page).

[msha]

Thanks, I think that gets me to a point to give it a shot and see where it goes.

You're welcome. Here is a nice explanation of ColorMatrixFilter - http://www.html5gamedevs.com/topic/9679-colormatrixfilter-documentation/?p=57120

 

 

 

However one more question is, is there any resource for the structure of Pixi? I see some limited examples and vague docs that help a little, but not enough for a larger application reliant on a lot of moving parts. I am not really expecting an answer to this, but if there is some great resource I have not seen it would be a great help (something not listed in the Pixi js resource page).

Yeah the documentation is not perfect... when in doubt and google does not help, look into the PIXI source, don't treat it as a black box, it's quite readable and it's not huge(the core of it).

[jovination]

I typically do try to read source code, but usually its hard to see where you can connect object 1 to object 2, so that is what I meant by structure. Unless you actively work on it or contribute it can be very time consuming to learn. Though seeing what it can do is making it worth the time so far

[xerver]

I typically do try to read source code, but usually its hard to see where you can connect object 1 to object 2, so that is what I meant by structure. Unless you actively work on it or contribute it can be very time consuming to learn. Though seeing what it can do is making it worth the time so far

 

This exact reason is why we are rewriting everything for v3, it will be much easier to follow and read. https://github.com/GoodBoyDigital/pixi.js/issues/1296