Layout like HTML/CSS

Hi,

Can gdevelop make a dynamic layout?
I mean something like HTML/CSS?
For example a list view of image? or tile view of images?

1 Like

GDevelop uses Pixi.js.

There’s an extension called FlexBox that is a layout tool (more usually used for website layout). In GDevelop you can use it to space objects into rows or grids. I used it once to make a simple inventory, for laying out my items in a row. You can control the spacing between items.

Objects that you want to control with FlexBox layout need to be given the FlexItem behaviour. The container for those items needs to be given the FlexContainer behaviour (it can be a sprite object, stretched to the size you need in the scene editor). You can use FlexBox to lay out sprite objects and text objects.

I also FlexBox to make a quest-log, and I arranged quest text objects vertically (see screenshots).

Container:

Item:

The documentation below is aimed at web designers, but it might still be helpful. Best thing to do is just experiment with FlexBox in GDevelop. You won’t need to manually enter CSS; all the settings for the containers and items are in the objects, under the Behaviours tab.

3 Likes