Rodrigo

Members
  • Content Count

    36
  • Joined

  • Last visited

About Rodrigo

  • Rank
    Advanced Member

Recent Profile Visitors

975 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 and bottom properties returned by the PIXI Rectangle gives me the dimensions of the renderer. The follow up question is: Is this a safe way to get the renderer dimensions or I might run into some calculations problems at some point? Best, Rodrigo.
  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, Rodrigo. EDIT: Sorry I forgot to add the live sample link: https://codepen.io/rhernando/pen/bb9b55d5e813a9199f0e0e942cbc410c?editors=0010
  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. I assume that this is because the canvas per-se uses a bitmap representation that can't use floating numbers, right? (sorry if I'm wrong about this, but canvas is not really something I'm very experienced with). So basically the solution is turn the stripes dimensions to round numbers (which will mean stretching them out a bit out of the renderer by a few px) and problemo solved, right? Best, Rodrigo.
  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 this or is just what we get in canvas? Best, Rodrigo.
  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 = PIXI.Texture.fromImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/landscape.jpg"); PIXI.CanvasTinter.tintWithMultiply(bgTexture, "rgba(179, 179, 179, 0.5)", app.renderer.context.canvas); const bg = new PIXI.Sprite(bgTexture); app.stage.addChild(bg); Here's a live sample: https://codepen.io/rhernando/pen/620bdae58717e0d3af021db73f096155?editors=0010 Thanks, Rodrigo.
  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 before slicing the real size has to be corrected by that scale which leads to this numbers with all those decimal positions. Would be even noticeable if the error is commented out?. Could be possible for PIXI to throw an error after creating the slices in another situation?. The slices are moved by the user with touch events and the problem always appears in the final slice and for some specific image sizes and screen resolutions. Unfortunately I don't have any control over the image size. I don't know how many decimals PIXI actually needs in order to work properly, but this is math versus rendering. The math indicates that the number is bigger, no questions there, but with rendering in mind, will the 8th or 10th decimal of a pixel does even get rendered?. does it make a difference?, is it noticeable even in retina screens?.
  13. Rodrigo

    Greensock

    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

    Greensock

    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

    Greensock

    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 });