LINUX.ORG.RU

Что-то вроде либы «css» для ui на SDL2 есть в природе?

 , , , ,


0

2

Сейчас потребовалось сделать игровой UI элемент типа контейнера/окна, что бы пихать в него элементы и перемещать их вместе в одной компановке, зачаток сего вчера написал вот видео теста -> https://youtu.be/cLt57H5NXZE , а вот когда сделал добавление элементов в контейнер (сейчас просто кнопка) призадумался что в целом гуй все эти паддинги марджины хорошо бы как то автоматизировать ну тоесть я делаю кнопку и скармливаю ей что-то вроде простейшего css и она встаёт на нужное место и ведёт себя по нужному, меня больше интересует позиционирование элементов, а не их вид вид то задётся общим стимле в си коде, а вот вычисления позиций отступов внутри контейнера или перестройка элементов это либо писать самому либо может есть какой микропроектик типа либа которая будем мне сама расчитывать позиции элементов? ну если и разрешено перестраиваться при изменении размеров контейнера конечно.

Ну к примеру я скармливаю ей размер контейнера и размеры + позиции элементов, задаю параметры скажем минимальных размеров того или иного элемента и описываю какие отсутпы справа с лева от контейнера и от других элементов, делаю руками изменение одно из элементов ui обновляю и оно мне выплёввает расчитанные новые позиции для всех которые я просто применяю к элементам ui. Есть в природе такое? Если нет то может посоветуете ссылки где всякие подводные камни о которых я пока не знаю есть при реализации гуя. Или просто советы хз =)

UDP: Короче, пока я отвечал на комментарии, я попутно пришёл к мысли мне динамическое ui нужно уже никак ибо я придумал как геймплей сделать по иному хехехе, для статического же ui и новых виджетов я просто напишу на существующих графическую конфигурялку котрая по итогу сохранит все значения размеров и позиций, а потом это конфиг аля ini можно просто загрузить или сгенерировать из него код инициализации ui элементов который потом можно просто использовать, а в случае чего руками подправить. Думаю это самый лучший для меня вариант. Так как сложность была в динамическом ui а прямо сейчас я как бы от него отказываюсь то и вопросов то вроде уже нет поэтому тему закрываю. Заканчиваю лить воду, всем спасибо =)

Я так понимаю, то чо тебе нужно - это построение GUI в контейнерном стиле по типу как это работает в Gtk или Qt. С указанием параметров упаковки, отступов и выравнивания элементов в контейнерах. Я не уверен, существует ли что то подобное для SDL.

eternal_sorrow ★★★★★ ()
Ответ на: комментарий от eternal_sorrow

Всё просто если я хочу задать позиции я просто делаю рсчёты от позиции контейнера, а вот если хоть какая то динамика тут уже я чёт подумываю что либо накостылю ужас медленный или пилить буду полвека, но это пока просто мысли, я только только начал всё это делать не обдумал ещё многое. Но судя по тому как писал базовый контейнер подумал что надо отановится и поискать всякие решения сначала а не сразу запиливать внутренние таблицы размешения элементов падинги марджины и всё вот это.

LINUX-ORG-RU ()

Сильно сомневаюсь, что подобное существует.

В сторону ImGui не смотрел?

$ git cl https://github.com/ocornut/imgui --depth=1 -b v1.71
$ cd imgui/examples/example_sdl_opengl2/
$ make
$ ./example_sdl_opengl2
EXL ★★★★★ ()
Ответ на: комментарий от VarfolomeyKote4ka

А ещё браузер, с которого ты написал этот пост, тоже на C++

Тут вопрос в том, шашечки или ехать. Ну если удобнее использовать Nukler, вместо ImGui, то проблем никаких нет. А вот самому компоновку эту делать та ещё рутина.

EXL ★★★★★ ()
Ответ на: комментарий от EXL

А ещё браузер, с которого ты написал этот пост, тоже на C++

Нет. Пишу из lynx.

Ну если удобнее использовать Nukler, вместо ImGui, то проблем никаких нет.

Ну мне он более удобным показалось. Но ОП сишник, и движок у него сишный...

VarfolomeyKote4ka ()

У меня UI - это система нод:

<alignment v_align="center" v_align="center">
   <button id="someId" sprite_id="button:atlas">
      <image sprite_id="icon" position="10 10" />
      <text id="title" stretch="both"
         v_align="center" h_aligh="center"
         font="font.ttf" font_size="20"
         position="30 10" size="100 20" />
   </button>
   <button id="anotherId" sprite_id="button_with_icon:atlas" pressed_scale="0.9 0.7"
      position="0 50" />
   <button id="yetAnotherId" sprite_id="button_default:atlas"   sprite_id_pressed="button_pressed:atlas"
      position="0 100" />
</alignment>

В итоге кнопка и ее содержимое всегда центрируются по центру окна и при изменении ориентации экрана, и при изменении его размера.

Подобных нод у меня не очень много. Но есть возможность (и я ее использую) создавать свои типы нод не трогая код движка.

andreyu ★★★★★ ()
Ответ на: комментарий от andreyu

