These are chat archives for pixijs/pixi.js

18th
Sep 2017
Fidel Guajardo
@fidoogle
Sep 18 2017 14:13
Has anyone found good examples of using Masks in PixiJS?
Fidel Guajardo
@fidoogle
Sep 18 2017 14:59
I am trying to refactor this example I built: https://fierce-dawn-33751.herokuapp.com/pages/ekgPixi.html Each view is a separate canvas and I followed this example: https://bl.ocks.org/pkerpedjiev/cf791db09ebcabaec0669362f4df1776 Now the trouble is that I need to add more views and I get this error: "Too many active webgl contexts. oldest context will be lost" I figured I should be using one canvas with masking or clipping but I'm stuck and can't find good masking/clipping examples to follow.
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 15:21
this is not about masking
ah, that
the idea is that you add PIXI.Graphics with a big white rectangle to the stage
but instead of rendering it, pixi should use it as a mask
just "container.mask = myGraphics" will enable it
that's all
Sam Stonehouse
@SamStonehouse
Sep 18 2017 15:26
I have two ways of loading SVGs into base textures, one uses a HTML image element which has been pre loaded and the other uses the svg URL and leaves the loading to Pixi. Pixi isn't correctly using baseScale when using the HTML image but does when using the URL. Is this a bug or have I done something wrong?
HTML element example - https://jsfiddle.net/03m8g2tm/
URL example - https://jsfiddle.net/2uqa7chn/1/
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 15:27
There's always the poroblem with SVG in certain browsers
Sam Stonehouse
@SamStonehouse
Sep 18 2017 15:27
sourceScale* not baseScale
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 15:27
did you look at pixi sources how does it load svg?
Sam Stonehouse
@SamStonehouse
Sep 18 2017 15:28
Yes, it does it the same way
A new Image(); with onload set to process it
now find whats wrong there
PIXI.BaseTexture.prototype._loadSvgSourceUsingString = function() { ... } just hack it and try to fix
Sam Stonehouse
@SamStonehouse
Sep 18 2017 15:31
Will dig some more if you're not aware of any issues
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 15:31
I'm aware that there were many issues with SVG
and I did not participate in them.
Sam Stonehouse
@SamStonehouse
Sep 18 2017 15:33
Time to convince my boss to use pngs
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 15:33
svg is ok, just find whats wrong there
Fidel Guajardo
@fidoogle
Sep 18 2017 16:55
@ivanpopelyshev So the big white rectangle will have 12 black inner rectangles? Where the mask is black, then the chart will show underneath? Correct?
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 16:56
no, you need 12 big white rectangles
white -> mask , black -> nothing
i dont know how to explain it
its easier if you just try to implement it
Fidel Guajardo
@fidoogle
Sep 18 2017 16:57
Right, I wasn't sure what black/white meant. But I get it.
When I try to draw the charts, how will they not overlap? Is there a z-index? Do I set transparent=false on each chart? Thank you. I really appreciate this help.
Ivan Popelyshev
@ivanpopelyshev
Sep 18 2017 17:13
I dont know :)
you have to get only one idea. If there's container and you assign mask to it - it'll be rendered into separate framebuffer using that mask
to understand how it works, you need to experiment.
Fidel Guajardo
@fidoogle
Sep 18 2017 18:33
@ivanpopelyshev thank you so much for taking my question. I am trying now
Daniel Wood
@theamazingfedex
Sep 18 2017 21:45
Does anyone here know of any resources I could look at to get a ball-rolling animation in PixiJS? I'm trying to get some pool balls to appear to roll across the screen