PaintCAD - бесплатный пиксель-арт редактор

История о том, как создавался пиксель-арт редактор PaintCAD для мобильных телефонов, для Android и для Windows.

----------------------<cut>----------------------

1998 год, Московская область, город Подольск. Перед самым наступлением экономического кризиса (за несколько дней) был куплен первый компьютер в нашей семье, на котором среди прочего софта в Windows 98 была такая утилита как MS Paint. (а если бы кризис наступил на месяц пораньше — то ничего этого бы не было).

Играя до этого несколько лет в приставку Dendy, я знал что это такое "проходить игру", сидеть уткнувшись в ТВ 5-6 часов, раскаляя блок питания "добела" и мечтая о том, чтоб игра не зависла после нескольких часов. Но тут в первый раз меня затянула программа, а не игра. Простая панель кнопок с цветными иконками "карандаш", "линия", "заливка", окошко выбора цвета палитры и белый холст любого размера. Этого было достаточно чтобы просидеть целый час и более в расстановке линий, заливании областей, подкраске карандашом.

Тем временем, годы игры на Dendy не прошли зря — было столько идей о создании своей собственной игры, и не одной, и не такой простой как танчики или пакман, а какой нибудь с закрученным сюжетом, уровнями с меняющимися видами (аля "в первом уровне едем на машине, вид сбоку", "во втором плывем на лодке, вид сверху", "в третьем летим в пропасть и, упав на дно, попадаем в параллельный мир, где боремся с боссом" и т.д.). Поэтому с целью реализации этих фантазий был дан старт изучению программирования. Школьный русский Microsoft QuickBasic 1.0, потом QB4.5, QB7.1, Microsoft Visual Basic 1.0 for MS-DOS, Visual Basic 6.0, изучение основ ассемблера для управления мышью, работы с SVGA графическими режимами, проигрывания звуков и MIDI через звуковую карту. Позже в 2003 году на втором курсе института переход на Delphi и изучение казавшегося до этого диким и страшным Паскаля.

В середине этого периода, где-то в 2001 году захотелось создать свой графический редактор. В этом самом VBDOS1.0 руки дотянулись до создания стартового экрана и "интерфейса". Т.к. поддержки мыши в VBDOS не было, то рисовать предполагалось курсором (черная точка 1х1 пиксель посреди картинки на скриншоте ниже), управляемым с клавиатуры.

PaintCAD - бесплатный пиксель-арт редактор


PaintCAD - бесплатный пиксель-арт редактор


Но слишком уж сложно было создавать пиксельный интерфейс даже для 640х480 16 цветного режима. Да и пугало отсутствие знаний про форматы файлов картинок, не было мыслей как делать холст любого размера, как прокручивать его на экране и т.д (10-11 класс школы все таки). А еще страшно хотелось делать разные игры и поэтому на этом этапе создание софта заглохло.

И вот где-то около 2004 года был куплен первый мобильный телефон Siemens C60:

PaintCAD - бесплатный пиксель-арт редактор


Этот аппарат имел экран 101х80 точек, а в то время сименсы были очень популярны, поэтому кроме Siemens C60 много других телефонов этой линейки (типа M55, C55, A60) имели схожие по размеру экраны и цветность от 256 до 4096 цветов.

Погуляв по сверхнаселенным в то время (и умирающим сейчас) форумам типа сименс-клуба.ру, поискав там "обои для мобильника" и "игры/программы" я понял, что эту штуку можно заставить работать как компьютер, а именно — исполнять программы. Java-программы.


Эра Java2ME

Сейчас это нормально, у каждого в кармане телефон (мини-планшет) на андроиде, ios или windows phone, запускай что хочешь, софта полно. А тогда это было дикой радостью — можно достать из кармана штуку с меееелким экраном и пользоваться ею почти как большим стационарным компьютером.

Чего там только не было в ассортименте: например,

