TyranoScriptの禁則処理時の文字表示を改善する

2019.01.18追記
ティラノスクリプトV474以上をお使いの場合は本記事の部分はすでに改善されています。
https://twitter.com/shikemokumk/status/1086124376091545600

三行でまとめると

• TyranoScriptのメッセージ改行で気になる挙動があった。
  • 画像の通り、文字表示時に「いるが、」の「が」の字が行末に一瞬表示されるが、そのあと次の行に移動してしまう。
• 原因は「、」や「。」を文頭においてはならないという日本語ルールを守るため。
• noymer/tyranoscript-text-line-breakを使えば改善する。

概要

2018年冬コミで仮想国のリブラというゲームの体験版を頒布しました。
ゲーム作成にはTyranoScriptを利用しました。簡単にノベルゲームが作れる優れもので、エンジニアとしてもwebベースの技術が使われているので非常にとっつきやすいです。
しかし時折メッセージの行末で気になる挙動がありました。
画像の通り、文字表示時に「いるが、」の「が」の字が行末に一瞬表示されるが、そのあと次の行に移動してしまう、というものです。

原因

• TyranoScriptにおいて、メッセージは一文字ずつ文字を追加して表示している。

• 例文として「ノイズキャンセリングイヤフォンをして読書している女子もいるが、騒がしいのは音声だけじゃない。」というメッセージを表示する時、
  「......いるが」までは一行に収まるのだが「、」を足すと一行に収まらなくなる。

• 「、」を二行目の文頭に表示するのは「禁則処理」¹という日本語のルール反する。よって「、」を追加したタイミングで、「......いるが、」の「が、」が二行目に移動してしまう。

• これで「が」が一行目末尾から二行目の頭に移動する。

対策（プラグイン実装説明）

• 一文字ずつ文字を追加して表示するのではなく、まず全部の文字を見えない状態で追加して、そのあと一文字ずつ見えるようにすれば良い。そうすればあらかじめ「......いるが、」の「が、」は二行目の状態で文章が表示される。
• noymer/tyranoscript-text-line-breakを使えば改善する。

--
以下からは技術的説明になります

before

• TyranoScriptにおいて、 <span class="current_span"></span> に一文字ずつ文字を追加してメッセージを表示していた。

after

• プラグインを利用すると、 一文字ずつ <span style='visibility: hidden'></span>で囲んで全て非表示状態にして、非表示のまま<span class="current_span"></span>に全て追加し、そののち一文字ずつ非表示を解いて表示するようにした。

締め

• TyranoScript本体にもプルリクエストを投げるといいかなー、と思ってます。

1. 禁則処理とは、句読点（。、）や閉じ括弧（」』)】など）と言った文字は、文章の行頭に位置させてはならないというルールのこと。禁則処理 - Wikipedia ↩