ACTでbrunokratka-overlayを導入する方法

2020-10-032022-10-15

当サイトには広告が含まれています。

brunokratka-overlayの導入方法をまとめました。

brunokratka-overlayとは？

brunokratkaさんが作られたデザインです。
ACTのオーバーレイを通じてゲーム画面上にDPSを表示してくれます。

skin固有の名前が無かったので作者の方の名前を仮に付けさせてもらっています。

GitHub

GitHub – brunokratka/act-overlay-ffxiv Contribute to brunokratka/act-overlay-ffxiv development by creating an account on GitHub.

下の方にメモで残してるけど、こんな感じでカスタマイズして使ってます

brunokratka-overlayの導入方法

STEP

brunokratka-overlayのファイルをDLして解凍後、任意の所に設置します。

STEP

ACTの「OverlayPlugin.dll」タブで「追加」から「Preset」をCustom、「種類」をMiniParseで任意の名前を付けて保存します。

STEP

「オーバーレイを表示する」と「オーバーレイを有効にする」に✓、
「表示するURL」でTears.htmlを指定、
「オーバーレイの表示をリロード」を押します。

STEP

左上に出てくると思います。
ドラッグで任意の所に動かして右下でサイズを変えられます。

導入は以上です。

表示させるとこんな感じです。

お疲れ様でした！

メモ

少しだけ自分用にTears.htmlを弄った備忘録です。
元の書式はなるべく残しつつやってるので元にも戻しやすい気がします（オリジナル再DLも良いですし）

背景を透過させたい場合

18行あたり

background-colorを0にした

before

    html{
        height: 100%;
        overflow: hidden;
        border-radius: 10px;
        font-family: Meiryo;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-color: rgba(0, 0, 0, 0.2);
      }

after

    html{
        height: 100%;
        overflow: hidden;
        border-radius: 10px;
        font-family: Meiryo;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-color: rgba(0, 0, 0, 0.0);
      }

OverHの表示位置がACCと被って見えないのでズラしたい場合

130行あたり

margin-leftの値を増やした

before

      li .hps{
        margin-left: 8px;
      }

after

       li .hps{
        margin-left: 80px;
      }

命中率は基本100%なのでACCは要らない場合

130行/624行あたり

ACCをコメントアウトさせてOverHのmargin-leftを0にした

before

      li .hps{
        margin-left: 8px;
      }

          row.querySelector('.tohit').innerHTML = 'ACC ' + combatant.tohit + '%'; // Accuracy
          // encDPS html span required
          // row.querySelector('.dps').innerHTML   = combatant.encdps;
          row.querySelector('.job-icon').innerHTML = '<img src="images/'+ imgFolder + '/' + jobName(combatant) + '.png" onerror="this.setAttribute(\'src\', \'images/error.png\');">';
          row.querySelector('.name').innerHTML = combatant.name === 'YOU' ? combatantName : combatant.name;
          row.querySelector('.encdps').innerHTML = combatant['encdps']; // Encdps
          row.querySelector('.crithit').innerHTML = 'CRIT ' + combatant['crithit%']; // Crithit
          row.querySelector('.bar').style.width = ((parseFloat(combatant.encdps) / maxdps) * 100) + '%';

after

      li .hps{
        margin-left: 0px;
      }

//          row.querySelector('.tohit').innerHTML = 'ACC ' + combatant.tohit + '%'; // Accuracy
          // encDPS html span required
          // row.querySelector('.dps').innerHTML   = combatant.encdps;
          row.querySelector('.job-icon').innerHTML = '<img src="images/'+ imgFolder + '/' + jobName(combatant) + '.png" onerror="this.setAttribute(\'src\', \'images/error.png\');">';
          row.querySelector('.name').innerHTML = combatant.name === 'YOU' ? combatantName : combatant.name;
          row.querySelector('.encdps').innerHTML = combatant['encdps']; // Encdps
          row.querySelector('.crithit').innerHTML = 'CRIT ' + combatant['crithit%']; // Crithit
          row.querySelector('.bar').style.width = ((parseFloat(combatant.encdps) / maxdps) * 100) + '%';

ACC、CRIT、OverHが要らない場合

554行/624行あたり

コメントアウトさせた

before

        if(overHeal){
          row.querySelector('.hps').innerHTML = 'OverH ' + overHeal;
        }

          row.querySelector('.tohit').innerHTML = 'ACC ' + combatant.tohit + '%'; // Accuracy
          // encDPS html span required
          // row.querySelector('.dps').innerHTML   = combatant.encdps;
          row.querySelector('.job-icon').innerHTML = '<img src="images/'+ imgFolder + '/' + jobName(combatant) + '.png" onerror="this.setAttribute(\'src\', \'images/error.png\');">';
          row.querySelector('.name').innerHTML = combatant.name === 'YOU' ? combatantName : combatant.name;
          row.querySelector('.encdps').innerHTML = combatant['encdps']; // Encdps
          row.querySelector('.crithit').innerHTML = 'CRIT ' + combatant['crithit%']; // Crithit
          row.querySelector('.bar').style.width = ((parseFloat(combatant.encdps) / maxdps) * 100) + '%';

