Экспрешены в райве

Сегодня райв релизнули отдельное приложение “Early Access”. Это демо версия, где будут тестироваться новые фичи, перед выпуском в основной версии. Доступно только для платных пользователей с подпиской Voyager или Enterprise.

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

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

Я тоже потестил эту фичу. Для этого взял верстку дорожной карты курсов Вольницы и привязал разные значения к параметрам. Подробнее в приложенном видео.

Райв продолжает развиваться и выделяться на фоне конкурентов. Ждем туторы от их команды и проекты в комьюнити, чтоб лучше разобраться в теме

Живая анимация в райве
Что подразумеваю под “живой” анимацией? Это когда объект ведет себя вне рамок своего цикла. Анимирован не линейно, не ограничен несколькими секундами цикла. В играх или приложениях каждый раз запускаются одни и те же циклы анимации. В райве можно их разнообразить:
1. Миксовать анимации. Например, скорость ходьбы или амплитуда дыхания;
2. Анимировать несколько уровней параметров, когда одна группа отвечает за луп анимацию, а другая за общую и потом их миксовать;
3. Переключаться между несколькими анимационными состояниями;
4. Рандомно переключаться между состояниями/анимациями;
5. Добавлять вторичное действие, типа моргания, движения лица и тд.

Такой подход хорошо реализуют дуолинго. Например, созвон с Лили, где у персонажа есть несколько заготовленных анимаций на каждую ситуацию, которые рандомно запускаются и создают ощущение жизни. Или персонажи во время подкастов живут своей жизнью и реагируют на ответы пользователя. Аналогично с персонажами в основных уроках.

Райв предназначен для интерактивной анимации: реакции на входные данные и действия пользователя. При этом его инструменты позволяют имитировать жизнь, хоть и утрированную, без привязки к интерактиву. В жизни человек не двигается с одной амплитудой или моргает каждые 3 секунды, он хаотичен. Живую анимацию и интерактив можно миксануть и получить действительно живого перса.

В следующем посте покажу что и как можно создвать в райве.

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

Первый подход это создать основной цикл анимации и подмешивать к нему дополнительную анимацию. Например, персонаж стоит в idle позе и время от времени может моргать в рандомный момент или реагировать на курсор пользователя. Еще пример: персонаж идет в цикле на одном слое стейт машины, а на другом к нему подмешивается анимация поворота головы и подмигивания. Поворот и подмигивание можно сделать при триггере – получаем управляемый секондари экшон.

Хороший пример перса из комьюнити. В нем на отдельных таймлайнах и слоях: дыхание, моргание и волосы. Дополнительно перс следит за курсором.

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

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

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

Можно миксовать, пока фантазия и возможности стейт-машины позволяют. В потоке миксования слоев есть тонкая грань, где “живость анимации” перерастает в хаос – тут нужно быть аккуратнее и не переборщить. Помним что минимальными средствами достигаем максимальной выразительности.

Собрал туторы для самостоятельного изучения
База из Rive 101
База по блендингу таймлайнов от Джейка
Анимация и стейт машина интерактивного перса

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

Жизнь в райве. Подход второй: рандомность

Рандомность – другой подход, который добавляет жизни в анимацию. В райве можно настроить рандомный выход в какое-либо состояние. Когда вместо одного цикла на какое-то действие может рандомно включаться одна из нескольких анимаций. По аналогии можно рандомизировать анимации переходов из состояние в состояние и сделать целую сеть рандомных анимаций.

Например, у нас есть 3 версии айдл анимации. Подключаем переходы из any state к этим циклам и настраиваем коэффициент рандомности.Теперь по окончании одного цикла будет рандомно включаться один из заготовленных. Если состояний всего 2, то нужно добавить дополнительно оба состояния еще раз, иначе какой бы коэффициент не выставляешь – циклы будут переключаться по очереди.

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

В посте выше упоминал моргание в рандомный момент. Можно сделать несколько анимаций моргания и несколько состояний не моргания разной длительности. Подробнее в видео…

