Jump to content


  • Content Count

  • Joined

  • Last visited

About Rodrigo

  • Rank
    Advanced Member

Recent Profile Visitors

1353 profile views
  1. Thanks!! I'll stay tuned for updates.
  2. Hi, Since yesterday I've been having problems accessing the API Docs (http://pixijs.download/release/docs/index.html). The error reported is this: This site can’t be reached pixijs.download’s server IP address could not be found. Best, Rodrigo.
  3. Thanks but in the pointer event this.parent.parent returns null, so I can't reach the dimensions there.
  4. Hi, I have this set up (simplified of course) |-PIXI APP |--- FIrst Main Container |------ FIrst Child Container |------ Second Child Container |--- Second Main Container |------ FIrst Child Container |------ Second Child Container I need to find the dimensions of the renderer (PIXI APP) in one of the child containers, for positioning purposes in a pointer event. Unfortunately this.parent.parent returns null. One alternative I found is using getBounds() function pointerDownHandler(e) { console.log( this.parent.getBounds() ); }; Using the left, right, top a
  5. Hello, Just a quick question. I'm trying to apply blend mode to some graphics in WebGL with no or unwanted results. Here is the setup: const graphics = new PIXI.Graphics(); graphics.beginFill(0x000000, 1); graphics.drawRoundedRect(150, 260, 300, 100, 15); graphics.endFill(); graphics.blendMode = PIXI.BLEND_MODES.SCREEN; // add graphic app.stage.addChild(graphics); Using either SCREEN or ADD, the graphic disappears and using MULTIPLY looks just like normal. I assume that this has to do with how graphics works, but I'd like to know if there is a way around this. Best, Rod
  6. Hi Ivan and thanks for the answer!! So what I gather from your answer and the code in the CanvasTinter class, is the following. I checked the sizes being used and applied by crop and canvas in these lines (https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasTinter.js#L78-L125😞 const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; crop.width *= resolution; crop.height *= resolution; canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); And while crop uses floating points, canvas uses round numbers.
  7. Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010 Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around t
  8. As you mention this is not the easiest task, I was looking around and many other frameworks and libraries are using filters on webgl. In the end what we'll do is use the Sprite tint property with GSAP's color plugin to create the transition from the tint color to white (no tint). The main issue with this app is that is being packed in a React Native view, so they guy in charge of that tells me that there isn't a chance to use webgl for now. Thanks again!!, Rodrigo
  9. Mhhh.... EaselJS has filters in it so I could try that, but I'm not very sure if I possess the abilities to produce a PIXI plugin or take the filters fro EaselJS and put them into the PIXI context. Regarding the color, yeah I started with the typical color 0xEEEEEE, since that gave me a solid color I innocently thought that using an rgba color could work I'll see where this goes and if I have any news I'll come back, Thanks Ivan!!
  10. Hello, I was working with a simple canvas app (for now we can't use the webgl renderer so we're stuck with canvas) and we're trying to colorize some sprites. Since we're using canvas filters and shaders are out of the question so I was wondering if this is somehow possible using canvas?. I created a simple test using canvas tinter but the result is a fully painted canvas and not a tinted texture: const app = new PIXI.Application(800, 600, { backgroundColor: 0x9cbac9, autoResize: true, forceCanvas: true }); document.getElementById("app").appendChild(app.view); const bgTexture =
  11. Thanks for the answer Ivan. I'll try with a console warning with the measurements to know when and by how much the frame doesn't fit and check if it produces any subsequent errors.
  12. Hi, I'd like to know if there could be any unwanted consequences or behavior if I comment out the error thrown when a frame doesn't fit in the base texture: https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Texture.js#L567 The thing is that I'm getting the error between the 8th or 10th decimal, something like this: 20.3333333333 + 20.6666666668 > 41 A brief description of what I'm doing is working with responsive images that are sliced by a specific amount of horizontal slices (depending on the screen height), each slice is an integer. Since the images are scaled be
  13. Rodrigo


    Sorry this escaped when I checked the codepen: document.body.appendChild(renderer.view); You're basically appending the renderer to the body tag, after the code is executed, hence it goes after the script tags. Append the renderer to the DOM element you want and it'll solve the issue: var pixiWrap = document.getElementById("banner"); pixiWrap.appendChild(renderer.view);
  14. Rodrigo


    You're welcome. I believe that's a codepen thing, nothing more. The target canvas tag you created is the one being used by PIXI. If you try on a regular server or the codepen debug view, you'll see it on the correct order.
  15. Rodrigo


    Take the timeline instance out of the animate method. Right now the animate method is being called on every requestAnimationFrame event, so on every one of those you're creating a new timeline instance which ultimately creates an overwrite issue, that's why the endless loop doesn't happens. This code works: animate(); function animate() { requestAnimationFrame(animate); renderer.render(stage); } var tl = new TimelineMax(); tl .to(displacementSprite, 10, { ease: Linear.easeNone, repeat: -1, x: -800, y: 800 });
  • Create New...