Пилим анимированный стрим-оверлей через StreamControl

Ответить
Аватара пользователя
tapahob
Новичок
Сообщения: 19
Зарегистрирован: 08 июл 2010, 19:28
Карточка игрока: tapahob
Откуда: Челябинск
Поблагодарили: 8 раз

Пилим анимированный стрим-оверлей через StreamControl

Сообщение tapahob » 04 фев 2016, 17:21

Всегда было интересно как же делают анимированные стрим-оверлеи на топовых трансляциях и разобравшись решил поделиться решением.
В двух словах - это html5 страница, добавленная в OBS\XSplit через Browser Source Plugin c анимацией на Javascript. Как это выглядит записал в видео


Для управления контентом страницы будем использовать StreamControl. Его основная фишка в том, что он в отличии от других работает с html5, который намного приятнее редактировать по сравнению с flash-аналогами (не нужно иметь исходники и специальный редактор). Сам позволяет редактировать свой функционал (CRUD по контенту html-страницы - подробнее в видео). Есть даже плагин для отображения твитов на стрим! Ну и конечно он бесплатный, с открытым исходным кодом.
В качестве Browser Source плагина для OBS берем https://obsproject.com/forum/resources/ ... plugin.22/
Если вы почему-то пользуете Xsplit - браузер сорс плагин ищите сами (хотя я подозреваю, что он в Xsplit встроен по умолчанию)

Как использовать
Качаем готовый оверлей (или пилим свой, об этом ниже), например этот - http://www.mediafire.com/download/qhv8h ... base+v2.7z
Распаковываем куда душе угодно. Запускаем StreamControl и заходим в меню Configuration (иконка шестеренки).
В строке XML\JSON path указываем путь до распакованной папки.
В поле Layout file выбираем layout.xml расположенный тамже и жмем OK.
В обновившихся полях StreamControl'a вбиваем ники и, если хочется, другую шляпу типа стран. Жмем сохранить.
Добавляем на сцену ScoreBoard-jstween.html как Browser Source, не забыв указать разрешение (в этом примере используется 720р)
На этом настройка закончена, оверлей должен адекватно реагировать на смену ников, счета и тп.

Этот оверлей гавно! Хочу свой!
Так и есть. Поэтому пилим свой, но не с нуля. Я заготовил минималистичный темплейт редактируя который будет удобно запилить свой оверлей.
Качаем его тут и распаковываем. Уже сейчас, повторив вышеупомянутые шаги, можно посмотреть как он работает.
Если вы хоть немного шарите в html (ну и еще чутка в JavaScript), то сразу поймете, что там к чему:
Файл ScoreBoard-jstween.html - отображаемая на сцене веб-страница. Весь контент оверлея расположен там в тэге body (в самом низу). В нем есть несколько div'ов c атрибутом id. Эти идентификаторы очень важны, т.к. именно туда будут подставляться данные из StreamControl. Имена идентификаторов из ScoreBoard-jstween.html должны совпадать с оными из файла layout.xml, который в свою очередь связывает их с StreamControl.

Код: Выделить всё

// кусок кода кнопки "swap" из layout.xml
<button type="swap" x="350" y="40" width="40" height="23" tooltip="Swap the Scores" id="swap" swapSet1="pName1,pScore1" swapSet2="pName2,pScore2">Swap</button>  
// меняет контент с идентификаторами pName1, pScore1 местами с pName2, pScore2 объявленные в коде из ScoreBoard-jstween.html
<div id="pName2">Player 2</div>
<div id="pScore2">99</div>
<div id="pName1">Player 1</div>
<div id="pScore1">99</div>
Большую часть html-страницы занимает описание анимации. Анимация тут пилится с помощью библиотеки jstween. На сайте есть примеры использования. Я разберу пример из моего темплейта:

Код: Выделить всё

