В первой части я сделал текстурированную кнопку, но теперь я уберу с неё все текстуры и надписи, чтобы представить её в первозданном виде:
Необходимо сделать для неё нажатое состояние. Для этого надо принять во внимание, как себя ведёт 3D-кнопка: у неё есть толщина, и следовательно, она выступает над поверхностью. Когда мы на неё нажимаем, она что делает? Она становится от нас дальше. А все объекты, которые становятся от нас дальше, уменьшаются в размерах.
Если чуть уменьшить кнопку, то получим эффект, довольно-таки похожий на нажатие (жмите на GIF):
В общем-то, уже нормально. Но если абстрагироваться, то в какой-то момент можно настроить восприятие так, что вы будете видеть не нажимаемую кнопку, а просто уменьшающийся прямоугольник. Давайте посмотрим, как можно дополнительно обмануть восприятие.
Так как кнопка при нажатии утопает в проёме, то те её части, которые были освещены, погружаются в тень. Значит, можно добавить тень для большей правдоподобности. Но придётся пойти на некоторые ухищрения.
Я сделал тонкую рамку вокруг кнопки (она совпадает с чёрным зазором), сделал этой рамке тень типа Glow, и внутренняя часть рамки, то есть как раз вокруг кнопки, оказалась заполнена тенью по периметру. Но Glow работает со всех сторон, поэтому снаружи рамки тень тоже появилась. Её я замаскировал, поместив сверху дополнительную рамку с рельефом, но так как рельеф выступает и снаружи, замаскировал её тоже.
Решение так себе, но работает. Я также повозился с параметрами текстур, чтобы сделать их получше по сравнению с прошлой частью. Теперь добавляю надпись. Её нужно будет пропорционально уменьшить на кадре с нажатой кнопкой:
Я также сделал следующие изменения: изменил цвет кнопки с серого на коричневатый, чтобы лучше сочетался с ржавчиной. Нанёс на кнопку слабые шероховатости по методу из первой части. В центр кнопки добавил размытое полупрозрачное белое пятно, которое имитирует потёртость от нажатий на кнопку, и добавил немного тени по периметру на отжатую кнопку тоже.
Смотрим финальную анимацию:
Читайте также: Графика для платформера
