КО: советы по UI

Давно не рассказывал ни о чем полезном))).. Небось думали, что я забросил этот уютный блог? Ай-ай-ай, не хорошо так... выбросите скорее эти мысли и удивляйтесь новой записи. Итак, решил сегодня исправиться и черкнуть чего-нибудь полезного! Я тут делаю новую игру (удивлены?), и здесь много интерфейсов, много мучений и граблей... Буду по ходу реализации записывать свои мысли и идеи. Картинки будут из предыдущего моего айдла. Ничего сверхъестественного не будет, просто коротенькие советы/находки. Итак, облачаюсь в костюм КапитанаОчевидность и вперед!

Gui: ButtonsDemo

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

Gui: использование анимированных кнопок

В различных играх часто приходится видеть выбор персонажа, автомобиля или другого объекта с помощью кнопок пролистывания < > В рамках серии сообщений о gui-элементах я решил показать, что подобную смену картинок сделать невероятно просто. За основу решил взять предыдущую статью, в которой уже присутствуют сами кнопки пролистывания. Поэтому сегодня мы продолжим дорабатывать нашу демонстрацию по использованию анимированных кнопок. По сути, у нас уже имеется заготовка, куда мы просто добавим немного интерактивности и декораций. Заодно чуть подробнее остановимся на некоторых классах нашей иерархии gui-объектов.

Gui: простая анимированная кнопка

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

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

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

MenuManager, стартуем...

Меню в играх - очень интересная и обширная тема... Кто-то оставляет в нем всего две кнопки Play и Exit, а кто-то наполняет целым интерактивным миром, в котором игрок проводит довольно много времени. Конечно, это дело вкуса... Но так или иначе, а главное меню присутствует в большинстве современных игр! Поэтому у нас не остается выбора - необходимо сделать функционал такого меню, чтобы использовать его в своих играх!

GUI: Drag and drop

Я наконец сделал это! Сегодня продолжаем делать маленькие хитрости для интерфейса, список которых я старался составить в зависимости от нужд и интересов читателей. И на очереди у нас перетаскивание объектов. На нерусском это называется "Drag and drop". Всем знаком процесс копирования файлов - перетягиваем файл из одной папки в другую. Наверно буду банален, сказав, что это и есть самый простой пример drag'n'drop'а.

Рисование текстуры "на лету"

Доброго времени суток всем читающим этот журнал! :) Удивительно хороший день сегодня, поэтому под вечер я решил создать это сообщение, содержащее в себе рассказ о небольшой хитрости, которая зачастую пригождается при программировании игр. Когда я делал "Square is going home" меня тревожил вопрос о текстурах на объектах. Ведь от уровня к уровни размеры игровых тел могут меняться, и в голове вертелись две мысли: растягивать картинку, масштабируя ее до размеров объекта предварительно нарисовать десятки изображений, заготовив их под различные размеры тел Минусы этих подходов очевидны: в первом случае при масштабировании будут видны ужасные артефакты, во втором - придется делать массу лишней работы по заготовке текстур, при этом сборка уровня превратится в бесконечную рутину по созданию картинок (если для теста нужно увеличить размер объекта на какие-нибудь 10%, придется рисовать новую текстуру). Поэтому я выбрал программное рисование текстур для объектов и остался очень доволен результатом! То есть картинка создается "на лету" пиксель к пикселю. Сегодня я расскажу, как это можно с легкостью реализовать в GlScene.

Drag'n'drop, промежуточный результат

Всем доброго дня!

Давно не писал в журнал, так как навалилась целая лавина дел, которые никак нельзя отложить, заморозить или просто делать в расслабленном режиме. Психологически нелегкое выдалось время, но я стараюсь разобраться со всем изо всех сил. А сегодня я решил побаловать себя, нашел капелюшочку сил и выделил несколько часов на описание демки Drag’n’drop (в рамках создания gui-демонстраций). Точнее сказать, это еще не окончательная программа, а всего лишь заготовка; но тем проще читателям будет понять те или иные моменты работы законченной демки, а мне намного удобнее разбивать описание работы сложных классов на несколько сообщений.

GUI: Круговой выбор элементов

Недавно я приводил список ближайших добавлений в наш замечательный сундучок простых gui-элементов, созданных в связке Delphi+GlScene. Так вот первым в списке был круговой выбор элементов или как еще его называют "радиальное меню". Его и делаем сегодня! Применений у такого объекта множество: в RPG-играх: выбор заклинания, выбор оружия, а также для меню возможных действий - диалог с NPC, торговля и т.д. в квестах: выбор действия с объектом - поднять предмет, посмотреть на объект (подсказка), активировать элемент (открыть дверь, нажать кнопку и т.д.) в RTS: меню для строений - произвести юниты, продать строение, апгрейд и всякое такое В казуалках тоже может пригодиться... Так что давайте пополнять свой арсенал интерфейсных элементов для игр!

