Свои глаза

Три способа

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

Редактор в плагине

1. Откройте настройки Pixel Eyes и раздел "Свои глаза и каталог".
2. Нажмите "Нарисовать новые", чтобы начать с чистого листа, или "Изменить текущие", чтобы переделать выбранные глаза. Встроенные откроются копией с id my_..., оригинал не изменится.
3. Сверху живой пример: он показывает результат после каждого пикселя и следит за пальцем.
4. Впишите название.
5. Выберите слой: "Глаз", "Радужка" или "Блик". Каждый слой рисуется отдельно, у каждого свой размер.
6. Выберите инструмент: ✏️ Кисть, 🧽 Ластик, 🔲 Заливка (заливает одноцветную область), 💧 Пипетка (берёт цвет с холста). ↔️ Зеркало рисует сразу с двух сторон, удобно для круглых глаз. ↩️ Отменить помнит 40 шагов, 🗑 Очистить стирает слой.
7. Кнопки Ш −, Ш +, В −, В + меняют ширину и высоту слоя.
8. Цвет выбирается в ряду палитры. 🎨 Сменить цвет перекрашивает выбранную ячейку, ＋ добавляет новую.
9. Самое важное: на слое "Глаз" отметьте цвета глазного яблока кнопкой 👁 Это яблоко. На цвете появится точка. По яблоку ходит радужка, его закрывают веки. Без яблока глаза не сохранятся: плагин скажет "Отметьте хотя бы один цвет глаза как яблоко".
10. Ниже: цвет века (последний вариант делает веко прозрачным), цвет ресниц, 👀 Два глаза или 👁 Один глаз, характер взгляда (плавный, резкий, дёрганый) и 💀 Жуткие.
11. "Сохранить": глаза запишутся в вашу папку и сразу выберутся.

Долгое нажатие на глаза в списке "Выбрать глаза" открывает меню: Скопировать (JSON в буфер), Изменить (для встроенных "Изменить копию") и Удалить (только для своих).

Онлайн-редактор

Онлайн-редактор работает в браузере на телефоне и на компьютере, ничего не устанавливает и не отправляет на сервер. Черновик сохраняется в браузере сам.

• Все слои: глаз, радужка, блик и все 8 кадров эмоций, для кадров под сеткой виден полупрозрачный глаз.
• Инструменты: кисть, ластик, заливка, пипетка, зеркало, сдвиг слоя, отражение, отмена и повтор.
• Палитра с любыми цветами и прозрачностью, отметки "яблоко" и "зрачок".
• Все поля: сдвиги, ход радужки, блик, веки, раскладка из 1, 2 или до 12 глаз, весь характер.
• Живой пример с кнопками эмоций, светлым и тёмным фоном.
• Проверка теми же правилами, что в плагине, с понятным текстом ошибки и подсказками.
• Готовые глаза: скопировать JSON, скачать файл или сразу отправить в Telegram через меню "Поделиться".
• Любые глаза из каталога или встроенные можно открыть как основу.

Из чего состоит глаз

Глаз рисуется слоями. Плагин сам двигает радужку, опускает веки, сужает зрачок и рисует эмоции, вы рисуете только неподвижные части.

• Глаз (eye): контур и глазное яблоко. Рисуется для левого глаза, правый получается отражением.
• Яблоко (sclera): клетки глаза, по которым ходит радужка и которые закрывают веки. Это не отдельная картинка, а пометка: какие символы сетки считать яблоком.
• Радужка (iris): маленькая картинка, которая ездит по яблоку туда, куда смотрят глаза. Всё, что вылезает за яблоко, обрезается.
• Зрачок (pupil): один цвет внутри радужки. Плагин расширяет и сужает его по эмоции.
• Блик (highlight): светлое пятнышко поверх радужки.
• Веко (lid) и ресницы (lash): цвета. Само веко плагин рисует сам при моргании, сне и эмоциях.

Урок: глаза с нуля

Соберём глаза по шагам. После каждого шага глаза рядом с кодом уже работают: можно поводить мышкой или пальцем и понажимать эмоции.

Шаг 1. Контур и яблоко

Минимальный файл: палитра и сетка глаза. Сетка это строки одинаковой длины, каждый символ это пиксель. Точка прозрачна, остальные символы берут цвет из palette. Здесь # тёмный контур, w белое яблоко.

Поле sclera мы не писали: по умолчанию яблоком считается символ w. А вот радужки нет, поэтому плагин рисует вместо неё чёрный квадратик 2 на 2. Подсказки проверки под примером говорят то же самое. Глаз 10 на 8 пикселей: хороший размер для начала.

