УЧУ RIVE
122 subscribers
5 photos
31 videos
34 links
Пишу про райв
Показываю работы
Размышляю про интерактивную анимацию

Портфолио: https://riveportf.framer.website/works
Бех: https: //www.behance.net/pkoik
Автор: @pjkoik
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Поучаствовал в челлендже от райва и контры, где нужно было показать свои скилы в дата привязках.

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

Первая—анимация для XSOLLA. Собрал в райве интерактив где показываем, как работает веб шоп и какие в нём есть фичи. С помощью даты связал все артборды и флоу. Это был первый большой проект, где использовал дату в таком объёме, сейчас бы все собрал по другому😅

Вторая—концепт персонажа свиньи-копилки для сайта/приложения, который помогает ребёнку копить деньги. Очень простой интерактив: где времена года меняются, цветок растёт, свинья может расти в размерах. Немного рандомных анимаций у свиньи, чтобы была чуть живее и веселее. Про рандомность и живость писал ранее

В таких челленджах/конкурсах можно вдохновиться тем, на что люди способны в райве, изучить что-то новое или оформить кейсы, как это сделал я
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👏4💘1
Media is too big
VIEW IN TELEGRAM
Отправил еще 2 работы на челлендж райва, и обе — персонажи ассистенты

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

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

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

Отдельно выложу на канал каждый кейс в отдельности, чтобы не бегать по ссылкам. Немного заспамлю ленту)
👍5🔥3🍌2
This media is not supported in your browser
VIEW IN TELEGRAM
Выбрал пять лучших работы из челленджа по моему мнению. Пока ждём результаты, можно посмотреть)

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

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

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

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

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

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

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

Пишите, какие работы зашли вам!)
🔥7🤔1🤝1
В комментариях Alexei Zavarski поинтересовался, где можно изучить дату. Так и появился этот пост.

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

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

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

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

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

А если знаете, где еще хорошо рассказывают про дату, пишите в комменты!
🔥103🤝1👾1
Итоги челленджа в райве

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

Первое место занял Afeez Yunus со своей мини-игрой. Самое удивительное в ней то, что автор сделал ее за 4 дня: от просмотра рефов до финальной реализации в рантайме. Приятный дизайн, динамические анимации, рандомность, масштабируемость и адаптивность делают эту работу оч крутой!

Второе место у амбассадора райва Leo Mazzei. Он сделал концепт интерфейса для игры и интегрировал его в движок unreal engine. Как он сам сказал, анрил он открывал в первый раз и разобрался с помощью документации. Другую конкурсную работу он интегрировал в юнити, который также отерывал впервые. Дизайн собрал при помощи бананы и дорабатывал в фш. Может, тоже на выходных посидеть в банане и собрать интерактивный концепт?) А потом разобраться как его запихнуть в анрил😅

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

Все победители крутые и молодцы! Вдохновили больше погружаться в райв и развиваться😃

В конце анонсировали еще больше движухи райва и контры. Возможно, заявили следующий челлендж со скриптингом. Для которого у меня есть работа, которую собирал для другого челленжа, но об этом следующий пост
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9🤯2
Media is too big
VIEW IN TELEGRAM
ASCII в RIVE

Поучаствовал в новом челленже от Леши Гончарова, где нужно было поэкспериментировать с ASCII стилем. Поэксперементировал👀

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

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

Самому "побахать" сферу пока не получится: эта фича в ранней версии и пока что не поддерживается плеером. А при экспорте .riv райв вообще крашится😂. Поэтому пока смотрим только в видеоформате

Дополнительно выложил пост в коммьюнити райва, можете поддержать)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍91🤯1😍1💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Скриптинг в райве в открытом доступе

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

С AI агентом кодить еще проще: пишешь промпт и получаешь результат. Теперь есть система кредитов: на кадета 5$ в месяц, а у воягера 16$. Но как расходуются кредиты, на какой объем их генерации хватит пока не очень понятно. Поэтому лучше всё же учить скриптинг самому, чтоб полностью не зависеть от кредитной системы. Но кредиты всегда можно докупить в любом объеме.

