Разработчикам плагинов для Android приложения «Энергосберегающие Цифровые Часы Живые Обои»

Данное руководство предназначено как для программистов, дизайнеров, так и для людей, желающих выпустить свои приложения, и иметь возможность зарабатывать на этом. Изучив его, вы сможете создавать новые циферблаты, даже если у вас нет навыков программирования или 3D моделирования (понадобятся некоторые навыки по работе с Adobe Photoshop и небольшие навыки с каким-либо 3D редактором). Я предоставляю вам такую уникальную возможность – создать свои уникальные часы в виде приложения-дополнения.

Для работы вам понадобятся:

• Скачать и установить Android Studio – для создания своего приложения-плагина
• Adobe Photoshop – для создания текстуры и макета циферблата
• 3D редактор с возможностью экспорта в формат .obj. Так как в данном руководстве я буду ссылаться на Autodesk Maya 3D и предоставляю специальный скрипт для импорта из Adobe Photoshop, то рекомендую именно его.
• Скачать демо-проект плагинов циферблатов по ссылке.
• Скачать скрипты для Photoshop и для Maya 3D по ссылке и поместить содержимое скачанных папок согласно их названиям в папки с установленными Photoshop и Maya 3D. Пути каталогов на вашем ПК могут немного отличаться.

 

Создание текстуры циферблата

Начнем с создания циферблата. Рекомендую создавать одну текстуру 1024×1024 пикселей, но могут быть и другие разрешения, кратные степени 2 (например, 256×256, 512×512, 2048×2048). Часы создаются на прозрачном фоне, после чего сохраняется файл формата png, из которого можно выделить файл маски прозрачности, этот процесс описан далее.

3D объект циферблата создаётся на основе слоёв из Adobe Photoshop, поэтому для каждой части объекта необходим отдельный слой с уникальным названием, ограниченным списком:

clockface —  сам циферблат

alarm —  кнопка будильника

battery —  индикатор батареи (изображение значка)

bat_lvl_gen —  индикатор фоновых делений батареи. От его позиции зависит позиция bat_lvl. Для отображения корректных данных его размер должен совпадать с размером bat_lvl.

bat_lvl —  индикатор делений батареи. В 3D редакторе должен находиться в позиции начала координат для корректного отображения уровня заряда батареи. Может быть сплошным по горизонтали (без делений), однако точность в программе – 10%, то есть на 10 делений.

week —  день недели

week_gen—  если есть в объекте, то обозначает фоновую строку всех дней недели, и week перемещается по ним, начиная с понедельника, слева направо. В таком случае длина перемещения зависит от ширины week, либо текстурной ширины в 3D редакторе. Если его нет, а есть только week, то week стоит на месте, меняется только его значение.

am —  индикатор времени до полудня

pm —  индикатор времени после полудня

am_pm_gen —  если есть в объекте, то обозначает фоновую составляющую AM/PM

md —  слой отображения подписи МЕСЯЦ / ДЕНЬ для даты

Для отображения цифр времени и даты предусмотрены следующие обозначения. Для наглядности: если время представлено строкой 12:34:56, что соответствует чч:мм:сс, то:

h1 —  1, h2—  2, m1 —  3, m2 —  4, s1 —  5, s2 —  6, dt1 — первое двоеточие, dt2 — второе двоеточие.

Для отображения даты:  если дата представлена строкой 01/23, что соответствует месяц/день, то:

mon1 —  0, mon2—  1, day1— 2, day2— 3, date_del – разделитель /.

Позиции цифр и разделителей не связаны между собой. Начальные текстурные координаты должны указывать на цифру 0, ширина сдвига текстуры цифры равна текстурной ширине 3D объекта h1.

Строка цифр должна выглядеть как 0123456789, то есть начинаться с нуля.

Слой или группу слоёв можно сделать невидимыми, чтобы в 3D сцене не создавались лишние элементы. Слои в 3D сцене располагаются по удалению так, что последний слой в Photoshop – самый дальний в 3D (циферблат).

Пример проекта циферблата

 

Экспорт из Photoshop

После создания всех необходимых слоёв нужно выполнить экспорт, используя скрипт, который вы должны были скачать и поместить в каталог скриптов фотошопа. Для его запуска заходим в меню Файл > Сценарии > Export in Maya 3D with one texture и нажать “run”.

После обработки слоёв появится сообщение об успешном выполнении скрипта, жмём ОК.

Скрипт создаёт папку с именем textures по умолчанию  в каталоге с файлом сохранённого проекта Photoshop. Путь к этой папке потом необходимо указать при выполнении скрипта в Maya.

Импорт в Maya 3D

После экспорта из фотошопа нужно выполнить импорт в Maya, так как это только промежуточные данные. Открываем Maya 3D и в нижней части главного окна приложения в строке с именем MEL вводим source enToolbar.mel; и нажимаем Enter.

В появившемся окне вводим имя-идентификатор циферблата – только латинскими буквами и знаками подчёркивания, без пробелов, и снова жмём Enter.

