jasonsturges

Members
  • Content Count

    18
  • Joined

  • Last visited


Reputation Activity

  1. Like
    jasonsturges reacted to bubamara in TilingSprite offset distortion over time   
    Seems like precision problem over the time. Try adding:
    this.tile.tilePosition.x %= this.tileTexture.width;  
  2. Like
    jasonsturges reacted to ivan.popelyshev in TilingSprite offset distortion over time   
    > Any insight as to what might cause this, or how to debug it?
    Old known bug, shader precison, not possible to fix, you should do what @bubamara said.
    Its both
    0. reported and solved with that workaround 100 times
    1. not mentioned in documentation and even in pixijs wiki (https://github.com/pixijs/pixi.js/wiki/v5-Hacks)
    2. Workaround is not integrated into pixijs vanilla but I think its possible 
    Maybe someone wants that situation to change and makes PR either fixing it either adding workaround to the docs. I wont do that because I'm on huge vacation from pixi.
  3. Like
    jasonsturges reacted to ivan.popelyshev in Remove `onComplete()` handler from shared loader   
    That's because resource-loader is in separate repo so our docs aren't usually synced up  https://github.com/englercj/resource-loader
    it uses mini-signals, its in second circle of pixi deps, and they have detach
  4. Like
    jasonsturges got a reaction from jonforum in Large texture data on mobile with zoom pan   
    Looking for some feedback on best practices for handling large texture data.
    On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side.
    Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed.  Zoom / pan is implemented from Pixi-Viewport project.

    These are available as vector, but prototyping as SVG seems to incur a significant performance loss.
    Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap.
    Roughly following the TileMap project... background image is sliced and loaded via multiple frames.
    Presume source code for the "webgl: zoomin and zoomout / retina webgl: zoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js
    The canvas version doesn't appear to be working:
    main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined
        at update (main.js:104)
  5. Thanks
    jasonsturges got a reaction from Tiggs in Change cursor view in PIXI.js   
    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated:
    https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  6. Like
    jasonsturges got a reaction from ivan.popelyshev in Component invalidaton lifecycle   
    @ivan.popelyshev This makes a lot of sense.  Really appreciate the insight here.
    Need to digest this, and might have some follow up questions.
    Similar situation with a complex data visualization involving a few thousand sprites.  Pixi.js performance is blistering fast, solid at 60fps, but I have some reservations about patterns I'm implementing.
    Thanks again for all the insight and support!
  7. Like
    jasonsturges reacted to ivan.popelyshev in Component invalidaton lifecycle   
    Another possibility is removal of updateTransform FOR's - but you need special event queue per root stage element, and every element should add itself to it in case of change. I've spent big number of hours to debug that, and now my work project can handle 6000+ animated objects and it spends time on them only when animation is switched to another, element moves, or camera moves far away from clipping rectangle.
  8. Like
    jasonsturges reacted to ivan.popelyshev in Component invalidaton lifecycle   
    Only partial.
    PixiJS cares about transforms of all elements, calculated vertices for sprite, graphics bounds, some other things.
    https://github.com/pixijs/pixi.js/blob/dev/packages/math/src/Transform.ts#L235
    https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L237
    https://github.com/pixijs/pixi.js/blob/dev/packages/graphics/src/GraphicsGeometry.js#L194
    https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/DisplayObject.js#L266
    We switched from simple dirtyflags to dirtyID's because usually one object is watched by several validators. The trick is also to set watcher updateID to -1 if parent was changed.
    Unfortunately we cant cover everything:
    If we implement dynamic props like in react and angular, it will seriously affect debuggability of code.
    I have my own Stage to execute flash SWF's, I forked it from mozilla shumway, fixed many things and covered them with tests, spent 2 years on it, and I still think it doesn't fit vanilla pixijs. I made it to cache results of filters, because they are too heavy: blurs, shadows, glows, e.t.c.
    If you want full control like that - I advice to copy code of pixi/display , sprite, graphics and whatever elements you need, to make your own scene tree. It is possible, I proved that. Most of our logic is already in inner components : Transform, Texture, GraphicsGeometry, e.t.c.
    Its even possible to make FilterSystem and MaskSystem work with your components, just need some extra interfaces like MaskTarget or FilterTarget.
    What I don't recommend - is to try track dirtyRects. Its hell, don't even try it. Stick to elements that you cache in renderTextures.
    Btw, that's the reason I want to make `cacheAsBitmap` not a boolean ,but a number. Just `cacheAsBitmap++` should invalidate the cache.
     
     
  9. Like
    jasonsturges got a reaction from ivan.popelyshev in Component invalidaton lifecycle   
    A display object's `render()` method will call every frame, right?
    Is there a component lifecycle for validation built in to Pixi, akin to fl.controls usage of fl.core.UIComponent?
    As in, a way to trigger rendering / update only when needed per display object (not the entire Pixi application) when multiple properties are set on the same frame.
    For example, if I have several properties that determine state of a display object, should I calculate that in `render()`; or, should I set an invalidate flag to be handled on the next frame?
    Pseudo-code example:
    class MySprite extends PIXI.Sprite { set color(value) { // ... this.dirty = true; } set selected(value) { // ... this.dirty = true; } render(renderer) { super.render(renderer); // Calculate display state here? // Is there a better lifecycle hook? // Or, manually validate using the animation frame? this.validate(); } validate() { // Validate presentation state if dirty if (this.dirty === false) return; this.dirty = false; // ...calculate state based on properties // if color is red and selected is true, texture = red-selected.png } }  
  10. Like
    jasonsturges got a reaction from ivan.popelyshev in Fuzzy blurry edges on transparent background on zoom   
    @ivan.popelyshev Awesome - yes, that makes significant improvement.  
    Have a few curved paths that become a little grainy with that scale mode, but that's minor.
    As always, really appreciate your help and insight!  Thanks!
  11. Like
    jasonsturges reacted to ivan.popelyshev in Fuzzy blurry edges on transparent background on zoom   
    texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST doesn't help?
  12. Like
    jasonsturges reacted to xerver in Change Background Color In JavaScript?   
    http://pixijs.download/release/docs/PIXI.SystemRenderer.html#backgroundColor
    renderer.backgroundColor = 0xFF00FF;  
  13. Like
    jasonsturges reacted to ivan.popelyshev in Extending PIXI.utils   
    Example of what can go wrong with pixijs + webpack + plugins: https://github.com/pixijs/pixi.js/issues/6208
  14. Like
    jasonsturges got a reaction from ivan.popelyshev in Extending PIXI.utils   
    Are there some examples of extending PIXI.utils namespace?
    Taking a look at Pixi's debugging and editor tools, the Free Transform Tool appears to extend PIXI.utils - cool library, looks pretty alpha without npm or webpack.  Just references PIXI in a global scope and attempts to prototype utils.
    If I want to extend Pixi through utilities, or maybe just provide webpack module libraries through npm, any recommendations such as good example projects to follow?
  15. Like
    jasonsturges reacted to ivan.popelyshev in Extending PIXI.utils   
    Extending such way its supported with webpack is difficult. Most of my plugins work like that:
    import * as PIXI from "pixi.js"; global.PIXI = PIXI; require("pixi-spine"); then pixi-spine takes global PIXI and adds "PIXI.spine" inside, and also a few methods for existing classes in pixi.
    You can use the same approach - make a library that works with global pixi. In future we'll provide a way that is free of problems like "there are two versions of pixi in node_modules now", we have some problems with peer dependencies.
    Right now dont focus on webpack and just do this thing.
  16. Like
    jasonsturges got a reaction from ivan.popelyshev in Fabric.js select and transform suggestions in Pixi.js   
    @ivan.popelyshev Minus multi-selection, that's a perfect match.
    Thanks!  Really appreciate all the support you provide.
  17. Like
    jasonsturges reacted to ivan.popelyshev in Fabric.js select and transform suggestions in Pixi.js   
    https://github.com/pixijs/pixi.js/wiki/v5-Resources#debugging-and-editor-tools
  18. Thanks
    jasonsturges got a reaction from themoonrat in Change cursor view in PIXI.js   
    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated:
    https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  19. Like
    jasonsturges got a reaction from ivan.popelyshev in Pixi.js color accuracy   
    Hi, my color values are off when rendering with Pixi.js
    For example, here I have a fill with #3984c5, but am getting #4c84c0 on render.
    const app = new PIXI.Application({}); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); app.stage.addChild(graphics); graphics.beginFill(0x3984c5) graphics.drawRect(50, 50, 200, 200); graphics.endFill https://codepen.io/jasonsturges/pen/PoYOdag

    Perhaps 8-bit vs 16-bit, but my Pixi.js app colors are not matching the source Flash application being ported.
    Something I'm missing, or not possible?
    Thanks
  20. Like
    jasonsturges got a reaction from ivan.popelyshev in Pixi.js color accuracy   
    Appreciate the insight - thanks, @ivan.popelyshev