​​#faq

В связи с выходом новой версии и кучей вопросов относительно компонента камеры - запилил небольшую демку приложения "Камера" c айфона.
https://cloud.protopie.io/p/347867661f (открывать лучше с девайса, в браузере - особо толку нет)

Собственно самый первый вопрос который все задают - Как использовать изображение с камеры?
В данном примере я немного схитрил и использую одновременно 2 компонента камеры. Один - имитирует видеоискатель, второй с 0 прозрачностью в контейнере где должна быть галерея - будет имитировать сделанную фотографию.

Для различных Instagram-like приложений можно пользоваться и одним компонентом. Просто стопаем компонент и работаем с ним как с обычным изображением. Но на другую сцену полученное изображение с камеры, пока, передать не получится.

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

Думаю щас соберу фидбек и новые вопросы и сделаю обновление прототипа с подробным описанием)

​​#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х девайсов, используя студию как сервер.

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

​​Думаю не лишним будет публиковать сюда некоторые интересные примеры, которыми я помогаю заграничным коллегам) #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)))

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

Продолжу публиковать решения на вопросы, возникающие у комьюнити)

#faq #pie #tips #hack

Q: Как изменить скорость или анимацию перелистывания у Page Container?
A: У стандартного Page Container такой возможности нет, однако никто не мешает сделать аналогичный кастомный пейджинг из обычного горизонтального Scroll Container.

1. Создаем контейнер, устанавливаем тип скролла Scroll, направление - горизонтальное, параметр Overscroll ставьте на своё усмотрение (его кстати тоже можно сделать кастомным, но об этом в другой раз)
2. Запихиваем странички, которые должны скроллится внутрь контейнера, расставляем с нужными отступами, наводим красоту (у последнего блока необходимо увеличить ширину контейнера на расстояние равное ширине между блоков, чтобы при скролле всё было ровно)
3. Теперь нам нужно определить ширину блока - т.е. на сколько будет автоматически проскралливаться контент. Считается она так - берем ширину блока контента (в моем примере 311) и прибавляем отступ, который будет между блоками (у меня это 16, итого - 327)
4. Создадим переменную, которая будет отвечать за номер страницы (в примере current)
5. Настраиваем сам скролл. Триггером для перелистывания будет служить Touch Up по скролл-контейнеру.
6. Нужно определить в какую сторону мы делаем скролл. Для этого проверяем предустановленную переменную $touchVelocityX. Эта переменная имеет положительное значение, когда тач курсор двигается вправо, и отрицательное значение при движении влево.
7. Также в условиях добавим ограничения листания, проверяя переменную current. Листаем вправо только когда current > 0, а влево, когда current < кол-ва слайдов (в примере 4, но т.к. счёт с 0, то < 3)
8. Внутрь условия листания мы добавляем изменение номера страницы делая Assign current = current+1, а затем сам скролл. Скролл делается на ширину блока умноженную на номер страницы. Для первой страницы 0*327=0, для второй страницы 1*327=327 итд
9. Аналогичные действия для листания вправо, только номер страницы уменьшается Assign current = current-1
10. Ну и настроить эффект и скорость скролла можно изменяя параметр изинг у скролла в обоих условиях.