Вот и вышла 4.2 официально. Что примечательно - все баги, о которых я репортил на бета тесте - поправили)

★ Поддержка SVG
Науили протопай понимать svg. Есть возможность закинуть стороннюю свг в протопай, и он конвертнет ее в векторную фигуру.
Подробнее: https://www.protopie.io/learn/basics/#SVG_Layer

★ Расстояния между объектами
Это реализовано как во многих редакторах с зажатием кнопки ALT.

★ Возможность писать формулы и переменные в "Duration" и "Delay"
Сделал простую демку вот https://cloud.protopie.io/p/171a42cae8

★ Возможность скрыть /показать области контейнеров. (находится в меню View)

★ Привязка-снаппинг на временной шкале к другим объектам

★ Возможность указать кастомный размер страницы в пейдж-скролле

В новой версии появились настройки для шаринга (правда ссылка получается длинючая) но походу можно встроить попробовать куда-ньть (попозже попробую)


вот например https://cloud.protopie.io/p/5798ef1771?ui=false&mockup=true&touchHint=false&scaleToFit=false&cursorType=touch

​​#pie #component
Сделал универсальный компонент для меню типа "Аккордеон".
Объяснять как это работает - сложно, но могу объяснить, как это использовать =)

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

P.S. Вроде тесты погонял - багов не нашел, но если что-то найдете - обязательно пишите))

P.P.S. Вобще, мне кажется, что подобный элемент плохо подходит для мобильных интерфейсов, однако встречаю его довольно часто, но челлендж по эллегантной реализации оказался интересным.

​​#faq #pie #game
Я тут кароч запилил крестики нолики.
https://cloud.protopie.io/p/f038d11f41

Загрузка файла пока отключена - я пишу (к сожалению очень медлено 😔) статью/гайд о создании этой игры. Также навожу порядок внутри файла.

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

Функционал:

1. Можно выбрать за кого играть:
1.1. ⭕️ За нолики;
1.2. ❌ За крестики;

2. Синглплеер:
2.1. Лёгкая сложность - противник ходит рандомно;
2.2. Сложная сложность - можно либо проиграть либо сыграть вничью;

3. Мульиплеер:
3.1. Горячий стул - играть в игру на одном девайсе;
3.2. Онлайн - играть с 2х девайсов, используя студию как сервер.

Если вы протестируете остальной функционал и поделитесь своим фидбеком со мной - это будет хорошо =)

​​Прототипирование музыки? Почему бы и нет)
Взял свою пианинку https://t.iss.one/protopie/53
Добавил автовоспроизведение мелодии - ост из фильма Реквием по мечте, за авторством Пола Окенфолда (потому что простая мелодия, которую можно сыграть на одной октаве)
Автовоспроизведение работает если нажать кнопку z (в браузере) или сделать дабл там по фиолетовой части пианино.
Прототипировать музыку используя Send и Recieve для повторяющихся частей - весело) А благодаря последнему обновлению, можно задать скорость мелодии изменяя общий Start Delay (в прототипе переменная speed)

​​ProtoPie поздравляет католиков с Рождеством!

По этому поводу команда ProtoPie сделала игру «Где мой снеговик?»

🎮 https://cloud.protopie.io/p/61bf3545e3

🎄🎅 Счастливого Рождества и веселых праздников! 🎅🎄

​​​​15 прототип мне очень понравился =) https://uxplanet.org/20-most-inspirational-interactive-prototypes-for-2020-cad0b5bb711

Совпадения не случайны) Планировал весной съездить в Сеул, культурно отдохнуть, так сказать.. Особо никто не был в курсе) А тут, внезапно, Тони Ким (CEO ProtoPie) видимо имеет связи с корейской разведкой, пригласил меня в гости в главный офис ProtoPie.
В общем в какой-то день на майских праздниках я буду в офисе протопаевцев, смогу поговорить и с их дизайнерами и разработчиками и менеджерами разных мастей, поэтому, если хотите, чтобы я что-то узнал или о чем-то рассказал, го в чат @protopiechat или в личку @anafemest, если чаты - это не для вас.

Тут вот один дизайнер решил попробовать, нынче модный, неоморфизм динамическим сделать (от положения телефона тени меняются)

https://cloud.protopie.io/p/904970c75b

Что думаете?

Мне кажется, что иногда теряется этот самый объем.. Надо будет попробовать сделать что-то похожее и покалибровать))

Уже около года в Protopie существует функция
layer(source: TEXT).layerProperty

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

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

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

Собственно магия) Суть в том, что "машинка" использует данные прямоугольных сегментов пути:
1. для поворота - угол прямоугольника,
2. для скорости - ширина прямоугольника
3. для точки назначения - координаты прямоугольника.

Простым циклом перебирает слои по имени R1, R2, R3... И получает нужные данные на каждый сегмент.

В итоге я могу создавать маршрут любой длины и сложности.

Появилась подробная информация о том, что будет в версии 4.3.

1. Вложенные компоненты
- Вложенные компоненты могут быть вложены во вложенные компоненты 😅
2. Привязка к пикселям
- Больше никаких полупикселей и дробных значений.
3. Поддержка системного статусбара
- Возможность получить системное время;
- Заявлена возможность редактирования цвета фона и текста всех элементов статус бара;
- Поддержка различных варианто нотча (выреза в экране).
4. Фоновый блюр
- На текущий момент заявлена поддержка размытия только для ios, с размытием на андроиде у разработчиков проблемы, которые в этой версии скорее всего не решат.
5. Интерфейсные улучшения студии
- Подробности не говорят)

И немного информации о планах на версию 4.4.

