Rodrigo

Members
  • Content Count

    32
  • Joined

  • Last visited

About Rodrigo

  • Rank
    Advanced Member

Recent Profile Visitors

777 profile views
  1. Rodrigo

    Graphics with blend mode

    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
  2. Rodrigo

    Sprite Tint on Canvas

    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.
  3. Rodrigo

    Sprite Tint on Canvas

    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.
  4. Rodrigo

    CanvasTinter newb question

    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
  5. Rodrigo

    CanvasTinter newb question

    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!!
  6. Rodrigo

    CanvasTinter newb question

    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.
  7. Rodrigo

    Frame Fit Error Override.

    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.
  8. Rodrigo

    Frame Fit Error Override.

    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?.
  9. 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);
  10. 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.
  11. 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 });
  12. Rodrigo

    IOS 8-9 inline video

    Thanks, yep I looked into that issue in github and I'll try that solution and see how it goes.
  13. Rodrigo

    IOS 8-9 inline video

    Sorry to bring this back, but has anyone had any success using this polyfill or anything else to use videos as textures on devices?, on desktop there are no issues whatsoever, but on devices all hell breaks loose. There are also some issues in older versions of Android (prior to 4.4). Thanks, Rodrigo.
  14. Rodrigo

    IOS 8-9 inline video

    Hello, Is there an official reason for this. I'm having the same problem, as well as others, regarding using video with PIXI. With version 4.2.3, the problem persists. Also I'd like to know what's the official browser support for video in webgl, specially on devices (android and iOS), because I'm experiencing some issues with it. Mainly the video doesn't display on some of them. Thanks, Rodrigo.
  15. Rodrigo

    Unable to pause video immediately on load?

    A solution is to add a timeout in the loader complete callback: function loaderComplete(){ // now we have the video and we can use it. but first create a reference to it targetVid = videoLoader.resources.testVideo.data; console.log( videoLoader.resources.testVideo.data ); setTimeout(function(){ // pause the video targetVid.pause(); targetVid.currentTime = 0; },100); var videoBase = new PIXI.VideoBaseTexture(targetVid); var videoTexture = new PIXI.Texture(videoBase); // now create the sprite var vidSprite = new PIXI.Sprite(videoTexture); vidSprite.width = 500; vidSprite.height = 500; // add the video sprite to the main container stage.addChild(vidSprite); } Then after the sprite is added and outside the loader callback, I can control the video (targetVid resides outside the loader callback scope). Hopefully someone can give some insight of what's happening here. Best, Rodrigo.