Нажимаем кнопку «Build a character from one texture» и выбираем папку textures,сгенерированную скриптом из Photoshop.

В появившемся окне вводим масштаб. Для Энергосберегающих Часов он равен примерно 400, с дальнейшей подгонкой. Вводим 400 и нажимаем Enter.

Закрываем окно «2D Tools». Нажимаем на значок «textured» и видим наш 3D объект.

На «кубе» видов нажимаем на FRONT и в области вида заходим в меню View > Camera Settings > отключаем галочку Perspective.

Заходим в меню Window и открываем Outliner, чтобы видеть и менять местами наши слои.

При нажатом колёсике мыши на элементах их можно перетаскивать, меняя порядок. Это важно для порядка отрисовки элементов в приложении часов. Можно перетаскивать группы объектов. При выделении элемента в Outliner выделяется сам объект на сцене. Объекты в Outliner можно переименовывать двойным кликом по ним.

Все группы объектов (наши слои с именами) можно перемещать, вращать, масштабировать инструментами на панели слева. Циферблат должен находиться в центре координат, то есть центр циферблата должен совпадать с пересечением осей x и y. Все группы объектов должны не ближе 1.0 по оси z, иначе они не будут отображаться в приложении. Некоторые полезные комбинации клавиш:

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

После того, как сцена сформирована, можно выполнить экспорт в obj формат. Нажмите File > Export All…

Вид законченного проекта. Обратите внимание на положение индикации батареи

Настройте галочки как показано на рисунке, введите имя-идентификатор циферблата, его путь и нажмите Export All.

Дополнительная подготовка циферблата

Для того, чтобы сократить размер, занимаемый циферблатом, вместо текстуры с прозрачностью формата png я использую 2 файла формата jpg – один – сама текстура, второй – маска прозрачности. Для того, чтобы из png сделать 2 jpg, вам нужно открыть png в Photoshop, перейти из вкладки «Слои» в соседнюю вкладку «Каналы», нажать на решетчатую кнопку и в выпадающем меню выбрать «Разделить каналы».

Последний открывшийся файл, содержащий в имени слово «Прозрачность», сохраняем как jpg с тем же именем, что и png, с добавлением «_mask». Оставшиеся файлы закрываем без сохранения.

Для того, чтобы края элементов в основном jpg файле не были другого цвета и не выделялись, я обычно добавляю ему подходящий фон (можете посмотреть в демо-проекте).

Теперь открываем полученный после экспорта файл формата mtl и редактируем расширение текстуры с png на jpg.

Помещаем 4 файла: obj, mtl, текстуру и маску текстуры в папку с именем, совпадающим с именем файла obj., пример показан на рисунке, можете также посмотреть в проекте-примере.

Создание готового приложения

Циферблат готов, достаточно собрать из него приложение. Для этого необходимо распаковать скачанный ранее демо-проект плагина, зайти в папку app\src и дублировать digitalBlack или digitalSimpleWhite.

Затем переименовываем на своё имя латинскими буквами без пробелов, например, newPlugin, и заходим в неё и далее в assets\textures\packs и копируем сюда нашу подготовленную папку с циферблатом.

Открываем ранее скачанную и установленную Android Studio, заходим в File > Open… и выбираем папку проекта.

Открываем файл проекта build.gradle (Module:app), копируем digitalBlack {…} с содержимым скобок, вставляем после него. Заменяем digitalBlack на newPlugin, совпадающий с названием нашей папки – это вариант проекта плагина.

Оставляем часть applicationId  com.maxlab.bsclocks.plugins.digital. и добавляем свою, рекомендую вид developer_name.plugin_name, чтобы ваш id отличался от других, как на рисунке выше.

Заполняем данные своей информацией для цифровой подписи. Если у вас нет хранилища ключей, то создайте его, и создайте ключ для цифровой подписи этого циферблата. Подробнее про это можно прочитать на официальном англоязычном сайте https://developer.android.com/studio/publish/app-signing.html либо на сайте http://developer.alexanderklimov.ru/android/publish.php.

Дублируем строчку для подписи нового плагина и заменяем digitalBlack на newPlugin:

Выбираем среди BuildVariants  newPluginDebug или newPluginRelease, как показано на рисунке. Теперь открываем файлы strings.xml для различных языков (выделены на рисунке). Вы можете добавить свои файлы локализаций.

Необходимо изменить 2 параметра – имя приложения и собственно имя циферблата внутри главного приложения. Кстати, циферблатов может быть несколько, для каждого необходимо указать своё имя.

Заменяем black на ваше имя циферблата, совпадающее с названием папки и файла obj, и прописываем адекватное название, которое будет видимо при выборе циферблатов в главном приложении часов.

То же проделываем с локализованными файлами strings.xml.

Что осталось – так это значок для приложения, который вам нужно подготовить. Для лёгкого создания значка из изображения нужно зайти в res\mipmap, нажать правой кнопкой мыши и в выпадающем меню выбрать New > Image Asset.

Далее выберите «Image» и путь к изображению, Shape – «None».

Осталось указать папку с ресурсами плагина. Выбираем newPlugin и Finish.