Пилим анимированный стрим-оверлей через StreamControl
Добавлено: 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.
Большую часть html-страницы занимает описание анимации. Анимация тут пилится с помощью библиотеки jstween. На сайте есть примеры использования. Я разберу пример из моего темплейта:
Таким макаром описываются все анимации. Анимировать можно любое свойство, но для большинства случаев будет достаточно "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
В двух словах - это 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>
Код: Выделить всё
$('#board').tween({ // анимируем элемент с id "board". В этом примере это вся верхняя панель
top:{ // свойство, которое анимируем - высота. Панель выезжает сверху вниз
start: '-65', // начальное значение с которого начинается анимация
stop: '0', // конечное значение
units: 'px',
time: 0,
duration: 0.8, // скорость анимации
effect:'easeOut' // эффект (функция по которой начальное значение стремится к конечному). см. примеры на jstween.org
}
});
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