Idea - advanced shader script field for making pixi filters and sharing them as extensions #2340
Replies: 15 comments
-
Basically, much like you can create actions/conditions/expressions/behaviors in an extension directly from GDevelop, there could be a way to do it for effects. |
Beta Was this translation helpful? Give feedback.
-
Using the event sheet to create shaders.. interesting :) Other engines update the shader in the viewport as you edit it in real time. Godot is quite good at this. In terms of visual programming, shaders have always used a node style connection approach. I would personally be quite pleased if as a starting point we can at least edit shader code in the IDE and see it update without having to re-run the game. If it's done in a pixi friendly way I think we might attract more pixi devs to gdevelop - to use it as a tool to r&d pixi filters |
Beta Was this translation helpful? Give feedback.
-
This is really cool:) It seems editing shader code is not hard to implement. new Filter(vertShader, fragShader, myUniforms); //myUniforms is a json And here is an example. |
Beta Was this translation helpful? Give feedback.
-
There is currently a task on the Trello board that nobody has picked yet.
If you upgrade pixi, it will help me also with my tilemap work, since later
on I don't have to update pixi-tilemap to the p5 version
…On Mon, Mar 30, 2020, 3:30 AM Quarkstar ***@***.***> wrote:
This is really cool:)
Creating filters is much easier in PixiJs v5. (May I ask when we willI
upgrade to pixi v5?)
It seems editing shader code is not hard to implement.
https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters
new Filter(vertShader, fragShader, myUniforms); //myUniforms is a json
And here is an example.
https://pixijs.io/examples/#/filters-advanced/custom.js
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#1474 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABRRWVKQXAU6P3HRV7J7BYLRJ774ZANCNFSM4K5Q6ZOA>
.
|
Beta Was this translation helpful? Give feedback.
-
Ok, I would like to give it a try. |
Beta Was this translation helpful? Give feedback.
-
We are already upgrading electron, might as well bump up pixi :) |
Beta Was this translation helpful? Give feedback.
-
I made an issue for Pixi v5 update here: #1605 |
Beta Was this translation helpful? Give feedback.
-
For curious i use shader with filters in my dev branch for make a color transparent like we can do on GD4. [Here my branch,] it's works on GD5, you need compile libGD.js before.(https://github.com/Bouh/GDevelop/tree/rewrite_method_in_RuntimeSpriteObject_for_GD5) |
Beta Was this translation helpful? Give feedback.
-
My vision for effect/shader, see that like the extension but it's custom filter for layer and object! Here two mockups, one for code editor in full tab. On tabs you can see the new types. On second mockup you see list of effect, and how configure the effect with name and uniforms. |
Beta Was this translation helpful? Give feedback.
-
It would've great if like Godot we can see the filters change as we edit
their shader code.
…On Wed, Apr 1, 2020, 1:45 AM Aurélien Vivet ***@***.***> wrote:
My vision for effect/shader, see that like the extension but it's custom
filter for layer and object!
Here two mockups, one for code editor in full tab.
Second the most interesting, the effect editor.
[image: idea_code_editor_GDevelop]
<https://user-images.githubusercontent.com/1670670/78087528-a6a5fd80-73c1-11ea-823d-e8a5f85113f2.png>
[image: idea_effect_editor_GDevelop]
<https://user-images.githubusercontent.com/1670670/78087823-95112580-73c2-11ea-9775-6be037d29d96.png>
On tabs you can see the new types, possibility to open file present as
ressource in to a code editor, like javascript file, shader.vert and
shader.frag for custom effect.
On second mockup you see list of effect, and configure the effect with
uniforms.
About uniforms we can provide to shader one or multiple image(s), so
naturally i think to add a type texture and select a texture with the
resource selector from GD!
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#1474 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABRRWVPBIMSCIZLY5AW76STRKKFA7ANCNFSM4K5Q6ZOA>
.
|
Beta Was this translation helpful? Give feedback.
-
Yeah that would be a nice addition to have - can you create a card on the roadmap?
For this problem of "I want to shorten the feedback loop between doing changes to my effects and seeing the result" I'm thinking of three things:
Solutions 1. and 2. would need some careful design to be able to use the same JS files to both have an effect in the game engine (what we're doing now) and also be able to use the effect in the editor (i.e: make an equivalent of Solution 3. is a particularly interesting idea that goes beyond effects. We could imagine tweaking the game engine and editor so that if the editor regenerate the preview, the game engine gets a signal and apply the changes in events, effects, etc... without restarting the game. |
Beta Was this translation helpful? Give feedback.
-
I would much rather be able to preview the filter's changes in the Ide somehow. The hot reloading solution sounds like a bigger task that would give us other gains though :) In terms of UIX, with @Bouh 's mockups- I dont like switching between tabs when working on a shader. I want the fragment code, the vertex code and the export parameters to all be in the same tab with where I can preview my changes. I dont want to have a situation where I am constantly flipping between tabs to see what's happening. Dont separate them into tabs please. They are all one thing. |
Beta Was this translation helpful? Give feedback.
-
It's a good reason i agree! |
Beta Was this translation helpful? Give feedback.
-
Yes I like that layout very much :) In general it would be cool if we could detach any tab as a new electron window - but that should be a separate task imo. Some people have complained that piskel and yarn are in modal windows,as they expressed desire to have their editor in their second monitor and be able to work in the IDE and the external editor without locking the IDE. It would be nice if at some point we remove their modality. But again- separate task imo |
Beta Was this translation helpful? Give feedback.
-
Agree that I prefer everything related to a concept (here an Effect, aka filter, aka "shader") in a single tab :) |
Beta Was this translation helpful? Give feedback.
-
So this is kind of a stretch, but what if we could write our pixi filters straingt inside gdevelop?
We already have monaco for editing, all we need then is a game object that can read the vertex shader code and render it.
There are already some open source apps that could let us edit shaders in real time and see the result
https://github.com/gkjohnson/webgl-shader-editor
try it here
https://gkjohnson.github.io/webgl-shader-editor/dist/index.bundle.html
Imagine this with one of your game sprites/animations in the previewer window
here is a video of how to set up a shader for pixi:
https://www.youtube.com/watch?v=wIC-CqsUplw
So now imagine the filter editor window having an extra option to add a custom shader and the ability to edit it via an external shader editor (similar to piskel's bundling) or monaco itself
This could lead to more shaders being made for gdevelop :) not just the pixi collection :)
Even pixi shaders made with gdevelop
Beta Was this translation helpful? Give feedback.
All reactions