UI in GDevelop (Originally HTML and CSS in GDevelop)

No, I don’t want to write markups here in Gdevelop.
But with html and css we can create a div element (a box)
Then,
… we can add color to it,
… we can add gradient to it,
… we can add a background image or gif as well
and we can also change it’s form keeping that element as a vector object.

This functionality will take the UI design one step further. You don't have to implement html and css. I believe you can do it with JavaScript also.

Just there should a button that creates a div or box on the canvas and there should be some important properties for that.


Main reason to have this feature:

Look at the my new UI.


It’s so simple. Here I have five different images or rectangles . I made those rectangles with Photoshop. That’s maybe a quite easy job right?

But what if I need to change the color of my rectangles later?
I have to open my Photoshop and do all of that again.

That's PAIN!

I can put up more reasons just comment for that.
1 Like

@4ian Please do this.

It doesn’t work like this. To render, gdevelop use either PIXI js or cocos2d-JS. Cocos probably uses a canvas and changes it I’m not sure, but pixi, the default renerer, uses either a canvas or WebGL. You cannot insert inside a canva any html/css.

2 Likes

Please dont ping dev for feature request.
Developpers come on forum.
Use ping if absolutely necessary.
You don’t even give people time to discuss about your idea, you already tagged a dev…

And this is not doable because the engine draw games in canvas/WebGL, and HTML/CSS are outside.

If you want draw box, you can use Shape Painter object.
You can also custom shape, line circle, the color too ! Outline thickness and color, etc…

1 Like

Yeah as Bouh and arthuro555 explained, the game is rendered using WebGL and more generally should not be using any HTML/CSS - mainly for performance reasons and because it’s something that is totally different compared to the game rendering - which is high performance 2d rendering and can’t be mixed easily with HTML.
In the future, games might run in an environment when HTML/CSS are not even accessible or existing.

2 Likes

@Bouh, @arthuro555, @4ian Thanks…But I didn’t actually mean to insert html/css I wanted an alternative to that honestly.
And I think I can use shape painter. Thanks a lot @Bouh

Tipp: before posting a feature request on the forum, try to ask on How do I on how to do it/if it is possible to do it or on the discord server of gdevelop.

1 Like

Yes I better delete this post.

@RIR360 I’d rather think that you shouldn’t delete this, but rather edit the topic carefully and push a more informed proposal.

I think I understand what you mean. But in that sense you actually need a GUI / UI editor inside GDevelop (like Unity or Godot for example), or the capability that will allow you to create and change shape elements on the fly, without having to change specific sprites in a third party tool, having everything created inside the engine.

Currently the Shape Painter is fine for simple things, but since you have to do everything programatically it’s very difficult to have that WYSIWYG feeling of a design tool, plus it needs more features. So in that sense this could very well become a discussion on how to expand the shape painter capabilities.

There’s also a very needed discussion that follows this topic, about implementing a scalable UI Editor inside GDevelop which could be either retained or immediate, but that would depend on the structure of GDevelop and what works better with it.

2 Likes

Hi
Maybe you can try this Button behavior extension that can help with your UI

Ok I was looking for alternatives for this thread and I saw that IMGUI, the open-source and industry standard GUI creation library which is used by many game companies, including Blizzard, SuperCell, Google, Ubisoft and many more has JS & Emscripten bindings.

This means it could be potentially added to GDevelop in the future to help create not only in-game UI interfaces but also external game tools to help develop games faster.

Currently the only way to have custom tools & editors added for specific requirements on your game (e.g Level editors, custom property editors, etc), is to recompile the engine and make the extensions by learning React and a plethora of other technologies that take time to learn and even more to master, so pro developers can’t leverage existing knowledge.

I think this would be a nice way to start catering to a more mature user base for the software.

https://github.com/flyover/imgui-js

If possible can this be added to the Trello roadmap then? What are your thoughts about this @4ian ?

We could also consider this to be proposed for a Google Summer of Code so students can implement it if possible.

2 Likes

If you take phaser as an example. The game renders on canvas but you can css style html element tags with absolute positioning. This allows for building HTML/CSS guis that float over the canvas.

This type of addition would greatly enhance gdevelop. Even with just the standard elements you could create listboxes, buttons and text input fields side menus or other menus etc.

As a sidenote: There is no reason to not add the ability to include any js library and access to html for proects. Users could customize their sound game or app with howler.js etc. The program already uses the same engine as the vscode editor – so for advanced users this is a no brainer.

If you read the points above, it is not about it being inherently impossible, we know it is not fully, but about it being unpractical as it doesn’t interoperate well with the canvas API and the engine, it not being adapted to games generally as it is pretty low performance, and there is no guarantee that any future game will run in an environment with DOM/HTML/CSS APIs present so it would just break there.

And there is no reason you would not be able to use a javascript library or customize your HTML directly, either by manipulating the HTML and JavaScript files of built projects or by using the DOM APIs in a JS event. If you are not knowledgeable enough to do either then you should not be using javascript in the first place.

Additionally, GDevelop, while supporting JavaScript code, is not made to be used via JavaScript but via its primary scripting method: events. I see no reason to encourage users to “customize their sound game or app with howler.js”, where anything they can do with howler in JavaScript can be done more easily via events. If not then submit a feature request for that feature to be exposed to events.