• Content Count

  • Joined

  • Last visited

  1. No problem, my mistake.. everything is working now. Thanks for your time and effort Ivan!
  2. Thank you for the lighting fast response. I think I wasn't normalizing the values properly. If I use the ported class to generate the matrix and I do matrix[4] /= 255; matrix[9] /= 255; matrix[14] /= 255; matrix[19] /= 255; it yields the almost exact same results. E.g. Flash [ 0.6427246333893186 , -0.36302809886595877 , 0.14030346547664027 , 0 , 43.129999999999995 , -0.09345282791671743 , 0.5974019887504155 , -0.08394916083369791 , 0 , 43.129999999999995 , -0.26566995629707624 , -0.09822111651766524 , 0.7838910728147416 , 0 , 43.129999999999995 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 0 , 1 ] JS [ 0.6427246333893186 , -0.36302809886595877 , 0.14030346547664027 , 0 , 0.16913725490196077 , -0.09345282791671743 , 0.5974019887504155 , -0.08394916083369791 , 0 , 0.16913725490196077 , -0.26566995629707624 , -0.09822111651766524 , 0.7838910728147416 , 0 , 0.16913725490196077 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 0 , 1 ] Next week I'll test it with real data at the office (I'm at home right now) but It seems promising.
  3. Hi everyone, I'm trying to port an avatar editor made with AS3. The original app makes use of the gskinner Color Matrix class for adjusting brightness, contrast, saturation and hue of each part and stores those values in a DB. So imo I have two options here: 1. Port the class to js and try to use the stored values as they are. 2. Find an algorithm to transform those values to use them with PixiJS Color Matrix Filter directly. As I'm not very good at maths I've tried the 1st option so I ported the class to JS and tried to use it as the matrix for the color matrix filter. Saturation and hue seem ok but I cannot make brightness and contrast adjustments to look similar in as3 and pixi. I've been digging a bit and I've found that in the gskinner class, brightness and contrast are tweaked through the offset column while the color matrix filter in Pixi aren't. I've noticed as well the use of 'colorMatrix.frag' which is a WebGL shader impl but I don't know anything about them so I'm stuck. Do I need to implement a new custom matrix color filter or even a custom colorMatrix.frag (although I don't know anything about shaders as I said)? Any clues on option 2? Is there any other option I haven't take into account may be? Any help or directions would be very much appreciated. Thanks so much! You can see the ported matrix color code here (and I've attached the as3 code just in case):
  4. "pointerup" worked fine for me with 4.7, "pointerdown" didn't trigger a user event in chrome-android back then.
  5. Hi everyone, I've been working on a pixi.js - typescript boilerplate using webpack that I would like to share just in case someone finds it of any use. It comes with a helper class to manage some "trivial" tasks such as resizing, stage alignment, toggling full-screen and some utilities like fps-meter and a container to display some visual info. It's a bit heavy on dependencies though. Any suggestion, bug report or improvement submitted would be very much appreciated. Thanks!
  6. Oh, I see.. Thank you so much Ivan, I'll take a look at the implementations. Sadly the autoResize option is not listed in
  7. Hello everyone, I'm trying to make a resizable canvas following this guides I found in this forum I'm sure this topic has been discussed plenty of times and I have spent some time searching for some info I could use but with no luck (most of the replies make use of window.innerWidth/innerHeight). The thing is that It seems ok when displayed on a desktop or a mobile device in portrait mode, but when I change to landscape and reload the page nothing is shown on the canvas. As far as I know when it rotates, width becomes greater than height and coordinate system does not change at all, so I don't know what I'm missing (something related to mobile resolutions and ppi maybe?) I'm fairly new to html/css/js and I'm certain that the issue is related to my poor knowledge with some concepts. Here is the code anyway, any help or directions would be very much appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/> <title>My PIXI App</title> <script src=""></script> </script> </head> <body> </body> </html> * { padding: 0; margin: 0; } html { width: 100%; height: 100%; } body { background-color: lightslategrey; } canvas { display: block; position: absolute; width: 100%; height: 100%; } const width = 512; const height = 512; const appOptions = { width: width, height: height, resolution: window.devicePixelRatio, roundPixels: true, transparent: false, backgroundColor: 0x555555, }; const app = new PIXI.Application(appOptions); document.body.appendChild(app.view); coolResize(); app.ticker.add(coolResize); drawSquare(); drawSquare(app.view.width / 2 - 25, app.view.height / 2 - 25); function coolResize() { const multiplier = app.renderer.options.resolution || 1; const clientWidth = Math.floor(app.view.clientWidth * multiplier); const clientHeight = Math.floor(app.view.clientHeight * multiplier); if (app.view.width !== clientWidth || app.view.height !== clientHeight) { app.view.width = clientWidth; app.view.height = clientHeight; return true; } return false; } function drawSquare(x = 0, y = 0) { const graphics = new PIXI.Graphics(); graphics.lineStyle(2, 0xFF00FF, 1); graphics.beginFill(0xFF00BB, 0.25); graphics.drawRoundedRect(x, y, 50, 50, 10); graphics.endFill(); app.stage.addChild(graphics); } I've created a fiddle just in case it could be of any help: Thank you so much and I'm sorry for wasting your time. PS. Btw I don't know why should I resize first and then add the resize function to the ticker, shouldn't adding to the app.ticker be enough? I tried it but does not lead to the same result. I'll take a look to the docs later I guess.