gdevelop.js colour palette swapping

[blurymind]

Description

Palette swapping is a method that has been used since the dawn of game development. There is a very impressive online demo of it in action, where the palette is cycling: http://www.effectgames.com/demos/canvascycle/

this request is however to figure out a way to swap colour palettes during runtime, on game sprites

• This can be used to achieve day/night/season cycle in a game, without having to use many versions of the same graphics.
• to easily create more variation in any game while using less graphics - reducing work for the developer

Spriter can actually do that too, and this video explains it very well: https://www.youtube.com/watch?v=voFlybzDuTw

Solution suggested

there is an opensource html5 implementation here http://www.effectgames.com/effect/article-Old_School_Color_Cycling_with_HTML5.html

another suggestion is to use a shader https://gamedevelopment.tutsplus.com/tutorials/how-to-use-a-shader-to-dynamically-swap-a-sprites-colors--cms-25129 and there is one already for pixi, but I havent tried it yet https://pixijs.io/pixi-filters/docs/ https://pixijs.io/pixi-filters/docs/PIXI.filters.ColorReplaceFilter.html

trello: https://trello.com/c/cfJc3fUd/195-colour-palette-swapping-of-sprites

[zatsme]

Shaders would add so much to GDevelop 😎

[4ian]

Thanks for adding the card and documenting possible solutions. 👍👍Much appreciated. The PIXI filter (wich are a shader) are the way to go :) There is a card by the way to expose in GDevelop 5 builtin shaders: https://trello.com/c/3tjeWGuc/94-add-support-for-choosing-the-effects-to-apply-on-layers-in-gdevelop-5

Two things:

• There should be a way to create and add custom shaders to the engine (for now you have to code them in the game engine, it's feasible)
• Shaders are currently applied on layers, they could be reworked to be added to any object

[blurymind]

I think it would be important to also be able to do apply shaders on a per object or even object group basis :)

I wonder if we can use the already embeded monaco code editor to write/edit shaders straight in the newIDE- see them change in real time as they are written. Godot has that - you can write your shader code and it updates the shader in the viewport

In this suggestion I am wondering if we can have color palette swapping as a ready to use out of the box solution- a part of gdevelop itself. It could be built ontop of a shader- but to the end user it is very easy to apply and manipulate. They dont need to know shader programming to use it, only to write new shaders

[zatsme]

If we can write shaders in the editor and load/save them as well then this would be awesome. The best ones can be added to the releases as we do now with examples 😄

[4ian]

I think it would be important to also be able to do apply shaders on a per object or even object group basis :)

Yes, that what I was saying by "they could be reworked to be added to any object" ;)

They dont need to know shader programming to use it, only to write new shaders

Yes that's the goal. The term in GDevelop is "effect", and the fact that it's implemented using shader is only a detail that user don't need to know.

So here, this would be an effect called "Color swapping", with two parameters: the color to replace and the new color. This can be implemented using shaders like how it's already done for the 3 effects integrated into GDJS (Night, LightNight and Sepia if I'm not mistaken).

Ideally, extensions could provide effects and ideally users could also write their own. Adding this to extensions would be a good first step I think :)

[blurymind]

http://www.html5gamedevs.com/topic/29482-palette-cycling-in-pixijs/

a working codepen of color cycling implemented in pixi https://codepen.io/mikelspr/pen/RpzZMX

click on goku to swap

[blurymind]

I am thinking of making a pixi filter out of this https://www.shadertoy.com/view/4tsyRB

Its the cleanest simplest approach I found. Gameboy palette swap uses Greyscale value of the pixel to indicate its index. Then you can just give the filter an array of colours. No need to say what colour to swap for what colour. Jus give it the palette 🎨

[4ian]

Seems pretty easy to use and giving great retro like results! Should not be too hard to implement it in the Effects extension? :)

[blurymind]

I finally ported this shadertoy thing to something kaboomjs can use https://twitter.com/blurymind/status/1415034084728967177

maybe this can later be ported over to gdevelop :) https://replit.com/@blurymind/paletteSwapShader?v=1

the fragment should work the same in pixi