1. Библиотека компонентов
- С возможностью делиться ею между проектами, и, видимо между людьми;
2. Улучшение импорта из Sketch, Figma, AdobeXD
- Без подробностей и комментариев

Если по перечисленным пунктам у вас есть вопросы - задавайте в чат. Я попробую получить на них ответы.

​​#pie #game
Чем заняться в аэропорту и в самолёте несколько часов?
Конечно же запилить игру в протопае, чем же ещё?))

P. S. Гироскоп в самолёте периодически ведёт себя очень странно)

​​Думаю не лишним будет публиковать сюда некоторые интересные примеры, которыми я помогаю заграничным коллегам) #faq #pie
Q: Как сделать в протопае похожий эффект
A: Двумя тригерами! 😝

P.S. Думаю, если еще покалибровать, можно добиться полного сходства

​​​​#faq #pie
Q: Как сделать круговой слайдер?
A: Сместить Origin-point у слайдера в центр этого круга, и тригером Drag делать Rotate. А Заливку - маской.

Q: А если нужен слайдер полукругом?
A: Зачем нужен такой слайдер?
A: Ну раз нужен, то лучше сделать обьект, который таскается - невидимым, и к нему чейном привязать видимый, но в ограниченом спектре.

Q: А как сделать, чтобы тапая на круговой слайдер - он устанавливался на точку, куда я тапнул?
A: Ну.. сам спросил... Тригонометрия. Нам нужно найти угол, на который нужно повернуть слайдер. Мы знаем координаты центра круга и точку, куда нажали. Проще всего использовать тангенс (отношение противолежащейго катета к прилижащему) а для получения угла - арктангенс (atan). Ну и для перевода радиан в градусы используем функцию degrees
degrees(atan((Y1-$touchY)/(X1-$touchX)))

​​#pie #faq
Q: Как зациклить анимацию, которую я сделал?
A: Используй галочку Repeat, можешь установить количество повторов в поле Count и интервал повтора в поле Interval. Также галочкой Infinite Repeat - можно зациклить анимацию бесконечно (На самом деле можно прекратить бесконечную анимацию действием Stop, что я всегда рекомендую делать, иначе много бесконечных штук будут тормозить ваш прототип).

Q: Но я сделал 42 действия, мне для каждого теперь выставлять репит и подгонять интервалы? И потом 42 стопа пихать? А еще некоторые действия, например Reset не имеет галочки для повтора?
A: Для таких замечательных случаев существует действие Send и триггер Receive. Создаешь тригер Receive, с любым сообщением, например gogopowerrangers и перетаскиваешь все действия готовой анимации в этот триггер. Затем, туда, где запускалась анимация, и где были все эти действия - делаешь одно действие `Send`, параметром которого указываешь то самое сообщение - gogopowerrangers. Вся фишка в том, что теперь действию Send можно установить репит. Если выбрать интервал равный длительности анимации - то анимация будет закольцована.

​​#faq #pie
Заезженный вопрос, но всё равно часто всплывает...
Q: Как мне передать из компонента сообщение, которое услышит другой компонент?
Q: Как мне передать сообщение всем компонентам сразу?
A: Для этих целей используется Send с параметром Current Scene. Дело в том, что параметр "Текущая сцена" означает именно экран, на котором расположены все компоненты. Передавая сообщение на текущую сцену, это сообщение можно услышать как на самом экране, так и в каждом компоненте, расположенном на этом экране. Понимая эту концепцию использование компонентов становится намного приятнее.

​​#faq #pie
Q: Как сделать, чтобы при прокрутке списка элементов, не срабатывал триггер Touch Down на эти элементы?
A: Я обычно в таких случаях создаю сейф-таймер для срабатывания тригера. И сбрасываю его при начале скролла.

​​#pie #faq
Q: Как отследить действие после лонгтапа, не отрывая палец от экрана?
A: Нужно после лонгтапа начать отслеживать координаты нажатия с помошью переменных $touchX и $touchY. Дальше уже можно проверить попадают ли координаты нажатия в нужные рамки.

​​#faq #pie
Q: Как сделать измерительную линейку? Т.е. есть 2 перетаскиваемые точки и тянущаяся линия между ними..
A: Дизайнеры не любят тригонометрию) а зря. Для начала надо сделать переменную, которая будет всегда изменятся при перетаскивании каждой точки.

Поэтому создаем 4 тригера Detect - по 2 для каждой точки, для X и для Y. В каждый тригер делаем одно и тоже действие
Asign summ Cap_L.x + Cap_L.y + Cap_R.x + Cap_R.y
Теперь делаем Detect summ в который надо сделать 3 действия с линией между точек:

1. Move. Линию нужно перемещать. лучше всего будет установить Origin-point линии в центр, и перемещать её, находя центр отрезка между точками. Поэтому в параметры действия Move To пишем:
X = (CapL`.x+`CapR.x)/2
Y = (CapL`.y+`CapR.y)/2

2. Scale. Линию надо тянуть и сужать в зависимости от положения точек. Тут пригодится теорема Пифагора, т.к. линия - это гипотенуза, в прямоугольном треугольнике, образуемом нашими точками. Квадрат гипотенузы = сумме квадратов катетов, поэтому в параметры действия Scale To пишем:
Width = sqrt((pow((CapL`.x-`CapR.x),2))+(pow((CapL`.y-`CapR.y),2)))

3. Rotate. Линию нужно повернуть. Тут нужен любимый арктангенс)
В параметры действия Rotate To пишем:
-degrees(atan((CapL`.y-`CapR.y)/(CapR`.x-`CapL.x)))

Хочу еще попробовать сделать мультитач для этой линейки, чтобы двумя пальцами одновременно шевелить эти штуки, но это не так-то просто =)