Как упорство позволило совместить увлечение всей жизни с программированием

Разработчик Игорь Гриценко о создании просмотрщика файлов в формате Sketch для Windows Icons8 Lunacy.

С самого детства мне нравились две вещи: программирование и графика. Когда мне было 7 лет, я сделал короткий мультик в текстовом редакторе Lexicon. Немногим позже я нашел то, что позволило мне соединить мои увлечения еще более органично, — игры.

Я люблю игры. Но не играть в них, а создавать. То, как они сочетают в себе программирование и изобразительное искусство, всегда очаровывало меня. В итоге появилась моя первая игра — «гонки», которую я сделал с помощью QBasic. Хотя выглядит она почти как тетрис.

В школе мое увлечение играми только росло. В 10 классе сделал на Basic «танчики» для КПК Palm — помню, играл весь класс.

Здесь же я успел поработать учителем программирования. Наша школа была самой обычной, за одним исключением — в ней был кадетский класс. Ребят, которые в нем учились, готовили к поступлению в военное училище.

Однажды классный руководитель этого класса пришел ко мне с просьбой. У кадетов был запланирован открытый урок по командно-штабным учениям, на который приглашались офицеры из местной воинской части и учителя из других кадетских школ. Нужно было сделать игру-симулятор, в котором указывались маршруты для хождения строем по территории школы.

Я смоделировал школу и добавил пару кадетских моделей, которые нашел в интернете. Вдохновленный задачей, я зашел немного дальше: создал несколько бронемашин и разработал случайный сценарий (вероятность которого была низка, я бы даже сказал ничтожна) нападения на нашу школу врага. Фактически я сделал 3D-стратегию в реальном времени.

Когда пришло время представить свою работу комиссии, запустился почти несбыточный сценарий с нападением. Школьный двор быстро превратился в зону боевых действий.

Я не могу точно вспомнить реакцию учителя информатики, но судя по лицам членов комиссии, они были под впечатлением.

К окончанию университета я сделал много игр, но никогда не планировал вливаться в индустрию их разработки. Мне всегда нравилось делать свои инди-игры, а не участвовать в чужих проектах. И все же, я многому научился благодаря играм. Например, программированию.

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

Я не хотел далеко отходить от графики и выбрал второе. Устроился на телевидение. Там разрабатывал софт, который снимал видео с 20+ камер в кластере и монтировал его там же в единое целое, а потом это все отправлялось производственной команде. Потом был Music Box, РБК-ТВ, RT, «Доверие», «Россия-2». Меня без проблем брали на работу, потому что был опыт на ТВ и навыки программирования.

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

Поначалу работа на телевидении была идеальной для меня, но видеоинженеры получают не так уж и много, а утилитами я ничего не зарабатывал. Затем родилась дочка, расходы сильно выросли, и чаша весов склонялась к первому варианту — скучной работе за более высокую зарплату. Поэтому, когда знакомый предложил разрабатывать сайты на PHP, я легко согласился.

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

Тогда я и решился написать Ивану, основателю Icons8 (каталога бесплатных иконок — прим. ред.) Мы познакомились задолго до того, как я начал работать над своим текущим проектом — просмотрщиком .sketch-файлов Lunacy.

Несколько лет назад отправил ему сообщение в Facebook о том, что хотел бы работать в Icons8. Тогда я не знал, что Иван заблокировал себе доступ в социальную сеть, и поэтому ответ пришел почти через месяц.

К тому времени я уже получил должность мобильного разработчика для Windows в «Рокетбанке», но все-таки понемногу консультировал Ивана по поводу Icons8 Windows App —приложения Icons8 для работы с иконками, и даже сделал рабочий прототип за пару дней.

Позже стало понятно, что полный рабочий день в банке и частичная занятость в Icons8 — это слишком, поэтому наше сотрудничество постепенно свелось на нет.

Однажды директор по маркетингу увидел, как я показываю одну из своих простых игр коллегам. Она ему так понравилась, что он привлек меня к созданию небольших игр для отдела маркетинга. Я полировал банковское мобильное приложение, и при этом примерно 200 людей играли в мои игры каждый месяц. Жизнь была прекрасна. История могла бы легко закончится на этом моменте, но этого не случилось.

