时间戳

首页 > 解决方案 > streamlabs streamboss 名称更改

streaming - streamlabs streamboss 名称更改

问题描述

让我先提前说声谢谢！

我在这个名为 StreamLabs for twitch 流媒体的网站上，他们介绍了一种使用自定义 HTML、CSS 和 JS 来自定义您的外观的方法。

他们有一个叫做“流老板”的东西，可以对关注、订阅和/或捐赠的用户做出反应。

我不知道如何更改streamboss的名称，有人可以帮助我吗

/*
 bar(asset) width is 315
 math for doing the stuff
 x =  {asset_length} - ( {asset_length} * ( {current_health}/{max_health} ) );
*/

// Events will be sent when the boss is damaged or killed.
// Please use event listeners to run functions.
document.addEventListener('bossLoad', function(obj) {
  // obj.detail will contain information about the current boss
  // this will fire only once when the widget loads
  console.log(obj.detail);
  //$('#user_pic').attr('src', obj.detail.boss_img);
  $('#current_health').text(obj.detail.current_health);
  $('#total_health').text(obj.detail.total_health);
  $('#username').text(obj.detail.boss_name);
});

document.addEventListener('bossDamaged', function(obj) {
  // obj.detail will contain information about the boss and a
  // custom message
  var x_coordinate = 0;
  console.log(obj.detail);

  // set the text
  $('#current_health').text(obj.detail.boss.current_health);

  // calculate where the x is
  x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));

  // round the output
  x_coordinate = -(~~x_coordinate);

  // we animate the `background-position-x`
  $('#vbi-health-bar').animate({
    'background-position-x': x_coordinate + 'px'
  }, 1000);
});

// Similarly for for when a boss is killed
document.addEventListener('bossKilled', function(obj) {
  var x_coordinate = 0;

  console.log(obj.detail);

  $('#username').text(obj.detail.boss.boss_name);
  //$('#user_pic').attr('src', obj.detail.boss.boss_img);
  $('#current_health').text(obj.detail.boss.current_health);
  $('#total_health').text(obj.detail.boss.total_health);

  // calculate where the x is
  x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));

  // round the output
  x_coordinate = -(~~x_coordinate);

  // we animate the `background-position-x`
  $('#vbi-health-bar').animate({
    'background-position-x': x_coordinate + 'px'
  }, 1000);
});

@import url('https://fonts.googleapis.com/css?family=Teko:700');

/* All html objects will be wrapped in the #wrap div */

#username,
#user_hp_cont {
  height: 33px;
  line-height: 50px;
  font-family: 'Teko', sans-serif;
  font-size: 1.2em;
  font-weight: 700;
  text-shadow: 0px 0px 5.64px rgba(0, 0, 0, 0.004);
  background-image: -webkit-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
  /* For Chrome and Safari */
  background-image: -moz-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
  /* For old Fx (3.6 to 15) */
  background-image: -ms-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
  /* For pre-releases of IE 10*/
  background-image: -o-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
  /* For old Opera (11.1 to 12.0) */
  background-image: linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
  /* Standard syntax; must be last #c0ff00, #00ff0c*/
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-transform: uppercase;
}

.boss_cont {
  height: 120px;
  color: white;
  background-color: transparent;
  background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912534steam_boss_frame.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.vbi-aligner {
  width: 370px;
  height: 35px;
  margin: 0 auto;
}

.vbi-aligner>#username {
  float: left;
}

.vbi-aligner>#user_hp_cont {
  float: right;
}

.vbi-health-frame {
  position: absolute;
  width: 315px;
  height: 47px;
  left: calc(50% - 157px);
  background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912558health_bar_frame.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -ms-transform: translateY(15px);
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  overflow: hidden;
  z-index: 1;
}

.vbi-health-magic {
  background: transparent;
  z-index: 0;
}

.vbi-health-bar {
  position: absolute;
  top: 1px;
  width: 315px;
  height: 45px;
  background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912589health_bar.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -ms-transition: transform .5s ease-in-out;
  -webkit-transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  -webkit-clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
  clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
}

<!-- All html objects will be wrapped in the #wrap div -->
<div class='boss_cont'>

  <div class="vbi-aligner">

    <div id='ussername'></div>
    <div id='user_hp_cont'>
      HP&nbsp;<span id='current_health'>0</span>/<span id='total_health'>0</span>
    </div>
  </div>

  <div class="vbi-health-frame vbi-health-magic">
    <div class="vbi-health-bar" id="vbi-health-bar"></div>
  </div>

  <div class="vbi-health-frame"></div>

  <div style="display: none;" class='user_pic_cont'>
    <img id='user_pic' src='' \>
  </div>

  <div id='message'></div>

</div>

标签： streaming

解决方案

它就在自定义 JS 部分中。无论你在哪里看到这条线：

$('#username').text(obj.detail.boss_name);

将“#username”更改为您想要的老板名称。里面有两次。

推荐阅读