— браузер Cool Browser от некого Кусь-Куся (Кулайчук Игоря), который грузил через HTTP сайты и на этом маленьком экранчике рисовал текст сайта, кнопки на сайте, ссылки и т.д, т.е. делал какой-никакой парсинг и выдавал это дело в удобоваримом виде. И это при том, что тогда был популярен WAP-интернет (это такой обычный интернет, пережеванный и кастрированный WAP-сервером чтобы его могла показать на экране мобилка), а HTTP-браузера вообще не существовало (Опера Мини появилась только несколько лет спустя и как раз тогда и убила Кул-Браузер).

PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


— проверялка Email, в которую надо было лишь вписать свои POP3 и SMTP параметры и можно проверять почту на маленьком экране, читать сообщения или просто смотреть от кого что пришло, загружая только заголовки писем

— ICQ и IRC клиенты, через которые можно было сидеть в чатах

— FTP-клиент для загрузки/выгрузки файлов на сайты или еще в какие хранилища

Был и графический редактор в Siemens, назывался Photo Editor, вот такой вот:

PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


Но он был предназначен для редактирования фотографий, а не для рисования картинок с нуля. А мне хотелось рисовать именно с нуля, и вот почему.

Телефон мог отправлять не только текстовые SMS, но и расширенные SMS-ки — так называемые EMS-ки. Внутри EMS-ки можно было запросто разместить картинку (32х32 пикселя) и еще десяток букв текста, делалось это при написании обычной SMS-ки вот так:

PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


И получатель смски видел эту отправленную картинку. В сименсе можно было отправлять чернобелые BMP-файлы как картинки и чернобелые BMX-файлы как анимации. При этом BMX-анимация — это обычный чернобелый BMP-файл размером 16х64 пикселей. При проигрывании такой анимации телефон делил этот 16х64 рисунок на 4 картинки размером 16х16 пикселей, и показывал по очереди с некоторой задержкой (зависящей от модели и производителя телефона).

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

Силы были брошены на изучение j2me — Java2 Microedition, это урезанная версия компьютерной явы, именно в ней писались мобильные приложения и игры. Первая версия была названа Painter и получилась вот такая:
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


В можно было создавать с нуля, открывать и сохранять чернобелые BMP и BMX, проигрывать будущие BMX по кадрам. Из инструментов был карандаш (черные точки по нажатию клавиши), черный маркер (при перемещении курсора оставляет за собой черный след), белый маркер (белый след), обращающий маркер (след пикселей обратного цвета).

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


Меню инструментов расширялось и менялось
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


Можно было визуально оценить размер рисунка при создании:
PaintCAD - бесплатный пиксель-арт редактор


Создавать, открывать и сохранять не только чернобелые (2-битные) рисунки, но и 256-цветные BMP:
PaintCAD - бесплатный пиксель-арт редактор


Появилась палитра:
PaintCAD - бесплатный пиксель-арт редактор


А при сохранении и загрузке файлов теперь можно было не только путь и имя вводить вручную, но и сразу полазить по телефону через встроенный в паинткад файловый менеджер:
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


Потом мне стало стыдно что я украл много иконок из MS Paint, и я перерисовал оформление. Добавил различные форматы сохранения и загрузки (WBMP, GIF, ICO). Сделал возможным создавать из нарисованных GIF файлов анимированные GIFы, добавил поддержку растровых PCF-шрифтов для инструмента текст и создал утилиту для создания PCF-шрифтов на компьютере из любых шрифтов Windows.

PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


В это время стали появляться новые телефоны с поддержкой MIDP2, и я перешел с MIDP1 Siemens C60 на MIDP2 Siemens CX75.

PaintCAD - бесплатный пиксель-арт редактор