Шаг 2. Радужка и зрачок

Добавляем в палитру синий i и почти чёрный p, рисуем радужку 4 на 4 и говорим, что p это зрачок. Радужка встаёт в центр яблока и ездит по нему за взглядом.

Нажмите 👀 и 😮: зрачок становится шире и уже. Это работает только потому, что задан "pupil": "p". Нажмите 😍 и 😵: в эти моменты плагин рисует вместо радужки сердечко и спираль сам.

Шаг 3. Блик

Один белый пиксель, сдвинутый на 1 влево и на 1 вверх от центра радужки, сразу делает глаз живым.

Шаг 4. Тень и веки

Добавим снизу яблока светло-серую тень s. Чтобы радужка ездила и по ней, а веко её закрывало, пишем оба символа в sclera: "ws". Цвет века телесный, кромка века и линия закрытого глаза тёмные.

Без lid веко было бы цвета контура. Это тоже нормально, но с отдельным цветом моргание видно лучше.

Шаг 5. Имя и автор

Осталось подписать глаза. id это внутреннее имя латиницей, по нему плагин отличает одни глаза от других. name видно в списке, author и description в каталоге, tags нужны для фильтра.

Шаг 6. Готово, проверяем

Это уже полноценные глаза. Чтобы поставить их в плагин:

1. Нажмите "Скопировать" над примером.
2. В плагине: "Свои глаза и каталог", "Из буфера обмена". Или отправьте текст себе в Избранное, зажмите сообщение и выберите "Добавить глаза".
3. Глаза сохранятся и сразу выберутся.

Дальше в инструкции разобрано всё, что ещё можно настроить: как ходит радужка, характер, свои кадры, много глаз.

Как читается файл

Файл глаз это JSON. Правила строгие, потому что плагин читает файл обычным разборщиком JSON:

• Весь файл это один объект в фигурных скобках { }.
• Ключи и строки только в двойных прямых кавычках "...". Ёлочки «», косые “” и одинарные '' не подходят. Клавиатура телефона любит менять кавычки сама: если набираете руками, отключите это или проверьте файл в онлайн-редакторе.
• Между элементами запятые, после последнего запятой нет.
• Комментариев // нет.
• Регистр важен: "Eye" не то же самое, что "eye", а w и W в палитре это разные символы.
• Порядок полей любой. Незнакомые поля плагин пропускает, поэтому опечатка в имени поля ошибки не даст, поле просто не сработает.

Сетки

Сетки (eye, iris, highlight, кадры в frames) это массив строк, по строке на ряд пикселей:

"eye": [
  "...####...",
  ".##wwww##.",
  "#wwwwwwww#"
]

• Точка . и пробел прозрачны.
• Любой другой символ должен быть в палитре, иначе ошибка с номером строки.
• Строки могут быть разной длины: короткие дополняются прозрачным справа. Но ровные строки читать и править проще.
• Сетку можно написать и одной строкой с переносами \n, но массив нагляднее.
• Глаз и кадры не больше 32 на 32 пикселя. Радужка и блик не больше самого глаза.

Палитра и цвета

palette связывает символ с цветом: {"w": "#ffffff", "p": "#101018"}. Одна палитра на все сетки: глаз, радужку, блик и кадры.

• Символ палитры ровно один: буква, цифра, знак, даже кириллица. Нельзя только точку и пробел.
• Названия цветов ("white", "red") не поддерживаются, только #-запись.
• Полупрозрачные цвета смешиваются с тем, что под ними: так получаются стеклянные блики.

Как ходит радужка

Центр радужки ставится в центр прямоугольника, в который вписано яблоко (все клетки символов из sclera). Когда глаза смотрят в сторону, радужка сдвигается на travel пикселей. Рисуется она только поверх клеток яблока, всё остальное обрезается: поэтому радужка никогда не вылезает за контур.

• travel [x, y]: насколько далеко радужка уходит от центра, от 0 до 10. Если не задан, считается сам: по горизонтали половина свободного места (ширина яблока минус ширина радужки, пополам, но не меньше 1), по вертикали так же.
• iris_offset [x, y]: сдвиг радужки в покое. Например, [0, 1] опускает её на пиксель, как у аниме-глаз. У отражённого глаза сдвиг по x тоже отражается.
• Взгляд: за пальцем, за курсором при наборе, на шапку чата, прямо на вас и по сторонам без дела. Обычно глаза смотрят дальше по горизонтали, чем по вертикали.

Подвигайте ползунки и поводите курсором по странице:

Зрачок