Предлагаем идеи для GUI

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

Delphi + GlScene: Простые анимации

Всем читателям привет! Давно не обновлял журнал, давно не программировал... Дело в том, что очень много разных дел, которые занимают все свободное время. Лето - сезон, когда не упеваешь ничего, а запланировал слишком много. Но сегодня дождь за окошком, поэтому я решил немного отвлечься и написать маленькую демонстрационную программу, несущую в себе простую идею - анимацию сделать нетрудно, а игроку от нее будет радостно! Итак, я решил сделать небольшую программу, на тему "графика и анимация". Ведь движения объектов, отклик на действия игрока - это основополагающая вещь любой интерактивной программы, в том числе и игры! Поэтому давайте не забывать, что доступные элементы должны подсвечиваться, хинты для них появляться, а кнопки нажиматься! Сегодня на растерзание возьмем три элемента:  Простая анимация полосы загрузки  Анимация крутяшки ожидания  Маленький появляющийся хинт на элементы интерфейса

GUI: Стилизованное анимированное меню

Давно не делал демок для журнала. Сегодня решил исправить этот недостаток и сел за Delphi, чтобы продолжить цикл сообщений о GUI. В поисках интересных интерфейсных решений, набрел сюда, но сделать такое за короткое время не удалось. Видимо подзабыл я математику и нужно садиться за листочек бумажки, чтобы накидать основные формулы для такой карусельки. Надеюсь, как-нибудь и такой PageSlider добавится в мою коллекцию GUI-элементов. А сегодня я остановился на анимированной подсветке элементов горизонтального списка. В итоге я скачал несколько иконок и соорудил небольшую демку. В принципе, такой подход может использоваться как для элементов меню, так и для подсветки пунктов в списке апгредов юнита, выбора магии или чего-то подобного.

Простое меню с кнопками

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

GUI: Панелька из 9ти кусочков...

Недавно один из форумчан glscene.ru спрашивал о способе отображения панельки с изменяемой шириной. Простым масштабированием (Scale) спрайта правильного эффекта не всегда можно добиться. Например, нам нужны закругленные края или небольшая тень от панельки. При масштабировании эти эффекты безобразно увеличатся и будут портить всю картинку. Как же быть в случае, если заранее ширина или высота такой панельки неизвестна и просто нарисовать png-шку нужного размеры мы не сможем? На ум приходит собирать итоговую картинку из нескольких элементов - углы, края и серединка. Вот такую панельку, состоящую из 9ти кусочков мы и будем сегодня делать на GlScene.

Tween-инг в Delphi, первые шаги

Вот и пришло время выложить демонстрацию tween'инга в Delphi! Если кто забыл, то я как раз недавно озаботился вопросом плавной анимации движения/поворотов/альфы и всего прочего. И даже начал кое-что делать в этом направлении. Конечно, пока работа над этим не закончена, но уже есть что показать. Поэтому сегодня постараюсь описать текущий принцип работы tween-класса. Надеюсь появятся вопросы и предложения... а все знают, что лучше дополнять код в процессе работы, а не переписывать потом все с нуля. Вперед, друзья!

Жизнь без скроллбаров

Начну с того, что меня всегда удивляет использование в демках и конкурсных работах стандартного vcl. Как же так? Мы рисуем сцену с большим количеством объектов, красивым фоном, эффектами, физически взаимодействующими телами, с помощью графических движков (вроде GlScene, HGE и других), а элементарные кнопки, чекбоксы оставляем на отрисовку устаревающему vcl? Думаю дело в том, что красивый, простой и работающий гуи под GlScene - большая редкость, и поэтому многие просто вставляют в игру стандартные кнопки - кинуть на форму TButton умеют все. С другой стороны, возможно, те, кто начинают делать свой графический гуи, хотят сразу построить навороченный интерфейс с панелями, формами, выводом тысяч символов текста и т.д. Надеюсь, это рабочий подход к программированию, но не мой. Мне всегда кажется, что нужно начинать с чего-то маленького, тогда сразу станут видимыми границы, которых хочется достичь. В общем, я буду создавать, описывать и выкладывать в своем журнале простые элементы гуи, чтобы ими можно было воспользоваться в любую минуту. Обычно одним из самых неприятных моментов в гуи являются скроллбары, поэтому поступим хитро и попробуем организовать прокрутку длинного списка без скроллбаров вообще. Собственно, отсюда и заголовок сообщения - "Жизнь без скроллбаров", это возможно, просто и приятно. Приступим!