$('#board').tween({ // анимируем элемент с id "board". В этом примере это вся верхняя панель
top:{                      // свойство, которое анимируем - высота. Панель выезжает сверху вниз
start: '-65',             // начальное значение с которого начинается анимация
stop: '0',                 // конечное значение
units: 'px',
time: 0,
duration: 0.8,         // скорость анимации
effect:'easeOut'      // эффект (функция по которой начальное значение стремится к конечному). см. примеры на jstween.org
}                   
});
 
Таким макаром описываются все анимации. Анимировать можно любое свойство, но для большинства случаев будет достаточно "left" и "top".

stylesheet.css - каскадная таблица стилей для нашей html-страницы. Настраиваем в ней внешний вид наших фреймов. Имена большинства свойств говорят за себя, но дам пару подсказок:
в начале файла объявляется имя шрифта (вам же нужен выпендрежный шрифт!) и путь к нему (кладем файл шрифта в одну папку с css). Если вы затупили и не знаете какое свойство вам нужно использовать - http://www.w3schools.com/css/ вам в помощь.

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

Этой информации и примеров должно хватить для самостоятельной разработки своего стрим-оверлея. Если вам недостаточно анимаций предоставляемых JSTween - садитесь за after effects, html5 имеет тэг video - встраивается все без проблем (ну и video source plugin для obs есть конечно).
Из инструментов рекомендую дизайнить в фотошопе, а подгонять под шаблон через dev-tools вашего браузера (F12 в хроме или даже эксплоррере последних версий), они позволяют на лету менять css
Windows Live ID: super tapahob : sf4 : [Chun Li & Cammy & Ryu]

Аватара пользователя
OverKilL.
Капитан
Сообщения: 4194
Зарегистрирован: 05 июл 2005, 12:00
Карточка игрока: OverKilL.
Канал пользователя: OverKilL.
Откуда: Санкт-Петербург
Благодарил (а): 1407 раз
Поблагодарили: 619 раз
Gender:
Контактная информация:

Пилим анимированный стрим-оверлей через StreamControl

Сообщение OverKilL. » 04 фев 2016, 17:28

Надо поковыряться)) Я то чет и не подумал в эту степь пойти, хотя оно мне ближе) , взял и Flash раскурочил под себя. Но он теоретически может быть более медленным и тяжелым...
Последний раз редактировалось OverKilL. 04 фев 2016, 17:29, всего редактировалось 1 раз.
"классическая-квази-монохроматическая-гармоническая подпись"
Пещера задрота - мой сайтец-бложец OverKilL.
Мои Cтримы: GoodGame.ru/OverKilL013, Twitch.tv/OverKilL013, gaming.youtube.OverKilL013, sc2tv.ru/OverKilL013
Мои Каналы: youtube.com/OverKilL013, youtube.com/GGXrd

Tender Damage
p.s. - "дам потрогать свой ДП"

Аватара пользователя
FGC | Shatalkir
Эцилопп
Сообщения: 3840
Зарегистрирован: 07 мар 2010, 13:12
Карточка игрока: Shatalkir
Канал пользователя: Shatalkir
Откуда: Зеленоград, Андреевка
Благодарил (а): 1007 раз
Поблагодарили: 917 раз
Контактная информация:

Пилим анимированный стрим-оверлей через StreamControl

Сообщение FGC | Shatalkir » 05 фев 2016, 11:49

Вот как раз разбираюсь с этой темой, гайд на русском оче кстати.
Ты просто так лежишь или с намеком?..
Теперь я знаю, что цитата про Тагера и нож принадлежит А.Т =)
( Золотая цитата русского Mortal Kombat: )
Legend|LLIopox: если никто не будет прыгать не будет драки)

( Считаем фреймы )
Niksan: ок, а у шаров экз сколько плюс? я чет пропустил видимо
Kreeg: +4
Kay___Jay: +4
Shatalkir: +4
Nim: +4
Kreeg: итого +16

Ответить