В посте про микс таймлайнов писал про рандомное положение при каждом запуске. Чтобы анимация каждый раз не стартовала с одного положения можно эти положения зарандомить. Делаем 3 артборда с разными положениями по какому-то параметру. В случае с магическим шаром можно сделать несколько вариаций у ротейшенов и через any state при каждом запуске будет разный магический шар. Так можно каждый раз запускать анимацию персонажа разным образом.

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

Еще вариант, который может подойти к пропсам, внешнему виду перса: entry и any state подключены к нескольким таймлайнам с рандомностью. Так при каждом запуске стейт машины у нас будет рандомный лук, который можно менять рандомным способом.
Классный пример такого сетапа
И еще пример рандомного вида персонажа при клике


Тутор по рандому в райве

Интересные файлики из маркетплейса:
Игра в камень ножницы бумага
Рандомные числа

Поучаствовал в моушн-челлендже, который организовал Лёша Гончаров

Нужно было анимировать иллюстрацию от David Mascha. Я конечно же делал в райве)

Про интерактив. Можно растребушить линии с помощью курсора или пальца. Можно тыкнуть и начнется небольшое безумие, которое требушить интереснее. В обратное состояние в этом сетапе вернуть не получилось(

Про сетап. Собирал финальную композицию с помощью новой фичи от райва, которая называется «Lists» или по-русски «списки». Фича в основном для создания менюшек для интерфейсов, но можно решать и другие задачи. В своей задаче я с помощью него продублировал линии и сделал оффсеты на анимацию. Сейчас эта фича работает немного багованно: у меня было 60 копий и случается пропуск одной копии в анимации, из-за чего перфекционисты могут пострадать. Также финальный вид не увидишь пока не запустишь стейт машину, но в версии раннего доступа посмотреть можно, так что ждем обновления райва.

Покрасил обычным линейным градиентом, эффект объема сделал векторным размытием с режимом наложения.Использовать можно один ч/б цвет в режиме наложения: например, color dodge или color burn. Райв ограничен в инструментах композитинга, но и этими инструментами можно решать задачи.

Посмотреть и потыкать мой проект можно в комьюнити райва
Тут как раз видно косяки Lists, которые не удалось побороть, хотя в редакторе работает +- норм.

Где изучить Lists?
Тутор про анимацию секвенций, когда нужно запустить одну анимацию за другой с задержкой. Для копий и оффсетов использовал эту технику
Тутор из 101. Тут самая база про списки
Тутор как использовать для циферблатов
И еще несколько туториалов можно найти на канале Rive

N-Slicing в райве

N-Slicing — фича, которая режет изображение на части и позволяет масштабировать его без искажений и потери качества. Идеально для адаптивных кнопок, модалок, панелей, игровых фонов — везде, где нужно сохранить детали при масштабировании.

Фича основана на технологии 9-slicing, которая применяется в гейм-дизайне.Изображение делится на 9 частей: 4 зафиксированных угла и 5 динамических частей.

В райве сделали вместо 9 базовых слайсов любое количество: N-Slicing, где N – количество слайсов. И слайсинг работает в экосистеме райва с его фичами: лейаутами, датой и библиотеками – реальная имба!)

Слайсы для вектора и растра различаются. У растра можно выбрать режим масштабирования сегмента: Stretch, Tile, Hidden – растягивает, тайлит или скрывает сегмент. У вектора только растяжение — Rive автоматически рассчитывает деформацию, как будто шейп привязан к костям. Только на костях это будет сделать оч геморно и долго, да и не нужно.

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

А еще я записываю видео обзор с примерами слайсинга. Там на нескольких простых примерах покажу, где можно его применять)

N-slicing примеры

Провел ресерч, как работает N-Slicing и где его можно применить. А потом записал видео, где разбираю простые примеры применения: локации, объекты, плашки, текст. Можно посмотреть в прикрепленном видео или версию на ютубе

На маркетплейс выложил файл, где собрал все примеры, которые показывал в видео. И все текстовые перебивки тоже там)

Пишите в комменты, если есть, что добавить или где еще можно применить слайсинг

Скриптинг в RIVE

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

