Sign in to follow this  
bliitzkriegx

Sprite blending

Recommended Posts

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

unknown.png

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.