Продолжим тему создания игровой графики в редакторе Xara X 5. На этот раз речь пойдёт об игровом интерфейсе, а конкретно о кнопках.
Кнопки – это то, без чего вряд ли обходится любая игра. И хотя они вряд ли влияют на собственно геймплей, от их качества и удобства зависит впечатление пользователя об игре.
Типы кнопок
Посмотрим на два основных типа кнопок, встречающихся в игровых интерфейсах. На самом деле кнопка может сочетать в себе разные атрибуты, и поэтому в реальности вариаций гораздо больше. Но есть два уровня визуализации, которые зависят от общего стиля игры. Даже если они смешанные, мы смотрим на них и всегда понимаем, где какой:
1. Плоская графика
Прямоугольник с надписью – самая простая реализация кнопки, которую можно даже не рисовать в редакторе, а сделать программно. Такие кнопки вы можете использовать для построения прототипа игры. Не стоит сразу рисовать готовую графику, так как скорее всего вам захочется поменять и размер, и расположение, и количество, и внешний вид элементов интерфейса.
Однако это не значит, что такой тип кнопок не применяется в готовых играх. Мы рассмотрим этот вопрос позже, а пока...
2. Объём
Раз плоские уже были, то остаются только объёмные. Такие кнопки часто имеют вид неких материальных объектов, а не просто прямоугольников.
Может быть, вы подумаете, что объёмные кнопки делать сложнее. Это и так, и не так. Объёмные, возможно, требуют больше труда. Но с другой стороны, их легче сделать понятными. Что это значит?
Состояния кнопки
Сама по себе графика кнопки это лишь половина дела. Кнопка должна быть активным элементом, взаимодействующим с игроком. Поэтому у неё может быть три состояния и одно дополнительное:
1. Отжатое
Это состояние кнопки по умолчанию.
2. Наведённое
Это состояние кнопки, когда мы наводим на него курсор. Изменяясь при наведении, кнопка показывает, что она активна и её можно нажать. В интерфейсах с тачскрином, где нет курсора, а есть только палец, это состояние отсутствует.
3. Нажатое
В это состояние кнопка переходит, когда мы нажимаем на ней (делаем клик). Оно важнее всего, как ни странно. Как раз от него зависит, насколько хорошо будет "чувствоваться" кнопка.
4. Неактивное
Это состояние показывает, что кнопка в принципе есть, но в данный момент её нажать нельзя.
Во всех этих состояниях нет прямо-таки острой необходимости. Можно просто нарисовать статичную кнопку и всё. Но чем больше вы делаете для кнопки разных состояний, тем более понятной и "кликабельной" она становится.
Клик по кнопке должен вызывать удовлетворение.
Так вот, объёмные кнопки нам понятнее в том смысле, что мы знаем, как у них происходят нажатия и отжатия, как это выглядит. Именно потому что это можно передать объёмом. У плоских же кнопок такого свойства нет, но нажатое состояние (как минимум) нужно как-то отобразить, и сделать это получается труднее – не графически, а концептуально.
Подложка
Как правило, если кнопка объёмная, у неё должна быть некая основа, на которой она расположена. Иначе говоря, чтобы кнопку можно было нажать, нужно, чтобы ей было куда вжиматься. Это также делает её понятнее.
Бывают объёмные кнопки, которые просто висят в воздухе или лежат на каком-то фоне, не будучи явно прикреплёнными к нему:
И при попытке представить, как они должны нажиматься, мы почувствуем некий дискомфорт, потому что это выглядит неправильно – они нажимаются в пустоту. Либо, скорее всего, у них просто нет нажатого состояния.
Тут надо признать, что выразительных средств много, как и восприятий, так что в принципе любой вариант можно сделать "хорошо нажимаемым".
Но совсем другое дело, когда у объёмной кнопки есть солидная опора:
Чувствуете, насколько приятнее её было бы нажать?
В некоторых случаях, когда кнопки висят в воздухе без опоры, им делают небольшую собственную подложку-рамку, в которую они могут вжиматься, и этим проблема решается:
Это также позволяет разместить кнопку в любом месте: хоть на пустом поле, хоть поверх какого-нибудь окна, и она везде впишется нормально за счёт своей рамки.
Рисуем кнопку
Здесь я покажу, как нарисовать объёмную кнопку в Xara X, в отжатом и нажатом состоянии.
1. Выбор профиля
Если посмотреть на объёмную кнопку сбоку, она может иметь разные профили:
Я возьму второй (вогнутый) профиль и буду делать металлическую кнопку на ржавой панели, что-то в стиле ядерного апокалипсиса.
2. Реализация базовых объёмов
Я сделал подложку и кнопку. Кнопка это прямоугольник с вертикальным градиентом от тёмно-серого к светло-серому цвету и рельефными гранями. Углы чуть скруглены, так что кнопка остаётся прямоугольной, но не создаёт ощущения компьютерной бездушности. Также хочу заметить, что инструмент рельефа делает грани одинаковой толщины со всех сторон. Хотя такая кнопка и физически возможна, и выглядит вполне хорошо, одинаковая скошенность граней выдаёт в ней использование автоматизированного инструмента. Вероятно, в некоторых случаях будет лучше кнопка, у которой боковые грани скошены не так сильно:
Но для этого их уже придётся рисовать вручную, что несложно, но пока я не буду этим заниматься (вышеуказанную кнопку я просто сплющил).
Далее, чтобы кнопка не просто лежала на подложке, я делаю ей "посадочное гнездо":
Я будто вырезал из панели кусок. На самом деле это просто ещё один прямоугольник поверх панели, чёрного цвета, с минимальными вогнутыми гранями по периметру. Чёрный цвет также сыграет свою роль дальше. Теперь помещаю кнопку на посадочное место:
И вот она уже "заиграла". Тонкие грани по периметру посадочного места подчёркивают контур, а тонкая чёрная тонкая щель между краем кнопки и краем посадочного места иллюстрирует, что там находится некая глубина.
3. Текстурирование
Кнопку хоть сейчас вставляй в игру. На деле её детализированность действительно зависит от стиля игры. Где-то вам нужны ровные, гладкие заливки, а где-то максимум рельефа, грязи, пятен, бликов и прочего. Так что ровные заливки у нас уже есть, а теперь займёмся грязью.
Как я уже говорил, можно взять любую реалистичную текстуру из интернета и наложить её на прямоугольник, но так как мне лень (и в качестве демонстрации), я использую процедурный подход. Для начала делаю заливку "фрактальным облаком", получая подобие ржавчины:
Затем делаю чёрный прямоугольник с маской прозрачности "фрактальная плазма", подобрав размер зерна:
И накладываю его на подложку, выбрав тип прозрачности "Darken". Это значит, что там, где на маске тёмный цвет, текстура будет становиться пропорционально темнее, а там где светлый, она меняться не будет:
Я получил более мелкую текстуру металла, но это ещё не всё. Далее я клонирую эту маску, но назначаю ей белый цвет и режим наложения "Lighten". В этом случае наоборот, текстура будет высветляться там, где в маске светлые места.
Также наложив эту маску на подложку и сдвинув её на 1 пиксел влево-вверх от тёмной маски, я получаю рельеф со светом и тенью. Я усилил его, чтобы было понятней, как он выглядит:
Для нужного мне результата я просто подбираю границы прозрачности двух масок так, чтобы всё выглядело более спокойно и естественно. Здесь важно ни с чем не переборщить:
Потом я добавил ту же самую белую маску на кнопку, но без чёрной маски. Здесь был нужен не рельеф, а просто некая фактура. И заодно добавил надпись PLAY, злоупотребляя все тем же рельефом граней:
Перед тем, как доводить кнопку до финала, нужно сделать для неё нажатое состояние, чтобы потом ничего не пришлось сильно переделывать. Но это будет уже в следующем выпуске.
Читайте также: Графика для платформера
