24 февраля 2012

GUI, небольшое затишье

Не устали от бесконечных интерфейсных "свистелок", которыми я наводняю журнал? Если нет, тогда можете налить себе чашечку чая, усесться поудобнее на своем стуле, расслабить ум и раскрепостить свою фантазию... Ведь сегодня я хотел бы рассказать о грандиозных планах и небольших продвижениях в разработке gui-элементов. С одной стороны - очень увлекательно создавать интерактивные элементы, которые красиво подсвечиваются, элегантно анимируются и смешно подпрыгивают. С другой - при разработке нужно руководствоваться не только эстетическими соображениями в рамках одной демки, но и представлять, как я бы смог использовать те или иные элементы в дальнейшем. Поэтому сегодня будут только текст плюс картинки, никакого кода или демок.
Переходя от одной демки к другой, я понял, что на самом деле я мало уделяю внимания практической стороне использования каждого элемента. И теперь я хочу заострить внимание именно на этом!

Интерфейс может стать целой игрой
Мало кто представляет, что зачастую встречаются игры, которые на самом деле являются комбинацией интерфейсных примочек. Возьмем ХОГ-игру, по сути обычный драг&дроп, отработка кликов по картинкам, проигрывание простых анимаций. А ведь качественная ХОГ-игра приносит разработчикам хорошие деньги. Именно поэтому я считаю, что интерфейсные механизмы должны быть максимально расширяемыми. Если это потенциально может принести неплохую прибыль - может стоит посидеть и реализовать все удобно?!
Включив воображение, становится ясно, что обычная кнопка может стать игровым объектом, запрятанным на поле: кликнули на него, сработало событие, посыпались искорки. А механизм драг&дропа можем прикрутить к игре, где нужно расставлять шестеренки по местам. Добавили пины-таргеты, куда можно установить ту или иную шестеренку, добавили сами шестеренки-объекты и запустили метод Update() у DragAndDropManager'а! Останется только соединять шестернки в одну цепь и крутить их все, когда это необходимо.

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

Кнопки
В итоге, посмотрев свежим взглядом на текущие наработки, я понял, что мне катастрофически не хватает нормальных кнопок. Даже для самых простых операций - навигация между слайдами, запуск какой-нибудь анимации, переходы между страницами меню и так далее. В итоге я решил добавить более "осознанные" кнопки, нежели TSimpleButton (демка для который, кстати, уже имеется в нашем арсенале). Но для начала я решил порисовать арт к этим контролам. Начал с кнопок навигации, вправо-влево-вверх вниз, спокойное и активное состояние получились такими:


Также решил нарисовать обычную кнопку. Переход между состояниями планируется с помощью изменения прозрачности. Навели мышь - и альфа второй картинки начинает увеличиваться, кнопка плавно подсвечивается. Должно быть красиво :)
А вот и картинка будущей кнопки:


Для разнообразия решил нарисовать спрайт для кнопки, активное состояние которой будет выделяться размером. То есть навели мышь - и картинка кнопки немного увеличились в размерах, раздулась; убрали мышь и кнопка вернулась в прежнее состояние. В итоге нарисовал вот такое чудо:


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


Tracker/Progress Bar
Также в жизни, для быстрой разработки демок очень нужны трекеры для тюнинга различных параметров: будь то физические настройки объектов, например плотность воды в одной из наших физических демонстраций, или же позиция тех или иных спрайтов, например положение хинтов на экране. В общем, вещь полезная и нужная в хозяйстве.
Нарисовалось вот такое:


Эдакий футур-стиль откуда-то вырвался, надеюсь впишется куда-нибудь.
В общем, рисую контент для будущих демок, а этот процесс занимает немало времени, честное слово!  :)

Заключение
Наверно, уважаемый читатель, твой чай уже допился, или же работа в виде начальника дает о себе знать, а может стопка учебников по предстоящим контрольным пылится на краю стола? Не буду больше задерживать, а только намекну, что скоро все вышепредставленные картинки начнут оживать сначала у меня на экране, а потом в виде демок разлетятся ко всем, кому это интересно!

Сообщения, схожие по тематике:

