Rodrigo

Thanks!! I'll stay tuned for updates.

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.

Thanks but in the pointer event this.parent.parent returns null, so I can't reach the dimensions there.

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.

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

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.

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.

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

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!!

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.

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.

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

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

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.

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

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

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.

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.

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.

Switched to canvas render and was able to use the video. Here's the codepen link:

Thanks for the advice. Is creating the texture and the sprite correctly, but the video doesn't pause, it keeps running as soon as it's done loading. I tried the following code with no luck: // load 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 ); // pause the video targetVid.autoplay = false; targetVid.pause(); targetVid.currentTime = 0; var videoBase = new PIXI.VideoBaseTexture(targetVid); videoBase.on("loaded", function(){ videoBase.source.paused = true; videoBase.source.pause(); videoBase.source.autoplay = false; console.log( "video paused => ", videoBase.source.paused ); console.log( "video autoplay => ", videoBase.source.autoplay ); }); 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); } videoLoader .add('testVideo', 'vid/head-track-small.mp4') .once('complete', function(loader, resources){loaderComplete();}) .load(); I tried to set up a codepen sample but I'm getting CORS errors. So I set up a live sample. The console logs return the expected values, ie, paused is true and autoplay is false, but the video still runs after being loaded

Hi, Sorry to bring this topic up again, but I'd like to know how to pause the video on the current version. I'm using the loader class to preload the video and I'm passing the resources to the callback and getting the HTML video element there, but using autoplay=false is not working and I'm getting an error when trying to use pauseVideo on the base texture. I found this: https://github.com/pixijs/pixi.js/blob/master/src/core/textures/VideoBaseTexture.js#L73-L74 But those work with the videoBaseTexture class and I'm using a regular texture fromVideo method. When I switch to use the videoBaseTexture I get an error when trying to use it on a Sprite instance: function loaderComplete(){ // now we have the video and we can use it. but first create a reference to it targetVid = videoLoader.resources.testVideo.data; // pause the video THIS IS NOT WORKING targetVid.autoplay = false; targetVid.pause(); targetVid.currentTime = 0; var videoTexture = new PIXI.VideoBaseTexture(targetVid); // pause the video as soon as it's loaded videoTexture.on("loaded", function(){ // videoTexture.baseTexture.autoplay = false; videoTexture.source.pause(); console.log( videoTexture.source ); }); // HERE I GET AN ERROR // 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); } Here's the error I'm getting, basically because the video base texture doesn't have a baseTexture property, so that returns undefined Uncaught TypeError: Cannot read property 'hasLoaded' of undefined Sprite.js:584 Although the line seems to be this one: https://github.com/pixijs/pixi.js/blob/master/src/core/sprites/Sprite.js#L592 Thanks, Rodrigo.

Ahhh nuts!!!! betrayed by a codepen's uploading issue. Thanks a lot for the help. Is working now. Best, Rodrigo.

Hi, Even this code (from the samples page) doesn't show the video: var renderer = PIXI.autoDetectRenderer(800, 600, { transparent: true }); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); // create a video texture from a path var texture = PIXI.Texture.fromVideo('https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/SampleVideo.mp4'); texture.baseTexture.source.loop = true; // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); setTimeout(function(){ console.log(videoSprite.width, videoSprite.height); console.log(videoSprite); },5000); videoSprite.width = renderer.width; videoSprite.height = renderer.height; stage.addChild(videoSprite); animate(); function animate(){ // render the stage renderer.render(stage); requestAnimationFrame(animate); } After 5 seconds, when the video is already loaded and playing the sprite dimensions are NaN.

Thanks for the answer and the great info Xerver. But the video still doesn't show. It loads, I can access and loop it and it sounds, but I can't see it: http://codepen.io/rhernando/pen/a556304479d6a44bfa5b698e40b18307/?editors=0010 When I log the sprite, the width and height are NaN