Twitch のコメントをニコニコ風にスクロールさせます。
< Feedback on Twitch Screen Comment Scroller(fix)
絵文字コメントの複数文字対応ですが、以下のようにすれば出来そうです。
--- 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--;
フィードバックありがとうございます! (気づくの遅れました…)
確かに1文字分横へずらしていけば普通に表示出来ますね… 文字と一緒に表示する事だけ考えてたので頭が回っていませんでした… 長い絵文字コメントの場合1F毎に動かす対象が増える(=負荷が増える)ので、「絵文字はn文字目まで表示」的なオプションを実装しようかと思います!
Sign in to post a reply.
絵文字コメントの複数文字対応ですが、以下のようにすれば出来そうです。