Вместе с релизом скриптинга райв выложили на маркетплейс множество демок, которые показывали в видео-анонсах. Наконец-то!!! А то много чего крутого покажут, а хочется посмотреть, как оно внутри.

Если еще не пробовали скриптинг, можно начать с вводного видео на канале райва.
Урок как создавать конфетти
Урок про систему частиц на примере снегопада. И от этого же автора урок про скриптовые конвертеры
4🔥3🤓2
This media is not supported in your browser
VIEW IN TELEGRAM
Курс по скриптингу в райв

Скриптинг в райве только появился, а дизайнер и разработчик Илья уже сделал полноценный интерактивный курс/гайд по нему. Просто титаническая работа: очень много сравнений с ае и джаваскриптом, квизы и полноценные задания. Для новичков есть отдельный блок с базой.

У райва есть документация по скриптингу с демками, которая хорошо дополнит этот курс. Очень жаль, что райв сами не делают подобного материала и приходится эту работу делать комьюнити)

Да, в райве есть Ai агент, который может помочь написать код. Но он стоит очень дорого. На демку с эффектом bulge у меня ушло 4 запроса, которые отъели 3.5$ кредитов из 16, которые дают на подписке Voyager. Очень дорого получится постоянно пользоваться Ai, когда небольшая правка отъест целый доллар!

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

Теперь есть чем занять целую неделю)
🔥7🏆3🤝311
This media is not supported in your browser
VIEW IN TELEGRAM
Как новичку работать с ИИ агентом для скриптинга

Илья, автор курса из предыдущего поста, дал советы, как новичку работать с агентом. Далее привожу его слова⬇️

Оч советую когда работаете с ИИ агентом - скажите ему что вы новичок, и попросите сделать вам интерактивные задания для ознакомления с возможностями скриптинга и языка Luau. И не забудьте добавить что бы он так же создал для вас детальные инструкции к интерактивным заданиям. Будут написаны интересные примеры и задания.

Если посмотрите в репозиторий курса (https://github.com/ivg-design/lerp/tree/main/learn_luau_rive_scripts) то увидите эти скрипты, и файл .rev. Можете или импортировать файл или скрипты в ручную - это интерактивные примеры и задания от ИИ райва :)

И не забудьте ставить лайки в комьюнити и на гите 🫶
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥75
Media is too big
VIEW IN TELEGRAM
За время работы в сбермаркетинге создал в райве разные интерактивные прототипы, концепции, тесты, и задания из курсов. Оформил самое интересное в шоурил, чтобы не прятать это “богатство” и показать миру на что я способен. Делал их между рабочими проектами в свободное время и даже после работы, когда очень увлекался)

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

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

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

Пока в видео формате, скоро навайбкожу сайтец, чтобы пощупать)

Так пробуем, пытаемся и работает дальше!)
1🔥15221👍1👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Шейдера завезли в райв)

Теперь в райве еще больше возможностей делать интерактив. В демке показали много интересного: например, преломления стекла, 3д органические меши, дисторшены поверх изображения, 3дшку объекты, даже генератор воды и прочие веселые штуки. Смотрите сами)

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

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

Пока все это в раннем доступе. В рабочую версию завезут примерно через пару месяцев. Тогда раскатаем в прод

Демки красивые, а на практике нужно посмортеть. Присылайте свои тесты, у кого есть возможность. Я начну: собрал шейдер воды, вроде похоже на воду. Ушло 5 кредитных долларов и 5 минут времени. Результат в комментах
🔥9💯1👾11
А в этих тестах я сделал воду без шейдеров, с помощью базового скриптинга

В первом варинте взял тайл текстуру, в моем случае 256х256 пикселей. Размножил ее и задистортил этот меш

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

Эти эксперименты выкладывал в Х, но популярным я там не стал)
Можете подписаться, мб будет мотивация там выкладывать тесты. Или лучше постить тесты на этом канале?
6🔥5👏1