Nyrion

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. Maybe i'm not understanding you clearly but your saying for each Sprite on the stage have a duplicate Sprite (dark version) added into the "ambient" container? The thing is that every light on the stage can change position/scale/texture/layer and also intersect with other lights on the stage. There is also the tilemap (pixi-tilemap) to consider (tiles are generally on layer 0,1,2,3 only) which would be counterproductive to create sprites from. Each light should be visible through the ambient lighting (of course). Is there perhaps a different way to go about ambient lighting?
  2. This makes sense, that is a good suggestion. Awesome, thanks for taking the time! I considered this before but wasn't sure how to take into account if the position/size/scale/texture/etc of a light changes or other lights that interesect if that makes sense.
  3. The second fiddle I posted is without pixi-layers, will that work for your help? Yeah, I use v4 as there is a lot of dependency to allow for compatibilty with RPG Maker MV. Oh thats awesome, thanks for showing me that!
  4. Hope this makes sense, thanks!
  5. I'm not sure how to do that 😅, to get it to render in the proper order. The base of the tree is not illuminated by the light above it (I was referring to the youtube video you linked to).
  6. The render order should be: Tree1, Light_Sprite1, Light_Overlay (masked), Light_Sprite2, Light2_Overlay (masked2), Tree2 The result I want to get is similar to what the video you posted has for lighting. Global ambient lighting with lights at different layers (notice how the light in that video is underneath the base of the tree)
  7. I knew this would be a complex problem before I began as I couldn't find anywhere where someone else has done this (at least publicy posted). Do you have any suggestions on how to solve this? The only thing I can think of is to modify pixi-layers to include sub-children sorting of some type. For example... Say the "ambient lighting container" is at zIndex=999999 pixi-layers should render this at the appropriate zIndex. But lets also include a property say "considerChildZIndex" for the "ambient lighting container" And the "ambient lighting containers" children (which are mask Sprites) can also contain a zIndex (that matches the Sprite_Light's zIndex). So when the sorting is done in pixi-layers it will check for "considerChildZIndex" and if found will check the children of that and render the children in the proper order? Just thinking out loud, i'm not sure if this is realistic or feasible. Thanks ivan!
  8. Thanks for the response ivan. I wasn't aware that assigning parentGroup wasn't really needed, i've noted this. Maybe I don't understand how pixi-layers works or my logic isn't understandable. Basically, the light sprites render in the correct order. The tree sprites also render in the correct order. It's the ambient lighting container thats at the highest zIndex that has the problem. If I don't add children (mask from the light sprite's texture) then obviously the lights aren't visible since the ambient lighting container sits above everything. But since the ambient lighting container sits above everything so does all of its children. I've created a new fiddle, with the pixi-layer stuff stripped out. **Basically the bottom tree should not be lit by the light. https://jsfiddle.net/4u9gw2sL/
  9. Thanks for your reply ivan and thanks for the welcome! I am unable to post the full logic of this as it's tied into a massive project i'm working on, but i've stripped out the steps to get to this point and posted it on fiddle and a code example below to work with. I've also linked to a video of this in action. Fiddle Link: https://jsfiddle.net/1caoymvs/ (start at around line 754) Hope this code example is clear! Thanks again. this.container = new PIXI.Container(); this.container.zIndex = 1; this.container.sortGroup = new PIXI.display.Group( 0, false ); this.container.sortLayer = new PIXI.display.Layer( this.container.sortGroup ); this.stage.addChild( this.container.sortLayer ); // @stage is an instance of PIXI.display.Stage this.container.parentGroup = this.container.sortGroup; this.container.parentLayer = this.container.parentLayer; this.stage.addChild( this.container ); // The ambient lighting container with mask children this.ambientOverlay = new PIXI.Sprite( PIXI.Texture.WHITE ); this.ambientOverlay.zIndex = 999999; this.ambientOverlay.tint = 0x000000; this.ambientOverlay.width = this.width; this.ambientOverlay.height = this.height; this.ambientOverlay.parentGroup = this.container.sortGroup; this.ambientOverlay.parentLayer = this.container.sortLayer; this.container.addChild( this.ambientOverlay ); // @theTexture being a cached Texture this.light = new Sprite_Light( theTexture, this ); // Sprite_Light is a simple extension of PIXI.Sprite ultimately this.light.zIndex = 2; this.light.parentGroup = this.container.sortGroup; this.light.parentLayer = this.container.sortLayer; this.container.addChild( this.light, this ); /* The "tree" is part of a tilemap (think how RPG Maker MV uses pixi-tilemap) that's also added to "container". The tilemap is also assigned a parentGroup/parentLayer, the layering of the tilemap works fine. So it seems option 1 with a gray version might be expensive There are also other "Sprites" on the scene on various layers with textures The "texture" used for the light as well as the lights positioning may also be changed during runtime. */ window.Sprite_Light = function() { this.initialize.apply( this, arguments ); }; Sprite_Light.prototype = Object.create( Sprite.prototype ); Sprite_Light.prototype.constructor = Sprite_Light; Sprite_Light.prototype.initialize = function( texture, scene ) { Sprite.prototype.initialize.call( this ); this.texture = new PIXI.Texture( this.texture.baseTexture ); if ( this.lightMask ) this.removeChild( this.lightMask ); this.lightMask = new PIXI.Sprite( this.texture ); this.addChild( this.lightMask ); scene.ambientOverlay.removeChildren(); this.lightMaskOverlay = new PIXI.Sprite( PIXI.Texture.WHITE ); this.lightMaskOverlay.mask = this.lightMask; scene.ambientOverlay.addChild( this.lightMaskOverlay ); /* Here is the problem, adding the mask to @ambientOverlay Sprite_Light renders on the correct layer (2), but the mask renders on layer (999999) Is it possible for the mask as a child of @ambientOverlay to render in said container but follow it's own zIndex so it matches Sprite_Light? */ }; Nyion.mp4
  10. I've been trying to sort this out for a bit. I'll try to keep it simple. I'm using pixi-layers & pixi v4. I have Sprites that use a texture (generally png) as a light. This gets added to the stage and assigned to a sorting group. Layering works fine at this point. Next is ambient lighting, it's also added to the stage at the highest zIndex and assigned to the sorting group so (obviously it renders above everything else). Next each light has a mask that is based off of the Sprites texture. This gets added to the ambient lighting container. Herein lies the problem. The mask in the ambient lighting container, of course renders at the same zIndex that the ambient lighting container is at and not at the zIndex that the light sprite is at. The mask should render at the same zIndex as the light sprite. Any suggestions on how to go about this? Thanks! I've attached an example screenshot of my current results. As you can see the light sprite renders at the proper zIndex (lets say 3 for example). The tree renders at zIndex 4 for example. The mask renders above the tree (which it shouldn't).