Как удобно рисовать кнопки для фурки

Фурка умеет кнопки-декораторы. Другими словами, в любое место экрана можно воткнуть кнопку, которая будет там висеть и в которую можно будет тыкать. Но многие авторы эти кнопки не используют, потому что это сложно. В смысле, сложно подготовить такую картинку, которую фурка воспримет в качестве исходника для отображения кнопки.

Здесь я попробую рассказать, как с помощью бесплатной утилиты быстро сделать такую картинку.

Начну с того, что мне понадобилось четыре кнопки для моей утилиты подбора параметров шрифтов. Это значок «плюс», значок «минус» и две кнопки «включено» и «выключено». Как известно из документации, картинка для кнопки должна содержать четыре «кадра» для разных состояний кнопки, как то: обычная, неактивная (disabled), в фокусе (наведён курсор мыши) и нажатая. Все кадры одного размера, выстроенные впритык друг к другу слева направо.

Вот мои четыре картинки для кнопки «плюс»:
  1. (нормальная) — b_plus_n.png
  2. (неактивная) — b_plus_d.png
  3. (фокус) — b_plus_f.png
  4. (нажатая) — b_plus_p.png

Моя задача — склеить их в стрип, так чтобы для каждого кадра был сохранён размер и альфа-канал. Раньше для решения этой проблемы я пользовался графическими редакторами — от Paint.Net до фотошопа. Но их возможностей для этой задачи оказалось немного чересчур. Кроме того, редакторы очень вольно обращались с альфа-каналом и норовили выровнять кадр не по реальному размеру исходной картинки, а по первым «значимым» пикселям, что очень неудобно.

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

В общем, после довольно долгих поисков в интернете, я нашёл удобное решение — консольная утилита ImageMagik. Это этакий фотошоп командной строки, который умеет очень многое. Но нас из всего пакета интересует программа montage, которая и позволяет склеивать несколько изображений в одно многими способами.

После усердного чтения документации я написал вот такой командный файл gluebtn.cmd:
@echo off
montage -tile 4x -geometry +0+0 -background none %1 %2 %3 %4 %5

И теперь, чтобы получить вожделенный стрип, мне достаточно написать:
gluebtn b_plus_n.png b_plus_d.png b_plus_f.png b_plus_p.png b_plus.png

И я получу такой вот b_plus.png:

Теперь, если уж делать всё совсем по уму, я могу склеить стрипы для всех своих четырёх кнопок в один атлас. Например, используя программку ShoeBox (не забудьте отключить параметр «Tex Crop Alpha» в настройках). На выходе я получил вот такую симпатичную текстуру:

А также очень удобный XML, где содержатся координаты всех моих стрипов на этой самой текстуре:
<TextureAtlas imagePath="buttons.png">
	<SubTexture name="b_minus.png" x="0" y="25" width="92" height="23"/>
	<SubTexture name="b_plus.png" x="0" y="50" width="92" height="23"/>
	<SubTexture name="b_roff.png" x="0" y="75" width="92" height="23"/>
	<SubTexture name="b_ron.png" x="0" y="0" width="92" height="23"/>
</TextureAtlas>

Теперь я могу просто написать в URQ-коде вот так:
decoradd bplus (100,100) IMGBUTTON "buttons.png", 0, 50, 23, 23, "add"

и у меня появится кнопка с плюсиком, при нажатии на которую будет выполнен переход на локацию add.

Ну вот, надеюсь эта небольшая статья сделает кнопки-декораторы в фурке более привлекательными и менее страшными. :)

Нет комментариев