Sprite blending

[bliitzkriegx]

Does anybody have any suggestions on how I can get this effect using PixiJS? I'm new to PixiJS and game development in general so any suggestion would be great.

How I think it works is that the water sprite is rendered on a higher layer and has its edges transparent. The only thing that doesn't work when I think about it this way is that the cells overlap eachother which doesn't make sense if each cell is in a grid at a fixed size.

Hope somebody can help demystify how I can accomplish this in PixiJS.

Thanks

[bliitzkriegx]

Also is sprite blending the correct name for this technique?

[ivan.popelyshev]

Yes, that's blending:

That stuff you want - its not newbie material. Its a big problem that is not possible to solve without extra knowledge. Usually big frameworks have solutions for that, but they are not universal - you just choose one of types of tilemaps. Btw, the way you want it doesn't even exist in https://www.mapeditor.org/ , you are going for algorithmic way and you think pixi has that. Well, bad news - pixi is a rendering library that does not support gradients yet and it certainly has no tiles algorithm that will make that thing for you automagically.

Here comes the necessary knowledge about tilemaps:

Its always about high level vs low level: there's your cool high-level algo for your game, and the low-level algorithm based on pixijs. You need to balance both, because pure high-level or low-level solutions are titanic.

High level:

However usually its managed with autotiles: you have to separate it by cells and draw transparent edges only on the coast. 

There are many autotiles techniques, like here: https://github.com/ivanpopelyshev/bombermine-shuffle, or here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/rpgmaker.js  - that's from rpgmaker MV.

Autotiles are not that difficult , you just need some time to code them or to search articles in internet about what people found.

Low level:

1. pixi sprites - the slowest of them all. It can be fine if you choose good high-level algorithm and RenderTexture caching maybe

2. pixi graphics - beginTextureFill(). You can fill graphics with many tiles of textures.

3. pixi-tilemap - https://github.com/pixijs/pixi-tilemap/ originally made for RMMV its a low-level algo that does the same thing as Graphics but much faster.

4. pixi mesh shader - https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , make your own "pixi-tilemap"  

RenderTexture caching - manipulation with layers, filters, and other things - it can suplement any of those low-level algos, but only if you understand how exactly does that work. Look at RenderTexture examples, look at pixi-layers examples, then look in source code of pixi rendertexture and filters.

How can be transparency achieved:

1. Draw those gradient edges in photoshop/paintnet, now your problem is to use them where they are needed.

2. Make a shader for mesh. You need even better higher level algo to fill a Mesh with both texture params and gradient params.

3. Wait when we have more gradient texture support in pixi, including alpha gradients. Maybe in 6 months or so.

The question difficulty:

Maybe in future versions of pixi this question will have simple answer. Or there will be easy-configurable plugin that makes it. Currently - its not. Prepare for pain.

Edited January 19, 2020 by ivan.popelyshev

[bliitzkriegx]

@ivan.popelyshev is there any update to more gradient texture support in pixi?

[ivan.popelyshev]

"support" for gradient texture existed for a long time.

https://pixijs.io/examples/#/textures/gradient-basic.js

The problem is that you need a mesh generator + shader that does specific thing that no one else right now doesnt need. This thing is very far away in my queue, for example people want me to convert pixi-picture and make curved projection first : https://github.com/pixijs/pixi-projection/issues/13 , https://github.com/pixijs/pixi-picture/issues/12

Yes, there are new shader tricks posted by pixi users from january, for example this line shader by @eXponeta : https://www.pixiplayground.com/#/edit/nyhhOobH-Sq1Vh93Q-6E_ . but nothing regarding your problem.

If you want to solve it, but didnt get my previous explanation, you have to actually persuade someone that your issue is very important or just hire someone for a beer. I can give you invite to pixijs slack so you can find a helper, is that fine?

Edited April 24, 2020 by ivan.popelyshev