pupil это один символ палитры, который есть внутри радужки. Плагин умеет делать зрачок шире и уже на 1 и на 2 шага: на каждом шаге зрачок обрастает слоем пикселей цвета зрачка или теряет внешний слой. Если сузить нечего, остаётся одна точка в середине.

Без pupil зрачок всегда одного размера, а спираль берёт тёмный цвет по умолчанию. Расти зрачку есть куда только внутри радужки: вокруг него нужен хотя бы один слой другого цвета. Если радужка вся одного цвета, размер не меняется.

Блик

• Ставится по центру радужки плюс highlight_offset. Если "highlight_fixed": true, то по центру яблока: блик стоит на месте, а радужка ездит под ним, как отражение окна на настоящем глазу.
• У правого глаза блик не отражается: свет падает на оба глаза с одной стороны. Поэтому блик слева сверху будет слева сверху у обоих глаз.
• Рисуется только поверх яблока и только в обычном взгляде: на сердечке, спирали и "ай" его нет.
• Блик может быть картинкой: два-три пикселя разной яркости смотрятся богаче одного.

Веки и моргание

Веки плагин рисует сам по каждому столбцу яблока: верхнее опускается сверху, нижнее поднимается снизу. Поэтому веко повторяет форму вашего глаза, а контур остаётся на месте.

• lid: цвет века. Можно "#цвет", символ палитры ("s") или "none": тогда веко прозрачное и закрытый глаз просто исчезает внутри контура. Если не задан, берётся цвет контура (самый частый цвет глаза вне яблока).
• lash: кромка века и линия закрытого глаза. По умолчанию это lid, затемнённый на 40%. При "lid": "none" по умолчанию линии нет, задайте lash сами, если она нужна.
• Закрытый глаз рисуется линией: при сне спокойная дуга "‿", при радости и подмигивании улыбка "∩". У высоких глаз (яблоко от 11 пикселей) улыбка в две линии.
• Моргание: 0.06 секунды закрыть, 0.1 открыть. Иногда глаза моргают дважды подряд. Когда клюют носом, моргают медленнее и чаще.
• При злости и грусти верхнее веко наклоняется: у злых внутренние уголки ниже, у грустных наружные.

Эмоции

Эмоции рисует плагин, вам ничего делать не нужно. Но любую можно заменить своим кадром, об этом ниже.

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

Как глаза понимают текст

Плагин читает текст ваших сообщений и сообщений в открытом чате (только у вас на телефоне, никуда не отправляя) и ищет в нём слова и эмодзи:

• Гадости: ругательства в чей-то адрес ("ты дебил", "иди нахуй", "заткнись", "он мразь", 🤬). Обычный мат как междометие ("бля", "пиздец", "сука, опять дождь") не считается. Мягкие слова вроде "дурак" считаются, только если обращены к кому-то: "ты дурак". С "не" перед словом не считается: "ты не дурак".
• Любовь: "люблю", "скучаю", "любимый", "целую", сердечки, 😍. "Не люблю" это уже грусть.
• Смех: "ахаха", "хаха", "лол", "ору", 😂, 🤣, 💀.
• Грусть: "грустно", "обидно", "мне плохо", 😢, 💔.

Если в сообщении несколько настроений, побеждают гадости, потом любовь, грусть и смех. Хитрое написание тоже ловится: "дееебил", латинские буквы внутри русского слова.

Списки можно поправить под себя в плагине: "Реакции и сон", "Свои слова для текста". Там свои слова для гадостей, любви, смеха и грусти, а ещё "Никогда не считать": например, шутливые прозвища друзей, на которые глаза пугаться не должны. Звёздочка в конце слова значит любое окончание: дебил* поймает и "дебилы", и "дебильный". Там же поле "Проверить фразу". Выключается всё переключателем "Понимают текст сообщений".

Попробуйте сами:

Свои кадры

frames заменяет нарисованную плагином эмоцию вашей картинкой. Кадр это сетка в той же палитре, что и глаз. Возможные имена:

closed (сон), happy, love, dizzy, angry, sad, ouch, surprised.

• Кадр показывается вместо всего глаза целиком: без радужки, век и блика. Частицы (сердечки, Z, слёзы) летят как обычно.
• Кадр подгоняется под размер глаза по центру: меньший дополняется прозрачным, лишнее обрезается. Проще всего рисовать кадр того же размера, что и eye.
• У правого глаза кадр отражается так же, как сам глаз.
• Моргание и подмигивание кадрами не заменяются, их всегда рисуют веки.
• Удобно начинать кадр с копии eye и стирать лишнее: так контур совпадёт.

Сколько глаз и где

Обычный вариант: один или два глаза рядом.