По сравнению с экраном сименса С60 101х80 точек в новом телефоне был экран 132х176, т.е. более чем в два раза больший по пиксельной площади. Поэтому рисовать стало еще удобнее, а количество функций в программе все росло:
— стало можно рисовать картинки с цветностью 256 цветов либо 16 миллионов цветов;
— появились возможности рисования PCF-шрифтов прямо на мобильном телефоне
— и разборки анимированных GIF-ов на кадры
— добавились различные спецэффекты (пламя, снег, звезды, синусоидальная жара).

И все бы было хорошо, но у сименса дела шли с мобильным подразделением плохо, конкуренты Sony Ericsson и Nokia выпускали все более крутые и стабильные мобильники, а сименс взял да и продал свое мобильное подразделение компании Benq.

Компания Benq выпустила под брендом Benq-Siemens новые телефоны. Один из них, Benq-Siemens E71, был куплен на замену Siemens CX75.

PaintCAD - бесплатный пиксель-арт редактор


Также MIDP2, но экран 240х320, и работает гораздо быстрее, чем CX75, оперативной памяти в яве еще больше. На нем паинткад выглядел гордо =)

PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


И тут Benq убило свое мобильное подразделение. Benq-Siemens перестал существовать. А вдобавок начал пробиваться к известности какой-то "андроид".


Смерть Java2ME

Sony Ericsson умер следующим спустя несколько лет. Sony разошлось с Ericsson, а свои сони-телефоны они стали выпускать работающими на андроиде.

Nokia продалась майкрософту и полезла в сферу Windows Phone, без жалости отрубив голову своему ранее популярному, а теперь еще теплому Symbian-у.

Вдобавок, на короткое время повылезали на поверхность всякие Alcatel, LG, Fly, Samsung, которые тоже запускали программы на j2me на своих фирменных не-андроидовских прошивках. И потом они все пропали. И кнопочные телефоны вообще производить перестали.

Теперь заходишь в магазин, вот он сенсорный Samsung на андроиде, вот сенсорный Nokia на виндоусфоне, вот сенсорный Sony на андроиде, а еще всякие сенсорные texet, huawei и другие малоизвестные бренды — все на андроиде.

Кому нужна ява2ме с ее проблемами совместимости между телефонами разных производителей? Правильно, никому.


Сенсорный Windows

Но тут подвернулся мне сенсорный нетбук с резистивным экраном и стилусом в комплексте Asus T101MT. И вспомнилось детство, MS Paint с его линиями и заливкой в Windows 98, моя бейсиковская заготовка под графредактор с курсором, управляемым с клавиатуры, и то, как удобно было управлять графредактором, используя клавиши мобильного телефона. Их всего ничего штук на телефоне — а все функции в шаговой доступности. Не надо лазить по длинным меню, не надо дрожащей рукой пытаться мышкой попасть в пиксель. Доехал курсором, поставил точку (линию), поехал дальше.

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

Выбрал я Delphi 7 как язык программирования. Он делает нормальные, не .NET-овские exe-файлы, поэтому PaintCAD 4Windows может работать на любом Windows начиная с Windows 95 и заканчивая свежим Windows 8.1. И при этом не нужны никакие .NET Framework, требуется лишь Internet Explorer 4.0 или новее (у него в составе "свежие" Common Controls, которые нужны паинткаду для корректной работы под win95).

Первое рабочее окошко PaintCAD 4Windows, по которому лазил курсор и рисовал "кистью" линии, было таким:
PaintCAD - бесплатный пиксель-арт редактор


Грубые пиксельные значки (растянутые в три раза из j2me-версии), разноцветные рамки кнопок и очень контрастный вид окна — это то, что выжгло глаза многим, но не мне. На ноутбуке Asus T101MT стоит матрица с поганой цветопередачей, заглушающей зеленый и синий оттенки. Поэтому даже цвет (0,255,0) там выглядит примерно как (30,200,30).

Пришлось портировать все функции из j2me в Delphi. Вот паинткад уже рисовал курсором-жуком (такой курсор включается через Shift+B и позволяет ездить по рисунку как в машинкой в игре, описывая любые дуги, радиус которых регулируется установкой скорости):
PaintCAD - бесплатный пиксель-арт редактор


