Big objects, Graphics

[doqsoftware]

Hi. I'm currently learning PIXI and having some troubles.

Let me explain what I'm working on: there is a game that has 12000x12000px map size and the whole map can be scaled. I want to create map borders and later apply glow filter to it. 

My idea was create a rectangle with lower size (because creating 12000x12000 rectange takes too long and sometimes Chrome page even crashes) and then just scale it to the map size and it works, but when you scale in you can see the borders are a bit scuffed. I was trying creating just 4 single lines and then combining it but it takes the same amount of time. Is there any way of doing this correctly? Here's the code:

  create() {

    this.bordersContainer = new PIXI.Container();

 

    const mapSize = 12000 / 8; 

    const mapBordersWidth = 30;

    const mapBordersColor = 0x00ff00;

    const mapBordersGlowEnabled = true;

    const mapBordersGlowDistance = 100;

    const mapBordersGlowStrength = 4;

    const mapBordersGlowColor = 0x00ffff;

 

    const g = new PIXI.Graphics();

    g.lineStyle(mapBordersWidth, mapBordersColor);

    g.moveTo(0, 0);

    g.lineTo(mapSize, 0);

    g.lineTo(mapSize, mapSize);

    g.lineTo(0, mapSize);

    g.closePath();

 

    this.bordersContainer.addChild(new PIXI.Sprite(this.app.renderer.generateTexture(g)));

 

    if (mapBordersGlowEnabled) {

      this.bordersContainer.filters = [new GlowFilter({

        color: mapBordersGlowColor,

        distance: mapBordersGlowDistance,

        outerStrength: mapBordersGlowStrength,

        quality: 0.1

      })];

    }

 

    this.bordersContainer.cacheAsBitmap = true;

    

    return this.bordersContainer;

  }

 

 

[ivan.popelyshev]

> I want to create map borders and later apply glow filter to it. 

i'm sorry, I'm tired and just cant explain everything, you made a big mistake there that you can undrstand only when you have experience with both filters and cacheAsBitmap and renderTextures. Caching 12k x 12k pixels object is bad, 4x12kx12k = 576Mb memory . At the same time glowfilter is slow and for fullscreen object its even slower. 

Glow on rects is better done with gradient texture and manual nine-slice technique, just generate texture in photoshop and use 8 sprites for them.

Alternatively - use PIXI.NineSlicePlane with a texture with gradients.

Edited April 18, 2020 by ivan.popelyshev

[doqsoftware]

@ivan.popelyshev Thanks for the answer! Unfortunately i can't create texture because line (border) width is suposed to be resizeable as well as glow distance and strength.

I found another solution: create 512x40 rectangle and apply glow filter. Then make texture and use tiling sprite and it works! I'm sorry i'm newbie to pixi and game developing at all so there is a chance my question is going to be stupid and naive:

So, now i have tiling sprite with the length i need (12000x40) and it is going to be 1/4 side of my squared map. I can create 3 more, combine and the map is done. The question: is there a possibility create, for example, same sprite but 48000x40 size - it is going to be very long line with applied filter - and curve it at some points (12000,0;  24000,0; 36000,0)?  

[ivan.popelyshev]

>  The question: is there a possibility create, for example, same sprite but 48000x40 size - it is going to be very long line with applied filter - and curve it at some points (12000,0;  24000,0; 36000,0)?  
 

No way to do it in webgl.

So, you want an animated glow for big object. You can render it for smaller rectangle in a renderTexture, then use the texture for nineslice thingy, right?

[doqsoftware]

@ivan.popelyshevthat's exactly what i needed! Thanks!

[doqsoftware]

@ivan.popelyshev that's really cool to learn pixi and game developing, i like it. I have some more questions, is it okay if i ask in this topic?

Now i'm trying to achieve smooth transition between 2 sprites. They are just 2 white lines with the same glow filter but different glow color. What i need: 

and what i'm at now:

I was trying to shift them but the colors mix and produce the color i don't expect. Is there anything i can do?

[ivan.popelyshev]

Ok, suppose you have texture with white blur, then you can mesh shader that multiplies it by different colors depending on X coord. 

Sorry, this is not solvable with standard pixi shaders, you have to make your own: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js . Btw, you dont even need blur , you can make alpha depend on Y

If you dont have experience with shaders, you have to go through webglfundamentals of webgl2fundamentals first, or find someone who knows how to do that stuff. I'm not available at the moment  If you want I can send you invite to pixijs slack, there are some people

Edited April 25, 2020 by ivan.popelyshev