• count: 1 или 2, по умолчанию 2.
• gap: пикселей между глазами, от 0 до 32, по умолчанию 2.
• mirror: отражать правый глаз, по умолчанию да. Без отражения оба глаза одинаковые, как у робота.

Любое число глаз в любом месте

Вместо count можно перечислить глаза в eyes: до 12 штук, у каждого своё место и размер.

• x, y: левый верхний угол глаза в пикселях (x от 0 до 120, y от 0 до 60).
• scale: 1, 2 или 3, во сколько раз больше.
• mirror: отразить этот глаз. Здесь по умолчанию нет, в отличие от count.
• Все глаза вместе должны поместиться в 128 на 64 пикселя.
• Подмигивает последний глаз в списке, над ним же появляются Z и знак злости.
• Чтобы глаза моргали и оглядывались вразнобой, включите "independent": true в характере. За пальцем они всё равно смотрят вместе.

Посмотрите встроенные "Циклоп" (один большой глаз) и "Рой" (семь глаз разного размера) в галерее.

Характер

behavior решает, как глаза двигаются. Все поля необязательные.

Рецепты: милые {"blink": [2, 5], "stare": 0.25, "speed": 1.1}, сонные {"open": 0.55, "speed": 0.5, "blink": [1.5, 4]}, злые {"slant": 0.5, "style": "snap"}, жуткие {"blink": [6, 14], "stare": 0.8, "twitch": 0.3, "creepy": true}, безумные {"style": "twitch", "twitch": 0.6, "speed": 2.5, "independent": true}.

Все поля одной таблицей

Обязательно только eye (и палитра для его символов). Всё остальное по желанию.

Числа вне границ не ошибка: плагин сам прижмёт их к ближайшей границе. Например, "speed": 10 станет 4.

Как это выглядит на экране

• Один пиксель сетки на экране это 1.5, 2.2, 3, 4 или 5.5 dp в зависимости от настройки "Размер" (по умолчанию "Средние", 3 dp). Глаз 12 пикселей шириной на средних это 36 dp, около 6 мм. Пара глаз по 32 пикселя занимает больше половины ширины экрана.
• Вокруг глаз плагин оставляет поля: по 3 пикселя по бокам, 7 сверху под частицы и 4 снизу под слёзы.
• Чтобы глаза было видно на любом фоне, плагин добавляет обводку: тень вниз-вправо на светлой теме и светлый контур на тёмной. Её можно сменить в настройке "Обводка".
• Проверяйте глаза и на светлом, и на тёмном фоне: в онлайн-редакторе для этого есть переключатель.

Советы по рисованию

Размер

Лучше всего смотрятся глаза от 8 до 16 пикселей. Меньше 6: радужке негде ходить. Больше 20: глаза закрывают пол-экрана, и мелкие ошибки бросаются в глаза.

Круглый контур

