Greasy Fork is available in English.

Twitch Screen Comment Scroller(fix)

Twitch のコメントをニコニコ風にスクロールさせます。

< 腳本Twitch Screen Comment Scroller(fix)的回應

評論:正評 - 腳本一切正常

§
發表於:2023-07-03
編輯:2023-07-03

絵文字コメントの複数文字対応ですが、以下のようにすれば出来そうです。

--- old.js      2023-07-03 22:18:43.188697273 +0900
+++ new.js      2023-07-03 22:19:59.978686982 +0900
@@ -121,8 +121,8 @@
     attachComment(comment) {
       let record = {};
       record.text = comment.querySelector('[data-a-target="chat-message-text"]').textContent.trim();/*流れる文字列*/
-      record.img = comment.querySelector('img:first-child');/*絵文字*/
-      record.width = record.text ? context.measureText(record.text).width : context.measureText('絵').width * EMOJISIZE;/*文字列の幅*/
+      record.img = comment.querySelectorAll('img');/*絵文字*/
+      record.width = record.text ? context.measureText(record.text).width : context.measureText('絵').width * EMOJISIZE * record.img.length;/*文字列の幅*/
       record.life = DURATION * FPS;/*文字列が消えるまでのコマ数*/
       record.left = canvas.width;/*左端からの距離*/
       record.delta = (canvas.width + record.width) / (record.life);/*コマあたり移動距離*/
@@ -167,7 +167,15 @@
               context.strokeText(lines[i][j].text, lines[i][j].left, lines[i][j].top);
               context.fillText(lines[i][j].text, lines[i][j].left, lines[i][j].top);
             } else if (lines[i][j].img && EMOJI) {
-              context.drawImage(lines[i][j].img, lines[i][j].left, lines[i][j].top, fontsize * EMOJISIZE, fontsize * EMOJISIZE);
+              lines[i][j].img.forEach((_, k) => {
+                /* k = 何文字目 */
+                context.drawImage(
+                    lines[i][j].img[k],
+                    lines[i][j].left + (k * fontsize * EMOJISIZE), // 1文字分ずつ位置をずらす
+                    lines[i][j].top,
+                    fontsize * EMOJISIZE,
+                    fontsize * EMOJISIZE);
+              });
             }
             lines[i][j].life--;
             lines[i][j].reveal--;
§
發表於:2023-08-12

フィードバックありがとうございます!
(気づくの遅れました…)

確かに1文字分横へずらしていけば普通に表示出来ますね…
文字と一緒に表示する事だけ考えてたので頭が回っていませんでした…
長い絵文字コメントの場合1F毎に動かす対象が増える(=負荷が増える)ので、「絵文字はn文字目まで表示」的なオプションを実装しようかと思います!

發表回覆

登入以回復