Пока я работал в «Рокетбанке», коллега предложил мне сделать клон Sketch, но для Windows. Идея мне показалась перспективной, но все были загружены, и дальше дело не пошло. Тогда же в банке решили, что мобильное приложение для Windows им больше не нужно, а мне предложили переключиться на iOS или заниматься Ruby on Rails в бэкенде.

Мне не понравился ни один из вариантов, и тогда я снова связался с Иваном. Ему понравилась идея создания Sketch для Windows. Более того, оказалось, что он сам думал об этом уже какое-то время.

Мы долго обсуждали идею проекта и в итоге решили начать с чего-то простого, как нам тогда казалось, и полезного. Так началась формироваться идея Lunacy, standalone-программы для просмотра .sketch-файлов на Windows.

Разработка MVP Lunacy заняла три месяца. Первая версия программы могла только открывать .sketch-файлы. Задача звучала тривиальной, но по факту была далекой от этого, ведь нужно было открыть эти файлы на Windows, а не на macOS, где они были созданы в Sketch.

Весь процесс состоял из двух этапов: понимания структуры .sketch-файла и последовательной ее визуализации на Windows. Чтобы понять структуру, нужны были навыки программирования, а мой опыт работы с графикой помог разобраться, как эту структуру визуализировать.

Если коротко, то структура любого .sketch-файла — набор данных обо всем, что внутри него: об объектах и их иерархии, стилях, размерах и прочем. Вот так выглядит файл, если его просто открыть в Sketch:

Каждое слово, иконка или фон — это отдельный объект, поэтому сам .sketch-файл представляет собой иерархию графических объектов.

Что произойдет, если попытаться открыть этот этот файл через обычный консольный файл-менеджер?

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

Выгрузив содержимое этой ячейки, можно столкнуться с кучей символов:

Но все начинается со строки bplist. Заглянув в поисковики, я понял, что это — стандартный формат macOS для хранения структурированных данных, который называется PList. Недолго думая, конвертировал все это в XML с помощью встроенной утилиты для Mac:

Стало похоже на подобие структуры. Пару дней разбирался что и как хранится, что можно вытащить, и понял, что можно вытащить все. Дело осталось за малым — повторить все это на Windows.

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

Выглядело уже лучше, но надо было написать мой собственный обработчик, так как вместо самих объектов в этой древовидной структуре хранятся их адреса внутри файла. Обработчик находил по адресам сами объекты, а специальный метод приводил все это к читабельному виду:

Тут уже легко понять, что у объекта с именем Sketch viewer for Wi в структуре Frame указано положение и размер объекта. Теперь я мог визуально сравнивать сам файл, открытый на macOS, и его структуру, открытую на Windows.

Получив структуру файла, можно было последовательно отрисовывать каждый объект, который был в этой структуре.

Для отрисовки на экране используется кроссплатформенная библиотека Google Skia, а точнее, оболочка Xamarin SkiaSharp. С помощью OpenGl она может рисовать графические примитивы, текст или растровые изображения. Кроме того, она обеспечивает все необходимые возможности для визуализации объектов файла максимально близко к оригиналу, так как поддерживает большинство возможностей, которые используются в скетче: градиентные и тайловые заливки, режимы наложения цвета, эффекты тени, размытия и прочее.

На видео видно, как один за другим последовательно отрисовываются все части файла. В итоге получается то, что мы и называем макетом или .sketch-файлом.

Много лет назад я заработал первые деньги, делая обычную программу для одного студента, как будто жизнь мне говорила: «Эй, не рискуй, просто программируй и все будет в порядке. Не ищи проекты с какими-то визуальными составляющими, не комбинируй вещи, которые делают разные группы людей. Просто программируй, и все будет хорошо».

Я не последовал этому совету: понял, что можно одновременно заниматься тем, что увлекает, и при этом продолжать делать вещи, в которых ты хорош. Так я получил возможность поработать над проектами, к которым не смог бы приложить руку в другой ситуации, чему очень рад.