• Content Count

  • Joined

  • Last visited

Everything posted by jSwtch

  1. jSwtch

    Adjusting Filters

    Hello, I am hoping to change built in PixiJS filter parameter with mouse cursor and time. Does this interactivity require writing custom filter/shader? For example (not working) app.ticker.add(delta => { mySprite.filters = []; colorMatrix.contrast(1 + 0.1 * delta); mySprite.filters = [baseFilter, colorMatrix]; });
  2. Ok thank you for the response. So I have a general question about performance and practicality -> I want to create geometric motion graphics similar to (see embedded video). I could do this with svg and gsap alone - but I thought I would get a performance boost for rendering the scene in PixiJS. I thought specifically that transitioning background color would be 'expensive' if done in the DOM directly instead of a canvas with webGL2. I do not plan to have 100 000s of elements. Would this type of animation be best done in with PixiJS + tweening or just svg + tweening.
  3. Hello, I have this code pen here. Just testing some functionality with GSAP, PixiJS, and PixiPlugin. I have three questions. 1. What is the difference between pivot.x, and pivotX here? I have found that I must use pivot.x with the rectangle and pivotX with the circle to center these graphics. 2. Why does the circle not change color like the rectangle? Is this a bug? 3. Is it more performant to create one PIXI.Graphics() object? I am hoping to create a series of geometric motiongraphic animations with shapes moving independently. What is the best approach here? https://codepen.io/jswtch/pen/LYVoaxJ
  4. In the docs is states "The WebGL renderer only supports the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like NORMAL." Does this mean for webGl and webGl2? I can't seem to access these other blend modes (color dodge, exclusion etc.) - but I am using webGL2 renderer.
  5. thanks Ivan! Worked like a charm myContainer.setTransform( widthPoint, heightPoint, scaleRatio, scaleRatio, 0, 0, 0, widthPoint, heightPoint );
  6. How do I change transform origin of a container? I am reading the docs and there is no anchor.set like sprites. This code apples the transform I want to all container children but it appears they are scaled from bottom left corner - I want to change this origin. myContainer.setTransform(0, 0, myRatio, myRatio);
  7. fixed issue with clean install and upgrade - I believe problem was with the ordering filter installations on top of pixi.js
  8. I am trying to test some changes on a previous version. Npm uninstall pixi.js Npm install pixi.js@5.1.2 --save Browser still shows 5.1.3 in the console. I have also tried incognito, clearing all browser data, deleting node_modules folder (and reinstall) , and disabling app service worker. Chrome and Firefox.
  9. Hello, I am trying to use SVGResource (https://pixijs.download/dev/docs/PIXI.resources.SVGResource.html). I hope to get some clarity on the use case and syntax. app.loader .add("svgTest", "./svg/svgTest.svg") .load(onLoaded); function onLoaded(loader, res) { const svgResourceTest = new PIXI.resources.SVGResource( res.svgTest.data ); app.stage.addChild(svgResourceTest); } I am getting error "Uncaught TypeError: Cannot set property '_parentID' of undefined I did inspect res.svgTest.data it is just an <img> with src of "./svg/svgTest.svg" - not <svg>
  10. Is this from method generally preferred?
  11. Looking at the github basic usage example => Why is the ticker nested inside the loader? const app = new PIXI.Application(); document.body.appendChild(app.view); app.loader.add('bunny', 'bunny.png').load((loader, resources) => { const bunny = new PIXI.Sprite(resources.bunny.texture); bunny.x = app.renderer.width / 2; bunny.y = app.renderer.height / 2; bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; app.stage.addChild(bunny); app.ticker.add(() => { bunny.rotation += 0.01; }); }); I am comparing to this example (https://pixijs.io/examples/#/demos-basic/tinting.js PIXI.Sprite.from(... Is there a significant difference between this syntax? new PIXI.Sprite(... Also in this tinting example they are setting: dude.turningSpeed = I don't seem to be able to set these type of custom properties using the Github basic usage example. I created this codepen that shows the problem I have of all sprites acting together https://codepen.io/jswtch/pen/gJBaBz?editors=0010
  12. Hello, I want to make a static site that uses pixi to render some graphics. However, I don't want to load the library on mobile devices. I only want to graphics to appear when a screen size is some min width, and I don't want any overhead for the smaller devices. I use Hugo for static site generation. How would I implement this condition?
  13. Maybe this could help: https://github.com/davidfig/pixi-viewport
  14. I don't think it's dying - just the opposite! Nearly every forum/thread I have read says "workflow, flexibility, and performance will be greatly improved in V5"
  15. Hello, I am interested in recreating this effect here: https://gijsroge.github.io/tilt.js/ in pixijs. Is this best modeled with a skew or a scale? I am not really sure where to start. I have been looking at https://pixijs.io/examples/?v=release#/projection. Is 'containerSprite.proj.mapBilinearSprite(containerSprite, quad)' more expensive to run than 'containerSprite.proj.mapSprite(containerSprite, quad)'? The only difference I see is the ability to wrap around backwards, which isn't a use case I need.
  16. Hello, I have seen different methods for creating a sprite from a texture. Is there a difference? I am mainly looking at PIXI.Texture.fromImage(... vs renderer.generateTexture(... sprite = new PIXI.Sprite( new PIXI.Texture.fromImage( "...img/path" ) ); app.stage.addChild(sprite); let texture: PIXI.Texture = renderer.generateTexture("...img/path"); let sprite: PIXI.Sprite = new PIXI.Sprite(texture); stage.addChild(sprite); Also for particle emitters is it better to use sprites or textures? I see that (https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips😞 "textures are automatically managed by a Texture Garbage Collector". However most examples of particle emitters I see seem to use sprites. Edit: I see that sprites are textures
  17. jSwtch

    Text is searchable?

    Thanks for the replies!
  18. Hello, When I use pixi to render text, is that text seen by the search engine? I am using vue.js with server side rendering - so I know my pages are prerendered. Does this work with pixi?