В демке показали много интересного. Мини игры, система рейтингов, управление перемещением игрового перса, простое 3д, физические симуляции, даже прототип игры DOOM. Остальное смотрите сами в приложенном видео. Выглядит впечатляюще!

Работает на языке Luau. В статье райв объясняет почему выбрали именно его. Если коротко: простой для понимания дизайнерами, кроссплатформенный и быстрый, мощный инструментарий, есть большая база знаний для AI агента.

Начать погружение можно с обзорного видео от райва, а также с документации райва. И можно присмотреть уроки по Luau))

Отправил еще 2 работы на челлендж райва, и обе — персонажи ассистенты

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

Второй. Уже робот ассистент. Также на дата инпутах завязаны состояния персонажа. Работаю над ним в свободное время для сайд-проекта с классным разработчиком. Проект для проб, тестов и веселья)

Регистрация на челлендж всё, работы больше не принимают

Отдельно выложу на канал каждый кейс в отдельности, чтобы не бегать по ссылкам. Немного заспамлю ленту)

Выбрал пять лучших работы из челленджа по моему мнению. Пока ждём результаты, можно посмотреть)

• Первая это мини игра с летающим на метле котом, где нужно уворачиваться от мышей.
Тут понравилась динамика и сам игровой процесс, а еще возможность адаптации под экраны разного размера. Очень интересно поизучать файл внутри

• Вторая это набор ассетов и эффектов в райве с кучей даты.
Объём работы и качество выглядят впечатляющие. Автор пишет, что над игрой работали пол года. Кто переживает что делает мало и медленно—может успокоиться)

• Третья это система навигации для игры.
Со слов автора началось всё с прототипа и выросло в один из главных элементов игры. Хорошо использовали Lists и скроллы

• Четвёртая, одна из самых цепляющих взгляд работ:
лендинг с Марио Беллини и калькулятор. Очень красиво визуально, хотя даты не много. Для поворота человека автор, скорее всего, использовал технику управления секвенцией, про которую был мой пост

• Пятая работа не такая популярная,
но технически интересная: 3д поверхность с вращением и кастомизацией внешнего вида от креативного технологиста из дуолгинго

Было ещё много интересных мини игр, прототипов, интерфейсов, которые я пролайкал и некоторым поставил реакцию “goat”—ограниченные реакции для самых-самых работ. А некоторые авторы выложили работы на маркетплейс: можно посмотреть как все устроено внутри

Думаю, одна из этих работ точно займёт призовое место.
Итоги объявят сегодня в 21 30 по мск, можно подключиться посмотреть

Пишите, какие работы зашли вам!)

В комментариях Alexei Zavarski поинтересовался, где можно изучить дату. Так и появился этот пост.

Начать можно с плейлиста от райва. Там самая база, хоть и на абстрактных примерах, но можно переложить на более конкретные. Дальше лучше изучить все видео на канале: там также достаточно информации про Lists, байнду артбордов и изображений. Изучить библиотеки, лейауты и продвинутую тоже нужно: они работают в системе райва и связаны с датой.

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

А больше узнать узнать про дату можно на этих каналах:
— Крейг делает классные уроки где прям пошагово разбирает конкретные кейсы
— Большой двухчасовой урок, как делать таймер с помощью даты, сам еще не смотрел полностью, но это высокий уровень!
— На канале Motion Slickness можно глянуть несколько несложных видео про дату
— На канале The Motion Magic несложные, но полезные уроки про дату

Если хочется текстом и картинками с короткими видео, есть статьи от амбоссадоров райва.
От Mayte:
В первом уроке разбирает, как растягивать скелета с датой и n-sliсing.
Во втором уроке разбирает как делать коллизии: высчитывать расстояние и триггерить анимацию
От Leo Mazzei: как делать кастомные интерактивные бейджи

И заглянуть в шоукейсы или маркетплейс. Там можно найти оч крутые сетапы! Могу также составить подборку интересных файлов, которые нашел на маркетплейсе.

А если знаете, где еще хорошо рассказывают про дату, пишите в комменты!