Дополню, родительскую ноду можно скейлить, вращать, двигать, выполнять прочие трансформации и все ее дочерние ноды будут реагировать соответственно.

В целом - это стандартное использование нод для построения интерфейса/сцены.

andreyu ★★★★★ ()
Ответ на: комментарий от EXL

В сторону ImGui не смотрел?

Он же больше для отладочной инфы подходит. Кастомный интерфейс с его помощью не сделать.

Кроме того, он из коробки плохо подходит для систем, где нестандартная ФС. Для обхода этого я сделал форк, в котором реализовал абстракцию ФС, но автор не принял патч.

andreyu ★★★★★ ()

Для этого тебе нужна обязательно сцена объектов, где базовый элемент будет типа

BaseAreaEvent
{
     BaseAreaEvent* parent;
     Rect getArea() = 0;
};

соответственно на сцене идет обсчет всех sdl events и дергает виртуальные функции всех объектов с учетом родителя и перекрытия слоев.

позиционирование с дочерними объектами также идет через указатель на родителя.

я делал себе тестовый проект jsongui, там все базовые элементы gui описываешь типа легко все, и переход на другой json соответственно новый интерфейс, но логику так не реализуешь, и я его тебе не покажу)))

xml для этого не подходит вообще... тот же sprite в json я могу грузить строкой тогда это например идет из кеша спрайтов, а могу грузить объектом

{ "type": "file", "file": "maps.png", "crop": [10, 10, 50, 50] }

anonymous2 ★★★★ ()
Последнее исправление: anonymous2 (всего исправлений: 2)
Ответ на: комментарий от VarfolomeyKote4ka

У меня с nuklear полная интеграция https://i.imgur.com/5H32abx.png на нём я буду хотел делать редактор сцены и впилил его уже давно, но это не основное ui основное у меня своё то что от Corange досталось и было допилено частично под игру я не делаю универсальный движок или гуй я только под то что мне надо, дело не в виджетах, а в их компоновке руками хардкодить, а потом смотреть как оно не всегда удобно, короче я выше написал что пилю своё и точка и мне хочется описывать ui, а не кардкодить его. =) К тому же на nuklear не сделать просто кнопку, вроде как обязательно надо окно, и приходится костылять делая окно раным размеру кнопки и прозрачное, и при этом скруглённые края кнопки просто обераются до квадрата,а если сделать прозрачное окно ширше то hover на окно детектируется когда не надо, а если это исправить то ломается вид кнопки которая не может быть шире окна контейнера, да можно сделать окна во всю ширишу, но тогда мне придётся костылить если мне надо делать детект наведения мышки на группу элементов , если бы я просто интерфейс пилил с кнопками было бы пофиг и я бы смело и с удовольствием зафигачил всё на nuklear, но у меня для игры 5 нужных виджетов и 1 контейнер для их объединения там где надо, всё, больше нафиг ничего не надо т.к будет использован только этот набор только вот из него надо делать много много много разных комбинаций вот и всё.

LINUX-ORG-RU ()
Ответ на: комментарий от anonymous

Америка уже открыта, у меня частный случай и я пишу один единственный сраный ui контейнер, а не тулкит целый, мне только автоматическая и настраиваемая компоновка нужна если такая есть, иначе «просто» сам напишу

LINUX-ORG-RU ()
Ответ на: комментарий от VarfolomeyKote4ka

Ну EXL прав, тут на самом деле то язык не важен особо если иметь в виду внешнюю либу обрабатывающую позиционирование элементов. Вот если прямо внутрь пихать я бы фыркнул, а если просто линковка и использование в двух местах то чё бы нет =) Ну конечно же С всегда предпочтительнее.

LINUX-ORG-RU ()
Ответ на: комментарий от andreyu

Ну вот нечто подобное я и имел в виду, я в принципе представляю как написать обработчик подобного, но подумалось что есть нечто что работает абстрактно принимая подобное описание и координаты а затем в том или ином виде выдаёт новые координаты которые надо применить =)

LINUX-ORG-RU ()
Ответ на: комментарий от anonymous2

Да эт всё есть, только на родителей я не буду хранить указатели для этого есть контейнер который знает что, сколько и какие типы других виджетов лежат в нём, любые виджеты в произвольном порядке могут создаваться и удаляться включая сам контейнер, и управляет своими виджетами сам контейнер, вопрос не как реализовать ui интерфейсы, это фигня у меня есть базовый элемент, прямоугольник абсолютно всё остальное строиться на этих прямоугольниках. Ну вод представь сетку 10x10 каждая ячейка это виджет который может менять размеры все виджеты внутри контейнера размером 100x100 я беру рандомный виджет и удаляю его из сетки она должна перестроиться путём изменнения всех остальных до заполнения сетки, потом я беру опять ячейку и изсеняю её размер в три раза более остальные пропорционально ужимаются, а 78 виджет я лочу по размеру, а 83 может изменяться только по горизонтали, а ещё их можно переставлять местами с перестройкой положения. Вот про подобно поведение я и говорю =) От такую штуку в максимуме мне надо, найти или сделать гыгы =)

LINUX-ORG-RU ()