Круг в пикселях это ступеньки. Удобные заготовки (контур #, яблоко w):

8 на 8         10 на 10          12 на 12
..####..       ...####...        ....####....
.#wwww#.       .##wwww##.        ..##wwww##..
#wwwwww#       .#wwwwww#.        .#wwwwwwww#.
#wwwwww#       #wwwwwwww#        .#wwwwwwww#.
#wwwwww#       #wwwwwwww#        #wwwwwwwwww#
#wwwwww#       #wwwwwwww#        #wwwwwwwwww#
.#wwww#.       #wwwwwwww#        #wwwwwwwwww#
..####..       .#wwwwww#.        #wwwwwwwwww#
               .##wwww##.        .#wwwwwwww#.
               ...####...        .#wwwwwwww#.
                                 ..##wwww##..
                                 ....####....

Объём

• Тень снизу яблока вторым светлым цветом сразу делает глаз круглым. Не забудьте добавить этот символ в sclera.
• Радужка из двух-трёх оттенков: темнее сверху (тень от века), светлее снизу.
• Блик в 1-2 пикселя сверху сбоку, у милых глаз два блика: большой и маленький.

Характер через форму

• Милые: большая радужка, крупный блик, свои кадры happy и closed дугами.
• Жуткие: красные прожилки в яблоке (ещё один символ в sclera), маленький зрачок или пустая радужка, без блика, creepy и twitch.
• Злые и сонные: slant и open в характере, а не нарисованное веко. Тогда плагин сможет их открывать.
• Роботы: прямоугольники, "mirror": false, "style": "snap", свои кадры.

Частые промахи

• Забыли отметить тень или прожилки как яблоко: радужка их не проходит, веко не закрывает.
• Радужка шире яблока: края обрезаны, глаз смотрит "сквозь" контур.
• Цвет века как у яблока: моргания не видно.
• Нарисовали веко прямо в eye: оно не будет двигаться. Сонность задаётся через open.

Самый быстрый путь: открыть похожие встроенные в редакторе и переделать.

Как добавить в плагин

Все способы в настройках Pixel Eyes, раздел "Свои глаза и каталог". После добавления глаза сразу выбираются.

1. Из каталога: "Каталог глаз", нажать на глаза.
2. Из сообщения: отправьте JSON текстом или файлом .json в любой чат, хоть себе в Избранное. Зажмите сообщение, в меню будет "Добавить глаза". Файл сначала скачайте, нажав на него.
3. Из буфера обмена: скопируйте JSON и нажмите "Из буфера обмена". Лишний текст вокруг и обёртка ``` не мешают.
4. По ссылке: вставьте прямую ссылку на JSON в поле "Ссылка на JSON" и нажмите "Скачать по ссылке". С GitHub нужна raw-ссылка (кнопка "Raw" у файла).
5. Через папку: путь показан в пункте "Папка с глазами". Файлы .json оттуда появляются в списке сами. На новых Android до этой папки сложно добраться из файлового менеджера, проще через сообщение.

Как плагин сохраняет

• Если у вас уже есть свои глаза с таким же id, новые заменяют их. Так обновляют свои глаза.
• id встроенных занять нельзя: плагин сохранит копию с _2 на конце.
• Пустой author плагин заполнит вашим @username.
• Файлы в папке с тем же id, что у встроенных, в списке не показываются.

Как поделиться

• В плагине: долгое нажатие на глаза в списке, "Скопировать", или "Скопировать текущие". JSON окажется в буфере, отправьте его в чат. У получателя в меню сообщения будет "Добавить глаза".
• Длинное сообщение в Telegram не больше 4096 символов. Большие глаза со своими кадрами в это не влезают: отправляйте их файлом .json. В онлайн-редакторе кнопка "Отправить файлом" на телефоне открывает меню "Поделиться" сразу с файлом.
• Можно выложить файл куда угодно (GitHub, gist) и дать ссылку: её добавляют через "Скачать по ссылке".

Как попасть в каталог

Каталог это этот репозиторий: плагин читает список index.json и файлы из папки skins/. Глаза в каталоге видят все, у кого стоит плагин.

Просто

Пришлите файл @van1lLove в Telegram.

Через GitHub

1. Войдите на GitHub и откройте репозиторий. Нажмите Fork: у вас появится своя копия.
2. В своей копии откройте папку skins, Add file, Create new file. Имя файла: ваш id и .json, например blue_buttons.json. Вставьте JSON, Commit changes.
3. Откройте index.json, карандаш, и добавьте запись в список skins (не забудьте запятую после предыдущей записи):

   {"id": "blue_buttons", "name": "Синие пуговки", "author": "@you",
    "description": "Маленькие круглые глаза с синей радужкой", "tags": ["милые"],
    "url": "skins/blue_buttons.json", "preview": "previews/blue_buttons.png"}

   Картинку превью делать не нужно, её нарисуем сами.
4. Нажмите Contribute, Open pull request, опишите глаза парой слов.

Чтобы глаза приняли

• Уникальный id, заполненные name, author, description и tags.
• Без ошибок и подсказок проверки в онлайн-редакторе.
• Глаза ваши, а не перерисованные чужие без спроса.
• Без оскорбительного и 18+.

Ошибки и что они значат

Плагин и онлайн-редактор проверяют глаза одинаково. Вот что значит каждая ошибка:

Ошибки при добавлении

Вопросы

Можно сделать анимированные глаза?

Анимацию делает сам плагин: взгляд, моргание, эмоции, частицы. Ваши картинки и кадры неподвижные, но плагин оживляет их одинаково для любых глаз.

Можно сделать разные левый и правый глаз?

Картинка глаза одна. Правый глаз бывает отражённым или таким же, а в раскладке eyes ещё и другого размера.

Глаза мешают нажимать на кнопки

Касания по прозрачным пикселям проходят насквозь. Глаза можно перетащить, сделать полупрозрачными или показывать только в чатах или только пока печатаете.

Глаза видят собеседники?

Нет. Всё рисуется только у вас на экране, ничего никуда не отправляется.

Сколько тратят батареи?

В покое глаза перерисовываются примерно раз в секунду, во сне редко, а когда приложение свёрнуто, не рисуются совсем.

Где посмотреть, как сделаны встроенные?

Все встроенные лежат в builtin/, глаза каталога в skins/. Любые открываются в редакторе кнопкой "Изменить" в галерее.