after

//        if(overHeal){
//          row.querySelector('.hps').innerHTML = 'OverH ' + overHeal;
//        }

//          row.querySelector('.tohit').innerHTML = 'ACC ' + combatant.tohit + '%'; // Accuracy
          // encDPS html span required
          // row.querySelector('.dps').innerHTML   = combatant.encdps;
          row.querySelector('.job-icon').innerHTML = '<img src="images/'+ imgFolder + '/' + jobName(combatant) + '.png" onerror="this.setAttribute(\'src\', \'images/error.png\');">';
          row.querySelector('.name').innerHTML = combatant.name === 'YOU' ? combatantName : combatant.name;
          row.querySelector('.encdps').innerHTML = combatant['encdps']; // Encdps
//          row.querySelector('.crithit').innerHTML = 'CRIT ' + combatant['crithit%']; // Crithit
          row.querySelector('.bar').style.width = ((parseFloat(combatant.encdps) / maxdps) * 100) + '%';

Your Tearsの表記を変えたい場合

310行あたり

combatantNameを変えた

before

      var rows    = 10,
        row,
        rdps_max  = 0,
        combatantName = 'Your Tears',
        imgFolder = 'default';

after

      var rows    = 10,
        row,
        rdps_max  = 0,
        combatantName = 'ME',
        imgFolder = 'default';

DPSのみのコンパクトな表示にしたい場合

minimal-uiのジョブアイコンと置き換えても合いそう
　→置き換えてみた（右上の画像）

いろいろ

上記の内容を変えた
フォントサイズを適当に小さめ12pxに揃えた

before

      #header{
        width: 100%;
        height: 100%;
        display: none;
        font-size: 14px;
        position: relative;
        vertical-align: middle;
      }

      li .name{
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1px;
        display: inline-block;
        text-overflow: ellipsis;
      }

      li.raidheader{
        width: 100%;
        display: flex;
        font-size: 18px;
        flex-wrap: nowrap;
        margin-bottom: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      li .encountertitle{
        font-size: 18px;
        text-shadow: inset 0px 1px 1px #000;
      }
      li .current-zone{
        font-size: 14px;
        text-shadow: inset 0px 1px 1px #000;
      }

      li .raiddps{
        width: 70px;
        display: block;
        font-size: 16px;
        text-align: middle;
        letter-spacing: 7px;
        text-shadow: inset 0px 1px 1px #000; 
      }

      li .duration{
        font-size: 14px;
        text-shadow: inset 0px 1px 1px #4d4d4d;
      }

after

      #header{
        width: 100%;
        height: 100%;
        display: none;
        font-size: 12px;
        position: relative;
        vertical-align: middle;
      }

      li .name{
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 1px;
        display: inline-block;
        text-overflow: ellipsis;
      }

      li.raidheader{
        width: 100%;
        display: flex;
        font-size: 12px;
        flex-wrap: nowrap;
        margin-bottom: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      li .encountertitle{
        font-size: 12px;
        text-shadow: inset 0px 1px 1px #000;
      }
      li .current-zone{
        font-size: 12px;
        text-shadow: inset 0px 1px 1px #000;
      }

      li .raiddps{
        width: 70px;
        display: block;
        font-size: 12px;
        text-align: middle;
//        letter-spacing: 7px;
        text-shadow: inset 0px 1px 1px #000; 
      }

      li .duration{
        font-size: 12px;
        text-shadow: inset 0px 1px 1px #4d4d4d;
      }

よかったらシェアしてね！

URLをコピーしました！

コメント一覧（12件）

film より:
2020-11-23 11:12 AM
truly
返信
film より:
2020-12-01 8:34 PM
good
返信
izle より:
2020-12-09 9:14 PM
good posts.
返信
F より:
2021-01-14 2:42 AM
good
返信
匿名より:
2021-01-14 1:14 PM
Some truly nice and useful information on this website
返信
匿名より:
2021-01-17 11:31 AM
Thanks for sharing, this is a fantastic article post. Really thank you! Awesome.
返信
匿名より:
2021-01-18 7:22 AM
Regards for this post, I am a big big fan of this site would like to go on updated.
返信
匿名より:
2021-01-19 5:17 AM
This article was extremely remarkable
返信
yeni より:
2021-01-30 4:51 AM
Thanks a lot for the post. Really thank you!
返信
123 より:
2021-01-30 11:45 PM
So great
返信
Theron より:
2021-08-08 1:48 PM
Great article. I found it very helpful.
返信
匿名より:
2021-08-11 6:20 AM
Good luck for the next!
返信

ACTでbrunokratka-overlayを導入する方法

brunokratka-overlayとは？

brunokratka-overlayの導入方法

メモ

背景を透過させたい場合

OverHの表示位置がACCと被って見えないのでズラしたい場合

命中率は基本100%なのでACCは要らない場合

ACC、CRIT、OverHが要らない場合

Your Tearsの表記を変えたい場合

DPSのみのコンパクトな表示にしたい場合

コメント

コメント一覧 （12件）

コメントする コメントをキャンセル

コメント一覧（12件）

コメントするコメントをキャンセル