Giedrius

Members
  • Content Count

    24
  • Joined

  • Last visited

  • Days Won

    1
  1. problem is that method processInteractive is protected - cannot override it. What can I do?
  2. Now I am working on another puzzle - to make children interactive I used to set interactiveChildren flag. Now how do I make the same for children in custom array? I found a method processInteractive in InteractionManager.js which seems to be responsible for that, but how do I override it ?
  3. Yes, I did miss updating transforms - I've override the updateTransform() method and everything works fine now: updateTransform() { this._boundsID++; this.transform.updateTransform(this.parent.transform); // TODO: check render flags, how to process stuff here this.worldAlpha = this.alpha * this.parent.worldAlpha; for (var i = 0, j = this.children.length; i < j; ++i) { let child = this.children[i]; if (child.visible) { child.updateTransform(); } } for (var i = 0, j = this.childrenRows.length; i < j; ++i) { let child = this.childrenRows[i]; if (child.visible) { child.updateTransform(); } } };
  4. Thank you Ivan, I got it working and I need those rows to belong there unfortunately. Now I face another chanllenge - I need include those childrenRows in bound calculations also. What I did is I've overridden the calculateBounds method: calculateBounds() { this._bounds.clear(); this._calculateBounds(); for (var i = 0; i < this.children.length; i++) { let child = <any>this.children[i]; if (!child.visible || !child.renderable) { continue; } child.calculateBounds(); this._bounds.addBounds(child._bounds); } for (var i = 0, l = this.childrenRows.length; i < l; i++) { let child = <any>this.childrenRows[i]; if (!child.visible || !child.renderable) { continue; } child.calculateBounds(); this._bounds.addBounds(child._bounds); } this._lastBoundsID = this._boundsID; } but now my bounds calculation depends on zoming level. If I zoom in, the bounds are much larger than they should be. I am calculating bounds on that Sector Container with rect = this.getLocalBounds(); Did I miss updating transforms of childrenRows?
  5. Thank you! what I did is: export default class Sector extends Container { constructor() { super(); } renderWebGL(renderer) { // if the object is not visible or the alpha is 0 then no need to render this element if (!this.visible || this.worldAlpha <= 0 || !this.renderable) { return; } // do a quick check to see if this element has a mask or a filter. if (this._mask || (this.filters && this.filters.length)) { this.renderAdvancedWebGL(renderer); } else { this._renderWebGL(renderer); // simple children! for (let i = 0, j = this.children.length; i < j; ++i) { this.children[i].renderWebGL(renderer); } // simple rows children! for (let i = 0, j = this.childrenRows.length; i < j; ++i) { this.childrenRows[i].updateTransform(); this.childrenRows[i].renderWebGL(renderer); } } } and I got those childrenRows rendering on the screen, but I think it's not updating on every stage transform (zooming in out) now and parent container is not the same with/height as it used to be. I had to set parent property for row objects to be able to updateTransform, and do I need to set _parentID = -1 to ensure child transform will be recalculated? The problem is that _parentID is protected and only accessible within TransformBase class. so I am stuck and asking for help again 😐
  6. I am using pixi-v4, I mean if I copy all the render method from Container: export default class Row extends Container { constructor() { super(); } render(renderer) { // if the object is not visible or the alpha is 0 then no need to render this element if (!this.visible || this.worldAlpha <= 0 || !this.renderable) { return; } // do a quick check to see if this element has a mask or a filter. if (this._mask || (this.filters && this.filters.length)) { this.renderAdvanced(renderer); } else { this._render(renderer); // simple render children! for (let i = 0, j = this.children.length; i < j; ++i) { this.children[i].render(renderer); } } } } this.renderAdvanced(renderer); -> property renderAdvanced does not exist on type Row; this._render(renderer); -> property '_render' does not exist on type Row My goal is to override that method and to use it only for Row object rendering? If yes, then how do I do it?
  7. Thank you guys for suggestions, appreciate that! I would like to try to override render method, but not sure how to do it. I am extending Container class, so if I copy render code there, it yells at me that this.renderAdvanced, this._render does not exist. export default class Row extends Container { constructor() { super(); } render(renderer) { // ? } }
  8. Is it possible to tell pixi to render children which are not in Container.children array? They are in separate Content.array Thanks!
  9. Hi guys, I couldn't reproduce the problem in simple pixi app scenario. It works like magic in simple case. So the problem is somewhere in my current implementation. @ivan.popelyshev I pass empty texture, just like I wrote before. Now I see that it has defaultAnchor property, so it's fine. this.item = new Sprite(Texture.EMPTY); then I add it to the container and force render - all fine. Then I set the real texture, as base64, loaded with PIXI.loader: this.item.texture = this.settings.textures.c_fillT_S.texture; this.item.anchor.set(0.5); this.item.scale.set(scale_factor); this.item.tint = gray100; do some tweaking and force render again and it breaks in packGeometry method: var uvs = element.uvs; <--- uvs is null. (element is Sprite) float32View[index++] = uvs; <-- Cannot read property 0 of null That is all I can tell for now, will update once I will find out!
  10. I found the problem. The problem is that my loader loads textures and calls the callback function to create sprites long after the scene has loaded. And here I face problems - if I am creating a sprite from the loaded texture - I get an "Uncaught TypeError: Cannot read property 'x' of undefined" (it does not have defaultAnchor property). I've found out that I need to set empty texture first, like this: this.item = new Sprite(Texture.EMPTY); this.addChildAt(this.item, 0); and then, if I try to set the loaded texture: this.item.texture = this.settings.textures.c_fillT_S.texture; It does set the texture, but as a result BatchRenderer elements array has plenty of "null" items and if try to render that thing - I get the following errors: Uncaught TypeError: Cannot read property '0' of null at BatchRenderer.packGeometry (core.es.js:11542) Uncaught TypeError: Cannot read property '_texture' of null at BatchRenderer.flush (core.es.js:11398)
  11. for example we are loding this PNG file in base64: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC while debugging I noticed that it goes into prepareUrl method which splits the dataURI into two parts: directory: "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////" file: "9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC" we used Texture.from("data:image/png;base64,..."); before and it worked fine. It's strange, but when pasting this dataUri in pixi playground - it works just fine, so the problem is somewhere in my code!
  12. We are trying to load a series of data-URI images using base64 like this: PIXI.loader .add("c_fillT_S", "data:image/png;base64,iVBORw0...") .add("c_fillT_M", "data:image/png;base64,iVBORw...") .add("c_fillT_L", "data:image/png;base64,iVBORf...") .load(callback) We need to embedd those small images, so I am not considering importing external files at this moment. I did some debugging and saw, that loader tries to extract file name and directory from that data-URI and of course it's not working. The app breaks not on assigning these textures to sprites but on rendering the scene. Am I doing something wrong? Thanks!
  13. Thanks, Ivan, is it true, that childs of particle container can't have their own childs?
  14. Hi all, We are drawing ~10k interactive sprite circles. We are grouping them in separate PIXI.Containers (sectors). Inside those we do another grouping, this time we use particleContainers to speed up with sprites inside. The problem is - when I try to calculate local bounds of sector container which is certainly filled with particle containers and with sprites - it returns width = 1, height = 1. Can it be the case because of particleContainers? Thanks!
  15. Thank you @ivan.popelyshev! We used three different sized SVG's, created textures from base64. and changed them dynamically based on scale. And yes, we are tinting the sprites.