Вот паинткад смог копировать и вставлять изображения с прозрачным фоном и прозрачностью в процентах:
PaintCAD - бесплатный пиксель-арт редактор


Вот интерфейс обзавелся виртуальной клавиатурой, и на сенсорном экране можно нажимать клавиши чтобы управлять паинткадом точно также, как на мобиле:
PaintCAD - бесплатный пиксель-арт редактор



PaintCAD 4Windows сегодня

Выглядит так (и рисовать стилусом можно вот так):
PaintCAD - бесплатный пиксель-арт редактор


Меню инструментов, эффектов и выделения:
PaintCAD - бесплатный пиксель-арт редактор


Рисование возможно в 256-цветном режиме (работа с GIF-рисунками и 256-цветными BMP), в 24-битном режиме (работа с PNG, JPG).

Можно работать с палитрой в трех режимах:

Табличный режим — таблица из 256 цветов, можно легко править цвета, менять их положение в таблице, создавать уникальные палитры под свой рисунок:
PaintCAD - бесплатный пиксель-арт редактор


Спектральный режим — выбор цвета по оттенку и яркости.
PaintCAD - бесплатный пиксель-арт редактор


RGB-режим — выбор цвета по RGB, смешивание цветов, обмен цветов, копирование с последующей вставкой в таблицу-палитру.
PaintCAD - бесплатный пиксель-арт редактор


Можно:
— использовать ТОЛЬКО клавиатуру при рисовании, мышь почти не нужна (только разве выбрать файл в диалоге сохранения/загрузки файлов);
— для фанатов мыши: можно использовать только мышь;
— рисовать графические примитивы, текст;
— использовать массу встроенных эффектов: цветность, яркость, контрастность, гамма, цвет, 3D, огранка, градиент, сглаживание, обрисовка, тень, свечение, звезды, жара, снег, пламя, адский огонь, возгорание по траектории, сепия, серость, рельеф, резкость, глюки, спрей, термо, цветозамена, обмен каналов, черно-белый, цветная шерсть (с каждой новой версией их будет всё больше);
— увеличивать малоцветные изображения «без потери качества» (ну почти без, с помощью эффекта «Расширитель»);
— заливать нарисованные объекты с помощью текстуры (инструментом "Мозаика")
— быстро рисовать анимации на устройствах со стилусом: внизу главного окна на панели есть кнопки быстрого переключения кадров, сохраняющие в текущую папку кадры с именами 1.bmp, 2.bmp, 3.bmp и т.д., и позволяющие быстро переключиться к следующему кадру, сохранив предыдущий, а также сравнивать предыдущий кадр со следующим (с помощью функции «компаратора», как onion skin);
— создавать свои собственные PCF-шрифты с нуля или используя Windows шрифты и писать ими на картинках.
PaintCAD - бесплатный пиксель-арт редактор


— использовать веб-камеру (или тв-тюнер) для съемки одиночных кадров;
— использовать веб-камеру для съемки видео:
а) в автоматическом режиме (снимать видео до 10 кадров в секунду или реже, можно снимать редко кадры и потом собрать ускоренное видео как за последние 6 часов пролетали облака или распускался цветок);
б) в ручном режиме — кадры по команде (можно снимать свои мультфильмы: пластилиновые, кукольные и др.);
— снятые кадры или нарисованные картинки можно монтировать в Очереди кадров и собирать в AVI-видеофайл с выбором кодека;
PaintCAD - бесплатный пиксель-арт редактор


— готовые AVI-видеофайлы можно разбирать на кадры;
PaintCAD - бесплатный пиксель-арт редактор


— для разработчиков игр и создателей веб-страниц: можно рисовать мозаичные карты из элементов (тайлов), соединяющихся друг с другом;
PaintCAD - бесплатный пиксель-арт редактор


