Новости бизнесаСтатьиНоу ХауАналитикаДеньгиБизнес технологииКурс валют
Главная > Новости бизнеса > Hi-Tech > Как упорство позволило совместить увлечение всей жизни с программированием — Разработчик Игорь Гриценко о создании просмотрщика файлов в формате Sketch

Как упорство позволило совместить увлечение всей жизни с программированием — Разработчик Игорь Гриценко о создании просмотрщика файлов в формате Sketch

Пятница, 17 марта 2017 г.

Следите за нами в ВКонтакте, Facebook'e и Twitter'e

Разработчик standalone-просмотрщика файлов в формате Sketch для Windows Icons8 Lunacy Игорь Гриценко написал для vc.ru колонку о том, как хобби и основная специализация помогают создавать успешные продукты.



В избранное Начало пути

С самого детства мне нравились две вещи: программирование и графика. Когда мне было 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. Разработка Lunacy

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

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

Если коротко, то структура любого .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 она может рисовать графические примитивы, текст или растровые изображения. Кроме того, она обеспечивает все необходимые возможности для визуализации объектов файла максимально близко к оригиналу, так как поддерживает большинство возможностей, которые используются в скетче: градиентные и тайловые заливки, режимы наложения цвета, эффекты тени, размытия и прочее.

[embedded content]

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

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

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

В избранное

Следите за нами в ВКонтакте, Facebook'e и Twitter'e


Просмотров: 604
Рубрика: Hi-Tech
(CY)

Архив новостей / Экспорт новостей

Ещё новости по теме:

18: 40
Разработчики WhatsApp запустили отдельное приложение для бизнеса |
18: 40
В семействе Coffee Lake появится три процессора Pentium Gold и пара CPU Celeron |
18: 40
Аналитик назвал, какие три iPhone представят в этом году |
18: 40
ИИ Microsoft может нарисовать объект по текстовому описанию |
17: 40
UmiDigi показала безрамочный смартфон с четырьмя камерами «в стиле iPhone X» |
17: 40
Эксперимент: планшет против компьютера |
17: 40
YouTube ужесточает требования для включения монетизации канала |
17: 20
Samsung начала массовое производство чипов памяти GDDR6 плотностью 16 Гбит |
15: 40
Американцы сделают беспилотный «самолет-цистерну» |
15: 40
Почему у людей нет свободы воли? |
14: 40
Переиздание Age of Empires выйдет 20 февраля |
14: 20
История New Balance: от ортопедических стелек до миллиардной выручки без рекламы от звёзд |
13: 00
Sony останется на рынке смартфонов, чтобы не пропустить то, что придёт после них |
13: 00
Обновленная Skoda Fabia: первое официальное изображение |
12: 40
Смартфон Honor View 10 научился распознавать пользователей по лицам |
12: 40
Честный обзор операционки MIUI 9 от Xiaomi. Неожиданные выводы |
12: 20
Антимонопольная служба Италии начала проверку компаний Apple и Samsung, связанную с замедлением смартфонов |
12: 20
Полицейские пытались выписать штраф слепленному из снега автомобилю |
11: 40
Samsung анонсировала 860 SSD EVO Series с памятью 3D V-NAND для массового потребителя |
11: 40
Китайцы сделали свой iPhone X с вырезом и двойной камерой |
11: 20
Ferrari выпустит электрический суперкар, чтобы составить конкуренцию Tesla |
11: 00
Samsung запатентовала смартфоны с дырками в дисплее |
11: 00
Обновленный контроллер Xbox Elite получит поддержку Windows 10 и разъем USB-C |
18: 00
Зачем новому iPhone требуется USB-C? Есть причины |
18: 00
Мозги джазовых и классических пианистов работают по-разному |
18: 00
Дрон спас двоих подростков посреди бушующего моря |
17: 20
В прошлом году в мире на мобильные приложения было потрачено 86 млрд долларов |
17: 20
TomTop снижает цену на брутальный смартфон Blackview BV9000 Pro с Face ID |
17: 20
Смартфон AllCall Mix2 наделили современным дизайном и возможностями |
17: 00
Nintendo выпустит картонные конструкторы для консоли Switch |
16: 40
Samsung и LG договорились о поставке гораздо большего количества телевизионных ЖК-панелей |
Новости бизнесаСтатьиНоу ХауАналитикаДеньгиБизнес технологииКурс валют
Rating@Mail.ru
Условия размещения рекламы

Наша редакция

Обратная связь

RosInvest.Com не несет ответственности за опубликованные материалы и комментарии пользователей. Возрастной цензор 16+.

Ответственность за высказанные, размещённую информацию и оценки, в рамках проекта RosInvest.Com, лежит полностью на лицах опубликовавших эти материалы. Использование материалов, допускается со ссылкой на сайт RosInvest.Com.

Skype: rosinvest.com (Русский, English, Zhōng wén).

Архивы новостей за: 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003

Октябрь 2005: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31