16 коммент.:

  1. Планируешь делать набор сценовских классов для рендера или же, как обычно, менеджер-обертка над тем же HUDSprite? Может все-таки глянуть в сторону VBO и шейдеров? Шейдерами делать всякие подсветки, прозрачность, маски накладывать одно удовольствие.

    ОтветитьУдалить
  2. Марцелл,
    VBO и шейдеры не могу использовать из-за ограничений на "казуальное" железо... для казуалок считается оптимальным использование DX7, на это же ориентируются издатели... соответственно, тестерский отдел издателя проверяет игру не только на топовом железе, но и на всяких ноутах/нетбуках и т.д.
    казуалки должны идти у всех, соответственно, шейдерам здесь не место.
    да и задачи вроде посильные обычным glBegin/End, чего тогда стрелять из пушки по воробьям?!

    а вот рендер - дело более интересное, что мне не нравится сейчас в HudSprite'ах и текущем подходе в виде оберток над этим классом? то, что я не могу одновременно держать несколько объектов с одной текстурой (и, соответственно, материалом) и менять у них у всех настройки самого материала, чтобы это действовало только на один объет, а не на все сразу... для гуи это критично! поэтому, конечно, в планах есть идеи как с этим разобраться, перейдя еще на одну ступеньку ниже по архитектуре сцены))

    ОтветитьУдалить
    Ответы
    1. Я у себя сейчас библиотеки материалов использую только как хранилище текстур. Беру ее хэндл и биндю с шейдером. Настройки материала думаю хранить в мастер моделе с возможностью оверрайда в объектах-пользователях. Благо, параметров материала обычно нужно от силы десяток.
      Потом, может быть, сделаю библиотеку текстур. При этом можно будет подумать в сторону опциональной автоматической выгрузки из видеопамяти давно не используемых текстур.

      Удалить
  3. Классные контролы :) Очень нравятся)

    ОтветитьУдалить
    Ответы
    1. очень рад!
      надеюсь найти время и сделать их "живыми"))

      Удалить
  4. Все хотел спросить. А что за шрифт ты в кнопках используешь?

    ОтветитьУдалить
    Ответы
    1. Вроде, этот шрифт leric нарисовал, для магнитов :)

      Удалить
    2. ggman,
      надпись "button" - Carrotflower
      цифра 19 и текст Volume - Berlin Sans FB Demi
      надпись "Video" - Eccentric Std

      perfect daemon,
      да, в магнитах есть один красивый рукописный шрифт! очень гордимся им))
      но больше нигде его не использовали, потому что он в картинках(!), а не в отдельном ttf-файле...

      Удалить
  5. Ответы
    1. ой... засмущал меня))
      рад, что понравилось! осталось найти время, чтобы оживить картинки в виде полноценных демок!
      правда, в связи с некоторыми перестановками в собственной жизни, "свободного" времени как раз становится все меньше и меньше...
      ну ничего, прорвемся!

      Удалить
  6. Жду скорей живых картинок) арт заинтриговал, выглядит очень приятно

    ОтветитьУдалить
  7. Когда же уже кончится это DX7? Вот я смотрю статистику на [url=Steam]http://store.steampowered.com/hwsurvey[/url] - 93.84% железа это DX10+DX11.

    ОтветитьУдалить
    Ответы
    1. на стим совершенно другая аудитория... соответственно, и игры там другие, и требования к железу выше...
      а казуал - это отдельная ниша, которая, если приглядеться, разрастается и проникает на всевозможные девайсы... тот же Cut the Rope или Gibbets - оказуаленное управление, милая графика, простота в оформлении... и таким играм шейдеры обычно ни к чему :)
      но шейдеры, эффекты по всему экрану, 3д - все это остается и никуда не девается, просто я туда не лезу :)

      Удалить
  8. Lampogolovii, прям очень радуют твои записи, нигде больше не нашел более менее нормальной инфы - что бы делать гуи нормальное. В общем у меня вопрос - не мог бы ты накатать что нибудь типа TEdit. просто в голову не приходит даже как это реализовать - пробовал смотреть исходники виндовских контролов. В общем если поможешь - буду рад :)

    ЗЫ: вот что получилось глядя на твои примеры. Реализовал кнопку с текстом, больше пока никак :)

    http://code.google.com/p/glscene-controls/downloads/list

    ОтветитьУдалить
    Ответы
    1. Максим Новиков,
      спасибо за добрые слова!
      Edit не так часто используется в играх, как в ПО... поэтому у меня он не стоит на первом месте, если честно...
      в AiWar (по ярлыку можно найти в этом журнале) есть мой самописный Edit, который используется для задания имени бота, можешь посмотреть его, если будет время...
      глянул твои примеры - отлично! рад, что мои наработки пригодились!

      Удалить