— рисовать картинки с полупрозрачностью и сохранять их в PNG;
— обрабатывать пачки кадров выбранными эффектами;
— делать 3D фото вебкамерой (или двумя вебкамерами) или 3D видео (только для двух вебкамер);
— рисовать 3D картинки, используя режим 3D рисования или по оригинальному рисунку и Z-карте. Сохранять нарисованное в стереопару или анаглиф.
— программировать рисование картинок и анимаций с помощью утилиты Scriptaint

Последняя функция "Скриптаинт" была добавлена совсем недавно, поэтому в новых бета-версиях исправляются ее ошибки. Это вот такое окно:
PaintCAD - бесплатный пиксель-арт редактор


В котором можно написать скрипт рисования картинки либо анимации, используя язык Java Script. Причем не с нуля надо писать, а создать через функцию "Новый скрипт" сразу заготовку с примером.

Анимацию, создаваемую в Scriptaint, можно сразу покадрово сохранять в BMP-файлы, чтобы потом собрать из них в паинткаде анимированный GIF или даже AVI видеофайл.

Вот самый просто пример того, что можно создать в скриптаинте — утки, летящие по синусоиде, облака, летящие им навстречу, и надпись Scriptaint, появляющаяся и исчезающая.
PaintCAD - бесплатный пиксель-арт редактор


Пункт вызова Scriptaint лежит в меню Экстра (т.к. он не относится напрямую к рисованию), в котором также есть:
— компьютерный композитор мелодий Muzz (сочиняет и проигрывает, и сохраняет в MID)
— мини-браузер Bro (работающий даже через медленный инет типа бесплатной Yota 5 кбайт/сек)
— IRC-клиент Retro, для тех кто любит IRC
— анализатор raw-логов сайта
— синхронизатор времени с любым NTP-сервером (полезно на windows младше чем XP)

Ссылки на скачивание — см.конец поста. Включая ссылки на бета-версию, содержащую улучшенный Scriptaint.

Мобильный PaintCAD восстал из мертвых

Спустя 2 года с момента старта создания windows-версии PaintCAD я наткнулся на microemu — эта штука позволяет при некоторых долгих танцах с бубном перекодировать JAR-файл мобильного PaintCAD (или любой другой программы) в APK-файл андроида.

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

И теперь две версии — JAR и APK развиваются параллельно. При запуске на Android паинткад выглядит вот так:
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор
PaintCAD - бесплатный пиксель-арт редактор


А при запуске на мобильнике — виртуальная клавиатура не появится и паинткад работает как раньше.


Помощь в Windows-версии

Windows-версия паинткада содержит CHM-файл помощи, в котором подробно с картинками описаны все окна, все функции, все возможности PaintCAD 4Windows.

PaintCAD - бесплатный пиксель-арт редактор



Использование PaintCAD

— для пиксель-арта: подъехать к конкретному пикселю гораздо легче, чем целиться мышкой. Да и клавиатурное управление позволяет точно выставлять курсор в нужные пиксели и прицельно закрашивать их, а также быстро выбирать цвета в палитре.

— для рисования как в MS Paint: любите линии и круги? тут все это есть

— для создания анимированных GIFов из кадров и разборки чужих анимированных GIFов на кадры

— для создания AVI-видеофайлов из кадров и разборки чужих AVI на кадры (выдирания конкретных кадров или их последовательностей)

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


Ссылки на скачивание


Для Windows

Последняя стабильная версия PaintCAD 4Windows: blackstrip.ru/pcw.rar

Последняя бета-версия PaintCAD 4Windows (лучше кидать в папку с установленной стабильной версией): blackstrip.ru/paintcad.exe


Для Java2ME

Последняя стабильная версия мобильного PaintCAD для Java2ME: blackstrip.ru/PaintCAD.jar


Для Android

Последняя стабильная версия мобильного PaintCAD для Android: https://play.google.com/sto...