タイプライターアニメ使用時に綺麗に自動改行(ワードラップ)する機能を実装しました
PAXWESTのUNTIESさんブースにジラフとアンニカ展示が決まり、
それにあわせてデモ版をローカライズすることになりました
元々、ローカライズを想定してコミックシーンやUI等の実装を進めていたため
比較的スムーズに進んだのですが、一つだけ問題が残っていました
これまで右端まで文字が表示された時に、
ウイジェットのワードラップ機能で改行させていました
ウイジェットのワードラップ機能で改行させていました
・・と言葉で説明してもわかりにくいため、動画用意しました。
最初の行のnap の部分が右端で改行する際に消えています
実は今まで日本語でも一文字分消える感じで改行表示されていました・・
英語だと一気に消える文字数が多いためとても気になります
そこで文字を表示し始める前に、自動改行済みのテキストをあらかじめ生成して、
それから表示を始める方法を考えました
そこで文字を表示し始める前に、自動改行済みのテキストをあらかじめ生成して、
それから表示を始める方法を考えました
自動改行済みのテキスト生成のBP(右クリック保存で拡大してみれます)
まず、テキストボックスは空にして最小の幅にしておきます
最初にParse Into Arrayいうノードで
スペースで単語ごとにわけて配列に格納します
そのあとテキストBOXに文字を、単語ごとに徐々に追加していきます
テキストBOXの幅をチェックしてウインドウ枠からはみ出る数値になったら・・
はみ出た単語を一度削除して、改行を入れ、もう一度単語を追加して続けます。
これを最後までやって、改行つきテキストを生成します
これを最後までやって、改行つきテキストを生成します
自動改行入りのテキストができたら、タイプライターアニメを再生します
英語と日本語で速度を調整できるようにしています
タイプライターアニメついてはmkさんのこちらのブログを参考に作成しました
結果・・・
綺麗に表示出来ました!
・・・ただこのままだと日本語ののようにスペース区切りがない言語ですと、
改行が入らないので、はみでてしまいます
改行が入らないので、はみでてしまいます
こんな感じ・・・
これを回避するため、テキストが日本語の場合は一文字ずつ配列に格納するようにします
はみ出る数値になったあとはお尻一文字消してから改行するようにします
出来上がったBPはこちらです
これでうまくいきました!
青い部分が日本語用の処理です(右クリック保存で拡大してみれます)
これでうまくいきました!