В общем при разработке игрули на phaser столкнулся с тем что этот движок в 3 версии не имеет стандартных элементов UI, что с одной стороны хорошо - меньше мусора и конечный вес, с другой стороны нужно изобретать велосипед.
Почитав статьи в гугле, как правило натыкаюсь на очередной абстрактный гайд UI для сайта, говорят о многом, о цвете, о золотом сечении, о материал дизайне, вот только про саму реализацию UI с нуля, а не красивый фреймворк из коробки, почти никто не говорит. (ну и отчасти понятно почему, почти везде есть стандартный набор ui элементов)
Собрать саму логику элементов труда не представляет, потому что phaser на удивление прост, и никакие палки в колеса вставлять не пытается, простой прототип кнопки легко делается за 20 строчек аккуратного, расписанного кода.
Проблема возникает когда я начинаю думать о выравнивании UI в целом. нужно ли ставить ограничение максимума\минимума разрешения, ограничение соотношения сторон, и как должен UI реагировать на масштабирование.
Как один элемент должен реагировать на другой, соседний, как ему учитывать размеры внешнего контейнера.
И какое оптимальное разрешение по умолчанию стоит выбрать для холста Canvas\WebGL.
В принципе если кто то знает статью о фундаментальных математических основах построения интерфейса, от ссылки я не откажусь.)
Ярослав Иванов, Ну серьезно кроме шуток, вот допустим мне нужно в ряд расположить 10 элементов, которые должны как то масштабироваться, как и должно масштабироваться расстояние между ними, еще нужно сделать поправку на соотношение сторон монитора, на его dpi...
Золотое сечение - оно забавное конечно, но оно не сильно мне поможет.
Игрушка для фрактальщиков, не более...
(Ну ладно мб в катсценах, если оные будут, мб и пригодится)
Можно поменьше токсичности, ну пожалуйста)
Ярослав Иванов, не то что бы все эти расчеты сложно реализовать, но как правило при изменении размера или соотношении сторон получается не очень красиво)))
5hinokaze, если вы не поняли, чему ухмыляется Ярослав Иванов, то поясню: нет "фундаментальных математических основ" в этой области. А если есть, то примерно такие же, как фундаментальные математические основы рисования совы. Иначе уже всех специалистов по UI/UX давно бы уволили и заменили этих сотрудников алгоритмом, которому зарплата не нужна.
hint000, я про другое в общем.
Если сильно упростить вопрос, то: вот есть Button, она имеет x,y,height,width, возможно padding и margin
Касательно Dpi: все на самом деле просто size * dpi/default_dpi * scale, да и вообще если подумать то само окошко игры будет другим в зависимости от dpi так что, проще подкрутить само окно игры под нужный размер
Должна ли кнопка изменять размер при масштабировании? (скорее всего да, но только до определенного "читаемого" значения)
Должны ли отступы padding и margin изменяться? (да, должны)
Что должно произойти если между двумя кнопками будет недостаточно места? (Как мне кажется они, должны пожертвовать отступами до минимального значения, дабы сохранить свой размер)
А если наоборот слишком много места? (и размеры кнопки и отступы достигли максимума, куда девать переизбыток расстояния?) - Вот тут уже интереснее.
Единственное решение которое я пока что придумал - держать специальный пустой объект заполнитель, которой может расширяться бесконечно, и вставлять такой объект между группами элементов, или по краям.
Но как правило UI гораздо сложнее, Как лучше и в каком порядке производить перерасчеты элементов интерфейса?
Отступы я также делаю в виде прямоугольников окружающих элементы.
Так же в полноэкранном режиме не последнюю роль играет соотношение, да были времена когда 19:6 был мастхев, но понаехали широкоформатники со своими лимузинами, а что бы потом ничего не переделывать, хочется уже сейчас обо всем этом подумать.
